Merge pull request #427 from toeverything/feat/markdown-code-parse

feat(code): enhance markdown parse code

libs/components/affine-editor/src/create-editor.ts

@@ -38,13 +38,13 @@ export const createEditor = (
         views: {
             [Protocol.Block.Type.page]: new PageBlock(),
             [Protocol.Block.Type.reference]: new RefLinkBlock(),
+            [Protocol.Block.Type.code]: new CodeBlock(),
             [Protocol.Block.Type.text]: new TextBlock(),
             [Protocol.Block.Type.heading1]: new Heading1Block(),
             [Protocol.Block.Type.heading2]: new Heading2Block(),
             [Protocol.Block.Type.heading3]: new Heading3Block(),
             [Protocol.Block.Type.quote]: new QuoteBlock(),
             [Protocol.Block.Type.todo]: new TodoBlock(),
-            [Protocol.Block.Type.code]: new CodeBlock(),
             // [Protocol.Block.Type.toc]: new TocBlock(),
             [Protocol.Block.Type.file]: new FileBlock(),
             [Protocol.Block.Type.image]: new ImageBlock(),

libs/components/editor-blocks/package.json

@@ -38,7 +38,8 @@
         "react-window": "^1.8.7",
         "slate": "^0.81.1",
         "slate-react": "^0.81.0",
-        "style9": "^0.14.0"
+        "style9": "^0.14.0",
+        "html-escaper": "^3.0.3"
     },
     "devDependencies": {
         "@types/codemirror": "^5.60.5",

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

@@ -5,10 +5,10 @@ import {
     BlockEditor,
     HTML2BlockResult,
 } from '@toeverything/framework/virgo';
+import { unescape } from 'html-escaper';
 import {
     Block2HtmlProps,
     commonBlock2HtmlContent,
-    commonHTML2block,
 } from '../../utils/commonBlockClip';
 import { CodeView } from './CodeView';
 
@@ -34,12 +34,30 @@ export class CodeBlock extends BaseView {
         element: Element;
         editor: BlockEditor;
     }): Promise<HTML2BlockResult> {
-        return commonHTML2block({
+        // debugger;
-            element,
+        if (element.tagName === 'CODE') {
-            editor,
+            return [
-            type: this.type,
+                {
-            tagName: 'CODE',
+                    type: this.type,
-        });
+                    properties: {
+                        text: {
+                            value: [
+                                {
+                                    text: unescape(
+                                        (element as HTMLElement).innerText
+                                    ),
+                                },
+                            ],
+                        },
+                        lang:
+                            element.classList[0] &&
+                            element.classList[0].substr(9),
+                    },
+                    children: [],
+                },
+            ];
+        }
+        return null;
     }
 
     override async block2html(props: Block2HtmlProps) {

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

@@ -1,17 +1,17 @@
-import {
-    BaseView,
-    CreateView,
-    AsyncBlock,
-    HTML2BlockResult,
-    BlockEditor,
-} from '@toeverything/framework/virgo';
 import { Protocol } from '@toeverything/datasource/db-service';
-import { TextView } from './TextView';
+import {
+    AsyncBlock,
+    BaseView,
+    BlockEditor,
+    CreateView,
+    HTML2BlockResult,
+} from '@toeverything/framework/virgo';
 import {
     Block2HtmlProps,
     commonBlock2HtmlContent,
     commonHTML2block,
 } from '../../utils/commonBlockClip';
+import { TextView } from './TextView';
 
 export class TextBlock extends BaseView {
     type = Protocol.Block.Type.text;
@@ -41,12 +41,12 @@ export class TextBlock extends BaseView {
             tagName: [
                 'DIV',
                 'P',
-                'PRE',
+                // 'PRE',
                 'B',
                 'A',
                 'EM',
                 'U',
-                'CODE',
+                // 'CODE',
                 'S',
                 'DEL',
             ],

libs/components/editor-core/src/editor/clipboard/clipboardUtils.ts

@@ -1,10 +1,10 @@
+import { Protocol } from '@toeverything/datasource/db-service';
+import { AsyncBlock } from '../block';
 import { Editor } from '../editor';
 import { SelectBlock, SelectInfo } from '../selection';
-import { AsyncBlock } from '../block';
-import { ClipBlockInfo, OFFICE_CLIPBOARD_MIMETYPE } from './types';
 import { Clip } from './clip';
+import { ClipBlockInfo, OFFICE_CLIPBOARD_MIMETYPE } from './types';
 import { commonHTML2Block, commonHTML2Text } from './utils';
-
 export class ClipboardUtils {
     private _editor: Editor;
     constructor(editor: Editor) {
@@ -156,12 +156,37 @@ export class ClipboardUtils {
         return this.convertHtml2Blocks(htmlEl);
     }
     async convertHtml2Blocks(element: Element): Promise<ClipBlockInfo[]> {
-        const editableViews = this._editor.getEditableViews();
+        // const editableViews = this._editor.getEditableViews();
         // 如果block能够捕捉htmlElement则返回block的html2block
+        const CONVERT_SORT_LIST = [
+            Protocol.Block.Type.page,
+            Protocol.Block.Type.reference,
+            Protocol.Block.Type.code,
+            Protocol.Block.Type.text,
+            Protocol.Block.Type.heading1,
+            Protocol.Block.Type.heading2,
+            Protocol.Block.Type.heading3,
+            Protocol.Block.Type.quote,
+            Protocol.Block.Type.todo,
+            Protocol.Block.Type.file,
+            Protocol.Block.Type.image,
+            Protocol.Block.Type.divider,
+            Protocol.Block.Type.callout,
+            Protocol.Block.Type.youtube,
+            Protocol.Block.Type.figma,
+            Protocol.Block.Type.group,
+            Protocol.Block.Type.embedLink,
+            Protocol.Block.Type.numbered,
+            Protocol.Block.Type.bullet,
+            Protocol.Block.Type.grid,
+            Protocol.Block.Type.gridItem,
+            Protocol.Block.Type.groupDivider,
+        ];
+
         const [clipBlockInfos] = (
             await Promise.all(
-                editableViews.map(editableView => {
+                CONVERT_SORT_LIST.map(type => {
-                    return editableView?.html2block?.({
+                    return this._editor.getView(type)?.html2block?.({
                         editor: this._editor,
                         element: element,
                     });