@wavemaker/react-runtime 11.14.2-1.245 → 12.0.0-next.28533

package/components/basic/richtexteditor/index.js

@@ -15,6 +15,8 @@ var _joditReact = _interopRequireDefault(require("jodit-react"));
 var _dompurify = _interopRequireDefault(require("dompurify"));
 var _withBaseWrapper = require("@wavemaker/react-runtime/higherOrder/withBaseWrapper");
 var lodash = _interopRequireWildcard(require("lodash-es"));
+var _withFormController = _interopRequireDefault(require("@wavemaker/react-runtime/components/data/form/form-controller/withFormController"));
+var _util = require("@wavemaker/react-runtime/core/util");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
 var __jsx = _react["default"].createElement;
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -57,7 +59,8 @@ var EditorContainer = (0, _styles.styled)(_material.Box)(function (_ref) {
     // Reset problematic global styles that override rich text editor
     "& .jodit-wysiwyg": {
       padding: "unset !important",
-      margin: "unset !important"
+      margin: "unset !important",
+      minHeight: "100px !important "
     },
     "& .jodit-wysiwyg ul, & .jodit-wysiwyg li": {
       paddingLeft: "2em !important",
@@ -84,7 +87,7 @@ var PreviewContainer = (0, _styles.styled)(_material.Box)(function (_ref2) {
     borderRadius: theme.shape.borderRadius,
     backgroundColor: theme.palette.background.paper,
     color: theme.palette.text.primary,
-    minHeight: "100px",
+    minHeight: "100px !important",
     overflowY: "auto",
     "& img": {
       maxWidth: "100%"
@@ -103,7 +106,7 @@ var PreviewContainer = (0, _styles.styled)(_material.Box)(function (_ref2) {
 var HiddenInput = (0, _styles.styled)("input")({
   display: "none"
 });
-var WmRichTextEditor = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+var WmRichTextEditorBase = function WmRichTextEditorBase(props) {
   var name = props.name,
     className = props.className,
     _props$placeholder = props.placeholder,
@@ -125,7 +128,9 @@ var WmRichTextEditor = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
     onBeforerender = props.onBeforerender,
     hint = props.hint,
     arialabel = props.arialabel,
-    listener = props.listener;
+    listener = props.listener,
+    _props$updateon = props.updateon,
+    updateon = _props$updateon === void 0 ? "keypress" : _props$updateon;
 
   // Extract dimensions from props or styles, converting numbers to pixel strings
   var getDimension = function getDimension(value) {
@@ -159,6 +164,7 @@ var WmRichTextEditor = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
   var hiddenInputRef = (0, _react.useRef)(null);
   var lastValueRef = (0, _react.useRef)(actualValue || "");
   var isMountedRef = (0, _react.useRef)(true);
+  var internalValueRef = (0, _react.useRef)(actualValue || "");
   var widgetInstance = listener === null || listener === void 0 ? void 0 : listener.Widgets[name];
 
   // Memoize editor options
@@ -166,16 +172,15 @@ var WmRichTextEditor = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
     return {
       toolbar: true,
       placeholder: placeholder,
-      // minHeight: height ? (typeof height === 'string' && height.endsWith('px') ? parseInt(height, 10) : 100) : 100,
+      minHeight: height ? typeof height === "string" && height.endsWith("px") ? parseInt(height, 10) : 100 : 100,
       width: width,
-      readOnly: readonly,
-      disabled: readonly || disabled,
+      readonly: readonly,
+      disabled: disabled,
       statusbar: true,
-      toolbarAdaptive: true,
+      toolbarAdaptive: false,
       askBeforePasteHTML: false,
       askBeforePasteFromWord: false,
-      buttons: ["source", "|", "bold", "italic", "underline", "strikethrough", "|", "font", "fontsize", "brush", "paragraph", "|", "superscript", "subscript", "|", "ul", "ol", "|", "outdent", "indent", "|", "align", "undo", "redo", "|", "hr", "eraser", "fullsize", "|", "table", "link", "image", "video"],
-      removeButtons: ["about"],
+      buttons: ["source", "|", "bold", "italic", "underline", "strikethrough", "|", "font", "fontsize", "brush", "paragraph", "|", "superscript", "subscript", "|", "ul", "ol", "|", "outdent", "indent", "|", "align", "undo", "redo", "|", "hr", "eraser", "fullsize", "|", "table", "link", "image", "video", "|", "about"],
       showXPathInStatusbar: false,
       showCharsCounter: false,
       showWordsCounter: false,
@@ -205,8 +210,24 @@ var WmRichTextEditor = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
     if (hiddenInputRef.current) {
       hiddenInputRef.current.value = sanitizedContent;
     }
+    if (props.datavalue === sanitizedContent) {
+      return;
+    }
+    if (onChange && updateon !== "keypress") {
+      var _editorRef$current;
+      // tempDiv.innerHTML = lastValueRef.current;
+      // const old_text_context = tempDiv.textContent || tempDiv.innerText || "";
+      var syntheticEvent = {
+        target: {
+          value: sanitizedContent,
+          name: name
+        },
+        currentTarget: (_editorRef$current = editorRef.current) === null || _editorRef$current === void 0 || (_editorRef$current = _editorRef$current.editor) === null || _editorRef$current === void 0 ? void 0 : _editorRef$current.workplace
+      };
+      onChange(syntheticEvent, widgetInstance, newContent, sanitizedContent);
+    }
     if (listener !== null && listener !== void 0 && listener.onChange) {
-      listener.onChange(props.name, {
+      listener.onChange(props.fieldName || props.name, {
         datavalue: sanitizedContent
       });
     }
@@ -219,8 +240,8 @@ var WmRichTextEditor = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
 
   // Memoize performEditorOperation
   var performEditorOperation = (0, _react.useCallback)(function (operation, value) {
-    var _editorRef$current;
-    if (!isEditorLoaded || !((_editorRef$current = editorRef.current) !== null && _editorRef$current !== void 0 && _editorRef$current.editor)) {
+    var _editorRef$current2;
+    if (!isEditorLoaded || !((_editorRef$current2 = editorRef.current) !== null && _editorRef$current2 !== void 0 && _editorRef$current2.editor)) {
       setOperationStack(function (prev) {
         return [].concat((0, _toConsumableArray2["default"])(prev), [{
           type: operation,
@@ -291,20 +312,18 @@ var WmRichTextEditor = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
       console.error("Error performing editor operation ".concat(operation, ":"), error);
     }
   }, [isEditorLoaded, sanitizeHtml]);
-
-  // Memoize handleOnBeforeRender
-  var handleOnBeforeRender = (0, _react.useCallback)(function () {
+  (0, _react.useEffect)(function () {
     if (onBeforerender) {
-      var _editorRef$current2;
+      var _editorRef$current3;
       var syntheticEvent = {
         target: {
           value: ""
         },
-        currentTarget: (_editorRef$current2 = editorRef.current) === null || _editorRef$current2 === void 0 || (_editorRef$current2 = _editorRef$current2.editor) === null || _editorRef$current2 === void 0 ? void 0 : _editorRef$current2.workplace
+        currentTarget: (_editorRef$current3 = editorRef.current) === null || _editorRef$current3 === void 0 || (_editorRef$current3 = _editorRef$current3.editor) === null || _editorRef$current3 === void 0 ? void 0 : _editorRef$current3.workplace
       };
       onBeforerender(syntheticEvent, widgetInstance);
     }
-  }, [onBeforerender]);
+  }, []);
 
   // Create a debounced version of handleOnChange
   var debouncedHandleOnChange = (0, _react.useMemo)(function () {
@@ -313,31 +332,34 @@ var WmRichTextEditor = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
       var tempDiv = document.createElement("div");
       tempDiv.innerHTML = newContent;
       var new_text_content = tempDiv.textContent || tempDiv.innerText || "";
+      internalValueRef.current = new_text_content;
       if (name && widgetInstance) {
         widgetInstance.displayValue = new_text_content;
       }
-      if (onChange) {
-        var _editorRef$current3;
-        tempDiv.innerHTML = lastValueRef.current;
-        var old_text_context = tempDiv.textContent || tempDiv.innerText || "";
-        var syntheticEvent = {
-          target: {
-            value: new_text_content,
-            name: name
-          },
-          currentTarget: (_editorRef$current3 = editorRef.current) === null || _editorRef$current3 === void 0 || (_editorRef$current3 = _editorRef$current3.editor) === null || _editorRef$current3 === void 0 ? void 0 : _editorRef$current3.workplace
-        };
-        onChange(syntheticEvent, widgetInstance, new_text_content, old_text_context);
-      }
-      if (name && widgetInstance) {
-        widgetInstance.datavalue = new_text_content;
-      }
-      lastValueRef.current = sanitizedContent;
-      if (hiddenInputRef.current) {
-        hiddenInputRef.current.value = sanitizedContent;
+      if (updateon === "keypress") {
+        if (onChange) {
+          var _editorRef$current4;
+          tempDiv.innerHTML = lastValueRef.current;
+          var old_text_context = tempDiv.textContent || tempDiv.innerText || "";
+          var syntheticEvent = {
+            target: {
+              value: new_text_content,
+              name: name
+            },
+            currentTarget: (_editorRef$current4 = editorRef.current) === null || _editorRef$current4 === void 0 || (_editorRef$current4 = _editorRef$current4.editor) === null || _editorRef$current4 === void 0 ? void 0 : _editorRef$current4.workplace
+          };
+          onChange(syntheticEvent, widgetInstance, new_text_content, old_text_context);
+        }
+        if (name && widgetInstance) {
+          widgetInstance.datavalue = new_text_content;
+        }
+        lastValueRef.current = sanitizedContent;
+        if (hiddenInputRef.current) {
+          hiddenInputRef.current.value = sanitizedContent;
+        }
       }
-    });
-  }, [name, listener, onChange, sanitizeHtml]);
+    }, parseInt(props.updatedelay || "10"));
+  }, [onChange]);
 
   // Cleanup debounced function on unmount
   (0, _react.useEffect)(function () {
@@ -348,9 +370,13 @@ var WmRichTextEditor = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
 
   // Memoize handleEditorInit
   var handleEditorInit = (0, _react.useCallback)(function () {
-    var _editorRef$current4;
+    var _editorRef$current5;
     setIsEditorLoaded(true);
-    if ((_editorRef$current4 = editorRef.current) !== null && _editorRef$current4 !== void 0 && _editorRef$current4.editor) {
+    if ((_editorRef$current5 = editorRef.current) !== null && _editorRef$current5 !== void 0 && _editorRef$current5.editor) {
+      // Initialize content explicitly to avoid relying on value prop
+      if (content !== undefined && content !== null) {
+        editorRef.current.editor.value = content === null || content === void 0 ? void 0 : content.toString();
+      }
       if (height) {
         var heightValue = typeof height === "string" && height.endsWith("px") ? parseInt(height, 10) : height;
         performEditorOperation("height", heightValue);
@@ -372,11 +398,11 @@ var WmRichTextEditor = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
     return _objectSpread(_objectSpread({}, editorOptions), {}, {
       tabIndex: tabindex,
       events: {
-        change: debouncedHandleOnChange,
-        beforeInit: handleOnBeforeRender
+        ready: handleEditorInit
+        // afterInit: handleEditorInit,
       }
     });
-  }, [editorOptions, tabindex, debouncedHandleOnChange, handleOnBeforeRender]);
+  }, [editorOptions, tabindex, handleEditorInit]);
 
   // Memoize the component's JSX
   var editorJSX = (0, _react.useMemo)(function () {
@@ -386,23 +412,23 @@ var WmRichTextEditor = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
       style: {
         width: width
       },
-      height: styles === null || styles === void 0 ? void 0 : styles.height
+      height: styles === null || styles === void 0 ? void 0 : styles.height,
+      "aria-readonly": readonly,
+      hidden: props.hidden
     }, __jsx(_joditReact["default"], {
       ref: editorRef,
-      value: content.toString(),
+      value: content === null || content === void 0 ? void 0 : content.toString(),
       config: editorConfig,
       onBlur: handleEditorBlur,
-      onChange: function onChange() {} // Empty onChange as we handle it in config
-      ,
-      onReady: handleEditorInit
+      onChange: debouncedHandleOnChange
     }), __jsx(HiddenInput, {
       ref: hiddenInputRef,
       className: "model-holder",
       disabled: disabled,
-      value: content.toString(),
+      value: content === null || content === void 0 ? void 0 : content.toString(),
       name: name,
       readOnly: true
-    })), showpreview && __jsx(PreviewContainer, {
+    })), (0, _util.toBoolean)(showpreview) && __jsx(PreviewContainer, {
       className: "ta-preview",
       style: {
         width: width
@@ -442,16 +468,16 @@ var WmRichTextEditor = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
 
   // Handle datavalue changes
   (0, _react.useEffect)(function () {
-    if (datavalue != lastValueRef.current) {
+    if (datavalue != internalValueRef.current) {
       setContent(datavalue);
-      lastValueRef.current = datavalue;
+      internalValueRef.current = datavalue;
     }
   }, [datavalue]);
 
   // Initialize editor and handle prop changes
   (0, _react.useEffect)(function () {
-    var _editorRef$current5;
-    if ((_editorRef$current5 = editorRef.current) !== null && _editorRef$current5 !== void 0 && _editorRef$current5.editor && isEditorLoaded) {
+    var _editorRef$current6;
+    if ((_editorRef$current6 = editorRef.current) !== null && _editorRef$current6 !== void 0 && _editorRef$current6.editor && isEditorLoaded) {
       // Handle readonly/disabled state changes
       if (readonly || disabled) {
         performEditorOperation("disable");
@@ -477,41 +503,6 @@ var WmRichTextEditor = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
     }
   }, [readonly, disabled, placeholder, height, width, performEditorOperation, isEditorLoaded]);
 
-  // Expose editor methods to parent components
-  (0, _react.useImperativeHandle)(ref, function () {
-    return {
-      // Get current HTML content
-      htmlcontent: function htmlcontent() {
-        return performEditorOperation("code");
-      },
-      // Get current selection position
-      getCurrentPosition: function getCurrentPosition() {
-        return performEditorOperation("createRange");
-      },
-      // Undo last operation
-      undo: function undo() {
-        return performEditorOperation("undo");
-      },
-      // Focus the editor
-      focus: function focus() {
-        return performEditorOperation("focus");
-      },
-      // Get editor instance
-      getEditor: function getEditor() {
-        var _editorRef$current6;
-        return (_editorRef$current6 = editorRef.current) === null || _editorRef$current6 === void 0 ? void 0 : _editorRef$current6.editor;
-      },
-      // Set editor content
-      setContent: function setContent(newContent) {
-        performEditorOperation("code", newContent);
-      },
-      // Perform custom editor operation
-      performOperation: function performOperation(operation, value) {
-        return performEditorOperation(operation, value);
-      }
-    };
-  });
-
   // Clean up on unmount
   (0, _react.useEffect)(function () {
     isMountedRef.current = true;
@@ -520,7 +511,8 @@ var WmRichTextEditor = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
       isMountedRef.current = false;
       if ((_editorRef$current7 = editorRef.current) !== null && _editorRef$current7 !== void 0 && _editorRef$current7.editor) {
         try {
-          editorRef.current.editor.destruct();
+          var _editorRef$current8;
+          editorRef === null || editorRef === void 0 || (_editorRef$current8 = editorRef.current) === null || _editorRef$current8 === void 0 || (_editorRef$current8 = _editorRef$current8.editor) === null || _editorRef$current8 === void 0 || _editorRef$current8.destruct();
         } catch (error) {
           console.error("Error destructing editor:", error);
         }
@@ -528,6 +520,15 @@ var WmRichTextEditor = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
     };
   }, []);
   return editorJSX;
+};
+WmRichTextEditorBase.displayName = "WmRichTextEditor";
+
+// Memoize editor to avoid unnecessary re-renders from changing handler identities
+var WmRichTextEditor = /*#__PURE__*/_react["default"].memo(WmRichTextEditorBase, function (prev, next) {
+  // Core props that should trigger a re-render when changed
+  var keys = ["datavalue", "readonly", "disabled", "placeholder", "tabindex", "showpreview", "hint", "arialabel", "hidden", "name"];
+  return keys.every(function (key) {
+    return lodash.isEqual(prev[key], next[key]);
+  });
 });
-WmRichTextEditor.displayName = "WmRichTextEditor";
-var _default = exports["default"] = /*#__PURE__*/_react["default"].memo((0, _withBaseWrapper.withBaseWrapper)(WmRichTextEditor));
+var _default = exports["default"] = (0, _withBaseWrapper.withBaseWrapper)((0, _withFormController["default"])(WmRichTextEditor));