feat(json-crdt-extensions): 🎸 lazily construct slice registry on first use

Author: streamich

src/json-crdt-extensions/peritext/editor/Editor.ts

@@ -5,7 +5,6 @@ import {EditorSlices} from './EditorSlices';
 import {next, prev} from 'sonic-forest/lib/util';
 import {printTree} from 'tree-dump/lib/printTree';
 import {SliceRegistry} from '../registry/SliceRegistry';
-import {registerCommon} from '../registry/registerCommon';
 import {PersistedSlice} from '../slice/PersistedSlice';
 import {stringify} from '../../../json-text/stringify';
 import {CommonSliceType, type SliceTypeSteps, type SliceType, type SliceTypeStep} from '../slice';
@@ -75,7 +74,7 @@ export class Editor<T = string> implements Printable {
   /**
    * The registry holds definitions of detailed behavior of various slice tags.
    */
-  public readonly registry: SliceRegistry;
+  public registry: SliceRegistry | undefined;
 
   /**
    * Formatting basic inline formatting which will be applied to the next
@@ -93,14 +92,17 @@ export class Editor<T = string> implements Printable {
   public readonly newSliceConfig = new ValueSyncStore<NewSliceConfig | undefined>(void 0);
 
   constructor(public readonly txt: Peritext<T>) {
-    const registry = this.registry = new SliceRegistry();
-    registerCommon(registry); // TODO: figure out a better place to put this
-
     this.saved = new EditorSlices(txt, txt.savedSlices);
     this.extra = new EditorSlices(txt, txt.extraSlices);
     this.local = new EditorSlices(txt, txt.localSlices);
   }
 
+  public getRegistry(): SliceRegistry {
+    let registry = this.registry;
+    if (!registry) this.registry = registry = SliceRegistry.withCommon();
+    return registry;
+  }
+
   public text(): string {
     return this.txt.strApi().view();
   }
@@ -836,7 +838,7 @@ export class Editor<T = string> implements Printable {
   }
 
   public getContainerPath(steps: SliceTypeSteps): SliceTypeSteps {
-    const registry = this.registry;
+    const registry = this.getRegistry();
     const length = steps.length;
     for (let i = length - 1; i >= 0; i--) {
       const step = steps[i];
@@ -859,7 +861,7 @@ export class Editor<T = string> implements Printable {
       const disc1 = Array.isArray(step1) ? step1[1] : 0;
       const disc2 = Array.isArray(step2) ? step2[1] : 0;
       if (tag1 !== tag2 || disc1 !== disc2) return i - 1;
-      if (!this.registry.isContainer(tag1)) return i - 1;
+      if (!this.getRegistry().isContainer(tag1)) return i - 1;
     }
     return min;
   }
@@ -1223,7 +1225,7 @@ export class Editor<T = string> implements Printable {
             tab,
             [...this.cursors()].map((cursor) => (tab) => cursor.toString(tab)),
           ),
-        (tab) => this.registry.toString(tab),
+        (tab) => this.getRegistry().toString(tab),
         pending ? (() => `pending ${stringify(pendingFormatted)}`) : null,
       ])
     );

src/json-crdt-extensions/peritext/registry/SliceRegistry.ts

@@ -1,13 +1,18 @@
-import {SliceBehavior, type SliceTypeCon} from '../slice/constants';
+import {s} from '../../../json-crdt-patch';
+import {SliceBehavior, SliceTypeCon as TAG} from '../slice/constants';
 import {CommonSliceType} from '../slice';
 import {SliceRegistryEntry} from './SliceRegistryEntry';
 import {printTree} from 'tree-dump/lib/printTree';
 import type {PeritextMlElement} from '../block/types';
 import type {JsonMlElement} from 'very-small-parser/lib/html/json-ml/types';
 import type {FromHtmlConverter, ToHtmlConverter} from './types';
 import type {Printable} from 'tree-dump';
+import type {JsonNodeView} from '../../../json-crdt/nodes';
+import type {SchemaToJsonNode} from '../../../json-crdt/schema/types';
 
-export type TypeTag = SliceTypeCon | number | string;
+const undefSchema = s.con(undefined);
+
+export type TypeTag = TAG | number | string;
 
 /**
  * Slice registry contains a record of possible inline an block formatting
@@ -18,6 +23,114 @@ export type TypeTag = SliceTypeCon | number | string;
  * `/slices` directory.
  */
 export class SliceRegistry implements Printable {
+  /**
+   * Creates a new slice registry with common tag registered.
+   */
+  public static readonly withCommon = (): SliceRegistry => {
+    const registry = new SliceRegistry();
+    // --------------------------------------- Inline elements with "One" behavior
+    const i0 = <Tag extends TypeTag = TypeTag>(
+      tag: Tag,
+      fromHtml?: SliceRegistryEntry<SliceBehavior.One, Tag, typeof undefSchema>['fromHtml'],
+    ): void => {
+      registry.add(new SliceRegistryEntry(SliceBehavior.One, tag, undefSchema, false, void 0, fromHtml));
+    };
+    const i1 = <Tag extends TypeTag = TypeTag>(tag: Tag, htmlTags: string[]): void => {
+      const fromHtml = {} as Record<any, any>;
+      for (const htmlTag of htmlTags) fromHtml[htmlTag] = () => [tag, null];
+      i0(tag, fromHtml);
+    };
+    i1(TAG.i, ['i', 'em']);
+    i1(TAG.b, ['b', 'strong']);
+    i1(TAG.s, ['s', 'strike']);
+    i0(TAG.u);
+    i0(TAG.code);
+    i0(TAG.mark);
+    i0(TAG.kbd);
+    i0(TAG.del);
+    i0(TAG.ins);
+    i0(TAG.sup);
+    i0(TAG.sub);
+    i0(TAG.math);
+  
+    // -------------------------------------- Inline elements with "Many" behavior
+    const aSchema = s.obj({}, {
+      href: s.str<string>(''),
+      title: s.str<string>(''),
+    });
+    registry.add(
+      new SliceRegistryEntry(SliceBehavior.Many, TAG.a, aSchema, false, void 0, {
+        a: (jsonml) => {
+          const attr = jsonml[1] || {};
+          const data: JsonNodeView<SchemaToJsonNode<typeof aSchema>> = {
+            href: attr.href ?? '',
+            title: attr.title ?? '',
+          };
+          return [TAG.a, {data, inline: true}] as PeritextMlElement<TAG.a, any, true>;
+        },
+      }),
+    );
+  
+    // TODO: add more default annotations with "Many" behavior
+    // comment = SliceTypeCon.comment,
+    // font = SliceTypeCon.font,
+    // col = SliceTypeCon.col,
+    // bg = SliceTypeCon.bg,
+    // hidden = SliceTypeCon.hidden,
+    // footnote = SliceTypeCon.footnote,
+    // ref = SliceTypeCon.ref,
+    // iaside = SliceTypeCon.iaside,
+    // iembed = SliceTypeCon.iembed,
+    // bookmark = SliceTypeCon.bookmark,
+  
+    // ------------------------------------- Block elements with "Marker" behavior
+    const commonBlockSchema = s.obj(
+      {},
+      {
+        indent: s.con(0),
+        align: s.str<'left' | 'center' | 'right' | 'justify'>('left'),
+      },
+    );
+    const b0 = <Tag extends TypeTag = TypeTag>(tag: Tag, container: boolean) => {
+      registry.add(new SliceRegistryEntry(SliceBehavior.Marker, tag, commonBlockSchema, container));
+    };
+    b0(TAG.p, false);
+    b0(TAG.blockquote, true);
+    b0(TAG.codeblock, false);
+    b0(TAG.pre, false);
+    b0(TAG.ul, true);
+    b0(TAG.ol, true);
+    b0(TAG.tl, true);
+    b0(TAG.ol, true);
+    b0(TAG.li, true);
+    b0(TAG.h1, false);
+    b0(TAG.h2, false);
+    b0(TAG.h3, false);
+    b0(TAG.h4, false);
+    b0(TAG.h5, false);
+    b0(TAG.h6, false);
+    b0(TAG.title, false);
+    b0(TAG.subtitle, false);
+    // b0(TAG.br, false);
+    // b0(TAG.nl, false);
+    // b0(TAG.hr, false);
+    // b0(TAG.page, false);
+    // b0(TAG.aside, true);
+    // b0(TAG.embed, false);
+    // b0(TAG.column, true);
+    // b0(TAG.contents, true);
+    // b0(TAG.table, true);
+    // b0(TAG.row, true);
+    // b0(TAG.cell, true);
+    // b0(TAG.collapselist, true);
+    // b0(TAG.collapse, true);
+    // b0(TAG.note, true);
+    // b0(TAG.mathblock, false);
+
+    return registry;
+  };
+  
+
   private map: Map<TypeTag, SliceRegistryEntry> = new Map();
   private _fromHtml: Map<string, [entry: SliceRegistryEntry, converter: FromHtmlConverter][]> = new Map();
 
@@ -38,7 +151,7 @@ export class SliceRegistry implements Printable {
         _fromHtml.set(htmlTag, converters);
       }
     }
-    const tagStr = CommonSliceType[tag as SliceTypeCon];
+    const tagStr = CommonSliceType[tag as TAG];
     if (tagStr && typeof tagStr === 'string') _fromHtml.set(tagStr, [[entry, () => [tag, null]]]);
   }
 

