fix(json-crdt): 🐛 add behavior to attrs of imported node

Author: streamich

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

@@ -1,9 +1,13 @@
+import {SliceBehavior} from '../slice/constants';
+import {CommonSliceType} from '../slice';
 import type {PeritextMlElement} from '../block/types';
 import type {NodeBuilder} from '../../../json-crdt-patch';
-import {SliceBehavior} from '../slice/constants';
 import type {JsonMlElement} from 'very-small-parser/lib/html/json-ml/types';
 import type {FromHtmlConverter, SliceTypeDefinition, ToHtmlConverter} from './types';
 
+/**
+ * @todo Consider moving the registry under the `/transfer` directory.
+ */
 export class SliceRegistry {
   private map: Map<string | number, SliceTypeDefinition<any, any, any>> = new Map();
   private toHtmlMap: Map<string | number, ToHtmlConverter<any>> = new Map();
@@ -14,17 +18,22 @@ export class SliceRegistry {
     def: SliceTypeDefinition<Type, Schema, Inline>,
   ): void {
     const {type, toHtml, fromHtml} = def;
-    this.map.set(type, def);
+    const fromHtmlMap = this.fromHtmlMap;
     if (toHtml) this.toHtmlMap.set(type, toHtml);
     if (fromHtml) {
-      const fromHtmlMap = this.fromHtmlMap;
       for (const htmlTag in fromHtml) {
         const converter = fromHtml[htmlTag];
         const converters = fromHtmlMap.get(htmlTag) ?? [];
         converters.push([def, converter]);
         fromHtmlMap.set(htmlTag, converters);
       }
     }
+    const tag = CommonSliceType[type as any];
+    if (tag && typeof tag === 'string') {
+      fromHtmlMap.set(tag, [
+        [def, () => [type, null]]
+      ])
+    }
   }
 
   public def<Type extends number | string, Schema extends NodeBuilder, Inline extends boolean = true>(

src/json-crdt-extensions/peritext/transfer/__tests__/import-html.spec.ts

@@ -33,6 +33,57 @@ describe('.fromHtml()', () => {
       ],
     ]);
   });
+
+  test('can import a single <blockquote> block', () => {
+    const html = '<blockquote>2b||!2b</blockquote>';
+    const peritextMl = fromHtml(html);
+    expect(peritextMl).toEqual(['', null, [CommonSliceType.blockquote, null, '2b||!2b']]);
+  });
+
+  test('can import a single <blockquote> block with nested single <p>', () => {
+    const html = '<blockquote><p>2b||!2b</p></blockquote>';
+    const peritextMl = fromHtml(html);
+    expect(peritextMl).toEqual(['', null,
+      [CommonSliceType.blockquote, null,
+        [CommonSliceType.p, null, '2b||!2b']
+      ],
+    ]);
+  });
+
+  test('can import a single <blockquote> block after a <p> block', () => {
+    const html = '<p>123</p><blockquote>2b||!2b</blockquote>';
+    const peritextMl = fromHtml(html);
+    expect(peritextMl).toEqual(['', null,
+      [CommonSliceType.p, null, '123'],
+      [CommonSliceType.blockquote, null, '2b||!2b'],
+    ]);
+  });
+
+  test('can import a single <blockquote> block with nested single <p>, after a <p> block', () => {
+    const html = '<p>123</p><blockquote><p>2b||!2b</p></blockquote>';
+    const peritextMl = fromHtml(html);
+    expect(peritextMl).toEqual(['', null,
+      [CommonSliceType.p, null, '123'],
+      [CommonSliceType.blockquote, null,
+        [CommonSliceType.p, null, '2b||!2b']
+      ],
+    ]);
+  });
+
+  test('can import a single <blockquote> block with nested single <p>, after a <p> block with inline formatting', () => {
+    const html = '<p><b>1</b><code>2</code>3</p><blockquote><p>2b||!2b</p></blockquote>';
+    const peritextMl = fromHtml(html);
+    expect(peritextMl).toEqual(['', null,
+      [CommonSliceType.p, null,
+        [CommonSliceType.b, {behavior: SliceBehavior.One, inline: true}, '1'],
+        [CommonSliceType.code, {behavior: SliceBehavior.One, inline: true}, '2'],
+        '3'
+      ],
+      [CommonSliceType.blockquote, null,
+        [CommonSliceType.p, null, '2b||!2b']
+      ],
+    ]);
+  });
 });
 
 describe('.toViewRange()', () => {

src/json-crdt-extensions/peritext/transfer/import-html.ts

@@ -14,6 +14,15 @@ import type {SliceRegistry} from '../registry/SliceRegistry';
 import type {ViewStyle, ViewRange, ViewSlice} from '../editor/types';
 import type {ClipboardData} from './export-html';
 
+/**
+ * @todo Implement HTML normalization function, ensure that:
+ * 
+ * - <blockquote> and <p> nodes are treated correctly, especially when sole node
+ *   is nested.
+ * - list nodes are treated correctly.
+ * - <svg> nodes are converted to Base64 and inlined as data URL images.
+ */
+
 /**
  * Flattens a {@link PeritextMlNode} tree structure into a {@link ViewRange}
  * flat string with annotation ranges.
@@ -115,7 +124,7 @@ export const fromJsonMl = (jsonml: JsonMlNode, registry: SliceRegistry = default
     node[0] = res[0];
     node[1] = res[1];
   } else {
-    node[0] = SliceTypeName[tag as any] ?? tag;
+    if (typeof tag === 'string') node[0] = SliceTypeName[tag as any] ?? tag;
     const attr = jsonml[1] || {};
     let data = null;
     if (attr['data-attr'] !== void 0) {
@@ -126,15 +135,8 @@ export const fromJsonMl = (jsonml: JsonMlNode, registry: SliceRegistry = default
     const inline = inlineHtmlTag || attr['data-inline'] === 'true';
     if (data || inline) node[1] = {data, inline};
   }
-  if (typeof node[0] === 'number' && node[0] < 0) {
-    const attr = node[1] || {};
-    attr.inline = true;
-    node[1] = attr;
-  }
-  if (node.length < 3) {
-    const attr = node[1] || {};
-    if (attr.inline) return '';
-  }
+  if (typeof node[0] === 'number' && node[0] < 0) (node[1] ||= {}).inline = true;
+  if (node.length < 3 && (node[1] || {}).inline) return '';
   return node;
 };