consistent table ids and registration

bbigelow · Apr 24, 2018 · 6451f1d · 6451f1d
1 parent a307ad1
commit 6451f1d
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 60 deletions.
diff --git a/assets/core.styl b/assets/core.styl
@@ -126,6 +126,8 @@ resets(arr)
   table
     table-layout: fixed
     width: 100%
+    td
+      outline: none
 
   .ql-code-block-container
     font-family: monospace

diff --git a/formats/table.js b/formats/table.js
@@ -1,43 +1,16 @@
-import Parchment from 'parchment';
 import Block from '../blots/block';
 import Container from '../blots/container';
+import Quill from '../core/quill';
 
-class TableCell extends Block {
+class TableContainer extends Container {
   static create(value) {
-    const node = super.create();
-    if (value && value.row) {
-      node.setAttribute('data-row', value.row);
-    } else {
-      node.setAttribute(
-        'data-row',
-        Math.random()
-          .toString(36)
-          .slice(4),
-      );
-    }
-    node.setAttribute('contenteditable', true);
+    const node = super.create(value);
+    node.setAttribute('contenteditable', false);
     return node;
   }
-
-  static formats(domNode) {
-    if (domNode.hasAttribute('data-row')) {
-      return {
-        row: domNode.getAttribute('data-row'),
-      };
-    }
-    return undefined;
-  }
-
-  table() {
-    let cur = this.parent;
-    while (cur != null && cur.statics.blotName !== 'table-container') {
-      cur = cur.parent;
-    }
-    return cur;
-  }
 }
-TableCell.blotName = 'table';
-TableCell.tagName = 'TD';
+TableContainer.blotName = 'table-container';
+TableContainer.tagName = 'TABLE';
 
 class TableBody extends Container {}
 TableBody.blotName = 'table-body';
@@ -56,10 +29,15 @@ class TableRow extends Container {
 TableRow.blotName = 'table-row';
 TableRow.tagName = 'TR';
 
-class TableContainer extends Container {
+class TableCell extends Block {
   static create(value) {
-    const node = super.create(value);
-    node.setAttribute('contenteditable', false);
+    const node = super.create();
+    if (value && value.row) {
+      node.setAttribute('data-row', value.row);
+    } else {
+      node.setAttribute('data-row', tableId());
+    }
+    node.setAttribute('contenteditable', true);
     return node;
   }
 
@@ -79,20 +57,31 @@ class TableContainer extends Container {
         blot.optimize(); // Add break blot
       });
     });
+  static formats(domNode) {
+    if (domNode.hasAttribute('data-row')) {
+      return {
+        row: domNode.getAttribute('data-row'),
+      };
+    }
+    return undefined;
   }
 
-  build(...args) {
-    super.build(...args);
-    this.balanceCells();
+  static register() {
+    Quill.register(TableRow);
+    Quill.register(TableBody);
+    Quill.register(TableContainer);
   }
 
-  update(...args) {
-    super.update(...args);
-    this.balanceCells();
+  table() {
+    let cur = this.parent;
+    while (cur != null && cur.statics.blotName !== 'table-container') {
+      cur = cur.parent;
+    }
+    return cur;
   }
 }
-TableContainer.blotName = 'table-container';
-TableContainer.tagName = 'TABLE';
+TableCell.blotName = 'table';
+TableCell.tagName = 'TD';
 
 TableContainer.allowedChildren = [TableBody];
 TableBody.requiredContainer = TableContainer;
@@ -103,4 +92,10 @@ TableRow.requiredContainer = TableBody;
 TableRow.allowedChildren = [TableCell];
 TableCell.requiredContainer = TableRow;
 
-export { TableContainer, TableBody, TableRow, TableCell };
+function tableId() {
+  return Math.random()
+    .toString(36)
+    .slice(4);
+}
+
+export { TableCell as default, tableId };
diff --git a/modules/toolbar.js b/modules/toolbar.js
@@ -3,11 +3,10 @@ import Parchment from 'parchment';
 import Quill from '../core/quill';
 import logger from '../core/logger';
 import Module from '../core/module';
+import { tableId } from '../formats/table';
 
 const debug = logger('quill:toolbar');
 
-let tableId = 0;
-
 class Toolbar extends Module {
   constructor(quill, options) {
     super(quill, options);
@@ -268,8 +267,8 @@ Toolbar.DEFAULTS = {
       this.quill.updateContents(
         new Delta()
           .retain(range.index)
-          .insert('\n\n', { table: { row: (tableId += 1) } })
-          .insert('\n\n', { table: { row: (tableId += 1) } }),
+          .insert('\n\n', { table: { row: tableId() } })
+          .insert('\n\n', { table: { row: tableId() } }),
         Quill.sources.USER,
       );
       this.quill.setSelection(range.index, Quill.sources.SILENT);

diff --git a/quill.js b/quill.js
@@ -10,13 +10,8 @@ import Indent from './formats/indent';
 
 import Blockquote from './formats/blockquote';
 import Header from './formats/header';
-import {
-  TableContainer,
-  TableBody,
-  TableRow,
-  TableCell,
-} from './formats/table';
 import List from './formats/list';
+import Table from './formats/table';
 
 import { BackgroundClass, BackgroundStyle } from './formats/background';
 import { ColorClass, ColorStyle } from './formats/color';
@@ -71,10 +66,6 @@ Quill.register(
 
 Quill.register(
   {
-    'blots/table-container': TableContainer,
-    'blots/table-body': TableBody,
-    'blots/table-row': TableRow,
-
     'formats/align': AlignClass,
     'formats/direction': DirectionClass,
     'formats/indent': Indent,
@@ -88,7 +79,7 @@ Quill.register(
     'formats/code-block': CodeBlock,
     'formats/header': Header,
     'formats/list': List,
-    'formats/table': TableCell,
+    'formats/table': Table,
 
     'formats/bold': Bold,
     'formats/code': InlineCode,