Make sure blot is attached before calling formatAt

slab · Jul 6, 2023 · f944852 · f944852
1 parent dc49c1b
commit f944852
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 3 deletions.
diff --git a/blots/scroll.ts b/blots/scroll.ts
@@ -192,8 +192,10 @@ class Scroll extends ScrollBlot {
 
       renderBlocks.forEach(renderBlock => {
         if (renderBlock.type === 'block') {
-          const block = this.createBlock(renderBlock.attributes);
-          this.insertBefore(block, refBlot || undefined);
+          const block = this.createBlock(
+            renderBlock.attributes,
+            refBlot || undefined,
+          );
           insertInlineContents(block, 0, renderBlock.delta);
         } else {
           const blockEmbed = this.create(
@@ -382,7 +384,7 @@ class Scroll extends ScrollBlot {
     return renderBlocks;
   }
 
-  private createBlock(attributes: AttributeMap) {
+  private createBlock(attributes: AttributeMap, refBlot?: Blot) {
     let blotName: string | undefined;
     const formats: AttributeMap = {};
 
@@ -400,6 +402,8 @@ class Scroll extends ScrollBlot {
       blotName ? attributes[blotName] : undefined,
     ) as ParentBlot;
 
+    this.insertBefore(block, refBlot || undefined);
+
     const length = block.length();
     Object.entries(formats).forEach(([key, value]) => {
       block.formatAt(0, length, key, value);

diff --git a/test/unit/core/editor.js b/test/unit/core/editor.js
@@ -1,6 +1,12 @@
 import Delta from 'quill-delta';
 import Editor from '../../../core/editor';
+import Block from '../../../blots/block';
 import Selection, { Range } from '../../../core/selection';
+import Scroll from '../../../blots/scroll';
+import { Registry } from 'parchment';
+import Text from '../../../blots/text';
+import Emitter from '../../../core/emitter';
+import Break from '../../../blots/break';
 
 describe('Editor', function () {
   describe('insert', function () {
@@ -843,6 +849,37 @@ describe('Editor', function () {
       ]);
     });
 
+    it('insert before formatting', function () {
+      class MyBlot extends Block {
+        static className = 'my-blot';
+        static blotName = 'my-blot';
+
+        formatAt(index, length, name, value) {
+          super.formatAt(index, length, name, value);
+          if (name === 'test-style' && !!this.prev) {
+            this.domNode.setAttribute('test-style', value);
+          }
+        }
+      }
+
+      const registry = new Registry();
+      registry.register(MyBlot, Block, Break, Text);
+      const editor = new Editor(
+        new Scroll(registry, document.createElement('div'), {
+          emitter: new Emitter(),
+        }),
+      );
+
+      editor.insertContents(
+        0,
+        new Delta()
+          .insert('\n')
+          .insert('hi')
+          .insert('\n', { 'my-blot': true, 'test-style': 'random' }),
+      );
+      expect(editor.scroll.domNode.innerHTML).toContain('test-style="random"');
+    });
+
     describe('prepend to block embed', function () {
       it('without ending with \\n', function () {
         const editor = this.initialize(Editor, `${video}`);