feat(json-crdt-extensions): 🎸 register block slice types

Author: streamich

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

@@ -1,5 +1,5 @@
 import {s} from '../../../json-crdt-patch';
-import {SliceBehavior, SliceTypeCon} from '../slice/constants';
+import {SliceBehavior, SliceTypeCon as TAG} from '../slice/constants';
 import {SliceRegistry, SliceRegistryEntry, TagType} from './SliceRegistry';
 import type {JsonNodeView} from '../../../json-crdt/nodes';
 import type {SchemaToJsonNode} from '../../../json-crdt/schema/types';
@@ -14,7 +14,7 @@ const undefSchema = s.con(undefined);
 
 // ----------------------------------------- Inline elements with "One" behavior
 
-const inlineOne = <Tag extends TagType = TagType>(
+const i0 = <Tag extends TagType = TagType>(
   tag: Tag,
   fromHtml?: SliceRegistryEntry<SliceBehavior.One, Tag, typeof undefSchema>['fromHtml'],
 ): void => {
@@ -30,24 +30,24 @@ const inlineOne = <Tag extends TagType = TagType>(
   );
 };
 
-const inlineOne2 = <Tag extends TagType = TagType>(tag: Tag, htmlTags: string[]): void => {
+const i1 = <Tag extends TagType = TagType>(tag: Tag, htmlTags: string[]): void => {
   const fromHtml = {} as Record<any, any>;
   for (const htmlTag of htmlTags) fromHtml[htmlTag] = () => [tag, null];
-  inlineOne(tag, fromHtml);
+  i0(tag, fromHtml);
 };
 
-inlineOne2(SliceTypeCon.i, ['i', 'em']);
-inlineOne2(SliceTypeCon.b, ['b', 'strong']);
-inlineOne2(SliceTypeCon.s, ['s', 'strike']);
-inlineOne(SliceTypeCon.u);
-inlineOne(SliceTypeCon.code);
-inlineOne(SliceTypeCon.mark);
-inlineOne(SliceTypeCon.kbd);
-inlineOne(SliceTypeCon.del);
-inlineOne(SliceTypeCon.ins);
-inlineOne(SliceTypeCon.sup);
-inlineOne(SliceTypeCon.sub);
-inlineOne(SliceTypeCon.math);
+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
 
@@ -58,7 +58,7 @@ const aSchema = s.obj({
 registry.add(
   new SliceRegistryEntry(
     SliceBehavior.Many,
-    SliceTypeCon.a,
+    TAG.a,
     aSchema,
     false,
     void 0,
@@ -69,7 +69,7 @@ registry.add(
           href: attr.href ?? '',
           title: attr.title ?? '',
         };
-        return [SliceTypeCon.a, {data, inline: true}] as PeritextMlElement<SliceTypeCon.a, any, true>;
+        return [TAG.a, {data, inline: true}] as PeritextMlElement<TAG.a, any, true>;
       },
     },
   )
@@ -89,4 +89,54 @@ registry.add(
 
 // --------------------------------------- Block elements with "Marker" behavior
 
-// registry.def(CommonSliceType.blockquote, undefSchema, SliceBehavior.Marker, false);
+const commonBlockSchema = s.obj({}, {
+  indent: s.con(0),
+  align: s.str<'left' | 'center' | 'right' | 'justify'>('left'),
+});
+
+const b0 = <Tag extends TagType = TagType>(
+  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);

src/json-crdt-extensions/peritext/slice/constants.ts

@@ -17,30 +17,34 @@ export const enum SliceTypeCon {
   pre = 3, // <pre>
   ul = 4, // <ul>
   ol = 5, // <ol>
-  tasklist = 6, // - [ ] Task list
-  h1 = 7, // <h1>
-  h2 = 8, // <h2>
-  h3 = 9, // <h3>
-  h4 = 10, // <h4>
-  h5 = 11, // <h5>
-  h6 = 12, // <h6>
-  title = 13, // <title>
-  subtitle = 14, // <subtitle>
-  br = 15, // <br>
-  nl = 16, // \n
-  hr = 17, // <hr>
-  page = 18, // Page break
-  aside = 19, // <aside>
-  embed = 20, // <embed>, <iframe>, <object>, <video>, <audio>, etc.
-  column = 21, // <div style="column-count: ..."> (represents 2 and 3 column layouts)
-  contents = 22, // Table of contents
-  table = 23, // <table>
-  row = 24, // Table row
-  cell = 25, // Table cell
-  collapselist = 26, // Collapsible list - > List item
-  collapse = 27, // Collapsible block
-  note = 28, // Note block
-  mathblock = 29, // <math> block
+  tl = 6, // - [ ] Task list
+  li = 7, // <li>
+  h1 = 8, // <h1>
+  h2 = 9, // <h2>
+  h3 = 10, // <h3>
+  h4 = 11, // <h4>
+  h5 = 12, // <h5>
+  h6 = 13, // <h6>
+  title = 14, // <title>
+  subtitle = 15, // <subtitle>
+  br = 16, // <br>
+  nl = 17, // \n
+  hr = 18, // <hr>
+  page = 19, // Page break
+  aside = 20, // <aside>
+  embed = 21, // <embed>, <iframe>, <object>, <video>, <audio>, etc.
+  column = 22, // <div style="column-count: ..."> (represents 2 and 3 column layouts)
+  contents = 23, // Table of contents
+  table = 24, // <table>
+  row = 25, // Table row
+  cell = 26, // Table cell
+
+  // TODO: rename to `cl` (collapsible list)?
+  collapselist = 27, // Collapsible list - > List item
+
+  collapse = 28, // Collapsible block
+  note = 29, // Note block
+  mathblock = 30, // <math> block
 
   // ------------------------------------------------ inline slices (-64 to -1)
   Cursor = -1,