fix: table border styling

Author: gjulivan

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

@@ -69,9 +69,13 @@ $focused-border: 1px solid $focused-border-color;
     background-color: $focused-cell-background;
 }
 
-.ql-editor {
+.ql-editor td {
+    border: none;
+}
+
+.ql-container:not(.ql-disabled) .ql-table-better {
     td {
-        border: none;
+        border: 1px dotted rgba(0, 0, 0, 0.1);
     }
 }
 

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

@@ -170,11 +170,10 @@ class Table extends Module {
     }
 
     insertTable(rows: number, columns: number) {
-        const baseStyle = "border: 1px solid #000;";
         const range = this.quill.getSelection(true);
         if (range == null) return;
         if (this.isTable(range)) return;
-        const style = `width: ${CELL_DEFAULT_WIDTH * columns}px; ${baseStyle}`;
+        const style = `width: ${CELL_DEFAULT_WIDTH * columns}px;`;
         const formats = this.quill.getFormat(range.index - 1);
         const [, offset] = this.quill.getLine(range.index);
         const isExtra = !!formats[TableCellBlock.blotName] || offset !== 0;
@@ -190,7 +189,7 @@ class Table extends Module {
             return new Array(columns).fill("\n").reduce((memo, text) => {
                 return memo.insert(text, {
                     [TableCellBlock.blotName]: cellId(),
-                    [TableCell.blotName]: { "data-row": id, width: `${CELL_DEFAULT_WIDTH}`, style: baseStyle }
+                    [TableCell.blotName]: { "data-row": id, width: `${CELL_DEFAULT_WIDTH}` }
                 });
             }, memo);
         }, base);