Merge pull request #96 from inokawa/object-void

Serialize void node data on parse phase

Author: inokawa

e2e/edix.ts

@@ -36,11 +36,16 @@ export const getText = async (
     (element, [NON_EDITABLE_PLACEHOLDER, { blockTag }]) => {
       const document = element.ownerDocument;
       return window.edix
-        .takeDomSnapshot(document, element, {
-          _isBlock: blockTag
-            ? (n) => n.tagName === blockTag.toUpperCase()
-            : undefined,
-        })
+        .takeDomSnapshot(
+          document,
+          element,
+          {
+            _isBlock: blockTag
+              ? (n) => n.tagName === blockTag.toUpperCase()
+              : undefined,
+          },
+          () => ({})
+        )
         .map((r) => {
           return r.reduce<string>((acc, n) => {
             return acc + (n.type === 1 ? n.text : NON_EDITABLE_PLACEHOLDER);
@@ -61,11 +66,16 @@ export const getSeletedText = (
       const selection = document.getSelection()!;
       const range = selection.getRangeAt(0)!.cloneContents();
       return window.edix
-        .takeDomSnapshot(document, range, {
-          _isBlock: blockTag
-            ? (n) => n.tagName === blockTag.toUpperCase()
-            : undefined,
-        })
+        .takeDomSnapshot(
+          document,
+          range,
+          {
+            _isBlock: blockTag
+              ? (n) => n.tagName === blockTag.toUpperCase()
+              : undefined,
+          },
+          () => ({})
+        )
         .map((r) => {
           return r.reduce<string>((acc, n) => {
             return acc + (n.type === 1 ? n.text : NON_EDITABLE_PLACEHOLDER);

src/core/commands/edit.ts

@@ -2,17 +2,17 @@ import { compareLine, comparePosition } from "../position";
 import {
   DocFragment,
   NODE_TEXT,
-  NodeRef,
+  NodeData,
   Position,
   SelectionSnapshot,
   Writeable,
 } from "../types";
 
-const isTextNode = (node: NodeRef) => node.type === NODE_TEXT;
-const getNodeSize = (node: NodeRef): number =>
+const isTextNode = (node: NodeData) => node.type === NODE_TEXT;
+const getNodeSize = (node: NodeData): number =>
   isTextNode(node) ? node.text.length : 1;
 
-const insertNodeAfter = (line: NodeRef[], index: number, node: NodeRef) => {
+const insertNodeAfter = (line: NodeData[], index: number, node: NodeData) => {
   const target = line[index]!;
   if (isTextNode(node) && isTextNode(target)) {
     line[index] = { type: NODE_TEXT, text: target.text + node.text };
@@ -21,8 +21,8 @@ const insertNodeAfter = (line: NodeRef[], index: number, node: NodeRef) => {
   }
 };
 
-const join = (...lines: (readonly NodeRef[])[]): readonly NodeRef[] => {
-  const line: NodeRef[] = [];
+const join = (...lines: (readonly NodeData[])[]): readonly NodeData[] => {
+  const line: NodeData[] = [];
   for (let i = 0; i < lines.length; i++) {
     const current = lines[i]!;
     if (!line.length) {
@@ -37,9 +37,9 @@ const join = (...lines: (readonly NodeRef[])[]): readonly NodeRef[] => {
 };
 
 const split = (
-  line: readonly NodeRef[],
+  line: readonly NodeData[],
   offset: number
-): [readonly NodeRef[], readonly NodeRef[]] => {
+): [readonly NodeData[], readonly NodeData[]] => {
   for (let i = 0; i < line.length; i++) {
     const node = line[i]!;
     const length = getNodeSize(node);
@@ -106,7 +106,7 @@ const replaceRange = (
   const before = splitByStart[0];
   const after = end ? split(doc[end[0]]!, end[1])[1] : splitByStart[1];
 
-  const lines: (readonly NodeRef[])[] = [...fragment];
+  const lines: (readonly NodeData[])[] = [...fragment];
   if (lines.length) {
     lines[0] = join(before, lines[0]!);
     lines[lines.length - 1] = join(lines[lines.length - 1]!, after);

src/core/dom/index.ts

@@ -14,7 +14,7 @@ import { comparePosition } from "../position";
 import {
   DocFragment,
   Position,
-  NodeRef,
+  NodeData,
   SelectionSnapshot,
   NODE_TEXT,
   NODE_VOID,
@@ -304,15 +304,16 @@ export const takeSelectionSnapshot = (
 export const takeDomSnapshot = (
   document: Document,
   root: Node,
-  config: ParserConfig
+  config: ParserConfig,
+  serializeVoid: (node: Element) => Record<string, unknown> | void
 ): DocFragment => {
   return parse(
     (readNext) => {
       let type: NodeType | void;
-      let row: NodeRef[] | null = null;
+      let row: NodeData[] | null = null;
       let text = "";
 
-      const rows: NodeRef[][] = [];
+      const rows: NodeData[][] = [];
 
       const completeNode = (element?: Element) => {
         if (!row) {
@@ -323,7 +324,10 @@ export const takeDomSnapshot = (
           text = "";
         }
         if (element) {
-          row.push({ type: NODE_VOID, node: element });
+          const data = serializeVoid(element);
+          if (data) {
+            row.push({ type: NODE_VOID, data });
+          }
         }
       };
       const completeRow = () => {

src/core/editable.ts

@@ -114,7 +114,8 @@ export const editable = <T>(
   {
     schema: {
       single: isSingleline,
-      data: serialize,
+      js: docToJS,
+      void: serializeVoid,
       copy,
       paste: getPastableData,
     },
@@ -165,9 +166,9 @@ export const editable = <T>(
   const document = getCurrentDocument(element);
 
   const history = createHistory<
-    readonly [value: T, selection: SelectionSnapshot]
+    readonly [value: DocFragment, selection: SelectionSnapshot]
   >([
-    serialize(takeDomSnapshot(document, element, parserConfig)),
+    takeDomSnapshot(document, element, parserConfig, serializeVoid),
     currentSelection,
   ]);
 
@@ -218,20 +219,19 @@ export const editable = <T>(
   };
 
   const updateState = (
-    dom: DocFragment,
+    doc: DocFragment,
     selection: SelectionSnapshot,
     prevSelection: SelectionSnapshot
   ) => {
     if (!readonly) {
       if (isSingleline) {
-        [dom, selection] = flatten(dom, selection);
+        [doc, selection] = flatten(doc, selection);
       }
-      const value = serialize(dom);
 
       history.set([history.get()[0], prevSelection]);
-      history.push([value, selection]);
+      history.push([doc, selection]);
       currentSelection = selection;
-      onChange(value);
+      onChange(docToJS(doc));
     }
 
     restoreSelectionOnTimeout();
@@ -258,7 +258,12 @@ export const editable = <T>(
         isSingleline,
         parserConfig
       );
-      const value = takeDomSnapshot(document, element, parserConfig);
+      const value = takeDomSnapshot(
+        document,
+        element,
+        parserConfig,
+        serializeVoid
+      );
 
       // Revert DOM
       let m: MutationRecord | undefined;
@@ -298,7 +303,8 @@ export const editable = <T>(
       const dom: Writeable<DocFragment> = takeDomSnapshot(
         document,
         element,
-        parserConfig
+        parserConfig,
+        serializeVoid
       ) as Writeable<DocFragment>; // TODO improve type
 
       let command: (typeof commands)[number] | undefined;
@@ -330,7 +336,7 @@ export const editable = <T>(
 
         if (nextHistory) {
           currentSelection = nextHistory[1];
-          onChange(nextHistory[0]);
+          onChange(docToJS(nextHistory[0]));
 
           restoreSelectionOnTimeout();
         }
@@ -396,7 +402,7 @@ export const editable = <T>(
 
     copy(
       dataTransfer,
-      takeDomSnapshot(document, selected, parserConfig),
+      takeDomSnapshot(document, selected, parserConfig, serializeVoid),
       selected
     );
   };
@@ -408,7 +414,7 @@ export const editable = <T>(
     } else {
       execCommand(
         InsertFragment,
-        takeDomSnapshot(document, data, parserConfig)
+        takeDomSnapshot(document, data, parserConfig, serializeVoid)
       );
     }
   };

src/core/schema/plain.ts

@@ -1,8 +1,8 @@
 import { NODE_TEXT, type DocFragment } from "../types";
 import type { EditableSchema } from "./types";
 
-const serializeToString = (snapshot: DocFragment): string => {
-  return snapshot.reduce((acc, r, i) => {
+const toString = (doc: DocFragment): string => {
+  return doc.reduce((acc, r, i) => {
     if (i !== 0) {
       acc += "\n";
     }
@@ -22,9 +22,10 @@ export const plainSchema = ({
 } = {}): EditableSchema<string> => {
   return {
     single: !multiline,
-    data: serializeToString,
+    js: toString,
+    void: () => {}, // not supported
     copy: (dataTransfer, data) => {
-      dataTransfer.setData("text/plain", serializeToString(data));
+      dataTransfer.setData("text/plain", toString(data));
     },
     paste: (dataTransfer) => {
       return dataTransfer.getData("text/plain");

src/core/schema/structured.ts

@@ -1,23 +1,23 @@
 import { isCommentNode } from "../dom/parser";
-import { NODE_TEXT, type NodeRef } from "../types";
+import { NODE_TEXT, TextNode, type NodeData } from "../types";
 import type { EditableSchema } from "./types";
 
 export interface EditableVoidSerializer<T> {
   is: (node: HTMLElement) => boolean;
   data: (node: HTMLElement) => T;
-  plain: (node: HTMLElement) => string;
+  plain: (data: T) => string;
 }
 
-const toString = (node: Node): string => node.textContent!;
+const emptyString = (): string => "";
 
 export const voidNode = <const D>({
   is,
   data,
-  plain = toString,
+  plain = emptyString,
 }: {
   is: (node: HTMLElement) => boolean;
   data: (node: HTMLElement) => D;
-  plain?: (node: HTMLElement) => string;
+  plain?: (data: D) => string;
 }): EditableVoidSerializer<D> => {
   return {
     is,
@@ -30,11 +30,12 @@ type Prettify<T> = {
   [K in keyof T]: T[K];
 } & {};
 
+type ExtractVoidData<T> = T extends EditableVoidSerializer<infer D> ? D : never;
 type ExtractVoidNode<T> = Prettify<
   {
     [K in keyof T]: {
       type: K;
-      data: T[K] extends EditableVoidSerializer<infer D> ? D : never;
+      data: ExtractVoidData<T[K]>;
     };
   }[keyof T]
 >;
@@ -56,41 +57,57 @@ export const schema = <
     ? (ExtractVoidNode<V> | { type: "text"; text: string })[][]
     : (ExtractVoidNode<V> | { type: "text"; text: string })[]
 > => {
+  type VoidNodeData = ExtractVoidData<V[keyof V]>;
+  type TextNodeType = { type: "text"; text: string };
   type VoidNodeType = ExtractVoidNode<V>;
-  type RowType = (VoidNodeType | { type: "text"; text: string })[];
+  type RowType = (TextNodeType | VoidNodeType)[];
 
   const voidSerializers = Object.entries(voids);
 
-  const serializeRow = (r: readonly NodeRef[]): RowType => {
+  const textCache = new WeakMap<TextNode, TextNodeType>();
+  // TODO replace VoidNodeData with VoidNode
+  const voidCache = new WeakMap<VoidNodeData, VoidNodeType>();
+
+  const serializeRow = (r: readonly NodeData[]): RowType => {
     return r.reduce((acc, t) => {
       if (t.type === NODE_TEXT) {
-        acc.push({ type: "text", text: t.text });
-      } else {
-        for (const [type, s] of voidSerializers) {
-          if (s.is(t.node as HTMLElement)) {
-            acc.push({
-              type,
-              data: s.data(t.node as HTMLElement),
-            } as VoidNodeType);
-            break;
-          }
+        let text = textCache.get(t);
+        if (!text) {
+          textCache.set(t, (text = { type: "text", text: t.text }));
         }
+        acc.push(text);
+      } else {
+        acc.push(voidCache.get(t.data as VoidNodeData)!);
       }
       return acc;
     }, [] as RowType);
   };
 
   return {
     single: !multiline,
-    data: multiline
-      ? (snap) => {
-          return snap.map(serializeRow);
+    js: multiline
+      ? (doc) => {
+          return doc.map(serializeRow);
         }
-      : (snap) => {
-          return serializeRow(snap[0]!) satisfies RowType as any; // TODO improve type
+      : (doc) => {
+          return serializeRow(doc[0]!) satisfies RowType as any; // TODO improve type
         },
-    copy: (dataTransfer, snap, dom) => {
-      const str = snap.reduce((acc, r, i) => {
+    void: (element) => {
+      for (const [type, s] of voidSerializers) {
+        if (s.is(element as HTMLElement)) {
+          const data = s.data(element as HTMLElement) as VoidNodeData;
+          // TODO improve
+          voidCache.set(data, {
+            type,
+            data: { ...data },
+          } as VoidNodeType);
+          return data;
+        }
+      }
+      return;
+    },
+    copy: (dataTransfer, doc, dom) => {
+      const str = doc.reduce((acc, r, i) => {
         if (i !== 0) {
           acc += "\n";
         }
@@ -99,14 +116,9 @@ export const schema = <
           r.reduce((acc, t) => {
             if (t.type === NODE_TEXT) {
               return acc + t.text;
-            } else {
-              for (const [, s] of voidSerializers) {
-                if (s.is(t.node as HTMLElement)) {
-                  return acc + s.plain(t.node as HTMLElement);
-                }
-              }
             }
-            return acc;
+            const voidNode = voidCache.get(t.data as VoidNodeData)!;
+            return acc + voids[voidNode.type]!.plain(t.data);
           }, "")
         );
       }, "");