fix: table better show grid

Author: gjulivan

packages/pluggableWidgets/rich-text-web/src/components/Editor.tsx

@@ -131,7 +131,7 @@ const Editor = forwardRef((props: EditorProps, ref: MutableRefObject<Quill | nul
                         table: false,
                         "table-better": {
                             language: "en_US",
-                            menus: ["column", "row", "merge", "table", "cell", "wrap", "copy", "delete"],
+                            menus: ["column", "row", "merge", "table", "cell", "wrap", "copy", "delete", "grid"],
                             toolbarTable: !readOnly
                         },
                         toolbar

packages/pluggableWidgets/rich-text-web/src/utils/formats/quill-table-better/assets/css/quill-table-better.scss

@@ -73,7 +73,7 @@ $focused-border: 1px solid $focused-border-color;
     border: none;
 }
 
-.ql-container:not(.ql-disabled) .ql-table-better {
+.ql-container:not(.ql-disabled) .ql-table-better.ql-table-grid {
     td {
         border: 1px dotted rgba(0, 0, 0, 0.1);
     }
@@ -663,3 +663,9 @@ ol.table-list-container {
         transform: translateX(1px);
     }
 }
+
+.ql-table-menus-container.ql-table-grid {
+    .grid-toggle {
+        color: var(--link-color);
+    }
+}

packages/pluggableWidgets/rich-text-web/src/utils/formats/quill-table-better/language/de_DE.ts

@@ -16,6 +16,7 @@ export default {
     insAft: "Danach einfügen",
     copyTable: "Tabelle kopieren",
     delTable: "Tabelle löschen",
+    showGrid: "Raster anzeigen",
     border: "Rahmen",
     color: "Farbe",
     width: "Breite",

packages/pluggableWidgets/rich-text-web/src/utils/formats/quill-table-better/language/en_US.ts

@@ -16,6 +16,7 @@ export default {
     insAft: "Insert after",
     copyTable: "Copy table",
     delTable: "Delete table",
+    showGrid: "Show grid",
     border: "Border",
     color: "Color",
     width: "Width",

packages/pluggableWidgets/rich-text-web/src/utils/formats/quill-table-better/language/fr_FR.ts

@@ -16,6 +16,7 @@ export default {
     insAft: "Insérer après",
     copyTable: "Copier le tableau",
     delTable: "Supprimer le tableau",
+    showGrid: "Afficher la grille",
     border: "Bordure",
     color: "Couleur",
     width: "Largeur",

packages/pluggableWidgets/rich-text-web/src/utils/formats/quill-table-better/language/pl_PL.ts

@@ -16,6 +16,7 @@ export default {
     insAft: "Wstaw po",
     copyTable: "Kopiuj tabelę",
     delTable: "Usuń tabelę",
+    showGrid: "Pokaż siatkę",
     border: "Obramowanie",
     color: "Kolor",
     width: "Szerokość",

packages/pluggableWidgets/rich-text-web/src/utils/formats/quill-table-better/language/ru_RU.ts

@@ -16,6 +16,7 @@ export default {
     insAft: "Вставить абзац после",
     copyTable: "Копировать таблицу",
     delTable: "Удалить таблицу",
+    showGrid: "Показать сетку",
     border: "Обводка",
     color: "Цвет",
     width: "Ширина",

packages/pluggableWidgets/rich-text-web/src/utils/formats/quill-table-better/language/tr_TR.ts

@@ -16,6 +16,7 @@ export default {
     insAft: "Sonrasına ekle",
     copyTable: "Tabloyu kopyala",
     delTable: "Tabloyu sil",
+    showGrid: "Izgarayı göster",
     border: "Kenarlık",
     color: "Renk",
     width: "Genişlik",

packages/pluggableWidgets/rich-text-web/src/utils/formats/quill-table-better/language/zh_CN.ts

@@ -16,6 +16,7 @@ export default {
     insAft: "在表格后面插入",
     copyTable: "复制表格",
     delTable: "删除表格",
+    showGrid: "显示网格",
     border: "边框",
     color: "颜色",
     width: "宽度",

packages/pluggableWidgets/rich-text-web/src/utils/formats/quill-table-better/quill-table-better.ts

@@ -196,6 +196,7 @@ class Table extends Module {
         this.quill.updateContents(delta, Quill.sources.USER);
         this.quill.setSelection(range.index + _offset, Quill.sources.SILENT);
         this.showTools();
+        this.tableMenus.showGrid(true);
     }
 
     // Inserting tables within tables is currently not supported

packages/pluggableWidgets/rich-text-web/src/utils/formats/quill-table-better/ui/operate-line.ts

@@ -35,7 +35,9 @@ class OperateLine {
         this.dragTable = null;
         this.direction = null; // 1.level 2.vertical
         this.tableBetter = tableBetter;
-        this.quill.root.addEventListener("mousemove", this.handleMouseMove.bind(this));
+        if (!this.quill.options.readOnly) {
+            this.quill.root.addEventListener("mousemove", this.handleMouseMove.bind(this));
+        }
     }
 
     createDragBlock() {

packages/pluggableWidgets/rich-text-web/src/utils/formats/quill-table-better/ui/table-menus.ts

@@ -158,13 +158,20 @@ function getMenusConfig(useLanguage: UseLanguageHandler, menus?: string[]): Menu
             icon: "icons icon-Cell",
             handler(list: HTMLUListElement, tooltip: HTMLDivElement) {
                 const { selectedTds } = this.tableBetter.cellSelection;
+                const isGridShown = this.isGridShown();
+                if (isGridShown) {
+                    this.showGrid(false);
+                }
                 const attribute =
                     selectedTds.length > 1
                         ? this.getSelectedTdsAttrs(selectedTds)
                         : this.getSelectedTdAttrs(selectedTds[0]);
                 this.toggleAttribute(list, tooltip);
                 this.tablePropertiesForm = new TablePropertiesForm(this, { attribute, type: "cell" });
                 this.hideMenus();
+                if (isGridShown) {
+                    this.showGrid(true);
+                }
             }
         },
         wrap: {
@@ -203,6 +210,13 @@ function getMenusConfig(useLanguage: UseLanguageHandler, menus?: string[]): Menu
             handler() {
                 this.copyTable();
             }
+        },
+        grid: {
+            content: useLanguage("showGrid"),
+            icon: "icons icon-Table grid-toggle",
+            handler() {
+                this.showGrid();
+            }
         }
     };
     if (menus?.length) {
@@ -259,6 +273,24 @@ class TableMenus {
         }
     }
 
+    isGridShown() {
+        return this.table?.classList.contains("ql-table-grid");
+    }
+
+    showGrid(isShow?: boolean) {
+        const tableGridHelperClass = "ql-table-grid";
+        if (isShow === undefined) {
+            this.table?.classList.toggle(tableGridHelperClass);
+            this.root.classList.toggle(tableGridHelperClass);
+        } else if (isShow) {
+            this.table?.classList.add(tableGridHelperClass);
+            this.root.classList.add(tableGridHelperClass);
+        } else {
+            this.table?.classList.remove(tableGridHelperClass);
+            this.root.classList.remove(tableGridHelperClass);
+        }
+    }
+
     createList(children: Children) {
         if (!children) return null;
         const container = this.quill.root.ownerDocument.createElement("ul");
@@ -499,21 +531,25 @@ class TableMenus {
     getSelectedTdAttrs(td: HTMLElement) {
         const cellBlot = Quill.find(td) as TableCell;
         const align = getAlign(cellBlot);
+
         const attr: Props = align
             ? { ...getElementStyle(td, CELL_PROPERTIES), "text-align": align }
             : getElementStyle(td, CELL_PROPERTIES);
+        console.log("getSelectedTd Attrs", align, cellBlot, attr);
         return attr;
     }
 
     getSelectedTdsAttrs(selectedTds: HTMLElement[]) {
         const map = new Map();
         let attribute = null;
+        console.log("selectedTds", selectedTds);
         for (const td of selectedTds) {
             const attr = this.getSelectedTdAttrs(td);
             if (!attribute) {
                 attribute = attr;
                 continue;
             }
+            console.log("attr", attr, Object.keys(attribute));
             for (const key of Object.keys(attribute)) {
                 if (map.has(key)) continue;
                 if (attr[key] !== attribute[key]) {
@@ -695,6 +731,11 @@ class TableMenus {
     }
 
     showMenus() {
+        if (this.table?.classList.contains("ql-table-grid")) {
+            this.root.classList.add("ql-table-grid");
+        } else {
+            this.root.classList.remove("ql-table-grid");
+        }
         this.root.classList.remove("ql-hidden");
     }
 

packages/pluggableWidgets/rich-text-web/src/utils/formats/quill-table-better/ui/table-properties-form.ts

@@ -369,7 +369,7 @@ class TablePropertiesForm {
         const change = this.attrs;
         const old = this.options.attribute;
         return Object.keys(change).reduce((attrs: Props, key) => {
-            if (change[key] !== old[key]) {
+            if (change[key] !== old[key] || key.startsWith("border")) {
                 attrs[key] = isDimensions(key) ? addDimensionsUnit(change[key]) : change[key];
             }
             return attrs;
@@ -417,7 +417,7 @@ class TablePropertiesForm {
     saveCellAction() {
         const { selectedTds } = this.tableMenus.tableBetter.cellSelection;
         const { quill, table } = this.tableMenus;
-        const colgroup = (Quill.find(table as Node) as TableContainer).colgroup();
+        const colgroup = (Quill.find(table as Node) as TableContainer)?.colgroup();
         const attrs = this.getDiffProperties();
         const width = parseFloat(attrs["width"]);
         const align = attrs["text-align"];