add insert table to toolbar

aleksas · Apr 23, 2018 · 608fd58 · 608fd58
1 parent f461565
commit 608fd58
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 1 deletion.
diff --git a/assets/core.styl b/assets/core.styl
@@ -123,6 +123,10 @@ resets(arr)
       margin-right: -1*LIST_STYLE_OUTER_WIDTH
       text-align: left
 
+  table
+    table-layout: fixed
+    width: 100%
+
   .ql-code-block-container
     font-family: monospace
 

diff --git a/modules/keyboard.js b/modules/keyboard.js
@@ -241,7 +241,8 @@ Keyboard.DEFAULTS = {
     },
     tab: {
       key: 'Tab',
-      handler(range) {
+      handler(range, context) {
+        if (context.format.table) return true;
         this.quill.history.cutoff();
         const delta = new Delta()
           .retain(range.index)

diff --git a/modules/toolbar.js b/modules/toolbar.js
@@ -6,6 +6,8 @@ import Module from '../core/module';
 
 const debug = logger('quill:toolbar');
 
+let tableId = 0;
+
 class Toolbar extends Module {
   constructor(quill, options) {
     super(quill, options);
@@ -258,6 +260,20 @@ Toolbar.DEFAULTS = {
         this.quill.format('list', value, Quill.sources.USER);
       }
     },
+    table(value) {
+      if (!value) return;
+      const range = this.quill.getSelection();
+      if (range == null) return;
+      // Insert 2x2 table
+      this.quill.updateContents(
+        new Delta()
+          .retain(range.index)
+          .insert('\n\n', { table: { row: (tableId += 1) } })
+          .insert('\n\n', { table: { row: (tableId += 1) } }),
+        Quill.sources.USER,
+      );
+      this.quill.setSelection(range.index, Quill.sources.SILENT);
+    },
   },
 };
 

diff --git a/ui/icons.js b/ui/icons.js
@@ -24,6 +24,7 @@ import listOrderedIcon from '../assets/icons/list-ordered.svg';
 import subscriptIcon from '../assets/icons/subscript.svg';
 import superscriptIcon from '../assets/icons/superscript.svg';
 import strikeIcon from '../assets/icons/strike.svg';
+import tableIcon from '../assets/icons/table.svg';
 import underlineIcon from '../assets/icons/underline.svg';
 import videoIcon from '../assets/icons/video.svg';
 
@@ -67,6 +68,7 @@ module.exports = {
     super: superscriptIcon,
   },
   strike: strikeIcon,
+  table: tableIcon,
   underline: underlineIcon,
   video: videoIcon,
 };