feat: serialize & deserialize

Author: WindRunnerMax

packages/core/src/clipboard/modules/copy.ts

@@ -93,9 +93,9 @@ export class Copy extends EditorModule {
       return root as T;
     }
     if (this.reflex.isBlock(current)) {
-      const lineFragment = document.createDocumentFragment();
-      current.children.forEach(child => this.serialize(child, lineFragment));
-      const context: CopyContext = { node: current, html: lineFragment };
+      const blockFragment = document.createDocumentFragment();
+      current.children.forEach(child => this.serialize(child, blockFragment));
+      const context: CopyContext = { node: current, html: blockFragment };
       this.plugin.call(CALLER_TYPE.SERIALIZE, context, PLUGIN_TYPE.BLOCK);
       root.appendChild(context.html);
       return root as T;

packages/core/src/clipboard/modules/paste.ts

@@ -67,6 +67,7 @@ export class Paste extends EditorModule {
       } else {
         const context: PasteContext = { nodes: root, html: current };
         this.plugin.call(CALLER_TYPE.DESERIALIZE, context);
+        return context.nodes;
       }
       return root;
     }

packages/core/src/index.ts

@@ -1,7 +1,7 @@
 export type { Clipboard } from "./clipboard";
 export { isDOMElement, isDOMNode, isDOMText, isHTMLElement } from "./clipboard/utils/deserialize";
 export { getFragmentText, getTextContent, serializeHTML } from "./clipboard/utils/serialize";
-export type { CopyContext, PasteContext } from "./clipboard/utils/types";
+export type { CopyContext, PasteContext, PasteNodesContext } from "./clipboard/utils/types";
 export type { Command } from "./command";
 export type { CommandFn, EditorCommands } from "./command/types";
 export type { Do } from "./do";

packages/core/src/plugin/modules/declare.ts

@@ -13,20 +13,20 @@ abstract class BasePlugin {
   public abstract readonly type: PluginType;
   /**
    * 插件调度优先级
-   * 渲染层面 优先级越高`DOM`结构在越外层
+   * 渲染层面 优先级越高 DOM 结构在越外层
    * */
   public readonly priority?: number;
   /** 插件销毁时调度 */
   public abstract destroy(): void;
   /** 插件命令注册 */
   public onCommand?: CommandFn;
-  /** 对`Range[]`进行装饰 */
+  /** 对 Range[] 进行装饰 */
   public onDecorate?(entry: NodeEntry): Range[];
-  /** 将`Fragment`序列化为`HTML` */
+  /** 将 Fragment 序列化为 HTML  */
   public serialize?(context: CopyContext): void;
-  /** 将`HTML`反序列化为`Fragment` */
+  /** 将 HTML 反序列化为 Fragment  */
   public deserialize?(context: PasteContext): void;
-  /** 对节点进行`Normalize` */
+  /** 对节点进行 Normalize  */
   public normalize?(entry: NodeEntry): void;
   /** 内容即将写入剪贴板 */
   public willSetToClipboard?(context: CopyContext): void;

packages/plugin/src/clipboard/index.ts

@@ -1,7 +1,7 @@
 import type { PasteContext } from "doc-editor-core";
 import type { EditorKit } from "doc-editor-core";
+import type { PasteNodesContext } from "doc-editor-core";
 import { BlockPlugin } from "doc-editor-core";
-import type { PasteNodesContext } from "doc-editor-core/dist/clipboard/utils/types";
 import type { BaseNode } from "doc-editor-delta";
 import { getUniqueId, isText } from "doc-editor-utils";
 

packages/plugin/src/image/index.tsx

@@ -1,12 +1,13 @@
 import "./styles/index.scss";
 
-import type { BlockContext, EditorKit } from "doc-editor-core";
+import type { BlockContext, CopyContext, EditorKit, PasteContext } from "doc-editor-core";
 import type { CommandFn } from "doc-editor-core";
-import { BlockPlugin } from "doc-editor-core";
-import type { RenderElementProps } from "doc-editor-delta";
+import { BlockPlugin, isHTMLElement } from "doc-editor-core";
+import type { BlockElement, RenderElementProps } from "doc-editor-delta";
 import { Editor, HistoryEditor, Range, Transforms } from "doc-editor-delta";
-import { existKey, getClosestBlockPath, getUniqueId } from "doc-editor-utils";
+import { existKey, getClosestBlockPath, getId, getUniqueId } from "doc-editor-utils";
 
+import { isMatchTag } from "../clipboard/utils/is";
 import { focusSelection } from "../shared/modules/selection";
 import { DocImage } from "./components/doc-image";
 import { IMAGE_KEY, IMAGE_STATUS } from "./types";
@@ -105,6 +106,39 @@ export class ImagePlugin extends BlockPlugin {
     imageInput.click();
   };
 
+  public serialize(context: CopyContext): void {
+    const element = context.node as BlockElement;
+    const img = element[IMAGE_KEY];
+    if (!img) return void 0;
+    const node = document.createElement("img");
+    node.src = img.src;
+    node.setAttribute("data-type", IMAGE_KEY);
+    node.appendChild(context.html);
+    context.html = node;
+  }
+
+  public deserialize(context: PasteContext): void {
+    const { html } = context;
+    if (!isHTMLElement(html)) return void 0;
+    if (isMatchTag(html, "img")) {
+      const src = html.getAttribute("src") || "";
+      const width = html.getAttribute("data-width") || 100;
+      const height = html.getAttribute("data-height") || 100;
+      context.nodes = [
+        {
+          [IMAGE_KEY]: {
+            src: src,
+            status: IMAGE_STATUS.SUCCESS,
+            width: Number(width),
+            height: Number(height),
+          },
+          uuid: getId(),
+          children: [{ text: "" }],
+        },
+      ];
+    }
+  }
+
   public render(context: BlockContext): JSX.Element {
     return (
       <DocImage editor={this.editor} element={context.element} readonly={this.readonly}></DocImage>