chore(rte): update editor preview and add spellcheck

mendix · Jul 2, 2024 · 78fbe14 · 78fbe14
1 parent 7ca7c24
commit 78fbe14
Show file tree

Hide file tree

Showing 6 changed files with 19 additions and 25 deletions.
diff --git a/packages/pluggableWidgets/rich-text-web/src/RichText.editorPreview.tsx b/packages/pluggableWidgets/rich-text-web/src/RichText.editorPreview.tsx
@@ -4,8 +4,7 @@ import { createElement, ReactElement } from "react";
 import { RichTextPreviewProps } from "../typings/RichTextProps";
 import EditorWrapper from "./components/EditorWrapper";
 import "./ui/RichText.scss";
-import "quill/dist/quill.core.css";
-import "quill/dist/quill.snow.css";
+import "./ui/RichText.editor.scss";
 
 export enum FormatterType {
     Number = "number",
@@ -14,11 +13,13 @@ export enum FormatterType {
 
 export function preview(props: RichTextPreviewProps): ReactElement {
     const stringAttribute = {
-        value: "<p>Rich Text Editor</p>",
+        value: `[${
+            props.stringAttribute && props.stringAttribute !== "" ? props.stringAttribute : "No attribute selected"
+        }]`,
         displayValue: "",
         status: "available",
         validation: undefined,
-        readOnly: false,
+        readOnly: true,
         formatter: {
             format: () => "",
             parse: () => {

diff --git a/packages/pluggableWidgets/rich-text-web/src/RichText.xml b/packages/pluggableWidgets/rich-text-web/src/RichText.xml
@@ -113,27 +113,14 @@
                 </property>
             </propertyGroup>
         </propertyGroup>
-        <!-- <propertyGroup caption="Advanced">
+        <propertyGroup caption="Advanced">
             <propertyGroup caption="Advanced">
-                <property key="extended_valid_elements" type="textTemplate" required="false">
-                    <caption>Additional valid elements</caption>
-                    <description>Additional sanitization rules to allow certain tag, sample: script[src|async]</description>
-                </property>
                 <property key="spellCheck" type="boolean" defaultValue="false">
                     <caption>Enable spell checking</caption>
                     <description />
                 </property>
-                <property key="highlight_on_focus" type="boolean" defaultValue="false">
-                    <caption>Highlight on focus</caption>
-                    <description />
-                </property>
-                <property key="content_css" type="textTemplate" required="false">
-                    <caption>Additional stylesheet</caption>
-                    <description>Additional stylesheet to be included in the rich text content</description>
-                </property>
             </propertyGroup>
-        </propertyGroup> -->
-
+        </propertyGroup>
         <propertyGroup caption="Custom toolbar">
             <propertyGroup caption="Custom toolbar">
                 <property key="toolbarConfig" type="enumeration" defaultValue="basic">

diff --git a/packages/pluggableWidgets/rich-text-web/src/components/Editor.tsx b/packages/pluggableWidgets/rich-text-web/src/components/Editor.tsx
@@ -11,7 +11,7 @@ export interface EditorProps {
     theme: string;
     style?: CSSProperties;
     className?: string;
-    toolbarId?: string | (string | string[] | { [k: string]: any })[];
+    toolbarId?: string | Array<string | string[] | { [k: string]: any }>;
     readOnly?: boolean;
 }
 
@@ -50,17 +50,15 @@ const Editor = forwardRef((props: EditorProps, ref: MutableRefObject<Quill | nul
                 const options: QuillOptions = {
                     theme,
                     modules: {
-                        toolbar: Array.isArray(toolbarId) ? toolbarId : toolbarId ? `#${toolbarId}` : false
+                        toolbar: toolbarId && Array.isArray(toolbarId) ? toolbarId : toolbarId ? `#${toolbarId}` : false
                     },
                     readOnly
                 };
                 const quill = new Quill(editorContainer, options);
-
                 ref.current = quill;
                 quill.on(Quill.events.TEXT_CHANGE, (...arg) => {
                     onTextChangeRef.current?.(...arg);
                 });
-
                 quill.on(Quill.events.SELECTION_CHANGE, (...arg) => {
                     onSelectionChangeRef.current?.(...arg);
                 });
@@ -74,7 +72,7 @@ const Editor = forwardRef((props: EditorProps, ref: MutableRefObject<Quill | nul
             };
         },
         // eslint-disable-next-line react-hooks/exhaustive-deps
-        [ref]
+        [ref, toolbarId]
     );
 
     return <div ref={containerRef} style={style} className={className}></div>;

diff --git a/packages/pluggableWidgets/rich-text-web/src/components/EditorWrapper.tsx b/packages/pluggableWidgets/rich-text-web/src/components/EditorWrapper.tsx
@@ -14,7 +14,7 @@ export interface EditorWrapperProps extends RichTextContainerProps {
     editorWidth?: string | number;
     style?: CSSProperties;
     className?: string;
-    toolbarOptions?: (string | string[] | { [k: string]: any })[];
+    toolbarOptions?: Array<string | string[] | { [k: string]: any }>;
 }
 
 export default function EditorWrapper(props: EditorWrapperProps): ReactElement {
@@ -95,6 +95,7 @@ export default function EditorWrapper(props: EditorWrapperProps): ReactElement {
                     quillRef?.current?.focus();
                 }
             }}
+            spellCheck={props.spellCheck}
         >
             <If condition={!shouldHideToolbar && toolbarOptions === undefined}>
                 <Toolbar id={toolbarId} preset={preset} quill={quillRef.current} toolbarContent={toolbarPreset} />

diff --git a/packages/pluggableWidgets/rich-text-web/src/ui/RichText.editor.scss b/packages/pluggableWidgets/rich-text-web/src/ui/RichText.editor.scss
@@ -0,0 +1,5 @@
+.widget-rich-text {
+    .ql-container {
+        height: 150px;
+    }
+}
diff --git a/packages/pluggableWidgets/rich-text-web/typings/RichTextProps.d.ts b/packages/pluggableWidgets/rich-text-web/typings/RichTextProps.d.ts
@@ -46,6 +46,7 @@ export interface RichTextContainerProps {
     onFocus?: ActionValue;
     onBlur?: ActionValue;
     onChangeType: OnChangeTypeEnum;
+    spellCheck: boolean;
     toolbarConfig: ToolbarConfigEnum;
     history: boolean;
     fontStyle: boolean;
@@ -76,6 +77,7 @@ export interface RichTextPreviewProps {
     onFocus: {} | null;
     onBlur: {} | null;
     onChangeType: OnChangeTypeEnum;
+    spellCheck: boolean;
     toolbarConfig: ToolbarConfigEnum;
     history: boolean;
     fontStyle: boolean;