initializing tables works

assets/core.styl

@@ -55,6 +55,12 @@ resets(arr)
     padding: 0
   p, pre, blockquote, h1, h2, h3, h4, h5, h6
     counter-reset: resets(0..MAX_INDENT)
+  table
+    border-collapse: collapse
+  tr, td
+    border: 1px solid #000
+  td
+    padding: 2px 5px
   ol
     padding-left: 1.5em
   li

formats/table.js

@@ -0,0 +1,67 @@
+import Block from '../blots/block';
+import Container from '../blots/container';
+
+class TableCell extends Block {
+  static create(value) {
+    const node = super.create(value);
+    if (value && value.row) {
+      node.setAttribute('data-row', value.row);
+    } else {
+      node.setAttribute(
+        'data-row',
+        Math.random()
+          .toString(36)
+          .slice(4),
+      );
+    }
+    return node;
+  }
+
+  static formats(domNode) {
+    if (domNode.hasAttribute('data-row')) {
+      return {
+        row: domNode.getAttribute('data-row'),
+      };
+    }
+    return null;
+  }
+}
+TableCell.blotName = 'table';
+TableCell.tagName = 'TD';
+
+class TableBody extends Container {}
+TableBody.blotName = 'table-body';
+TableBody.tagName = 'TBODY';
+
+class TableRow extends Container {
+  checkMerge() {
+    if (super.checkMerge()) {
+      const thisCell = this.children.tail.formats();
+      const nextCell = this.next.children.head.formats();
+      return thisCell.table.row === nextCell.table.row;
+    }
+    return false;
+  }
+}
+TableRow.blotName = 'table-row';
+TableRow.tagName = 'TR';
+
+class TableContainer extends Container {}
+TableContainer.blotName = 'table-container';
+TableContainer.tagName = 'TABLE';
+
+TableContainer.defaultChild = TableBody;
+TableContainer.allowedChildren = [TableBody];
+TableBody.requiredParent = TableContainer;
+
+TableBody.defaultChild = TableRow;
+TableBody.allowedChildren = [TableRow];
+TableRow.requiredParent = TableBody;
+
+TableRow.defaultChild = TableCell;
+TableRow.allowedChildren = [TableCell];
+TableCell.requiredParent = TableRow;
+
+TableCell.requiredParent = TableRow;
+
+export { TableContainer, TableBody, TableRow, TableCell };

modules/clipboard.js

@@ -207,7 +207,7 @@ function deltaEndsWith(delta, text) {
 function isLine(node) {
   if (node.childNodes.length === 0) return false; // Exclude embed blocks
   const style = computeStyle(node);
-  return ['block', 'list-item'].indexOf(style.display) > -1;
+  return ['block', 'list-item', 'table-cell'].indexOf(style.display) > -1;
 }
 
 function traverse(node, elementMatchers, textMatchers) {

quill.js

@@ -11,6 +11,12 @@ import Indent from './formats/indent';
 import Blockquote from './formats/blockquote';
 import Header from './formats/header';
 import List, { ListContainer } from './formats/list';
+import {
+  TableContainer,
+  TableBody,
+  TableRow,
+  TableCell,
+} from './formats/table';
 
 import { BackgroundClass, BackgroundStyle } from './formats/background';
 import { ColorClass, ColorStyle } from './formats/color';
@@ -66,6 +72,9 @@ Quill.register(
 Quill.register(
   {
     'blots/list-container': ListContainer,
+    'blots/table-container': TableContainer,
+    'blots/table-body': TableBody,
+    'blots/table-row': TableRow,
 
     'formats/align': AlignClass,
     'formats/direction': DirectionClass,
@@ -80,6 +89,7 @@ Quill.register(
     'formats/code-block': CodeBlock,
     'formats/header': Header,
     'formats/list': List,
+    'formats/table': TableCell,
 
     'formats/bold': Bold,
     'formats/code': InlineCode,

test/unit.js

@@ -25,6 +25,7 @@ import './unit/formats/header';
 import './unit/formats/indent';
 import './unit/formats/list';
 import './unit/formats/bold';
+import './unit/formats/table';
 
 import './unit/modules/clipboard';
 import './unit/modules/history';

test/unit/formats/table.js

@@ -0,0 +1,56 @@
+import Delta from 'quill-delta';
+import Editor from '../../../core/editor';
+
+const tableDelta = new Delta()
+  .insert('A1')
+  .insert('\n', { table: { row: 'a' } })
+  .insert('A2')
+  .insert('\n', { table: { row: 'a' } })
+  .insert('A3')
+  .insert('\n', { table: { row: 'a' } })
+  .insert('B1')
+  .insert('\n', { table: { row: 'b' } })
+  .insert('B2')
+  .insert('\n', { table: { row: 'b' } })
+  .insert('B3')
+  .insert('\n', { table: { row: 'b' } })
+  .insert('C1')
+  .insert('\n', { table: { row: 'c' } })
+  .insert('C2')
+  .insert('\n', { table: { row: 'c' } })
+  .insert('C3')
+  .insert('\n', { table: { row: 'c' } });
+
+const tableHTML = `
+  <table>
+    <tr>
+      <td data-row="a">A1</td>
+      <td data-row="a">A2</td>
+      <td data-row="a">A3</td>
+    </tr>
+    <tr>
+      <td data-row="b">B1</td>
+      <td data-row="b">B2</td>
+      <td data-row="b">B3</td>
+    </tr>
+    <tr>
+      <td data-row="c">C1</td>
+      <td data-row="c">C2</td>
+      <td data-row="c">C3</td>
+    </tr>
+  </table>`;
+
+describe('Table', function() {
+  it('initialize', function() {
+    const editor = this.initialize(Editor, tableHTML);
+    expect(editor.getDelta()).toEqual(tableDelta);
+    expect(this.container).toEqualHTML(tableHTML);
+  });
+
+  it('add', function() {
+    const editor = this.initialize(Editor, '');
+    editor.applyDelta(tableDelta.delete(1));
+    expect(this.container).toEqualHTML(tableHTML);
+  });
+});
+