Quill 2.0 dev 3 + better tables

masks/index.html

@@ -8,6 +8,7 @@
 	<script type="text/javascript" src="scripts/bootstrap.bundle.min.js"></script>
 	<script type="text/javascript" src="scripts/jquery.mods.js"></script>
 	<script type="text/javascript" src="scripts/quill.min.js"></script>
+	<script type="text/javascript" src="scripts/quill.mods.js"></script>
 	<script type="text/javascript" src="[#]filepath_js_common[#]"></script>
 	<script type="text/javascript" src="[#]filepath_js_catc[#]"></script>
 	<link rel="icon" type="image/png" href="images/favicon.png">

scripts/catc.js

@@ -414,6 +414,8 @@ function CATC(asGlobals)
 	}
 }
 
+Quill.register({'modules/better-table': quillBetterTable}, true);
+
 class Editor {
 	constructor(sEditorId, bReadOnly) {
 		this.keystrokes = 0;
@@ -430,6 +432,19 @@ class Editor {
 			placeholder: 'Notes',
 			readOnly: bReadOnly,
 			modules: {
+				table: false,
+				'better-table': {
+					operationMenu: {
+						items: {
+							unmergeCells: {
+								text: 'Another unmerge cells name'
+							}
+						}
+					}
+				},
+				keyboard: {
+					bindings: quillBetterTable.keyboardBindings
+				},
 				toolbar: [
 					['bold', 'italic', 'underline', 'strike'],
 					//['blockquote', 'code-block'],
@@ -443,12 +458,19 @@ class Editor {
 					//[{ 'header': [1, 2, 3, 4, 5, 6, false] }],
 					//[{ 'font': [] }],
 					[{ 'align': [] }],
+					['table'],
 					['link', 'image'],
 					['clean']
 				]
 			}
 		});
 		
+		var oToolbar = this.oQuill.getModule('toolbar');
+		oToolbar.addHandler('table', () => {
+			let tableModule = this.oQuill.getModule('better-table');
+			tableModule.insertTable(3, 3);
+		});
+
 		this._initEvents();
 		this._postInit();
 	}

style/_quill.scss

@@ -1,4 +1,5 @@
 @import 'quill/quill.snow';
+@import 'quill/quill.better-table';
 
 .ql-toolbar.ql-snow {
 	border: none;
@@ -21,3 +22,39 @@
 .ql-snow .ql-tooltip {
 	z-index: 10;
 }
+
+.qlbt-col-tool {
+	display: none;
+}
+
+/* Quill Better Table */
+
+.ql-container {
+	table.quill-better-table {
+		td {
+			border-color: $col_main_1;
+		}
+	}
+	
+	.qlbt-selection-line.qlbt-selection-line-right,
+	.qlbt-selection-line.qlbt-selection-line-left {
+		margin-top: -2px;
+		margin-left: -2px;
+		background-color: $col_main_2 !important;
+		
+		&::before {
+			background-color: $col_main_2;
+		}
+	}
+	
+	.qlbt-selection-line.qlbt-selection-line-top,
+	.qlbt-selection-line.qlbt-selection-line-bottom {
+		margin-top: -3px;
+		margin-left: -2px;
+		background-color: $col_main_2 !important;
+	}
+
+	.qlbt-col-tool .qlbt-col-tool-cell-holder:hover {
+		background-color: $col_main_2;
+	}
+}

style/quill/quill.better-table.scss

@@ -0,0 +1,117 @@
+.ql-container .qlbt-selection-line.qlbt-selection-line-left::before {
+  position: absolute;
+  left: -2px;
+  top: -2px;
+  content: '';
+  width: 5px;
+  height: 5px;
+  background-color: #0589f3;
+  border-radius: 5px; }
+
+.ql-container .qlbt-selection-line.qlbt-selection-line-right::before {
+  position: absolute;
+  right: -2px;
+  bottom: -3px;
+  content: '';
+  width: 5px;
+  height: 5px;
+  background-color: #0589f3;
+  border-radius: 5px; }
+
+.quill-better-table-wrapper {
+  overflow-x: auto; }
+
+.ql-container table {
+  table-layout: fixed;
+  border-collapse: collapse; }
+.ql-container table td {
+    border: 1px solid #000;
+    padding: 2px 5px; }
+
+.qlbt-operation-menu {
+  background-color: #fff;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  font-size: 14px;
+  z-index: 100;
+  overflow: hidden; }
+  .qlbt-operation-menu .qlbt-operation-menu-dividing {
+    height: 1px;
+    background-color: #efefef; }
+  .qlbt-operation-menu .qlbt-operation-menu-subtitle {
+    color: #999;
+    font-size: 14px;
+    padding: 5px 16px; }
+  .qlbt-operation-menu .qlbt-operation-color-picker {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    padding: 0 16px 10px;
+    background-color: #fff;
+    overflow: hidden; }
+    .qlbt-operation-menu .qlbt-operation-color-picker .qlbt-operation-color-picker-item {
+      width: 20px;
+      height: 20px;
+      border: 1px solid #595959;
+      margin-right: 5px;
+      margin-bottom: 5px;
+      cursor: pointer; }
+  .qlbt-operation-menu .qlbt-operation-menu-item {
+    display: flex;
+    align-items: center;
+    padding: 10px 16px;
+    background-color: #fff;
+    cursor: pointer;
+    color: #595959;
+    overflow: hidden;
+    text-overflow: ellipsis; }
+    .qlbt-operation-menu .qlbt-operation-menu-item:hover {
+      background-color: #efefef; }
+    .qlbt-operation-menu .qlbt-operation-menu-item .qlbt-operation-menu-icon {
+      margin-right: 8px;
+      height: 20px;
+      width: 20px;
+      font-size: 0; }
+
+.qlbt-col-tool {
+  position: absolute;
+  display: flex;
+  align-items: flex-end;
+  overflow: hidden;
+  z-index: 99;
+  height: 16px; }
+  .qlbt-col-tool .qlbt-col-tool-cell {
+    position: relative;
+    background-color: #fff;
+    border-top: 1px solid #000;
+    border-right: 1px solid #000;
+    border-bottom: 1px solid #000; }
+    .qlbt-col-tool .qlbt-col-tool-cell:first-child {
+      border-left: 1px solid #000; }
+  .qlbt-col-tool .qlbt-col-tool-cell-holder {
+    position: absolute;
+    right: -1px;
+    top: 0;
+    bottom: 0;
+    z-index: 3;
+    width: 1px;
+    background-color: transparent;
+    cursor: ew-resize; }
+    .qlbt-col-tool .qlbt-col-tool-cell-holder:hover {
+      background-color: #0589f3; }
+    .qlbt-col-tool .qlbt-col-tool-cell-holder::before {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: -6px;
+      display: block;
+      width: 8px;
+      height: 100%; }
+    .qlbt-col-tool .qlbt-col-tool-cell-holder::after {
+      content: "";
+      position: absolute;
+      top: 0;
+      right: -6px;
+      display: block;
+      width: 8px;
+      height: 100%; }
+

style/quill/quill.bubble.scss

@@ -1,5 +1,5 @@
 /*!
- * Quill Editor v1.3.6
+ * Quill Editor v2.0.0-dev.3
  * https://quilljs.com/
  * Copyright (c) 2014, Jason Chen
  * Copyright (c) 2013, salesforce.com
@@ -15,8 +15,9 @@
 .ql-container.ql-disabled .ql-tooltip {
   visibility: hidden;
 }
-.ql-container.ql-disabled .ql-editor ul[data-checked] > li::before {
+.ql-container:not(.ql-disabled) li[data-list=checked] > .ql-ui,
-  pointer-events: none;
+.ql-container:not(.ql-disabled) li[data-list=unchecked] > .ql-ui {
+  cursor: pointer;
 }
 .ql-clipboard {
   left: -100000px;
@@ -31,6 +32,7 @@
 }
 .ql-editor {
   box-sizing: border-box;
+  counter-reset: list-0;
   line-height: 1.42;
   height: 100%;
   outline: none;
@@ -47,7 +49,6 @@
 }
 .ql-editor p,
 .ql-editor ol,
-.ql-editor ul,
 .ql-editor pre,
 .ql-editor blockquote,
 .ql-editor h1,
@@ -58,144 +59,135 @@
 .ql-editor h6 {
   margin: 0;
   padding: 0;
-  counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
 }
-.ql-editor ol,
+.ql-editor p,
-.ql-editor ul {
+.ql-editor h1,
+.ql-editor h2,
+.ql-editor h3,
+.ql-editor h4,
+.ql-editor h5,
+.ql-editor h6 {
+  counter-reset: list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
+}
+.ql-editor table {
+  border-collapse: collapse;
+}
+.ql-editor td {
+  border: 1px solid #000;
+  padding: 2px 5px;
+}
+.ql-editor ol {
   padding-left: 1.5em;
 }
-.ql-editor ol > li,
+.ql-editor li {
-.ql-editor ul > li {
   list-style-type: none;
+  padding-left: 1.5em;
+  position: relative;
 }
-.ql-editor ul > li::before {
+.ql-editor li > .ql-ui:before {
-  content: '\2022';
-}
-.ql-editor ul[data-checked=true],
-.ql-editor ul[data-checked=false] {
-  pointer-events: none;
-}
-.ql-editor ul[data-checked=true] > li *,
-.ql-editor ul[data-checked=false] > li * {
-  pointer-events: all;
-}
-.ql-editor ul[data-checked=true] > li::before,
-.ql-editor ul[data-checked=false] > li::before {
-  color: #777;
-  cursor: pointer;
-  pointer-events: all;
-}
-.ql-editor ul[data-checked=true] > li::before {
-  content: '\2611';
-}
-.ql-editor ul[data-checked=false] > li::before {
-  content: '\2610';
-}
-.ql-editor li::before {
   display: inline-block;
-  white-space: nowrap;
-  width: 1.2em;
-}
-.ql-editor li:not(.ql-direction-rtl)::before {
   margin-left: -1.5em;
   margin-right: 0.3em;
   text-align: right;
+  white-space: nowrap;
+  width: 1.2em;
 }
-.ql-editor li.ql-direction-rtl::before {
+.ql-editor li[data-list=checked] > .ql-ui,
-  margin-left: 0.3em;
+.ql-editor li[data-list=unchecked] > .ql-ui {
-  margin-right: -1.5em;
+  color: #777;
 }
-.ql-editor ol li:not(.ql-direction-rtl),
+.ql-editor li[data-list=bullet] > .ql-ui:before {
-.ql-editor ul li:not(.ql-direction-rtl) {
+  content: '\2022';
-  padding-left: 1.5em;
 }
-.ql-editor ol li.ql-direction-rtl,
+.ql-editor li[data-list=checked] > .ql-ui:before {
-.ql-editor ul li.ql-direction-rtl {
+  content: '\2611';
-  padding-right: 1.5em;
 }
-.ql-editor ol li {
+.ql-editor li[data-list=unchecked] > .ql-ui:before {
+  content: '\2610';
+}
+.ql-editor li[data-list=ordered] {
   counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
   counter-increment: list-0;
 }
-.ql-editor ol li:before {
+.ql-editor li[data-list=ordered] > .ql-ui:before {
   content: counter(list-0, decimal) '. ';
 }
-.ql-editor ol li.ql-indent-1 {
+.ql-editor li[data-list=ordered].ql-indent-1 {
   counter-increment: list-1;
 }
-.ql-editor ol li.ql-indent-1:before {
+.ql-editor li[data-list=ordered].ql-indent-1 > .ql-ui:before {
   content: counter(list-1, lower-alpha) '. ';
 }
-.ql-editor ol li.ql-indent-1 {
+.ql-editor li[data-list=ordered].ql-indent-1 {
   counter-reset: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
 }
-.ql-editor ol li.ql-indent-2 {
+.ql-editor li[data-list=ordered].ql-indent-2 {
   counter-increment: list-2;
 }
-.ql-editor ol li.ql-indent-2:before {
+.ql-editor li[data-list=ordered].ql-indent-2 > .ql-ui:before {
   content: counter(list-2, lower-roman) '. ';
 }
-.ql-editor ol li.ql-indent-2 {
+.ql-editor li[data-list=ordered].ql-indent-2 {
   counter-reset: list-3 list-4 list-5 list-6 list-7 list-8 list-9;
 }
-.ql-editor ol li.ql-indent-3 {
+.ql-editor li[data-list=ordered].ql-indent-3 {
   counter-increment: list-3;
 }
-.ql-editor ol li.ql-indent-3:before {
+.ql-editor li[data-list=ordered].ql-indent-3 > .ql-ui:before {
   content: counter(list-3, decimal) '. ';
 }
-.ql-editor ol li.ql-indent-3 {
+.ql-editor li[data-list=ordered].ql-indent-3 {
   counter-reset: list-4 list-5 list-6 list-7 list-8 list-9;
 }
-.ql-editor ol li.ql-indent-4 {
+.ql-editor li[data-list=ordered].ql-indent-4 {
   counter-increment: list-4;
 }
-.ql-editor ol li.ql-indent-4:before {
+.ql-editor li[data-list=ordered].ql-indent-4 > .ql-ui:before {
   content: counter(list-4, lower-alpha) '. ';
 }
-.ql-editor ol li.ql-indent-4 {
+.ql-editor li[data-list=ordered].ql-indent-4 {
   counter-reset: list-5 list-6 list-7 list-8 list-9;
 }
-.ql-editor ol li.ql-indent-5 {
+.ql-editor li[data-list=ordered].ql-indent-5 {
   counter-increment: list-5;
 }
-.ql-editor ol li.ql-indent-5:before {
+.ql-editor li[data-list=ordered].ql-indent-5 > .ql-ui:before {
   content: counter(list-5, lower-roman) '. ';
 }
-.ql-editor ol li.ql-indent-5 {
+.ql-editor li[data-list=ordered].ql-indent-5 {
   counter-reset: list-6 list-7 list-8 list-9;
 }
-.ql-editor ol li.ql-indent-6 {
+.ql-editor li[data-list=ordered].ql-indent-6 {
   counter-increment: list-6;
 }
-.ql-editor ol li.ql-indent-6:before {
+.ql-editor li[data-list=ordered].ql-indent-6 > .ql-ui:before {
   content: counter(list-6, decimal) '. ';
 }
-.ql-editor ol li.ql-indent-6 {
+.ql-editor li[data-list=ordered].ql-indent-6 {
   counter-reset: list-7 list-8 list-9;
 }
-.ql-editor ol li.ql-indent-7 {
+.ql-editor li[data-list=ordered].ql-indent-7 {
   counter-increment: list-7;
 }
-.ql-editor ol li.ql-indent-7:before {
+.ql-editor li[data-list=ordered].ql-indent-7 > .ql-ui:before {
   content: counter(list-7, lower-alpha) '. ';
 }
-.ql-editor ol li.ql-indent-7 {
+.ql-editor li[data-list=ordered].ql-indent-7 {
   counter-reset: list-8 list-9;
 }
-.ql-editor ol li.ql-indent-8 {
+.ql-editor li[data-list=ordered].ql-indent-8 {
   counter-increment: list-8;
 }
-.ql-editor ol li.ql-indent-8:before {
+.ql-editor li[data-list=ordered].ql-indent-8 > .ql-ui:before {
   content: counter(list-8, lower-roman) '. ';
 }
-.ql-editor ol li.ql-indent-8 {
+.ql-editor li[data-list=ordered].ql-indent-8 {
   counter-reset: list-9;
 }
-.ql-editor ol li.ql-indent-9 {
+.ql-editor li[data-list=ordered].ql-indent-9 {
   counter-increment: list-9;
 }
-.ql-editor ol li.ql-indent-9:before {
+.ql-editor li[data-list=ordered].ql-indent-9 > .ql-ui:before {
   content: counter(list-9, decimal) '. ';
 }
 .ql-editor .ql-indent-1:not(.ql-direction-rtl) {
@@ -306,6 +298,24 @@
 .ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right {
   padding-right: 28.5em;
 }
+.ql-editor li.ql-direction-rtl {
+  padding-right: 1.5em;
+}
+.ql-editor li.ql-direction-rtl > .ql-ui:before {
+  margin-left: 0.3em;
+  margin-right: -1.5em;
+  text-align: left;
+}
+.ql-editor table {
+  table-layout: fixed;
+  width: 100%;
+}
+.ql-editor table td {
+  outline: none;
+}
+.ql-editor .ql-code-block-container {
+  font-family: monospace;
+}
 .ql-editor .ql-video {
   display: block;
   max-width: 100%;
@@ -386,6 +396,9 @@
 .ql-editor .ql-align-right {
   text-align: right;
 }
+.ql-editor .ql-ui {
+  position: absolute;
+}
 .ql-editor.ql-blank::before {
   color: rgba(0,0,0,0.6);
   content: attr(data-placeholder);
@@ -619,12 +632,11 @@
   padding-left: 16px;
 }
 .ql-bubble .ql-editor code,
-.ql-bubble .ql-editor pre {
+.ql-bubble .ql-editor .ql-code-block-container {
   background-color: #f0f0f0;
   border-radius: 3px;
 }
-.ql-bubble .ql-editor pre {
+.ql-bubble .ql-editor .ql-code-block-container {
-  white-space: pre-wrap;
   margin-bottom: 5px;
   margin-top: 5px;
   padding: 5px 10px;
@@ -633,7 +645,7 @@
   font-size: 85%;
   padding: 2px 4px;
 }
-.ql-bubble .ql-editor pre.ql-syntax {
+.ql-bubble .ql-editor .ql-code-block-container {
   background-color: #23241f;
   color: #f8f8f2;
   overflow: visible;
@@ -845,6 +857,13 @@
 .ql-bubble .ql-color-picker.ql-color .ql-picker-item {
   background-color: #000;
 }
+.ql-code-block-container {
+  position: relative;
+}
+.ql-code-block-container .ql-ui {
+  right: 5px;
+  top: 5px;
+}
 .ql-bubble .ql-toolbar .ql-formats {
   margin: 8px 12px 8px 0px;
 }
@@ -950,3 +969,4 @@
 .ql-container.ql-bubble:not(.ql-disabled) a:hover::after {
   visibility: visible;
 }
+

style/quill/quill.core.scss

@@ -1,5 +1,5 @@
 /*!
- * Quill Editor v1.3.6
+ * Quill Editor v2.0.0-dev.3
  * https://quilljs.com/
  * Copyright (c) 2014, Jason Chen
  * Copyright (c) 2013, salesforce.com
@@ -15,8 +15,9 @@
 .ql-container.ql-disabled .ql-tooltip {
   visibility: hidden;
 }
-.ql-container.ql-disabled .ql-editor ul[data-checked] > li::before {
+.ql-container:not(.ql-disabled) li[data-list=checked] > .ql-ui,
-  pointer-events: none;
+.ql-container:not(.ql-disabled) li[data-list=unchecked] > .ql-ui {
+  cursor: pointer;
 }
 .ql-clipboard {
   left: -100000px;
@@ -31,6 +32,7 @@
 }
 .ql-editor {
   box-sizing: border-box;
+  counter-reset: list-0;
   line-height: 1.42;
   height: 100%;
   outline: none;
@@ -47,7 +49,6 @@
 }
 .ql-editor p,
 .ql-editor ol,
-.ql-editor ul,
 .ql-editor pre,
 .ql-editor blockquote,
 .ql-editor h1,
@@ -58,144 +59,135 @@
 .ql-editor h6 {
   margin: 0;
   padding: 0;
-  counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
 }
-.ql-editor ol,
+.ql-editor p,
-.ql-editor ul {
+.ql-editor h1,
+.ql-editor h2,
+.ql-editor h3,
+.ql-editor h4,
+.ql-editor h5,
+.ql-editor h6 {
+  counter-reset: list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
+}
+.ql-editor table {
+  border-collapse: collapse;
+}
+.ql-editor td {
+  border: 1px solid #000;
+  padding: 2px 5px;
+}
+.ql-editor ol {
   padding-left: 1.5em;
 }
-.ql-editor ol > li,
+.ql-editor li {
-.ql-editor ul > li {
   list-style-type: none;
+  padding-left: 1.5em;
+  position: relative;
 }
-.ql-editor ul > li::before {
+.ql-editor li > .ql-ui:before {
-  content: '\2022';
-}
-.ql-editor ul[data-checked=true],
-.ql-editor ul[data-checked=false] {
-  pointer-events: none;
-}
-.ql-editor ul[data-checked=true] > li *,
-.ql-editor ul[data-checked=false] > li * {
-  pointer-events: all;
-}
-.ql-editor ul[data-checked=true] > li::before,
-.ql-editor ul[data-checked=false] > li::before {
-  color: #777;
-  cursor: pointer;
-  pointer-events: all;
-}
-.ql-editor ul[data-checked=true] > li::before {
-  content: '\2611';
-}
-.ql-editor ul[data-checked=false] > li::before {
-  content: '\2610';
-}
-.ql-editor li::before {
   display: inline-block;
-  white-space: nowrap;
-  width: 1.2em;
-}
-.ql-editor li:not(.ql-direction-rtl)::before {
   margin-left: -1.5em;
   margin-right: 0.3em;
   text-align: right;
+  white-space: nowrap;
+  width: 1.2em;
 }
-.ql-editor li.ql-direction-rtl::before {
+.ql-editor li[data-list=checked] > .ql-ui,
-  margin-left: 0.3em;
+.ql-editor li[data-list=unchecked] > .ql-ui {
-  margin-right: -1.5em;
+  color: #777;
 }
-.ql-editor ol li:not(.ql-direction-rtl),
+.ql-editor li[data-list=bullet] > .ql-ui:before {
-.ql-editor ul li:not(.ql-direction-rtl) {
+  content: '\2022';
-  padding-left: 1.5em;
 }
-.ql-editor ol li.ql-direction-rtl,
+.ql-editor li[data-list=checked] > .ql-ui:before {
-.ql-editor ul li.ql-direction-rtl {
+  content: '\2611';
-  padding-right: 1.5em;
 }
-.ql-editor ol li {
+.ql-editor li[data-list=unchecked] > .ql-ui:before {
+  content: '\2610';
+}
+.ql-editor li[data-list=ordered] {
   counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
   counter-increment: list-0;
 }
-.ql-editor ol li:before {
+.ql-editor li[data-list=ordered] > .ql-ui:before {
   content: counter(list-0, decimal) '. ';
 }
-.ql-editor ol li.ql-indent-1 {
+.ql-editor li[data-list=ordered].ql-indent-1 {
   counter-increment: list-1;
 }
-.ql-editor ol li.ql-indent-1:before {
+.ql-editor li[data-list=ordered].ql-indent-1 > .ql-ui:before {
   content: counter(list-1, lower-alpha) '. ';
 }
-.ql-editor ol li.ql-indent-1 {
+.ql-editor li[data-list=ordered].ql-indent-1 {
   counter-reset: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
 }
-.ql-editor ol li.ql-indent-2 {
+.ql-editor li[data-list=ordered].ql-indent-2 {
   counter-increment: list-2;
 }
-.ql-editor ol li.ql-indent-2:before {
+.ql-editor li[data-list=ordered].ql-indent-2 > .ql-ui:before {
   content: counter(list-2, lower-roman) '. ';
 }
-.ql-editor ol li.ql-indent-2 {
+.ql-editor li[data-list=ordered].ql-indent-2 {
   counter-reset: list-3 list-4 list-5 list-6 list-7 list-8 list-9;
 }
-.ql-editor ol li.ql-indent-3 {
+.ql-editor li[data-list=ordered].ql-indent-3 {
   counter-increment: list-3;
 }
-.ql-editor ol li.ql-indent-3:before {
+.ql-editor li[data-list=ordered].ql-indent-3 > .ql-ui:before {
   content: counter(list-3, decimal) '. ';
 }
-.ql-editor ol li.ql-indent-3 {
+.ql-editor li[data-list=ordered].ql-indent-3 {
   counter-reset: list-4 list-5 list-6 list-7 list-8 list-9;
 }
-.ql-editor ol li.ql-indent-4 {
+.ql-editor li[data-list=ordered].ql-indent-4 {
   counter-increment: list-4;
 }
-.ql-editor ol li.ql-indent-4:before {
+.ql-editor li[data-list=ordered].ql-indent-4 > .ql-ui:before {
   content: counter(list-4, lower-alpha) '. ';
 }
-.ql-editor ol li.ql-indent-4 {
+.ql-editor li[data-list=ordered].ql-indent-4 {
   counter-reset: list-5 list-6 list-7 list-8 list-9;
 }
-.ql-editor ol li.ql-indent-5 {
+.ql-editor li[data-list=ordered].ql-indent-5 {
   counter-increment: list-5;
 }
-.ql-editor ol li.ql-indent-5:before {
+.ql-editor li[data-list=ordered].ql-indent-5 > .ql-ui:before {
   content: counter(list-5, lower-roman) '. ';
 }
-.ql-editor ol li.ql-indent-5 {
+.ql-editor li[data-list=ordered].ql-indent-5 {
   counter-reset: list-6 list-7 list-8 list-9;
 }
-.ql-editor ol li.ql-indent-6 {
+.ql-editor li[data-list=ordered].ql-indent-6 {
   counter-increment: list-6;
 }
-.ql-editor ol li.ql-indent-6:before {
+.ql-editor li[data-list=ordered].ql-indent-6 > .ql-ui:before {
   content: counter(list-6, decimal) '. ';
 }
-.ql-editor ol li.ql-indent-6 {
+.ql-editor li[data-list=ordered].ql-indent-6 {
   counter-reset: list-7 list-8 list-9;
 }
-.ql-editor ol li.ql-indent-7 {
+.ql-editor li[data-list=ordered].ql-indent-7 {
   counter-increment: list-7;
 }
-.ql-editor ol li.ql-indent-7:before {
+.ql-editor li[data-list=ordered].ql-indent-7 > .ql-ui:before {
   content: counter(list-7, lower-alpha) '. ';
 }
-.ql-editor ol li.ql-indent-7 {
+.ql-editor li[data-list=ordered].ql-indent-7 {
   counter-reset: list-8 list-9;
 }
-.ql-editor ol li.ql-indent-8 {
+.ql-editor li[data-list=ordered].ql-indent-8 {
   counter-increment: list-8;
 }
-.ql-editor ol li.ql-indent-8:before {
+.ql-editor li[data-list=ordered].ql-indent-8 > .ql-ui:before {
   content: counter(list-8, lower-roman) '. ';
 }
-.ql-editor ol li.ql-indent-8 {
+.ql-editor li[data-list=ordered].ql-indent-8 {
   counter-reset: list-9;
 }
-.ql-editor ol li.ql-indent-9 {
+.ql-editor li[data-list=ordered].ql-indent-9 {
   counter-increment: list-9;
 }
-.ql-editor ol li.ql-indent-9:before {
+.ql-editor li[data-list=ordered].ql-indent-9 > .ql-ui:before {
   content: counter(list-9, decimal) '. ';
 }
 .ql-editor .ql-indent-1:not(.ql-direction-rtl) {
@@ -306,6 +298,24 @@
 .ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right {
   padding-right: 28.5em;
 }
+.ql-editor li.ql-direction-rtl {
+  padding-right: 1.5em;
+}
+.ql-editor li.ql-direction-rtl > .ql-ui:before {
+  margin-left: 0.3em;
+  margin-right: -1.5em;
+  text-align: left;
+}
+.ql-editor table {
+  table-layout: fixed;
+  width: 100%;
+}
+.ql-editor table td {
+  outline: none;
+}
+.ql-editor .ql-code-block-container {
+  font-family: monospace;
+}
 .ql-editor .ql-video {
   display: block;
   max-width: 100%;
@@ -386,6 +396,9 @@
 .ql-editor .ql-align-right {
   text-align: right;
 }
+.ql-editor .ql-ui {
+  position: absolute;
+}
 .ql-editor.ql-blank::before {
   color: rgba(0,0,0,0.6);
   content: attr(data-placeholder);
@@ -395,3 +408,4 @@
   position: absolute;
   right: 15px;
 }
+

style/quill/quill.snow.scss

@@ -1,5 +1,5 @@
 /*!
- * Quill Editor v1.3.6
+ * Quill Editor v2.0.0-dev.3
  * https://quilljs.com/
  * Copyright (c) 2014, Jason Chen
  * Copyright (c) 2013, salesforce.com
@@ -15,8 +15,9 @@
 .ql-container.ql-disabled .ql-tooltip {
   visibility: hidden;
 }
-.ql-container.ql-disabled .ql-editor ul[data-checked] > li::before {
+.ql-container:not(.ql-disabled) li[data-list=checked] > .ql-ui,
-  pointer-events: none;
+.ql-container:not(.ql-disabled) li[data-list=unchecked] > .ql-ui {
+  cursor: pointer;
 }
 .ql-clipboard {
   left: -100000px;
@@ -31,6 +32,7 @@
 }
 .ql-editor {
   box-sizing: border-box;
+  counter-reset: list-0;
   line-height: 1.42;
   height: 100%;
   outline: none;
@@ -47,7 +49,6 @@
 }
 .ql-editor p,
 .ql-editor ol,
-.ql-editor ul,
 .ql-editor pre,
 .ql-editor blockquote,
 .ql-editor h1,
@@ -58,144 +59,135 @@
 .ql-editor h6 {
   margin: 0;
   padding: 0;
-  counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
 }
-.ql-editor ol,
+.ql-editor p,
-.ql-editor ul {
+.ql-editor h1,
+.ql-editor h2,
+.ql-editor h3,
+.ql-editor h4,
+.ql-editor h5,
+.ql-editor h6 {
+  counter-reset: list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
+}
+.ql-editor table {
+  border-collapse: collapse;
+}
+.ql-editor td {
+  border: 1px solid #000;
+  padding: 2px 5px;
+}
+.ql-editor ol {
   padding-left: 1.5em;
 }
-.ql-editor ol > li,
+.ql-editor li {
-.ql-editor ul > li {
   list-style-type: none;
+  padding-left: 1.5em;
+  position: relative;
 }
-.ql-editor ul > li::before {
+.ql-editor li > .ql-ui:before {
-  content: '\2022';
-}
-.ql-editor ul[data-checked=true],
-.ql-editor ul[data-checked=false] {
-  pointer-events: none;
-}
-.ql-editor ul[data-checked=true] > li *,
-.ql-editor ul[data-checked=false] > li * {
-  pointer-events: all;
-}
-.ql-editor ul[data-checked=true] > li::before,
-.ql-editor ul[data-checked=false] > li::before {
-  color: #777;
-  cursor: pointer;
-  pointer-events: all;
-}
-.ql-editor ul[data-checked=true] > li::before {
-  content: '\2611';
-}
-.ql-editor ul[data-checked=false] > li::before {
-  content: '\2610';
-}
-.ql-editor li::before {
   display: inline-block;
-  white-space: nowrap;
-  width: 1.2em;
-}
-.ql-editor li:not(.ql-direction-rtl)::before {
   margin-left: -1.5em;
   margin-right: 0.3em;
   text-align: right;
+  white-space: nowrap;
+  width: 1.2em;
 }
-.ql-editor li.ql-direction-rtl::before {
+.ql-editor li[data-list=checked] > .ql-ui,
-  margin-left: 0.3em;
+.ql-editor li[data-list=unchecked] > .ql-ui {
-  margin-right: -1.5em;
+  color: #777;
 }
-.ql-editor ol li:not(.ql-direction-rtl),
+.ql-editor li[data-list=bullet] > .ql-ui:before {
-.ql-editor ul li:not(.ql-direction-rtl) {
+  content: '\2022';
-  padding-left: 1.5em;
 }
-.ql-editor ol li.ql-direction-rtl,
+.ql-editor li[data-list=checked] > .ql-ui:before {
-.ql-editor ul li.ql-direction-rtl {
+  content: '\2611';
-  padding-right: 1.5em;
 }
-.ql-editor ol li {
+.ql-editor li[data-list=unchecked] > .ql-ui:before {
+  content: '\2610';
+}
+.ql-editor li[data-list=ordered] {
   counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
   counter-increment: list-0;
 }
-.ql-editor ol li:before {
+.ql-editor li[data-list=ordered] > .ql-ui:before {
   content: counter(list-0, decimal) '. ';
 }
-.ql-editor ol li.ql-indent-1 {
+.ql-editor li[data-list=ordered].ql-indent-1 {
   counter-increment: list-1;
 }
-.ql-editor ol li.ql-indent-1:before {
+.ql-editor li[data-list=ordered].ql-indent-1 > .ql-ui:before {
   content: counter(list-1, lower-alpha) '. ';
 }
-.ql-editor ol li.ql-indent-1 {
+.ql-editor li[data-list=ordered].ql-indent-1 {
   counter-reset: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
 }
-.ql-editor ol li.ql-indent-2 {
+.ql-editor li[data-list=ordered].ql-indent-2 {
   counter-increment: list-2;
 }
-.ql-editor ol li.ql-indent-2:before {
+.ql-editor li[data-list=ordered].ql-indent-2 > .ql-ui:before {
   content: counter(list-2, lower-roman) '. ';
 }
-.ql-editor ol li.ql-indent-2 {
+.ql-editor li[data-list=ordered].ql-indent-2 {
   counter-reset: list-3 list-4 list-5 list-6 list-7 list-8 list-9;
 }
-.ql-editor ol li.ql-indent-3 {
+.ql-editor li[data-list=ordered].ql-indent-3 {
   counter-increment: list-3;
 }
-.ql-editor ol li.ql-indent-3:before {
+.ql-editor li[data-list=ordered].ql-indent-3 > .ql-ui:before {
   content: counter(list-3, decimal) '. ';
 }
-.ql-editor ol li.ql-indent-3 {
+.ql-editor li[data-list=ordered].ql-indent-3 {
   counter-reset: list-4 list-5 list-6 list-7 list-8 list-9;
 }
-.ql-editor ol li.ql-indent-4 {
+.ql-editor li[data-list=ordered].ql-indent-4 {
   counter-increment: list-4;
 }
-.ql-editor ol li.ql-indent-4:before {
+.ql-editor li[data-list=ordered].ql-indent-4 > .ql-ui:before {
   content: counter(list-4, lower-alpha) '. ';
 }
-.ql-editor ol li.ql-indent-4 {
+.ql-editor li[data-list=ordered].ql-indent-4 {
   counter-reset: list-5 list-6 list-7 list-8 list-9;
 }
-.ql-editor ol li.ql-indent-5 {
+.ql-editor li[data-list=ordered].ql-indent-5 {
   counter-increment: list-5;
 }
-.ql-editor ol li.ql-indent-5:before {
+.ql-editor li[data-list=ordered].ql-indent-5 > .ql-ui:before {
   content: counter(list-5, lower-roman) '. ';
 }
-.ql-editor ol li.ql-indent-5 {
+.ql-editor li[data-list=ordered].ql-indent-5 {
   counter-reset: list-6 list-7 list-8 list-9;
 }
-.ql-editor ol li.ql-indent-6 {
+.ql-editor li[data-list=ordered].ql-indent-6 {
   counter-increment: list-6;
 }
-.ql-editor ol li.ql-indent-6:before {
+.ql-editor li[data-list=ordered].ql-indent-6 > .ql-ui:before {
   content: counter(list-6, decimal) '. ';
 }
-.ql-editor ol li.ql-indent-6 {
+.ql-editor li[data-list=ordered].ql-indent-6 {
   counter-reset: list-7 list-8 list-9;
 }
-.ql-editor ol li.ql-indent-7 {
+.ql-editor li[data-list=ordered].ql-indent-7 {
   counter-increment: list-7;
 }
-.ql-editor ol li.ql-indent-7:before {
+.ql-editor li[data-list=ordered].ql-indent-7 > .ql-ui:before {
   content: counter(list-7, lower-alpha) '. ';
 }
-.ql-editor ol li.ql-indent-7 {
+.ql-editor li[data-list=ordered].ql-indent-7 {
   counter-reset: list-8 list-9;
 }
-.ql-editor ol li.ql-indent-8 {
+.ql-editor li[data-list=ordered].ql-indent-8 {
   counter-increment: list-8;
 }
-.ql-editor ol li.ql-indent-8:before {
+.ql-editor li[data-list=ordered].ql-indent-8 > .ql-ui:before {
   content: counter(list-8, lower-roman) '. ';
 }
-.ql-editor ol li.ql-indent-8 {
+.ql-editor li[data-list=ordered].ql-indent-8 {
   counter-reset: list-9;
 }
-.ql-editor ol li.ql-indent-9 {
+.ql-editor li[data-list=ordered].ql-indent-9 {
   counter-increment: list-9;
 }
-.ql-editor ol li.ql-indent-9:before {
+.ql-editor li[data-list=ordered].ql-indent-9 > .ql-ui:before {
   content: counter(list-9, decimal) '. ';
 }
 .ql-editor .ql-indent-1:not(.ql-direction-rtl) {
@@ -306,6 +298,24 @@
 .ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right {
   padding-right: 28.5em;
 }
+.ql-editor li.ql-direction-rtl {
+  padding-right: 1.5em;
+}
+.ql-editor li.ql-direction-rtl > .ql-ui:before {
+  margin-left: 0.3em;
+  margin-right: -1.5em;
+  text-align: left;
+}
+.ql-editor table {
+  table-layout: fixed;
+  width: 100%;
+}
+.ql-editor table td {
+  outline: none;
+}
+.ql-editor .ql-code-block-container {
+  font-family: monospace;
+}
 .ql-editor .ql-video {
   display: block;
   max-width: 100%;
@@ -386,6 +396,9 @@
 .ql-editor .ql-align-right {
   text-align: right;
 }
+.ql-editor .ql-ui {
+  position: absolute;
+}
 .ql-editor.ql-blank::before {
   color: rgba(0,0,0,0.6);
   content: attr(data-placeholder);
@@ -619,12 +632,11 @@
   padding-left: 16px;
 }
 .ql-snow .ql-editor code,
-.ql-snow .ql-editor pre {
+.ql-snow .ql-editor .ql-code-block-container {
   background-color: #f0f0f0;
   border-radius: 3px;
 }
-.ql-snow .ql-editor pre {
+.ql-snow .ql-editor .ql-code-block-container {
-  white-space: pre-wrap;
   margin-bottom: 5px;
   margin-top: 5px;
   padding: 5px 10px;
@@ -633,7 +645,7 @@
   font-size: 85%;
   padding: 2px 4px;
 }
-.ql-snow .ql-editor pre.ql-syntax {
+.ql-snow .ql-editor .ql-code-block-container {
   background-color: #23241f;
   color: #f8f8f2;
   overflow: visible;
@@ -845,6 +857,13 @@
 .ql-snow .ql-color-picker.ql-color .ql-picker-item {
   background-color: #000;
 }
+.ql-code-block-container {
+  position: relative;
+}
+.ql-code-block-container .ql-ui {
+  right: 5px;
+  top: 5px;
+}
 .ql-toolbar.ql-snow {
   border: 1px solid #ccc;
   box-sizing: border-box;
@@ -943,3 +962,4 @@
 .ql-container.ql-snow {
   border: 1px solid #ccc;
 }
+