Merge pull request slab#2882 from tzyl/fix/insert-inline-embed-before…

…-block-embed-with-delete Fix insert inline embed with delete before block embed
DevExpress · Aug 13, 2021 · 58b1747 · 58b1747
2 parents 9cbf004 + 40c1fa4
commit 58b1747
Show file tree

Hide file tree

Showing 2 changed files with 126 additions and 1 deletion.
diff --git a/core/editor.js b/core/editor.js
@@ -2,7 +2,7 @@ import cloneDeep from 'lodash.clonedeep';
 import isEqual from 'lodash.isequal';
 import merge from 'lodash.merge';
 import Delta, { AttributeMap } from 'quill-delta';
-import { LeafBlot } from 'parchment';
+import { LeafBlot, Scope } from 'parchment';
 import { Range } from './selection';
 import CursorBlot from '../blots/cursor';
 import Block, { BlockEmbed, bubbleFormats } from '../blots/block';
@@ -51,6 +51,12 @@ class Editor {
         } else if (typeof op.insert === 'object') {
           const key = Object.keys(op.insert)[0]; // There should only be one key
           if (key == null) return index;
+          if (
+            this.scroll.query(key, Scope.INLINE) != null &&
+            this.scroll.descendant(BlockEmbed, index)[0]
+          ) {
+            consumeNextNewline = true;
+          }
           this.scroll.insertAt(index, key, op.insert[key]);
         }
         scrollLength += length;

diff --git a/test/unit/core/editor.js b/test/unit/core/editor.js
@@ -406,6 +406,125 @@ describe('Editor', function() {
       );
     });
 
+    it('insert text with delete in existing block', function() {
+      const editor = this.initialize(
+        Editor,
+        '<p>0123</p><iframe src="#" class="ql-video" frameborder="0" allowfullscreen="true"></iframe>',
+      );
+      editor.applyDelta(
+        new Delta()
+          .retain(4)
+          .insert('abc')
+          // Retain newline at end of block being inserted into.
+          .retain(1)
+          .delete(1),
+      );
+      expect(this.container).toEqualHTML('<p>0123abc</p>');
+    });
+
+    it('insert text with delete 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)
+          // Explicit newline required to maintain correct index calculation for the delete.
+          .insert('abc\n')
+          .delete(1),
+      );
+      expect(this.container).toEqualHTML('<p>0123</p><p>abc</p>');
+    });
+
+    it('insert inline embed with delete in existing block', function() {
+      const editor = this.initialize(
+        Editor,
+        '<p>0123</p><iframe src="#" class="ql-video" frameborder="0" allowfullscreen="true"></iframe>',
+      );
+      editor.applyDelta(
+        new Delta()
+          .retain(4)
+          .insert({ image: '/assets/favicon.png' })
+          // Retain newline at end of block being inserted into.
+          .retain(1)
+          .delete(1),
+      );
+      expect(this.container).toEqualHTML(
+        '<p>0123<img src="/assets/favicon.png"></p>',
+      );
+    });
+
+    it('insert inline embed with delete 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({ image: '/assets/favicon.png' })
+          // Explicit newline required to maintain correct index calculation for the delete.
+          .insert('\n')
+          .delete(1),
+      );
+      expect(this.container).toEqualHTML(
+        '<p>0123</p><p><img src="/assets/favicon.png"></p>',
+      );
+    });
+
+    it('insert inline embed with delete before block embed using delete op first', 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)
+          .delete(1)
+          .insert({ image: '/assets/favicon.png' })
+          // Explicit newline required to maintain correct index calculation for the delete.
+          .insert('\n'),
+      );
+      expect(this.container).toEqualHTML(
+        '<p>0123</p><p><img src="/assets/favicon.png"></p>',
+      );
+    });
+
+    it('insert inline embed and text with delete 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({ image: '/assets/favicon.png' })
+          // Explicit newline required to maintain correct index calculation for the delete.
+          .insert('abc\n')
+          .delete(1),
+      );
+      expect(this.container).toEqualHTML(
+        '<p>0123</p><p><img src="/assets/favicon.png">abc</p>',
+      );
+    });
+
+    it('insert block embed with delete 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({ video: '#changed' })
+          .delete(1),
+      );
+      expect(this.container).toEqualHTML(
+        '<p>0123</p><iframe src="#changed" class="ql-video" frameborder="0" allowfullscreen="true"></iframe>',
+      );
+    });
+
     it('improper block embed insert', function() {
       const editor = this.initialize(Editor, '<p>0123</p>');
       editor.applyDelta(new Delta().retain(2).insert({ video: '#' }));