handle inserting block embeds into list

slab · Sep 4, 2016 · fe7765e · fe7765e
1 parent a747a04
commit fe7765e
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 0 deletions.
diff --git a/formats/list.js b/formats/list.js
@@ -68,6 +68,16 @@ class List extends Container {
     return { [this.statics.blotName]: this.statics.formats(this.domNode) };
   }
 
+  insertBefore(blot, ref) {
+    if (blot instanceof ListItem) {
+      super.insertBefore(blot, ref);
+    } else {
+      let index = ref == null ? this.length() : ref.offset(this);
+      let after = this.split(index);
+      after.parent.insertBefore(blot, after);
+    }
+  }
+
   optimize() {
     super.optimize();
     let next = this.next;

diff --git a/test/unit/formats/list.js b/test/unit/formats/list.js
@@ -221,4 +221,33 @@ describe('List', function() {
     editor.formatLine(4, 1, { list: 'bullet' });
     expect(this.container).toEqualHTML('<ul><li class="ql-align-center">Test</li></ul>');
   });
+
+  it('insert block embed', function() {
+    let editor = this.initialize(Editor, '<ol><li>Test</li></ol>');
+    editor.insertEmbed(2, 'video', 'https://www.youtube.com/embed/QHH3iSeDBLo?showinfo=0');
+    expect(this.container).toEqualHTML(`
+      <ol><li>Te</li></ol>
+      <iframe class="ql-video" frameborder="0" allowfullscreen="true" src="https://www.youtube.com/embed/QHH3iSeDBLo?showinfo=0"></iframe>
+      <ol><li>st</li></ol>
+    `);
+  });
+
+  it('insert block embed at beginning', function() {
+    let editor = this.initialize(Editor, '<ol><li>Test</li></ol>');
+    editor.insertEmbed(0, 'video', 'https://www.youtube.com/embed/QHH3iSeDBLo?showinfo=0');
+    expect(this.container).toEqualHTML(`
+      <iframe class="ql-video" frameborder="0" allowfullscreen="true" src="https://www.youtube.com/embed/QHH3iSeDBLo?showinfo=0"></iframe>
+      <ol><li>Test</li></ol>
+    `);
+  });
+
+  it('insert block embed at end', function() {
+    let editor = this.initialize(Editor, '<ol><li>Test</li></ol>');
+    editor.insertEmbed(4, 'video', 'https://www.youtube.com/embed/QHH3iSeDBLo?showinfo=0');
+    expect(this.container).toEqualHTML(`
+      <ol><li>Test</li></ol>
+      <iframe class="ql-video" frameborder="0" allowfullscreen="true" src="https://www.youtube.com/embed/QHH3iSeDBLo?showinfo=0"></iframe>
+      <ol><li><br></li></ol>
+    `);
+  });
 });