refactor: refactor block2html in clipboard

libs/components/editor-blocks/src/blocks/bullet/index.ts

@@ -1,18 +1,10 @@
-import {
-    AsyncBlock,
-    BaseView,
-    CreateView,
-    SelectBlock,
-    getTextHtml,
-} from '@toeverything/framework/virgo';
-import {
-    Protocol,
-    DefaultColumnsValue,
-} from '@toeverything/datasource/db-service';
-// import { withTreeViewChildren } from '../../utils/with-tree-view-children';
+import { AsyncBlock, BaseView } from '@toeverything/framework/virgo';
+import { Protocol } from '@toeverything/datasource/db-service';
 import { defaultBulletProps, BulletView } from './BulletView';
-import { IndentWrapper } from '../../components/IndentWrapper';
-
+import {
+    Block2HtmlProps,
+    commonBlock2HtmlContent,
+} from '../../utils/commonBlockClip';
 export class BulletBlock extends BaseView {
     public type = Protocol.Block.Type.bullet;
 
@@ -71,13 +63,7 @@ export class BulletBlock extends BaseView {
         return null;
     }
 
-    override async block2html(
-        block: AsyncBlock,
-        children: SelectBlock[],
-        generateHtml: (el: any[]) => Promise<string>
-    ): Promise<string> {
-        let content = getTextHtml(block);
-        content += await generateHtml(children);
-        return `<ul><li>${content}</li></ul>`;
+    override async block2html(props: Block2HtmlProps) {
+        return `<ul><li>${await commonBlock2HtmlContent(props)}</li></ul>`;
     }
 }

libs/components/editor-blocks/src/blocks/code/index.ts

@@ -1,16 +1,10 @@
-import {
-    BaseView,
-    AsyncBlock,
-    CreateView,
-    SelectBlock,
-    getTextHtml,
-} from '@toeverything/framework/virgo';
-import {
-    Protocol,
-    DefaultColumnsValue,
-} from '@toeverything/datasource/db-service';
+import { BaseView, AsyncBlock } from '@toeverything/framework/virgo';
+import { Protocol } from '@toeverything/datasource/db-service';
 import { CodeView } from './CodeView';
-import { ComponentType } from 'react';
+import {
+    Block2HtmlProps,
+    commonBlock2HtmlContent,
+} from '../../utils/commonBlockClip';
 
 export class CodeBlock extends BaseView {
     type = Protocol.Block.Type.code;
@@ -62,13 +56,7 @@ export class CodeBlock extends BaseView {
         return null;
     }
 
-    override async block2html(
-        block: AsyncBlock,
-        children: SelectBlock[],
-        generateHtml: (el: any[]) => Promise<string>
-    ): Promise<string> {
-        let content = getTextHtml(block);
-        content += await generateHtml(children);
-        return `<code>${content}</code>`;
+    override async block2html(props: Block2HtmlProps) {
+        return `<code>${await commonBlock2HtmlContent(props)}<code/>`;
     }
 }

libs/components/editor-blocks/src/blocks/divider/index.ts

@@ -5,6 +5,7 @@ import {
 } from '@toeverything/framework/virgo';
 import { Protocol } from '@toeverything/datasource/db-service';
 import { DividerView } from './divider-view';
+import { Block2HtmlProps } from '../../utils/commonBlockClip';
 
 export class DividerBlock extends BaseView {
     type = Protocol.Block.Type.divider;
@@ -28,12 +29,7 @@ export class DividerBlock extends BaseView {
 
         return null;
     }
-
-    override async block2html(
-        block: AsyncBlock,
-        children: SelectBlock[],
-        generateHtml: (el: any[]) => Promise<string>
-    ): Promise<string> {
-        return `<hr>`;
+    override async block2html(props: Block2HtmlProps) {
+        return `<hr/>`;
     }
 }

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;
@@ -35,13 +36,8 @@ export class EmbedLinkBlock extends BaseView {
 
         return null;
     }
-
-    override async block2html(
-        block: AsyncBlock,
-        children: SelectBlock[],
-        generateHtml: (el: any[]) => Promise<string>
-    ): Promise<string> {
-        const figma_url = block.getProperty('embedLink')?.value;
-        return `<p><a src=${figma_url}>${figma_url}</p>`;
+    override async block2html({ block }: Block2HtmlProps) {
+        const url = block.getProperty('embedLink')?.value;
+        return `<p><a href="${url}">${url}</a></p>`;
     }
 }

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;
@@ -41,13 +42,8 @@ export class FigmaBlock extends BaseView {
 
         return null;
     }
-
-    override async block2html(
-        block: AsyncBlock,
-        children: SelectBlock[],
-        generateHtml: (el: any[]) => Promise<string>
-    ): Promise<string> {
-        const figma_url = block.getProperty('embedLink')?.value;
-        return `<p><a src=${figma_url}>${figma_url}</p>`;
+    override async block2html({ block }: Block2HtmlProps) {
+        const figmaUrl = block.getProperty('embedLink')?.value;
+        return `<p><a href="${figmaUrl}">${figmaUrl}</a></p>`;
     }
 }

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 activatable = 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<string>
-    ): Promise<string> {
-        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 `<p><a src=${file_info?.url}>${file_property?.name}</p>`;
+        return fileInfo
+            ? `<p><a href=${fileInfo?.url}>${fileProperty?.name}</a></p>`
+            : '';
     }
 }

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<AsyncBlock> {
         return block;
     }
-
-    override async block2html(
-        block: AsyncBlock,
-        children: SelectBlock[],
-        generateHtml: (el: any[]) => Promise<string>
-    ): Promise<string> {
-        const content = await generateHtml(children);
-        return `<div>${content}<div>`;
+    override async block2html({ editor, selectInfo, block }: Block2HtmlProps) {
+        const childrenHtml =
+            await editor.clipboard.clipboardUtils.convertBlock2HtmlBySelectInfos(
+                block,
+                selectInfo?.children
+            );
+        return `<div>${childrenHtml}<code/>`;
     }
 }

libs/components/editor-blocks/src/blocks/groupDvider/index.ts

@@ -5,6 +5,7 @@ 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;
@@ -28,12 +29,7 @@ export class GroupDividerBlock extends BaseView {
 
         return null;
     }
-
-    override async block2html(
-        block: AsyncBlock,
-        children: SelectBlock[],
-        generateHtml: (el: any[]) => Promise<string>
-    ): Promise<string> {
-        return `<hr>`;
+    override async block2html(props: Block2HtmlProps) {
+        return `<hr/>`;
     }
 }

libs/components/editor-blocks/src/blocks/image/index.ts

@@ -1,10 +1,7 @@
-import {
-    AsyncBlock,
-    BaseView,
-    SelectBlock,
-} from '@toeverything/framework/virgo';
+import { BaseView } from '@toeverything/framework/virgo';
 import { Protocol } from '@toeverything/datasource/db-service';
 import { ImageView } from './ImageView';
+import { Block2HtmlProps } from '../../utils/commonBlockClip';
 
 export class ImageBlock extends BaseView {
     public override selectable = true;
@@ -37,18 +34,13 @@ export class ImageBlock extends BaseView {
         return null;
     }
 
-    // TODO:
-    override async block2html(
-        block: AsyncBlock,
-        children: SelectBlock[],
-        generateHtml: (el: any[]) => Promise<string>
-    ): Promise<string> {
-        const text = block.getProperty('text');
+    override async block2html({ block, editor }: Block2HtmlProps) {
+        const textValue = block.getProperty('text');
         const content = '';
-        if (text) {
-            text.value.map(text => `<span>${text}</span>`).join('');
-        }
-        // TODO: child
-        return `<p><img src=${content}></p>`;
+        // TODO: text.value should export with style??
+        const figcaption = (textValue?.value ?? [])
+            .map(({ text }) => `<span>${text}</span>`)
+            .join('');
+        return `<figure><img src="${content}" alt="${figcaption}"/><figcaption>${figcaption}<figcaption/></figure>`;
     }
 }

libs/components/editor-blocks/src/blocks/numbered/index.ts

@@ -1,16 +1,10 @@
-import {
-    AsyncBlock,
-    BaseView,
-    SelectBlock,
-    getTextHtml,
-} from '@toeverything/framework/virgo';
-import {
-    Protocol,
-    DefaultColumnsValue,
-} from '@toeverything/datasource/db-service';
-// import { withTreeViewChildren } from '../../utils/with-tree-view-children';
+import { AsyncBlock, BaseView } from '@toeverything/framework/virgo';
+import { Protocol } from '@toeverything/datasource/db-service';
 import { defaultTodoProps, NumberedView } from './NumberedView';
-import { IndentWrapper } from '../../components/IndentWrapper';
+import {
+    Block2HtmlProps,
+    commonBlock2HtmlContent,
+} from '../../utils/commonBlockClip';
 
 export class NumberedBlock extends BaseView {
     public type = Protocol.Block.Type.numbered;
@@ -77,14 +71,7 @@ export class NumberedBlock extends BaseView {
 
         return null;
     }
-
-    override async block2html(
-        block: AsyncBlock,
-        children: SelectBlock[],
-        generateHtml: (el: any[]) => Promise<string>
-    ): Promise<string> {
-        let content = getTextHtml(block);
-        content += await generateHtml(children);
-        return `<ol><li>${content}</li></ol>`;
+    override async block2html(props: Block2HtmlProps) {
+        return `<ol><li>${await commonBlock2HtmlContent(props)}</li></ol>`;
     }
 }

libs/components/editor-blocks/src/blocks/page/index.ts

@@ -1,20 +1,9 @@
 import { withRecastBlock } from '@toeverything/components/editor-core';
-import {
-    Protocol,
-    DefaultColumnsValue,
-} from '@toeverything/datasource/db-service';
-import {
-    AsyncBlock,
-    BaseView,
-    ChildrenView,
-    getTextHtml,
-    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;
@@ -34,13 +23,17 @@ export class PageBlock extends BaseView {
         return this.get_decoration<any>(content, 'text')?.value?.[0].text;
     }
 
-    override async block2html(
-        block: AsyncBlock,
-        children: SelectBlock[],
-        generateHtml: (el: any[]) => Promise<string>
-    ): Promise<string> {
-        const content = getTextHtml(block);
-        const childrenContent = await generateHtml(children);
-        return `<h1>${content}</h1> ${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 `<h1>${header}</h1>${childrenHtml}`;
     }
 }

libs/components/editor-blocks/src/blocks/text/QuoteBlock.tsx

@@ -1,14 +1,13 @@
-import {
-    DefaultColumnsValue,
-    Protocol,
-} from '@toeverything/datasource/db-service';
+import { Protocol } from '@toeverything/datasource/db-service';
 import {
     AsyncBlock,
     BaseView,
     CreateView,
-    getTextHtml,
-    SelectBlock,
 } from '@toeverything/framework/virgo';
+import {
+    Block2HtmlProps,
+    commonBlock2HtmlContent,
+} from '../../utils/commonBlockClip';
 
 import { TextView } from './TextView';
 
@@ -60,14 +59,10 @@ export class QuoteBlock extends BaseView {
         return null;
     }
 
-    override async block2html(
-        block: AsyncBlock,
-        children: SelectBlock[],
-        generateHtml: (el: any[]) => Promise<string>
-    ): Promise<string> {
-        let content = getTextHtml(block);
-        content += await generateHtml(children);
-        return `<blockquote>${content}</blockquote>`;
+    override async block2html(props: Block2HtmlProps) {
+        return `<blockquote>${await commonBlock2HtmlContent(
+            props
+        )}</blockquote>`;
     }
 }
 
@@ -135,13 +130,7 @@ export class CalloutBlock extends BaseView {
         return null;
     }
 
-    override async block2html(
-        block: AsyncBlock,
-        children: SelectBlock[],
-        generateHtml: (el: any[]) => Promise<string>
-    ): Promise<string> {
-        let content = getTextHtml(block);
-        content += await generateHtml(children);
-        return `<aside>${content}</aside>`;
+    override async block2html(props: Block2HtmlProps) {
+        return `<aside>${await commonBlock2HtmlContent(props)}</aside>`;
     }
 }

libs/components/editor-blocks/src/blocks/text/TextBlock.tsx

@@ -2,16 +2,15 @@ import {
     BaseView,
     CreateView,
     AsyncBlock,
-    SelectBlock,
-    getTextHtml,
 } from '@toeverything/framework/virgo';
-import {
-    DefaultColumnsValue,
-    Protocol,
-} from '@toeverything/datasource/db-service';
+import { Protocol } from '@toeverything/datasource/db-service';
 import { TextView } from './TextView';
 
 import { getRandomString } from '@toeverything/components/common';
+import {
+    Block2HtmlProps,
+    commonBlock2HtmlContent,
+} from '../../utils/commonBlockClip';
 
 export class TextBlock extends BaseView {
     type = Protocol.Block.Type.text;
@@ -111,14 +110,8 @@ export class TextBlock extends BaseView {
             : null;
     }
 
-    override async block2html(
-        block: AsyncBlock,
-        children: SelectBlock[],
-        generateHtml: (el: any[]) => Promise<string>
-    ): Promise<string> {
-        let content = getTextHtml(block);
-        content += await generateHtml(children);
-        return `<p>${content}</p>`;
+    override async block2html(props: Block2HtmlProps) {
+        return `<p>${await commonBlock2HtmlContent(props)}</p>`;
     }
 }
 
@@ -168,14 +161,8 @@ export class Heading1Block extends BaseView {
         return null;
     }
 
-    override async block2html(
-        block: AsyncBlock,
-        children: SelectBlock[],
-        generateHtml: (el: any[]) => Promise<string>
-    ): Promise<string> {
-        let content = getTextHtml(block);
-        content += await generateHtml(children);
-        return `<h1>${content}</h1>`;
+    override async block2html(props: Block2HtmlProps) {
+        return `<h1>${await commonBlock2HtmlContent(props)}</h1>`;
     }
 }
 
@@ -225,14 +212,8 @@ export class Heading2Block extends BaseView {
         return null;
     }
 
-    override async block2html(
-        block: AsyncBlock,
-        children: SelectBlock[],
-        generateHtml: (el: any[]) => Promise<string>
-    ): Promise<string> {
-        let content = getTextHtml(block);
-        content += await generateHtml(children);
-        return `<h2>${content}</h2>`;
+    override async block2html(props: Block2HtmlProps) {
+        return `<h2>${await commonBlock2HtmlContent(props)}</h2>`;
     }
 }
 
@@ -282,13 +263,7 @@ export class Heading3Block extends BaseView {
         return null;
     }
 
-    override async block2html(
-        block: AsyncBlock,
-        children: SelectBlock[],
-        generateHtml: (el: any[]) => Promise<string>
-    ): Promise<string> {
-        let content = getTextHtml(block);
-        content += await generateHtml(children);
-        return `<h3>${content}</h3>`;
+    override async block2html(props: Block2HtmlProps) {
+        return `<h3>${await commonBlock2HtmlContent(props)}</h3>`;
     }
 }

libs/components/editor-blocks/src/blocks/todo/index.ts

@@ -1,18 +1,12 @@
-import {
-    BaseView,
-    AsyncBlock,
-    SelectBlock,
-    getTextHtml,
-} from '@toeverything/framework/virgo';
-// import type { CreateView } from '@toeverything/framework/virgo';
-import {
-    Protocol,
-    DefaultColumnsValue,
-} from '@toeverything/datasource/db-service';
-// import { withTreeViewChildren } from '../../utils/with-tree-view-children';
+import { BaseView } from '@toeverything/framework/virgo';
+import { Protocol } from '@toeverything/datasource/db-service';
 import { withTreeViewChildren } from '../../utils/WithTreeViewChildren';
 import { TodoView, defaultTodoProps } from './TodoView';
 import type { TodoAsyncBlock } from './types';
+import {
+    Block2HtmlProps,
+    commonBlock2HtmlContent,
+} from '../../utils/commonBlockClip';
 
 export class TodoBlock extends BaseView {
     type = Protocol.Block.Type.todo;
@@ -78,13 +72,7 @@ export class TodoBlock extends BaseView {
         return null;
     }
 
-    override async block2html(
-        block: AsyncBlock,
-        children: SelectBlock[],
-        generateHtml: (el: any[]) => Promise<string>
-    ): Promise<string> {
-        let content = getTextHtml(block);
-        content += await generateHtml(children);
-        return `<ul><li>[ ] ${content}</li></ul>`;
+    override async block2html(props: Block2HtmlProps) {
+        return `<ul><li>[ ] ${await commonBlock2HtmlContent(props)}</li></ul>`;
     }
 }

libs/components/editor-blocks/src/blocks/youtube/index.ts

@@ -5,6 +5,10 @@ import {
     SelectBlock,
 } from '@toeverything/framework/virgo';
 import { YoutubeView } from './YoutubeView';
+import {
+    Block2HtmlProps,
+    commonBlock2HtmlContent,
+} from '../../utils/commonBlockClip';
 
 export class YoutubeBlock extends BaseView {
     public override selectable = true;
@@ -44,12 +48,8 @@ export class YoutubeBlock extends BaseView {
     override async block2Text(block: AsyncBlock, selectInfo: SelectBlock) {
         return block.getProperty('embedLink')?.value ?? '';
     }
-    override async block2html(
-        block: AsyncBlock,
-        children: SelectBlock[],
-        generateHtml: (el: any[]) => Promise<string>
-    ): Promise<string> {
+    override async block2html({ block }: Block2HtmlProps) {
         const url = block.getProperty('embedLink')?.value;
-        return `<p><a src=${url}>${url}</p>`;
+        return `<p><a href="${url}">${url}</a></p>`;
     }
 }

libs/components/editor-blocks/src/utils/commonBlockClip.ts

@@ -0,0 +1,30 @@
+import {
+    AsyncBlock,
+    BlockEditor,
+    SelectBlock,
+} from '@toeverything/components/editor-core';
+
+export type Block2HtmlProps = {
+    editor: BlockEditor;
+    block: AsyncBlock;
+    // The selectInfo parameter is not passed when the block is selected in ful, the selectInfo.type is Range
+    selectInfo?: SelectBlock;
+};
+
+export const commonBlock2HtmlContent = async ({
+    editor,
+    block,
+    selectInfo,
+}: Block2HtmlProps) => {
+    const html =
+        await editor.clipboard.clipboardUtils.convertTextValue2HtmlBySelectInfo(
+            block,
+            selectInfo
+        );
+    const childrenHtml =
+        await editor.clipboard.clipboardUtils.convertBlock2HtmlBySelectInfos(
+            block,
+            selectInfo?.children
+        );
+    return `${html}${childrenHtml}`;
+};