diff --git a/libs/components/affine-board/src/Board.tsx b/libs/components/affine-board/src/Board.tsx index 783c469b64..8c521705e7 100644 --- a/libs/components/affine-board/src/Board.tsx +++ b/libs/components/affine-board/src/Board.tsx @@ -5,10 +5,7 @@ import { getSession } from '@toeverything/components/board-sessions'; import { deepCopy, TldrawApp } from '@toeverything/components/board-state'; import { tools } from '@toeverything/components/board-tools'; import { TDShapeType } from '@toeverything/components/board-types'; -import { - getClipDataOfBlocksById, - RecastBlockProvider, -} from '@toeverything/components/editor-core'; +import { RecastBlockProvider } from '@toeverything/components/editor-core'; import { services } from '@toeverything/datasource/db-service'; import { AsyncBlock, BlockEditor } from '@toeverything/framework/virgo'; import { useEffect, useState } from 'react'; @@ -72,10 +69,10 @@ const AffineBoard = ({ console.log('e,data: ', e, data); }, async onCopy(e, groupIds) { - const clip = await getClipDataOfBlocksById( - editor, - groupIds - ); + const clip = + await editor.clipboard.clipboardUtils.getClipDataOfBlocksById( + groupIds + ); e.clipboardData?.setData( clip.getMimeType(), diff --git a/libs/components/common/src/lib/text/slate-utils.ts b/libs/components/common/src/lib/text/slate-utils.ts index fd1de5f674..f44d573e64 100644 --- a/libs/components/common/src/lib/text/slate-utils.ts +++ b/libs/components/common/src/lib/text/slate-utils.ts @@ -968,7 +968,41 @@ class SlateUtils { } public getNodeByPath(path: Path) { - Editor.node(this.editor, path); + return Editor.node(this.editor, path); + } + + public getNodeByRange(range: Range) { + return Editor.node(this.editor, range); + } + + // This may should write with logic of render slate + public convertLeaf2Html(textValue: any) { + const { text, fontColor, fontBgColor } = textValue; + + const style = `style="${fontColor ? `color: ${fontColor};` : ''}${ + fontBgColor ? `backgroundColor: ${fontBgColor};` : '' + }"`; + if (textValue.bold) { + return `${text}`; + } + if (textValue.italic) { + return `${text}`; + } + if (textValue.underline) { + return `${text}`; + } + if (textValue.inlinecode) { + return `${text}`; + } + if (textValue.strikethrough) { + return `${text}`; + } + if (textValue.type === 'link') { + return `${this.convertLeaf2Html( + textValue.children + )}`; + } + return `${text}`; } public getStartSelection() { diff --git a/libs/components/editor-blocks/src/blocks/bullet/index.ts b/libs/components/editor-blocks/src/blocks/bullet/index.ts index 761aab03a1..6044fdb4a8 100644 --- a/libs/components/editor-blocks/src/blocks/bullet/index.ts +++ b/libs/components/editor-blocks/src/blocks/bullet/index.ts @@ -1,15 +1,16 @@ -import { - DefaultColumnsValue, - Protocol, -} from '@toeverything/datasource/db-service'; +import { Protocol } from '@toeverything/datasource/db-service'; import { AsyncBlock, BaseView, - getTextHtml, - getTextProperties, - SelectBlock, + BlockEditor, + HTML2BlockResult, } from '@toeverything/framework/virgo'; -// import { withTreeViewChildren } from '../../utils/with-tree-view-children'; + +import { + Block2HtmlProps, + commonBlock2HtmlContent, + commonHTML2block, +} from '../../utils/commonBlockClip'; import { BulletView, defaultBulletProps } from './BulletView'; export class BulletBlock extends BaseView { @@ -25,66 +26,44 @@ export class BulletBlock extends BaseView { } return block; } + override async html2block({ + element, + editor, + }: { + element: Element; + editor: BlockEditor; + }): Promise { + if (element.tagName === 'UL') { + const firstList = element.querySelector('li'); - override getSelProperties( - block: AsyncBlock, - selectInfo: any - ): DefaultColumnsValue { - const properties = super.getSelProperties(block, selectInfo); - return getTextProperties(properties, selectInfo); - } - - override html2block( - el: Element, - parseEl: (el: Element) => any[] - ): any[] | null { - const tag_name = el.tagName; - if (tag_name === 'UL') { - const result = []; - for (let i = 0; i < el.children.length; i++) { - const blocks_info = parseEl(el.children[i]); - result.push(...blocks_info); + if (!firstList || firstList.innerText.startsWith('[ ] ')) { + return null; } - return result.length > 0 ? result : null; + const children = Array.from(element.children); + const childrenBlockInfos = ( + await Promise.all( + children.map(childElement => + this.html2block({ + editor, + element: childElement, + }) + ) + ) + ) + .flat() + .filter(v => v); + return childrenBlockInfos.length ? childrenBlockInfos : null; } - if (tag_name == 'LI' && !el.textContent.startsWith('[ ] ')) { - const childNodes = el.childNodes; - const texts = []; - const children = []; - for (let i = 0; i < childNodes.length; i++) { - const blocks_info = parseEl(childNodes[i] as Element); - for (let j = 0; j < blocks_info.length; j++) { - if (blocks_info[j].type === 'text') { - const block_texts = - blocks_info[j].properties.text.value; - texts.push(...block_texts); - } else { - children.push(blocks_info[j]); - } - } - } - return [ - { - type: this.type, - properties: { - text: { value: texts }, - }, - children: children, - }, - ]; - } - - return null; + return commonHTML2block({ + element, + editor, + type: this.type, + tagName: 'LI', + }); } - override async block2html( - block: AsyncBlock, - children: SelectBlock[], - generateHtml: (el: any[]) => Promise - ): Promise { - let content = getTextHtml(block); - content += await generateHtml(children); - return `
  • ${content}
`; + override async block2html(props: Block2HtmlProps) { + return `
  • ${await commonBlock2HtmlContent(props)}
`; } } diff --git a/libs/components/editor-blocks/src/blocks/code/index.ts b/libs/components/editor-blocks/src/blocks/code/index.ts index ce8d7badfb..4239add745 100644 --- a/libs/components/editor-blocks/src/blocks/code/index.ts +++ b/libs/components/editor-blocks/src/blocks/code/index.ts @@ -1,17 +1,16 @@ import { BaseView, AsyncBlock, - getTextProperties, - CreateView, - SelectBlock, - getTextHtml, + BlockEditor, + HTML2BlockResult, } from '@toeverything/framework/virgo'; -import { - Protocol, - DefaultColumnsValue, -} from '@toeverything/datasource/db-service'; +import { Protocol } from '@toeverything/datasource/db-service'; import { CodeView } from './CodeView'; -import { ComponentType } from 'react'; +import { + Block2HtmlProps, + commonBlock2HtmlContent, + commonHTML2block, +} from '../../utils/commonBlockClip'; export class CodeBlock extends BaseView { type = Protocol.Block.Type.code; @@ -28,56 +27,22 @@ export class CodeBlock extends BaseView { return block; } - override getSelProperties( - block: AsyncBlock, - selectInfo: any - ): DefaultColumnsValue { - const properties = super.getSelProperties(block, selectInfo); - return getTextProperties(properties, selectInfo); + override async html2block({ + element, + editor, + }: { + element: Element; + editor: BlockEditor; + }): Promise { + return commonHTML2block({ + element, + editor, + type: this.type, + tagName: 'CODE', + }); } - // TODO: internal format not implemented yet - override html2block( - el: Element, - parseEl: (el: Element) => any[] - ): any[] | null { - const tag_name = el.tagName; - if (tag_name === 'CODE') { - const childNodes = el.childNodes; - let text_value = ''; - for (let i = 0; i < childNodes.length; i++) { - const blocks_info = parseEl(childNodes[i] as Element); - for (let j = 0; j < blocks_info.length; j++) { - if (blocks_info[j].type === 'text') { - const block_texts = - blocks_info[j].properties.text.value; - if (block_texts.length > 0) { - text_value += block_texts[0].text; - } - } - } - } - return [ - { - type: this.type, - properties: { - text: { value: [{ text: text_value }] }, - }, - children: [], - }, - ]; - } - - return null; - } - - override async block2html( - block: AsyncBlock, - children: SelectBlock[], - generateHtml: (el: any[]) => Promise - ): Promise { - let content = getTextHtml(block); - content += await generateHtml(children); - return `${content}`; + override async block2html(props: Block2HtmlProps) { + return `${await commonBlock2HtmlContent(props)}`; } } diff --git a/libs/components/editor-blocks/src/blocks/divider/index.ts b/libs/components/editor-blocks/src/blocks/divider/index.ts index 6d67611cda..f77722838f 100644 --- a/libs/components/editor-blocks/src/blocks/divider/index.ts +++ b/libs/components/editor-blocks/src/blocks/divider/index.ts @@ -1,39 +1,35 @@ import { AsyncBlock, BaseView, + BlockEditor, + HTML2BlockResult, SelectBlock, } from '@toeverything/framework/virgo'; import { Protocol } from '@toeverything/datasource/db-service'; import { DividerView } from './divider-view'; +import { Block2HtmlProps, commonHTML2block } from '../../utils/commonBlockClip'; export class DividerBlock extends BaseView { type = Protocol.Block.Type.divider; View = DividerView; - override html2block( - el: Element, - parseEl: (el: Element) => any[] - ): any[] | null { - const tag_name = el.tagName; - if (tag_name === 'HR') { - return [ - { - type: this.type, - properties: { - text: {}, - }, - children: [], - }, - ]; - } - return null; + override async html2block({ + element, + editor, + }: { + element: Element; + editor: BlockEditor; + }): Promise { + return commonHTML2block({ + element, + editor, + type: this.type, + tagName: 'HR', + ignoreEmptyElement: false, + }); } - override async block2html( - block: AsyncBlock, - children: SelectBlock[], - generateHtml: (el: any[]) => Promise - ): Promise { - return `
`; + override async block2html(props: Block2HtmlProps) { + return `
`; } } diff --git a/libs/components/editor-blocks/src/blocks/embed-link/index.ts b/libs/components/editor-blocks/src/blocks/embed-link/index.ts index 947763ee16..ba7f839492 100644 --- a/libs/components/editor-blocks/src/blocks/embed-link/index.ts +++ b/libs/components/editor-blocks/src/blocks/embed-link/index.ts @@ -5,6 +5,7 @@ import { } from '@toeverything/framework/virgo'; import { Protocol } from '@toeverything/datasource/db-service'; import { EmbedLinkView } from './EmbedLinkView'; +import { Block2HtmlProps } from '../../utils/commonBlockClip'; export class EmbedLinkBlock extends BaseView { public override selectable = true; @@ -12,36 +13,8 @@ export class EmbedLinkBlock extends BaseView { type = Protocol.Block.Type.embedLink; View = EmbedLinkView; - override html2block( - el: Element, - parseEl: (el: Element) => any[] - ): any[] | null { - const tag_name = el.tagName; - if (tag_name === 'A' && el.parentElement?.childElementCount === 1) { - return [ - { - type: this.type, - properties: { - // TODO: Not sure what value to fill for name - embedLink: { - name: this.type, - value: el.getAttribute('href'), - }, - }, - children: [], - }, - ]; - } - - return null; - } - - override async block2html( - block: AsyncBlock, - children: SelectBlock[], - generateHtml: (el: any[]) => Promise - ): Promise { - const figma_url = block.getProperty('embedLink')?.value; - return `

${figma_url}

`; + override async block2html({ block }: Block2HtmlProps) { + const url = block.getProperty('embedLink')?.value; + return `

${url}

`; } } diff --git a/libs/components/editor-blocks/src/blocks/figma/index.ts b/libs/components/editor-blocks/src/blocks/figma/index.ts index 4eb9d6047f..b96cec7d17 100644 --- a/libs/components/editor-blocks/src/blocks/figma/index.ts +++ b/libs/components/editor-blocks/src/blocks/figma/index.ts @@ -5,6 +5,7 @@ import { SelectBlock, } from '@toeverything/framework/virgo'; import { FigmaView } from './FigmaView'; +import { Block2HtmlProps } from '../../utils/commonBlockClip'; export class FigmaBlock extends BaseView { public override selectable = true; @@ -12,42 +13,8 @@ export class FigmaBlock extends BaseView { type = Protocol.Block.Type.figma; View = FigmaView; - override html2block( - el: Element, - parseEl: (el: Element) => any[] - ): any[] | null { - const tag_name = el.tagName; - if (tag_name === 'A' && el.parentElement?.childElementCount === 1) { - const href = el.getAttribute('href'); - const allowedHosts = ['www.figma.com']; - const host = new URL(href).host; - - if (allowedHosts.includes(host)) { - return [ - { - type: this.type, - properties: { - // TODO: Not sure what value to fill for name - embedLink: { - name: this.type, - value: el.getAttribute('href'), - }, - }, - children: [], - }, - ]; - } - } - - return null; - } - - override async block2html( - block: AsyncBlock, - children: SelectBlock[], - generateHtml: (el: any[]) => Promise - ): Promise { - const figma_url = block.getProperty('embedLink')?.value; - return `

${figma_url}

`; + override async block2html({ block }: Block2HtmlProps) { + const figmaUrl = block.getProperty('embedLink')?.value; + return `

${figmaUrl}

`; } } diff --git a/libs/components/editor-blocks/src/blocks/file/index.ts b/libs/components/editor-blocks/src/blocks/file/index.ts index e3119e9a16..c2f12c0c6d 100644 --- a/libs/components/editor-blocks/src/blocks/file/index.ts +++ b/libs/components/editor-blocks/src/blocks/file/index.ts @@ -9,25 +9,22 @@ import { services, } from '@toeverything/datasource/db-service'; import { FileView } from './FileView'; +import { Block2HtmlProps } from '../../utils/commonBlockClip'; export class FileBlock extends BaseView { public override selectable = true; public override editable = false; type = Protocol.Block.Type.file; View = FileView; + override async block2html({ block }: Block2HtmlProps) { + const fileProperty = block.getProperty('file'); + const fileId = fileProperty?.value; + const fileInfo = fileId + ? await services.api.file.get(fileId, block.workspace) + : null; - override async block2html( - block: AsyncBlock, - children: SelectBlock[], - generateHtml: (el: any[]) => Promise - ): Promise { - const file_property = - block.getProperty('file') || ({} as FileColumnValue); - const file_id = file_property.value; - let file_info = null; - if (file_id) { - file_info = await services.api.file.get(file_id, block.workspace); - } - return `

${file_property?.name}

`; + return fileInfo + ? `

${fileProperty?.name}

` + : ''; } } diff --git a/libs/components/editor-blocks/src/blocks/group/Group.tsx b/libs/components/editor-blocks/src/blocks/group/Group.tsx index 787c537f18..ea27bbbd38 100644 --- a/libs/components/editor-blocks/src/blocks/group/Group.tsx +++ b/libs/components/editor-blocks/src/blocks/group/Group.tsx @@ -6,6 +6,10 @@ import { SelectBlock, } from '@toeverything/framework/virgo'; import { GroupView } from './GroupView'; +import { + Block2HtmlProps, + commonBlock2HtmlContent, +} from '../../utils/commonBlockClip'; export class Group extends BaseView { public override selectable = true; @@ -25,13 +29,12 @@ export class Group extends BaseView { override async onCreate(block: AsyncBlock): Promise { return block; } - - override async block2html( - block: AsyncBlock, - children: SelectBlock[], - generateHtml: (el: any[]) => Promise - ): Promise { - const content = await generateHtml(children); - return `
${content}
`; + override async block2html({ editor, selectInfo, block }: Block2HtmlProps) { + const childrenHtml = + await editor.clipboard.clipboardUtils.convertBlock2HtmlBySelectInfos( + block, + selectInfo?.children + ); + return `
${childrenHtml}`; } } diff --git a/libs/components/editor-blocks/src/blocks/groupDvider/index.ts b/libs/components/editor-blocks/src/blocks/groupDvider/index.ts index 4120f1a525..458ef2f708 100644 --- a/libs/components/editor-blocks/src/blocks/groupDvider/index.ts +++ b/libs/components/editor-blocks/src/blocks/groupDvider/index.ts @@ -5,35 +5,13 @@ import { } from '@toeverything/framework/virgo'; import { Protocol } from '@toeverything/datasource/db-service'; import { GroupDividerView } from './groupDividerView'; +import { Block2HtmlProps } from '../../utils/commonBlockClip'; export class GroupDividerBlock extends BaseView { type = Protocol.Block.Type.groupDivider; View = GroupDividerView; - override html2block( - el: Element, - parseEl: (el: Element) => any[] - ): any[] | null { - const tag_name = el.tagName; - if (tag_name === 'HR') { - return [ - { - type: this.type, - properties: { - text: {}, - }, - children: [], - }, - ]; - } - return null; - } - - override async block2html( - block: AsyncBlock, - children: SelectBlock[], - generateHtml: (el: any[]) => Promise - ): Promise { - return `
`; + override async block2html(props: Block2HtmlProps) { + return `
`; } } diff --git a/libs/components/editor-blocks/src/blocks/image/index.ts b/libs/components/editor-blocks/src/blocks/image/index.ts index e5c33514e2..b170d44413 100644 --- a/libs/components/editor-blocks/src/blocks/image/index.ts +++ b/libs/components/editor-blocks/src/blocks/image/index.ts @@ -1,10 +1,12 @@ import { - AsyncBlock, BaseView, - SelectBlock, + BlockEditor, + HTML2BlockResult, } from '@toeverything/framework/virgo'; import { Protocol } from '@toeverything/datasource/db-service'; import { ImageView } from './ImageView'; +import { Block2HtmlProps } from '../../utils/commonBlockClip'; +import { getRandomString } from '@toeverything/components/common'; export class ImageBlock extends BaseView { public override selectable = true; @@ -13,42 +15,40 @@ export class ImageBlock extends BaseView { View = ImageView; // TODO: needs to download the image and then upload it to get a new link and then assign it - override html2block( - el: Element, - parseEl: (el: Element) => any[] - ): any[] | null { - const tag_name = el.tagName; - if (tag_name === 'IMG') { + override async html2block({ + element, + editor, + }: { + element: Element; + editor: BlockEditor; + }): Promise { + if (element.tagName === 'IMG') { return [ { type: this.type, properties: { - value: '', - url: el.getAttribute('src'), - name: el.getAttribute('src'), - size: 0, - type: 'link', + image: { + value: getRandomString('image'), + url: element.getAttribute('src'), + name: element.getAttribute('src'), + size: 0, + type: 'link', + }, }, children: [], }, ]; } - return null; } - // TODO: - override async block2html( - block: AsyncBlock, - children: SelectBlock[], - generateHtml: (el: any[]) => Promise - ): Promise { - const text = block.getProperty('text'); + override async block2html({ block, editor }: Block2HtmlProps) { + const textValue = block.getProperty('text'); const content = ''; - if (text) { - text.value.map(text => `${text}`).join(''); - } - // TODO: child - return `

`; + // TODO: text.value should export with style?? + const figcaption = (textValue?.value ?? []) + .map(({ text }) => `${text}`) + .join(''); + return `
${figcaption}
${figcaption}
`; } } diff --git a/libs/components/editor-blocks/src/blocks/numbered/index.ts b/libs/components/editor-blocks/src/blocks/numbered/index.ts index 92187be81b..3dd6f74934 100644 --- a/libs/components/editor-blocks/src/blocks/numbered/index.ts +++ b/libs/components/editor-blocks/src/blocks/numbered/index.ts @@ -1,15 +1,15 @@ -import { - DefaultColumnsValue, - Protocol, -} from '@toeverything/datasource/db-service'; +import { Protocol } from '@toeverything/datasource/db-service'; import { AsyncBlock, BaseView, - getTextHtml, - getTextProperties, - SelectBlock, + BlockEditor, + HTML2BlockResult, } from '@toeverything/framework/virgo'; -// import { withTreeViewChildren } from '../../utils/with-tree-view-children'; +import { + Block2HtmlProps, + commonBlock2HtmlContent, + commonHTML2block, +} from '../../utils/commonBlockClip'; import { defaultTodoProps, NumberedView } from './NumberedView'; export class NumberedBlock extends BaseView { @@ -28,71 +28,39 @@ export class NumberedBlock extends BaseView { return block; } - override getSelProperties( - block: AsyncBlock, - selectInfo: any - ): DefaultColumnsValue { - const properties = super.getSelProperties(block, selectInfo); - return getTextProperties(properties, selectInfo); - } - - override html2block( - el: Element, - parseEl: (el: Element) => any[] - ): any[] | null { - const tag_name = el.tagName; - if (tag_name === 'OL') { - const result = []; - for (let i = 0; i < el.children.length; i++) { - const blocks_info = parseEl(el.children[i]); - result.push(...blocks_info); - } - return result.length > 0 ? result : null; + override async html2block({ + element, + editor, + }: { + element: Element; + editor: BlockEditor; + }): Promise { + if (element.tagName === 'OL') { + const children = Array.from(element.children); + const childrenBlockInfos = ( + await Promise.all( + children.map(childElement => + this.html2block({ + editor, + element: childElement, + }) + ) + ) + ) + .flat() + .filter(v => v); + return childrenBlockInfos.length ? childrenBlockInfos : null; } - if (tag_name == 'LI' && el.textContent.startsWith('[ ] ')) { - const childNodes = el.childNodes; - let texts = []; - const children = []; - for (let i = 0; i < childNodes.length; i++) { - const blocks_info = parseEl(childNodes[i] as Element); - for (let j = 0; j < blocks_info.length; j++) { - if (blocks_info[j].type === 'text') { - const block_texts = - blocks_info[j].properties.text.value; - texts.push(...block_texts); - } else { - children.push(blocks_info[j]); - } - } - } - if (texts.length > 0 && (texts[0].text || '').startsWith('[ ] ')) { - texts[0].text = texts[0].text.substring('[ ] '.length); - if (!texts[0].text) { - texts = texts.slice(1); - } - } - return [ - { - type: this.type, - properties: { - text: { value: texts }, - }, - children: children, - }, - ]; - } - - return null; + return commonHTML2block({ + element, + editor, + type: this.type, + tagName: 'LI', + }); } - override async block2html( - block: AsyncBlock, - children: SelectBlock[], - generateHtml: (el: any[]) => Promise - ): Promise { - let content = getTextHtml(block); - content += await generateHtml(children); - return `
  1. ${content}
`; + override async block2html(props: Block2HtmlProps) { + return `
  1. ${await commonBlock2HtmlContent(props)}
`; } } diff --git a/libs/components/editor-blocks/src/blocks/page/index.ts b/libs/components/editor-blocks/src/blocks/page/index.ts index 412bbdbd7c..4209cbbdb6 100644 --- a/libs/components/editor-blocks/src/blocks/page/index.ts +++ b/libs/components/editor-blocks/src/blocks/page/index.ts @@ -1,21 +1,9 @@ import { withRecastBlock } from '@toeverything/components/editor-core'; -import { - Protocol, - DefaultColumnsValue, -} from '@toeverything/datasource/db-service'; -import { - AsyncBlock, - BaseView, - ChildrenView, - getTextHtml, - getTextProperties, - SelectBlock, -} from '@toeverything/framework/virgo'; +import { Protocol } from '@toeverything/datasource/db-service'; +import { AsyncBlock, BaseView } from '@toeverything/framework/virgo'; import { PageView } from './PageView'; - -export const PageChildrenView: (prop: ChildrenView) => JSX.Element = props => - props.children; +import { Block2HtmlProps } from '../../utils/commonBlockClip'; export class PageBlock extends BaseView { type = Protocol.Block.Type.page; @@ -35,21 +23,17 @@ export class PageBlock extends BaseView { return this.get_decoration(content, 'text')?.value?.[0].text; } - override getSelProperties( - block: AsyncBlock, - selectInfo: any - ): DefaultColumnsValue { - const properties = super.getSelProperties(block, selectInfo); - return getTextProperties(properties, selectInfo); - } - - override async block2html( - block: AsyncBlock, - children: SelectBlock[], - generateHtml: (el: any[]) => Promise - ): Promise { - const content = getTextHtml(block); - const childrenContent = await generateHtml(children); - return `

${content}

${childrenContent}`; + override async block2html({ block, editor, selectInfo }: Block2HtmlProps) { + const header = + await editor.clipboard.clipboardUtils.convertTextValue2HtmlBySelectInfo( + block, + selectInfo + ); + const childrenHtml = + await editor.clipboard.clipboardUtils.convertBlock2HtmlBySelectInfos( + block, + selectInfo?.children + ); + return `

${header}

${childrenHtml}`; } } diff --git a/libs/components/editor-blocks/src/blocks/text/QuoteBlock.tsx b/libs/components/editor-blocks/src/blocks/text/QuoteBlock.tsx index f62dfae040..7789ec5f1c 100644 --- a/libs/components/editor-blocks/src/blocks/text/QuoteBlock.tsx +++ b/libs/components/editor-blocks/src/blocks/text/QuoteBlock.tsx @@ -1,15 +1,16 @@ -import { - DefaultColumnsValue, - Protocol, -} from '@toeverything/datasource/db-service'; +import { Protocol } from '@toeverything/datasource/db-service'; import { AsyncBlock, BaseView, + BlockEditor, CreateView, - getTextHtml, - getTextProperties, - SelectBlock, + HTML2BlockResult, } from '@toeverything/framework/virgo'; +import { + Block2HtmlProps, + commonBlock2HtmlContent, + commonHTML2block, +} from '../../utils/commonBlockClip'; import { TextView } from './TextView'; @@ -29,54 +30,25 @@ export class QuoteBlock extends BaseView { return block; } - override getSelProperties( - block: AsyncBlock, - selectInfo: any - ): DefaultColumnsValue { - const properties = super.getSelProperties(block, selectInfo); - return getTextProperties(properties, selectInfo); + override async html2block({ + element, + editor, + }: { + element: Element; + editor: BlockEditor; + }): Promise { + return commonHTML2block({ + element, + editor, + type: this.type, + tagName: 'BLOCKQUOTE', + }); } - override html2block( - el: Element, - parseEl: (el: Element) => any[] - ): any[] | null { - const tag_name = el.tagName; - if (tag_name === 'BLOCKQUOTE') { - const childNodes = el.childNodes; - const texts = []; - for (let i = 0; i < childNodes.length; i++) { - const blocks_info = parseEl(childNodes[i] as Element); - for (let j = 0; j < blocks_info.length; j++) { - if (blocks_info[j].type === 'text') { - const block_texts = - blocks_info[j].properties.text.value; - texts.push(...block_texts); - } - } - } - return [ - { - type: this.type, - properties: { - text: { value: texts }, - }, - children: [], - }, - ]; - } - - return null; - } - - override async block2html( - block: AsyncBlock, - children: SelectBlock[], - generateHtml: (el: any[]) => Promise - ): Promise { - let content = getTextHtml(block); - content += await generateHtml(children); - return `
${content}
`; + override async block2html(props: Block2HtmlProps) { + return `
${await commonBlock2HtmlContent( + props + )}
`; } } @@ -96,69 +68,22 @@ export class CalloutBlock extends BaseView { return block; } - override getSelProperties( - block: AsyncBlock, - selectInfo: any - ): DefaultColumnsValue { - const properties = super.getSelProperties(block, selectInfo); - return getTextProperties(properties, selectInfo); + override async html2block({ + element, + editor, + }: { + element: Element; + editor: BlockEditor; + }): Promise { + return commonHTML2block({ + element, + editor, + type: this.type, + tagName: 'ASIDE', + }); } - override html2block( - el: Element, - parseEl: (el: Element) => any[] - ): any[] | null { - const tag_name = el.tagName; - if ( - tag_name === 'ASIDE' || - el.firstChild?.nodeValue?.startsWith('