Fix HTML and Delta not matching

slab · Jun 2, 2023 · b00880a · b00880a
1 parent 665d30c
commit b00880a
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 4 deletions.
diff --git a/blots/block.ts b/blots/block.ts
@@ -156,10 +156,22 @@ class BlockEmbed extends EmbedBlot {
   }
 
   insertAt(index: number, value: string, def?: unknown) {
-    if (typeof value === 'string' && value.endsWith('\n')) {
-      const block = this.scroll.create(Block.blotName);
-      this.parent.insertBefore(block, index === 0 ? this : this.next);
-      block.insertAt(0, value.slice(0, -1));
+    if (typeof value === 'string' && def == null) {
+      const lines = value.split('\n');
+      const lastLine = lines.pop();
+      const blocks = lines.map(line => {
+        const block = this.scroll.create(Block.blotName);
+        block.insertAt(0, line);
+        return block;
+      });
+      const ref = this.split(index);
+      blocks.forEach(block => {
+        this.parent.insertBefore(block, ref);
+      });
+      if (lastLine) {
+        const text = this.scroll.create('text', lastLine);
+        this.parent.insertBefore(text, ref);
+      }
     } else {
       super.insertAt(index, value, def);
     }

diff --git a/test/unit/blots/block-embed.js b/test/unit/blots/block-embed.js
@@ -115,6 +115,21 @@ describe('Block Embed', function () {
     `);
   });
 
+  it('insert multiple newlines before', function () {
+    const scroll = this.initialize(
+      Scroll,
+      '<iframe src="#" class="ql-video" frameborder="0" allowfullscreen="true"></iframe>',
+    );
+    scroll.insertAt(0, '\n\n\n');
+    scroll.optimize();
+    expect(scroll.domNode).toEqualHTML(`
+      <p><br></p>
+      <p><br></p>
+      <p><br></p>
+      <iframe src="#" class="ql-video" frameborder="0" allowfullscreen="true"></iframe>
+    `);
+  });
+
   it('insert newline after', function () {
     const scroll = this.initialize(
       Scroll,

diff --git a/test/unit/core/editor.js b/test/unit/core/editor.js
@@ -387,6 +387,19 @@ describe('Editor', function () {
       );
     });
 
+    it('insert formatted lines before block embed', function () {
+      const editor = this.initialize(
+        Editor,
+        '<p>0123</p><iframe src="#" class="ql-video" frameborder="0" allowfullscreen="true"></iframe>',
+      );
+      editor.applyDelta(
+        new Delta().retain(5).insert('a\nb').insert('\n', { header: 1 }),
+      );
+      expect(this.container).toEqualHTML(
+        '<p>0123</p><p>a</p><h1>b</h1><iframe src="#" class="ql-video" frameborder="0" allowfullscreen="true"></iframe>',
+      );
+    });
+
     it('insert attributed text with newline before block embed', function () {
       const editor = this.initialize(
         Editor,