fix: readonly not working

Author: gjulivan

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

@@ -98,7 +98,9 @@ const Editor = forwardRef((props: EditorProps, ref: MutableRefObject<Quill | nul
                               image: customImageUploadHandler
                           }
                       }
-                    : false;
+                    : // we cannot set toolbar to false, because "table-better" needs toolbar module
+                      // hidden toolbar will be set with display: none
+                      [];
 
                 // Quill instance configurations.
                 const options: QuillOptions = {
@@ -130,7 +132,7 @@ const Editor = forwardRef((props: EditorProps, ref: MutableRefObject<Quill | nul
                         "table-better": {
                             language: "en_US",
                             menus: ["column", "row", "merge", "table", "cell", "wrap", "copy", "delete"],
-                            toolbarTable: true
+                            toolbarTable: !readOnly
                         },
                         toolbar
                     },
@@ -144,7 +146,7 @@ const Editor = forwardRef((props: EditorProps, ref: MutableRefObject<Quill | nul
                 ref.current = quill;
 
                 const delta = quill.clipboard.convert({ html: defaultValue ?? "" });
-                quill.updateContents(delta, Quill.sources.USER);
+                quill.updateContents(delta, Quill.sources.SILENT);
 
                 quill.on(Quill.events.TEXT_CHANGE, (...arg) => {
                     onTextChangeRef.current?.(...arg);

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

@@ -174,7 +174,8 @@ function EditorWrapperInner(props: EditorWrapperProps): ReactElement {
             <div
                 className={classNames(
                     "flexcontainer",
-                    toolbarLocation === "bottom" ? "flex-column-reverse" : "flex-column"
+                    toolbarLocation === "bottom" ? "flex-column-reverse" : "flex-column",
+                    { "hide-toolbar": shouldHideToolbar }
                 )}
             >
                 <If condition={!shouldHideToolbar && toolbarOptions === undefined}>

packages/pluggableWidgets/rich-text-web/src/ui/RichText.scss

@@ -84,6 +84,10 @@ $rte-brand-primary: #264ae5;
         }
     }
 
+    .hide-toolbar .ql-toolbar {
+        display: none;
+    }
+
     .widget-rich-text-footer {
         align-items: center;
         border-top: 1px solid var(--border-color-default, $rte-border-color-default);

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

@@ -85,10 +85,12 @@ class Table extends Module {
         this.operateLine = new OperateLine(quill, this);
         this.tableMenus = new TableMenus(quill, this);
         this.tableSelect = new TableSelect();
-        quill.root.addEventListener("keyup", this.handleKeyup.bind(this));
-        quill.root.addEventListener("mousedown", this.handleMousedown.bind(this));
-        quill.root.addEventListener("scroll", this.handleScroll.bind(this));
-        this.registerToolbarTable(options?.toolbarTable);
+        if (!this.quill.options.readOnly) {
+            quill.root.addEventListener("keyup", this.handleKeyup.bind(this));
+            quill.root.addEventListener("mousedown", this.handleMousedown.bind(this));
+            quill.root.addEventListener("scroll", this.handleScroll.bind(this));
+            this.registerToolbarTable(options?.toolbarTable);
+        }
     }
 
     clearHistorySelected() {

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

@@ -56,7 +56,9 @@ class CellSelection {
         this.disabledList = [];
         this.singleList = [];
         this.tableBetter = tableBetter;
-        this.quill.root.addEventListener("click", this.handleClick.bind(this));
+        if (!this.quill.options.readOnly) {
+            this.quill.root.addEventListener("click", this.handleClick.bind(this));
+        }
         this.initDocumentListener();
         this.initWhiteList();
     }

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

@@ -231,7 +231,9 @@ class TableMenus {
         this.scroll = false;
         this.tableBetter = tableBetter;
         this.tablePropertiesForm = null;
-        this.quill.root.addEventListener("click", this.handleClick.bind(this));
+        if (!this.quill.options.readOnly) {
+            this.quill.root.addEventListener("click", this.handleClick.bind(this));
+        }
         this.root = this.createMenus();
     }