fix(json-crdt-extensions): 🐛 improve how block elements are imported

Author: streamich

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

@@ -54,7 +54,27 @@ describe('.toViewRange()', () => {
     const html = '<p>Hello world</p>';
     const peritextMl = fromHtml(html);
     const view = toViewRange(peritextMl);
-    expect(view).toEqual(['Hello world', 0, [[0, 0, 0, 0]]]);
+    expect(view).toEqual(['\nHello world', 0, [[0, 0, 0, 0]]]);
+  });
+
+  test('two consecutive paragraphs', () => {
+    const html = '<p>Hello world</p><p>Goodbye world</p>';
+    const peritextMl = fromHtml(html);
+    const view = toViewRange(peritextMl);
+    expect(view).toEqual(['\nHello world\nGoodbye world', 0, [
+      [0, 0, 0, 0],
+      [0, 12, 12, 0],
+    ]]);
+  });
+
+  test('two paragraphs with whitespace gap', () => {
+    const html = '  <p>Hello world</p>\n  <p>Goodbye world</p>';
+    const peritextMl = fromHtml(html);
+    const view = toViewRange(peritextMl);
+    expect(view).toEqual(['\nHello world\nGoodbye world', 0, [
+      [0, 0, 0, 0],
+      [0, 12, 12, 0],
+    ]]);
   });
 
   test('single inline annotation', () => {

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

@@ -20,36 +20,47 @@ class ViewRangeBuilder {
 
   constructor (private registry: SliceRegistry) {}
 
-  private build0(node: PeritextMlNode): void {
+  private build0(node: PeritextMlNode, depth = 0): void {
+    const skipWhitespace = depth < 2;
     if (typeof node === 'string') {
+      if (skipWhitespace && !node.trim()) return;
       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) {
+        this.text += '\n';
         end = start;
         header =
           (SliceBehavior.Marker << SliceHeaderShift.Behavior) +
           (Anchor.Before << SliceHeaderShift.X1Anchor) +
           (Anchor.Before << SliceHeaderShift.X2Anchor);
-      } else {
+        const slice: ViewSlice = [header, start, end, type];
+        const data = attr?.data;
+        if (data) slice.push(data);
+        this.slices.push(slice);
+      }
+    }
+    for (let i = 2; i < length; i++) this.build0(node[i] as PeritextMlNode, depth + 1);
+    if (!!type || type === 0) {
+      let end: number = 0, header: number = 0;
+      if (inline) {
         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);
       }
-      const slice: ViewSlice = [header, start, end, type];
-      const data = attr?.data;
-      if (data) slice.push(data);
-      this.slices.push(slice);
     }
   }
 

src/json-crdt-extensions/quill-delta/QuillDeltaNode.ts

@@ -11,7 +11,6 @@ import type {ArrNode} from '../../json-crdt/nodes/arr/ArrNode';
 import type {StringChunk} from '../peritext/util/types';
 import type {OverlayTuple} from '../peritext/overlay/types';
 import type {QuillDataNode, QuillDeltaAttributes, QuillDeltaOp, QuillDeltaOpInsert} from './types';
-import {Point} from '../peritext/rga/Point';
 
 export class QuillDeltaNode extends ExtNode<QuillDataNode> {
   public readonly txt: Peritext<string>;