@stoker-platform/web-app 0.5.66 → 0.5.67

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @stoker-platform/web-app
 
+## 0.5.67
+
+### Patch Changes
+
+- feat: add rich text editor toolbar features
+
 ## 0.5.66
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@stoker-platform/web-app",
-    "version": "0.5.66",
+    "version": "0.5.67",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE.md",
     "scripts": {
@@ -70,6 +70,7 @@
         "moment-timezone": "latest",
         "qrcode.react": "^4.2.0",
         "quill": "^2.0.3",
+        "quill-table-better": "^1.2.3",
         "react": "18.3.1",
         "react-csv": "^2.2.2",
         "react-day-picker": "^8.10.1",

package/src/App.css

@@ -57,6 +57,9 @@
     border-radius: var(--radius) var(--radius) 0 0 !important;
     border: 1px solid hsl(var(--border)) !important;
 }
+.ql-snow .ql-tooltip {
+    left: 0 !important;
+}
 
 .dark .ql-toolbar.ql-snow .ql-stroke {
     stroke: hsl(var(--foreground)) !important;
@@ -101,11 +104,51 @@
 }
 
 .dark .ql-toolbar.ql-snow .ql-picker-item:hover {
-    background-color: hsl(var(--background)) !important;
     color: hsl(240 4.9% 83.9%) !important;
 }
 
 .dark .ql-toolbar.ql-snow .ql-picker-item.ql-selected {
-    background-color: hsl(var(--background)) !important;
     color: hsl(240 4.9% 83.9%) !important;
 }
+
+.label-field-view-input-wrapper label {
+    bottom: 40px !important;
+}
+
+.dark .ql-toolbar.ql-snow .ql-table-better svg path {
+    fill: hsl(240 4.9% 83.9%) !important;
+}
+.dark .ql-toolbar.ql-snow .ql-table-button-disabled {
+    background: transparent !important;
+}
+
+.dark .ql-editor table {
+    background: #fff;
+    color: #222;
+}
+
+.dark .ql-editor td,
+.dark .ql-editor th {
+    border-color: #bbb !important;
+}
+
+.dark .ql-table-menus-container,
+.dark .ql-table-dropdown-list,
+.dark .ql-table-dropdown-properties-list,
+.dark .ql-table-select-container,
+.dark .ql-table-properties-form,
+.dark .ql-table-color-container .color-picker .color-picker-select,
+.dark .ql-table-color-container .color-picker .color-picker-palette {
+    background: #fff !important;
+    color: #333 !important;
+    border-color: #ccced1 !important;
+}
+
+.dark .ql-table-select-container span {
+    border-color: #000 !important;
+}
+
+.dark .ql-table-properties-form .properties-form-header {
+    color: #333 !important;
+    border-color: #ccced1 !important;
+}

package/src/Form.tsx

@@ -140,8 +140,10 @@ import { getSafeUrl } from "./utils/isSafeUrl"
 import { useConnection } from "./providers/ConnectionProvider"
 import { getAuth } from "firebase/auth"
 import Quill, { Delta } from "quill"
+import QuillTableBetter from "quill-table-better"
 import "quill/dist/quill.core.css"
 import "quill/dist/quill.snow.css"
+import "quill-table-better/dist/quill-table-better.css"
 import { Breadcrumbs } from "./Breadcrumbs"
 import { FilePermissionsDialog, FilePermissions } from "./FilePermissions"
 import { getStorage, ref, uploadBytesResumable, getDownloadURL } from "firebase/storage"
@@ -1580,6 +1582,13 @@ function ArrayField({
     )
 }
 
+Quill.register(
+    {
+        "modules/table-better": QuillTableBetter,
+    },
+    true,
+)
+
 const RichTextEditor = forwardRef<
     Quill,
     { readOnly?: boolean; formField: ControllerRenderProps<FieldValues, string>; isDisabled?: boolean }
@@ -1590,10 +1599,10 @@ const RichTextEditor = forwardRef<
         if (ref && typeof ref === "object" && ref.current) {
             const quill = ref.current
             const currentContents = quill.getContents()
-            const newContents = formField.value
-
-            if (JSON.stringify(currentContents) !== JSON.stringify(newContents)) {
-                quill.setContents(newContents || [])
+            const incoming = new Delta(formField.value?.ops || [])
+            const diff = currentContents.diff(incoming)
+            if (diff.ops?.length > 0) {
+                quill.updateContents(diff, Quill.sources.SILENT)
             }
         }
     }, [ref, formField.value])
@@ -1602,9 +1611,38 @@ const RichTextEditor = forwardRef<
         const container = containerRef.current
         if (!container) return
 
+        const toolbarOptions = [
+            [
+                "table-better",
+                { header: [] },
+                "bold",
+                "italic",
+                "underline",
+                "strike",
+                "link",
+                { align: [] },
+                { list: "ordered" },
+                { list: "bullet" },
+                { color: [] },
+                { background: [] },
+            ],
+        ]
+
         const editorContainer = container.appendChild(container.ownerDocument.createElement("div"))
         const quill = new Quill(editorContainer, {
             theme: "snow",
+            modules: {
+                table: false,
+                toolbar: toolbarOptions,
+                "table-better": {
+                    language: "en_US",
+                    menus: ["column", "row", "merge", "table", "cell", "wrap", "copy", "delete"],
+                    toolbarTable: true,
+                },
+                keyboard: {
+                    bindings: QuillTableBetter.keyboardBindings,
+                },
+            },
         })
 
         if (ref && typeof ref === "object") {
@@ -1612,7 +1650,7 @@ const RichTextEditor = forwardRef<
         }
 
         if (formField.value) {
-            quill.setContents(formField.value)
+            quill.updateContents(formField.value)
         }
 
         quill.on(Quill.events.TEXT_CHANGE, () => {
@@ -4361,7 +4399,7 @@ function RecordForm({
                 </>
             )}
             <Form {...form}>
-                <form className="space-y-8 max-w-[750px]">
+                <form className="space-y-8 max-w-[750px]" onSubmit={(e) => e.preventDefault()}>
                     {formImagesEnabled && operation === "update" && !isOffline && (
                         <div className="flex flex-col gap-3 mt-2">
                             <Label>Images</Label>