src/json-crdt-extensions/peritext/registry/registerCommon.ts

@@ -14,7 +14,6 @@ export type PeritextDataTransferMarkdownExportTools = typeof import('./export-ma
 export type PeritextDataTransferMarkdownImportTools = typeof import('./import-markdown');
 
 export interface PeritextDataTransferOpts {
-  registry: SliceRegistry;
   htmlExport?: PeritextDataTransferHtmlExportTools;
   htmlImport?: PeritextDataTransferHtmlImportTools;
   mdExport?: PeritextDataTransferMarkdownExportTools;
@@ -131,7 +130,7 @@ export class PeritextDataTransfer<T = string> {
   }
 
   private _imp<D>(pos: number, data: D, transform: (data: D, registry: SliceRegistry) => PeritextMlNode): number {
-    const registry = this.opts.registry;
+    const registry = this.txt.editor.getRegistry();
     const json = transform(data, registry);
     return this.fromJson(pos, json);
   }
@@ -190,7 +189,7 @@ export class PeritextDataTransfer<T = string> {
       return range.start.viewPos();
     };
     if (html) {
-      const [view, style] = this.htmlI().importHtml(html, txt.editor.registry);
+      const [view, style] = this.htmlI().importHtml(html, txt.editor.getRegistry());
       if (style) {
         txt.editor.importStyle(range, style);
         return 0;

src/json-crdt-extensions/peritext/transfer/PeritextDataTransfer.ts

@@ -11,7 +11,6 @@ export const create = (txt: Peritext) => {
     htmlImport,
     mdExport,
     mdImport,
-    registry: txt.editor.registry,
   });
   return transfer;
 };