feat(json-crdt-extensions): 🎸 improve HTML import

Author: streamich

src/json-crdt-extensions/peritext/block/types.ts

@@ -1,3 +1,5 @@
+import {SliceBehavior} from '../slice/constants';
+
 export type PeritextMlNode = string | PeritextMlElement;
 
 export type PeritextMlElement<Tag extends string | number = string | number, Data = unknown, Inline = boolean> = [
@@ -9,4 +11,5 @@ export type PeritextMlElement<Tag extends string | number = string | number, Dat
 export interface PeritextMlAttributes<Data = unknown, Inline = boolean> {
   data?: Data;
   inline?: Inline;
+  behavior?: SliceBehavior;
 }

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

@@ -1,8 +1,10 @@
+import {Anchor} from '../../rga/constants';
 import {CommonSliceType} from '../../slice';
-import {fromHtml} from '../import-html';
+import {SliceBehavior, SliceHeaderShift} from '../../slice/constants';
+import {fromHtml, toViewRange} from '../import-html';
 
 describe('.fromHtml()', () => {
-  it('a single paragraph', () => {
+  test('a single paragraph', () => {
     const html = '<p>Hello world</p>';
     const peritextMl = fromHtml(html);
     expect(peritextMl).toEqual([
@@ -12,7 +14,7 @@ describe('.fromHtml()', () => {
     ]);
   });
 
-  it('a paragraph with trailing text', () => {
+  test('a paragraph with trailing text', () => {
     const html = '<p>Hello world</p> more text';
     const peritextMl = fromHtml(html);
     expect(peritextMl).toEqual([
@@ -23,7 +25,7 @@ describe('.fromHtml()', () => {
     ]);
   });
 
-  it('text formatted as italic', () => {
+  test('text formatted as italic', () => {
     const html = '<p>Hello world</p>\n<p><em>italic</em> text, <i>more italic</i></p>';
     const peritextMl = fromHtml(html);
     expect(peritextMl).toEqual([
@@ -32,10 +34,38 @@ describe('.fromHtml()', () => {
       [CommonSliceType.p, null, 'Hello world'],
       '\n',
       [CommonSliceType.p, null,
-        [CommonSliceType.i, null, 'italic'],
+        [CommonSliceType.i, {behavior: SliceBehavior.One, inline:true}, 'italic'],
         ' text, ',
-        [CommonSliceType.i, null, 'more italic'],
+        [CommonSliceType.i, {behavior: SliceBehavior.One, inline:true}, 'more italic'],
       ],
     ]);
   });
+});
+
+describe('.toViewRange()', () => {
+  test('plain text', () => {
+    const html = 'this is plain text';
+    const peritextMl = fromHtml(html);
+    const view = toViewRange(peritextMl);
+    expect(view).toEqual(['this is plain text', 0, []]);
+  });
+
+  test('a single paragraph', () => {
+    const html = '<p>Hello world</p>';
+    const peritextMl = fromHtml(html);
+    const view = toViewRange(peritextMl);
+    expect(view).toEqual(['Hello world', 0, [[0, 0, 0, 0]]]);
+  });
+
+  test('single inline annotation', () => {
+    const html = 'here is some <em>italic</em> text';
+    const peritextMl = fromHtml(html);
+    const view = toViewRange(peritextMl);
+    expect(view).toEqual(['here is some italic text', 0, [
+      [(SliceBehavior.One << SliceHeaderShift.Behavior) +
+        (Anchor.Before << SliceHeaderShift.X1Anchor) +
+        (Anchor.After << SliceHeaderShift.X2Anchor),
+        13, 19, CommonSliceType.i],
+    ]]);
+  });
 });

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

@@ -2,10 +2,66 @@ import {html as _html} from 'very-small-parser/lib/html';
 import {fromHast as _fromHast} from 'very-small-parser/lib/html/json-ml/fromHast';
 import {SliceTypeName} from '../slice';
 import {registry as defaultRegistry} from '../registry/registry';
+import {SliceBehavior, SliceHeaderShift} from '../slice/constants';
+import {Anchor} from '../rga/constants';
 import type {JsonMlNode} from 'very-small-parser/lib/html/json-ml/types';
 import type {THtmlToken} from 'very-small-parser/lib/html/types';
 import type {PeritextMlNode} from '../block/types';
 import type {SliceRegistry} from '../registry/SliceRegistry';
+import type {ViewRange, ViewSlice} from '../editor/types';
+
+/**
+ * Flattens a {@link PeritextMlNode} tree structure into a {@link ViewRange}
+ * flat string with annotation ranges.
+ */
+class ViewRangeBuilder {
+  private text = '';
+  private slices: ViewSlice[] = [];
+
+  constructor (private registry: SliceRegistry) {}
+
+  private build0(node: PeritextMlNode): void {
+    if (typeof node === 'string') {
+      this.text += node;
+      return;
+    }
+    const [type, attr] = node;
+    const start = this.text.length;
+    const length = node.length;
+    const inline = !!attr?.inline;
+    for (let i = 2; i < length; i++) this.build0(node[i] as PeritextMlNode);
+    if (!!type || type === 0) {
+      let end: number = 0, header: number = 0;
+      if (!inline) {
+        end = start;
+        header =
+          (SliceBehavior.Marker << SliceHeaderShift.Behavior) +
+          (Anchor.Before << SliceHeaderShift.X1Anchor) +
+          (Anchor.Before << SliceHeaderShift.X2Anchor);
+      } else {
+        end = this.text.length;
+        const behavior: SliceBehavior = attr?.behavior ?? SliceBehavior.Many;
+        header =
+          (behavior << SliceHeaderShift.Behavior) +
+          (Anchor.Before << SliceHeaderShift.X1Anchor) +
+          (Anchor.After << SliceHeaderShift.X2Anchor);
+      }
+      const slice: ViewSlice = [header, start, end, type];
+      const data = attr?.data;
+      if (data) slice.push(data);
+      this.slices.push(slice);
+    }
+  }
+
+  public build(node: PeritextMlNode): ViewRange {
+    this.build0(node);
+    const view: ViewRange = [this.text, 0, this.slices];
+    return view;
+  }
+}
+
+export const toViewRange = (node: PeritextMlNode, registry: SliceRegistry = defaultRegistry): ViewRange =>
+  new ViewRangeBuilder(registry).build(node);
 
 export const fromJsonMl = (jsonml: JsonMlNode, registry: SliceRegistry = defaultRegistry): PeritextMlNode => {
   if (typeof jsonml === 'string') return jsonml;
@@ -29,9 +85,13 @@ export const fromJsonMl = (jsonml: JsonMlNode, registry: SliceRegistry = default
     const inline = attr['data-inline'] === 'true';
     if (data || inline) node[1] = {data, inline};
   }
-  if (typeof node[0] === 'number' && node[0] < 0 && node[1]) node[1].inline = true;
+  if (typeof node[0] === 'number' && node[0] < 0) {
+    const attr = node[1] || {};
+    attr.inline = true;
+    node[1] = attr;
+  }
   return node;
-};
+}
 
 export const fromHast = (hast: THtmlToken, registry?: SliceRegistry): PeritextMlNode => {
   const jsonml = _fromHast(hast);

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

@@ -2,23 +2,26 @@ import {PeritextMlElement} from '../block/types';
 import {NodeBuilder} from '../../../json-crdt-patch';
 import type {JsonMlElement} from 'very-small-parser/lib/html/json-ml/types';
 import type {FromHtmlConverter, SliceTypeDefinition, ToHtmlConverter} from './types';
+import {SliceBehavior} from '../slice/constants';
 
 export class SliceRegistry {
   private map: Map<string | number, SliceTypeDefinition<any, any, any>> = new Map();
   private toHtmlMap: Map<string | number, ToHtmlConverter<any>> = new Map();
-  private fromHtmlMap: Map<string, FromHtmlConverter[]> = new Map();
+  private fromHtmlMap: Map<string, [def: SliceTypeDefinition<any, any, any>, converter: FromHtmlConverter][]> = new Map();
 
   public add<Type extends number | string, Schema extends NodeBuilder, Inline extends boolean = true>(def: SliceTypeDefinition<Type, Schema, Inline>): void {
     const {type, toHtml, fromHtml} = def;
     this.map.set(type, def);
     if (toHtml) this.toHtmlMap.set(type, toHtml);
-    if (fromHtml)
+    if (fromHtml) {
+      const fromHtmlMap = this.fromHtmlMap;
       for (const htmlTag in fromHtml) {
         const converter = fromHtml[htmlTag];
-        const converters = this.fromHtmlMap.get(htmlTag) ?? [];
-        converters.push(converter);
-        this.fromHtmlMap.set(htmlTag, converters);
+        const converters = fromHtmlMap.get(htmlTag) ?? [];
+        converters.push([def, converter]);
+        fromHtmlMap.set(htmlTag, converters);
       }
+    }
   }
 
   public toHtml(el: PeritextMlElement): ReturnType<ToHtmlConverter<any>> | undefined {
@@ -30,9 +33,14 @@ export class SliceRegistry {
     const tag = el[0] + '';
     const converters = this.fromHtmlMap.get(tag);
     if (converters) {
-      for (const converter of converters) {
+      for (const [def, converter] of converters) {
         const result = converter(el);
-        if (result) return result;
+        if (result) {
+          const attr = result[1] ?? (result[1] = {});
+          attr.inline = def.inline ?? (def.type < 0);
+          attr.behavior = !attr.inline ? SliceBehavior.Marker : (def.behavior ?? SliceBehavior.Many);
+          return result;
+        }
       }
     }
     return;

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

@@ -2,6 +2,7 @@ import {s} from "../../../json-crdt-patch";
 import {JsonNodeView} from "../../../json-crdt/nodes";
 import {SchemaToJsonNode} from "../../../json-crdt/schema/types";
 import {CommonSliceType} from "../slice";
+import {SliceBehavior} from '../slice/constants';
 import {SliceRegistry} from "./SliceRegistry";
 
 /**
@@ -32,6 +33,7 @@ registry.add({
 
 registry.add({
   type: CommonSliceType.i,
+  behavior: SliceBehavior.One,
   schema: s.con(undefined),
   fromHtml: {
     em: () => [CommonSliceType.i, null],

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

@@ -3,10 +3,13 @@ import type {JsonNodeView} from '../../../json-crdt/nodes';
 import type {SchemaToJsonNode} from '../../../json-crdt/schema/types';
 import type {PeritextMlElement} from '../block/types';
 import type {JsonMlElement} from 'very-small-parser/lib/html/json-ml/types';
+import type {SliceBehavior} from '../slice/constants';
 
 export interface SliceTypeDefinition<Type extends number | string = number | string, Schema extends NodeBuilder = NodeBuilder, Inline extends boolean = true> {
   type: Type;
   schema: Schema;
+  behavior?: SliceBehavior;
+  inline?: boolean;
   toHtml?: ToHtmlConverter<PeritextMlElement<Type, JsonNodeView<SchemaToJsonNode<Schema>>, Inline>>;
   fromHtml?: {
     [htmlTag: string]: FromHtmlConverter<PeritextMlElement<Type, JsonNodeView<SchemaToJsonNode<Schema>>, Inline>>;