@wavemaker-ai/react-runtime 1.0.0-rc.309 → 1.0.0-rc.314

package/components/basic/richtexteditor/index.js

@@ -1,330 +1,344 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = exports.WmRichtexteditor = void 0;
-var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-var _react = _interopRequireWildcard(require("react"));
-var _material = require("@mui/material");
-var _styles = require("@mui/material/styles");
-var _dompurify = _interopRequireDefault(require("dompurify"));
-var _withBaseWrapper = require("@wavemaker-ai/react-runtime/higherOrder/withBaseWrapper");
-var lodash = _interopRequireWildcard(require("lodash-es"));
-var _withFormController = _interopRequireDefault(require("@wavemaker-ai/react-runtime/components/data/form/form-controller/withFormController"));
-var _util = require("@wavemaker-ai/react-runtime/core/util");
-var _withStandalone = _interopRequireDefault(require("@wavemaker-ai/react-runtime/higherOrder/withStandalone"));
-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; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-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" != (0, _typeof2["default"])(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 JoditEditor = /*#__PURE__*/(0, _react.lazy)(function () {
-  return Promise.resolve().then(function () {
-    return _interopRequireWildcard(require("jodit-react"));
-  });
-});
-var EditorPlaceholder = function EditorPlaceholder(_ref) {
-  var content = _ref.content,
-    placeholder = _ref.placeholder,
-    width = _ref.width,
-    height = _ref.height,
-    disabled = _ref.disabled,
-    readonly = _ref.readonly;
-  return __jsx("textarea", {
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import React, { useState, useRef, useEffect, useCallback, useMemo, lazy } from "react";
+import { Box } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
+import DOMPurify from "dompurify";
+import { withBaseWrapper } from "../../../higherOrder/withBaseWrapper";
+import * as lodash from "lodash-es";
+import withFormController from "../../data/form/form-controller/withFormController";
+import { toBoolean } from "../../../core/util";
+import withStandalone from "../../../higherOrder/withStandalone";
+const JoditEditor = lazy(() => import("jodit-react"));
+const EditorPlaceholder = ({
+  content,
+  placeholder,
+  width,
+  height,
+  disabled,
+  readonly
+}) => /* @__PURE__ */ jsx(
+  "textarea",
+  {
     className: "wm-richtexteditor-placeholder",
     value: content,
-    placeholder: placeholder,
-    disabled: disabled,
+    placeholder,
+    disabled,
     readOnly: readonly,
     style: {
       minHeight: height || "100px",
-      width: width
+      width
     }
-  });
-};
-var WmRichTextEditorBase = function WmRichTextEditorBase(props) {
-  var name = props.name,
-    className = props.className,
-    _props$placeholder = props.placeholder,
-    placeholder = _props$placeholder === void 0 ? "write here..." : _props$placeholder,
-    _props$tabindex = props.tabindex,
-    tabindex = _props$tabindex === void 0 ? 0 : _props$tabindex,
-    _props$datavalue = props.datavalue,
-    datavalue = _props$datavalue === void 0 ? "" : _props$datavalue,
-    _props$readonly = props.readonly,
-    readonly = _props$readonly === void 0 ? false : _props$readonly,
-    _props$disabled = props.disabled,
-    disabled = _props$disabled === void 0 ? false : _props$disabled,
-    _props$showpreview = props.showpreview,
-    showpreview = _props$showpreview === void 0 ? false : _props$showpreview,
-    propWidth = props.width,
-    propHeight = props.height,
-    styles = props.styles,
-    onChange = props.onChange,
-    onBeforerender = props.onBeforerender,
-    hint = props.hint,
-    arialabel = props.arialabel,
-    listener = props.listener,
-    _props$updateon = props.updateon,
-    updateon = _props$updateon === void 0 ? "keypress" : _props$updateon;
-  var theme = (0, _styles.useTheme)();
-
-  // Extract dimensions from props or styles, converting numbers to pixel strings
-  var getDimension = function getDimension(value) {
+  }
+);
+const WmRichTextEditorBase = (props) => {
+  const {
+    name,
+    className,
+    placeholder = "write here...",
+    tabindex = 0,
+    datavalue = "",
+    readonly = false,
+    disabled = false,
+    showpreview = false,
+    width: propWidth,
+    height: propHeight,
+    styles,
+    onChange,
+    onBeforerender,
+    hint,
+    arialabel,
+    listener,
+    updateon = "keypress"
+  } = props;
+  const theme = useTheme();
+  const getDimension = (value) => {
     if (typeof value === "number") {
-      return "".concat(value, "px");
+      return `${value}px`;
     }
     return value || "";
   };
-
-  // Prioritize styles prop over individual props
-  var width = getDimension((styles === null || styles === void 0 ? void 0 : styles.width) || propWidth) || "100%";
-  var height = getDimension((styles === null || styles === void 0 ? void 0 : styles.height) || propHeight);
-
-  // Memoize the actual value calculation
-  var actualValue = (0, _react.useMemo)(function () {
-    return datavalue;
-  }, [datavalue]);
-  var _useState = (0, _react.useState)(actualValue || ""),
-    content = _useState[0],
-    setContent = _useState[1];
-  var _useState2 = (0, _react.useState)(false),
-    isEditorLoaded = _useState2[0],
-    setIsEditorLoaded = _useState2[1];
-  var _useState3 = (0, _react.useState)([]),
-    operationStack = _useState3[0],
-    setOperationStack = _useState3[1];
-  var _useState4 = (0, _react.useState)(false),
-    isInternalChange = _useState4[0],
-    setIsInternalChange = _useState4[1];
-  var editorRef = (0, _react.useRef)(null);
-  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
-  var editorOptions = (0, _react.useMemo)(function () {
-    return {
+  const width = getDimension((styles == null ? void 0 : styles.width) || propWidth) || "100%";
+  const height = getDimension((styles == null ? void 0 : styles.height) || propHeight);
+  const actualValue = useMemo(() => datavalue, [datavalue]);
+  const [content, setContent] = useState(actualValue || "");
+  const [isEditorLoaded, setIsEditorLoaded] = useState(false);
+  const [operationStack, setOperationStack] = useState([]);
+  const [isInternalChange, setIsInternalChange] = useState(false);
+  const editorRef = useRef(null);
+  const hiddenInputRef = useRef(null);
+  const lastValueRef = useRef(actualValue || "");
+  const isMountedRef = useRef(true);
+  const internalValueRef = useRef(actualValue || "");
+  const widgetInstance = listener == null ? void 0 : listener.Widgets[name || ""];
+  const editorOptions = useMemo(
+    () => ({
       toolbar: true,
-      placeholder: placeholder,
+      placeholder,
       minHeight: height ? typeof height === "string" && height.endsWith("px") ? parseInt(height, 10) : 100 : 100,
-      width: width,
-      readonly: readonly,
-      disabled: disabled,
+      width,
+      readonly,
+      disabled,
       statusbar: 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", "|", "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,
       toolbarSticky: false,
       enableDragAndDropFileToEditor: true
-    };
-  }, [placeholder, height, width, readonly, disabled]);
-
-  // Memoize sanitizeHtml function
-  var sanitizeHtml = (0, _react.useCallback)(function (html) {
+    }),
+    [placeholder, height, width, readonly, disabled]
+  );
+  const sanitizeHtml = useCallback((html) => {
     if (!html) return "";
-    return _dompurify["default"].sanitize(html, {
+    return DOMPurify.sanitize(html, {
       ADD_TAGS: ["iframe", "video", "source"],
-      ADD_ATTR: ["allow", "allowfullscreen", "frameborder", "scrolling", "controls", "src", "type", "width", "height"]
+      ADD_ATTR: [
+        "allow",
+        "allowfullscreen",
+        "frameborder",
+        "scrolling",
+        "controls",
+        "src",
+        "type",
+        "width",
+        "height"
+      ]
     });
   }, []);
-
-  // Memoize handleEditorChange
-  var handleEditorChange = (0, _react.useCallback)(function (newContent) {
-    var isFromUser = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-    if (!isMountedRef.current || isInternalChange) {
-      return;
-    }
-    var sanitizedContent = sanitizeHtml(newContent);
-    lastValueRef.current = sanitizedContent;
-    setContent(sanitizedContent);
-    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.fieldName || props.name, {
-        datavalue: sanitizedContent
-      });
-    }
-  }, [sanitizeHtml, isInternalChange]);
-
-  // Memoize handleEditorBlur
-  var handleEditorBlur = (0, _react.useCallback)(function (newContent, event) {
-    handleEditorChange(newContent, true);
-  }, [handleEditorChange]);
-
-  // Memoize performEditorOperation
-  var performEditorOperation = (0, _react.useCallback)(function (operation, value) {
-    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,
-          value: value
-        }]);
-      });
-      return;
-    }
-    var editor = editorRef.current.editor;
-    try {
-      switch (operation) {
-        case "code":
-          if (value === undefined) {
-            return editor.isEmpty() ? "" : editor.value;
-          } else {
+  const handleEditorChange = useCallback(
+    (newContent, isFromUser = true) => {
+      var _a, _b;
+      if (!isMountedRef.current || isInternalChange) {
+        return;
+      }
+      const sanitizedContent = sanitizeHtml(newContent);
+      lastValueRef.current = sanitizedContent;
+      setContent(sanitizedContent);
+      if (hiddenInputRef.current) {
+        hiddenInputRef.current.value = sanitizedContent;
+      }
+      if (props.datavalue === sanitizedContent) {
+        return;
+      }
+      if (onChange && updateon !== "keypress") {
+        const syntheticEvent = {
+          target: {
+            value: sanitizedContent,
+            name
+          },
+          currentTarget: (_b = (_a = editorRef.current) == null ? void 0 : _a.editor) == null ? void 0 : _b.workplace
+        };
+        onChange(syntheticEvent, widgetInstance, newContent, sanitizedContent);
+      }
+      if (listener == null ? void 0 : listener.onChange) {
+        listener.onChange(props.fieldName || props.name, {
+          datavalue: sanitizedContent
+        });
+      }
+    },
+    [sanitizeHtml, isInternalChange]
+  );
+  const handleEditorBlur = useCallback(
+    (newContent, event) => {
+      handleEditorChange(newContent, true);
+    },
+    [handleEditorChange]
+  );
+  const performEditorOperation = useCallback(
+    (operation, value) => {
+      var _a;
+      if (!isEditorLoaded || !((_a = editorRef.current) == null ? void 0 : _a.editor)) {
+        setOperationStack((prev) => [...prev, { type: operation, value }]);
+        return;
+      }
+      const editor = editorRef.current.editor;
+      try {
+        switch (operation) {
+          case "code":
+            if (value === void 0) {
+              return editor.isEmpty() ? "" : editor.value;
+            } else {
+              setIsInternalChange(true);
+              const sanitizedValue = sanitizeHtml(value);
+              editor.value = sanitizedValue;
+              setContent(sanitizedValue);
+              lastValueRef.current = sanitizedValue;
+              setTimeout(() => setIsInternalChange(false), 100);
+              return;
+            }
+          case "reset":
             setIsInternalChange(true);
-            var sanitizedValue = sanitizeHtml(value);
-            editor.value = sanitizedValue;
-            setContent(sanitizedValue);
-            lastValueRef.current = sanitizedValue;
-            setTimeout(function () {
-              return setIsInternalChange(false);
-            }, 100);
+            editor.value = "";
+            setContent("");
+            lastValueRef.current = "";
+            setTimeout(() => setIsInternalChange(false), 100);
             return;
-          }
-        case "reset":
-          setIsInternalChange(true);
-          editor.value = "";
-          setContent("");
-          lastValueRef.current = "";
-          setTimeout(function () {
-            return setIsInternalChange(false);
-          }, 100);
-          return;
-        case "focus":
-          editor.focus();
-          return;
-        case "disable":
-          editor.disable();
-          return;
-        case "enable":
-          editor.enable();
-          return;
-        case "placeholder":
-          editor.options.placeholder = value;
-          return;
-        case "height":
-          editor.options.height = value;
-          if (editor.workplace) {
-            editor.workplace.style.height = typeof value === "number" ? "".concat(value, "px") : value;
-          }
-          return;
-        case "width":
-          editor.options.width = value;
-          if (editor.container) {
-            editor.container.style.width = typeof value === "number" ? "".concat(value, "px") : value;
-          }
-          return;
-        case "undo":
-          editor.history.undo();
-          return;
-        case "createRange":
-          return editor.selection.current();
-        default:
-          return;
+          case "focus":
+            editor.focus();
+            return;
+          case "disable":
+            editor.disable();
+            return;
+          case "enable":
+            editor.enable();
+            return;
+          case "placeholder":
+            editor.options.placeholder = value;
+            return;
+          case "height":
+            editor.options.height = value;
+            if (editor.workplace) {
+              editor.workplace.style.height = typeof value === "number" ? `${value}px` : value;
+            }
+            return;
+          case "width":
+            editor.options.width = value;
+            if (editor.container) {
+              editor.container.style.width = typeof value === "number" ? `${value}px` : value;
+            }
+            return;
+          case "undo":
+            editor.history.undo();
+            return;
+          case "createRange":
+            return editor.selection.current();
+          default:
+            return;
+        }
+      } catch (error) {
+        console.error(`Error performing editor operation ${operation}:`, error);
       }
-    } catch (error) {
-      console.error("Error performing editor operation ".concat(operation, ":"), error);
-    }
-  }, [isEditorLoaded, sanitizeHtml]);
-  (0, _react.useEffect)(function () {
+    },
+    [isEditorLoaded, sanitizeHtml]
+  );
+  useEffect(() => {
+    var _a, _b;
     if (onBeforerender) {
-      var _editorRef$current3;
-      var syntheticEvent = {
+      const syntheticEvent = {
         target: {
           value: ""
         },
-        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
+        currentTarget: (_b = (_a = editorRef.current) == null ? void 0 : _a.editor) == null ? void 0 : _b.workplace
       };
       onBeforerender(syntheticEvent, widgetInstance);
     }
   }, []);
-
-  // Create a debounced version of handleOnChange
-  var debouncedHandleOnChange = (0, _react.useMemo)(function () {
-    return lodash.debounce(function (newContent) {
-      var sanitizedContent = sanitizeHtml(newContent);
-      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 (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);
-        }
+  const debouncedHandleOnChange = useMemo(
+    () => lodash.debounce(
+      (newContent) => {
+        var _a, _b;
+        const sanitizedContent = sanitizeHtml(newContent);
+        const tempDiv = document.createElement("div");
+        tempDiv.innerHTML = newContent;
+        const new_text_content = tempDiv.textContent || tempDiv.innerText || "";
+        internalValueRef.current = new_text_content;
         if (name && widgetInstance) {
-          widgetInstance.datavalue = new_text_content;
+          widgetInstance.displayValue = new_text_content;
         }
-        lastValueRef.current = sanitizedContent;
-        if (hiddenInputRef.current) {
-          hiddenInputRef.current.value = sanitizedContent;
+        if (updateon === "keypress") {
+          if (onChange) {
+            tempDiv.innerHTML = lastValueRef.current;
+            const old_text_context = tempDiv.textContent || tempDiv.innerText || "";
+            const syntheticEvent = {
+              target: {
+                value: new_text_content,
+                name
+              },
+              currentTarget: (_b = (_a = editorRef.current) == null ? void 0 : _a.editor) == null ? void 0 : _b.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;
+          }
         }
-      }
-    }, parseInt(props.updatedelay || "10"));
-  }, [onChange]);
-
-  // Cleanup debounced function on unmount
-  (0, _react.useEffect)(function () {
-    return function () {
+      },
+      parseInt(props.updatedelay || "10")
+    ),
+    [onChange]
+  );
+  useEffect(() => {
+    return () => {
       debouncedHandleOnChange.cancel();
     };
   }, [debouncedHandleOnChange]);
-
-  // Memoize handleEditorInit
-  var handleEditorInit = (0, _react.useCallback)(function () {
-    var _editorRef$current5;
+  const handleEditorInit = useCallback(() => {
+    var _a;
     setIsEditorLoaded(true);
-    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 ((_a = editorRef.current) == null ? void 0 : _a.editor) {
+      if (content !== void 0 && content !== null) {
+        editorRef.current.editor.value = content == null ? void 0 : content.toString();
       }
       if (height) {
-        var heightValue = typeof height === "string" && height.endsWith("px") ? parseInt(height, 10) : height;
+        const heightValue = typeof height === "string" && height.endsWith("px") ? parseInt(height, 10) : height;
         performEditorOperation("height", heightValue);
       }
       if (width) {
         performEditorOperation("width", width);
       }
-      var editorElement = editorRef.current.editor.workplace;
+      const editorElement = editorRef.current.editor.workplace;
       if (editorElement) {
         editorElement.setAttribute("aria-label", arialabel || "Rich Text Editor");
         editorElement.setAttribute("role", "textbox");
@@ -332,157 +346,170 @@ var WmRichTextEditorBase = function WmRichTextEditorBase(props) {
       }
     }
   }, [arialabel, height, width, performEditorOperation]);
-
-  // Memoize the editor config
-  var editorConfig = (0, _react.useMemo)(function () {
-    return _objectSpread(_objectSpread({}, editorOptions), {}, {
+  const editorConfig = useMemo(
+    () => __spreadProps(__spreadValues({}, editorOptions), {
       tabIndex: tabindex,
       events: {
         ready: handleEditorInit
         // afterInit: handleEditorInit,
       }
-    });
-  }, [editorOptions, tabindex, handleEditorInit]);
-  var editorRootStyle = (0, _react.useMemo)(function () {
-    return {
-      width: width,
-      "--richtexteditor-height": styles !== null && styles !== void 0 && styles.height ? String(styles.height) : undefined,
+    }),
+    [editorOptions, tabindex, handleEditorInit]
+  );
+  const editorRootStyle = useMemo(
+    () => ({
+      width,
+      "--richtexteditor-height": (styles == null ? void 0 : styles.height) ? String(styles.height) : void 0,
       "--richtexteditor-divider": theme.palette.divider,
       "--richtexteditor-paper-bg": theme.palette.background.paper,
       "--richtexteditor-text-primary": theme.palette.text.primary,
       "--richtexteditor-preview-margin-top": theme.spacing(2),
       "--richtexteditor-preview-padding": theme.spacing(2),
-      "--richtexteditor-preview-radius": typeof theme.shape.borderRadius === "number" ? "".concat(theme.shape.borderRadius, "px") : String(theme.shape.borderRadius),
+      "--richtexteditor-preview-radius": typeof theme.shape.borderRadius === "number" ? `${theme.shape.borderRadius}px` : String(theme.shape.borderRadius),
       "--richtexteditor-preview-table-margin": theme.spacing(1, 0),
       "--richtexteditor-preview-cell-padding": theme.spacing(0.5)
-    };
-  }, [width, styles === null || styles === void 0 ? void 0 : styles.height, theme]);
-
-  // Memoize the component's JSX
-  var editorJSX = (0, _react.useMemo)(function () {
-    return __jsx(_react["default"].Fragment, null, __jsx(_material.Box, {
-      component: "div",
-      className: "app-richtexteditor clearfix wm-richtexteditor-root ".concat(className),
-      title: hint,
-      style: editorRootStyle,
-      "aria-readonly": readonly,
-      hidden: props.hidden
-    }, typeof window !== "undefined" ? __jsx(_react["default"].Suspense, {
-      fallback: __jsx(EditorPlaceholder, {
-        content: content || "",
-        placeholder: placeholder,
-        width: width,
-        height: height,
-        disabled: disabled,
-        readonly: readonly
-      })
-    }, __jsx(JoditEditor, {
-      ref: editorRef,
-      value: content === null || content === void 0 ? void 0 : content.toString(),
-      config: editorConfig,
-      onBlur: handleEditorBlur,
-      onChange: debouncedHandleOnChange
-    })) : __jsx(EditorPlaceholder, {
-      content: content || "",
-      placeholder: placeholder,
-      width: width,
-      height: height,
-      disabled: disabled,
-      readonly: readonly
-    }), __jsx(_material.Box, {
-      component: "input",
-      ref: hiddenInputRef,
-      className: "model-holder wm-richtexteditor-hidden-input",
-      disabled: disabled,
-      value: content === null || content === void 0 ? void 0 : content.toString(),
-      name: name,
-      readOnly: true
-    })), (0, _util.toBoolean)(showpreview) && __jsx(_material.Box, {
-      component: "div",
-      className: "ta-preview wm-richtexteditor-preview",
-      style: {
-        width: width
-      },
-      dangerouslySetInnerHTML: {
-        __html: sanitizeHtml(content)
-      }
-    }));
-  }, [content, editorConfig, handleEditorBlur, handleEditorInit, hint, editorRootStyle, name, sanitizeHtml, showpreview, width]);
-
-  // Process operation stack after editor is loaded
-  (0, _react.useEffect)(function () {
+    }),
+    [width, styles == null ? void 0 : styles.height, theme]
+  );
+  const editorJSX = useMemo(
+    () => /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(
+        Box,
+        {
+          component: "div",
+          className: `app-richtexteditor clearfix wm-richtexteditor-root ${className}`,
+          title: hint,
+          style: editorRootStyle,
+          "aria-readonly": readonly,
+          hidden: props.hidden,
+          children: [
+            typeof window !== "undefined" ? /* @__PURE__ */ jsx(
+              React.Suspense,
+              {
+                fallback: /* @__PURE__ */ jsx(
+                  EditorPlaceholder,
+                  {
+                    content: content || "",
+                    placeholder,
+                    width,
+                    height,
+                    disabled,
+                    readonly
+                  }
+                ),
+                children: /* @__PURE__ */ jsx(
+                  JoditEditor,
+                  {
+                    ref: editorRef,
+                    value: content == null ? void 0 : content.toString(),
+                    config: editorConfig,
+                    onBlur: handleEditorBlur,
+                    onChange: debouncedHandleOnChange
+                  }
+                )
+              }
+            ) : /* @__PURE__ */ jsx(
+              EditorPlaceholder,
+              {
+                content: content || "",
+                placeholder,
+                width,
+                height,
+                disabled,
+                readonly
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Box,
+              {
+                component: "input",
+                ref: hiddenInputRef,
+                className: "model-holder wm-richtexteditor-hidden-input",
+                disabled,
+                value: content == null ? void 0 : content.toString(),
+                name,
+                readOnly: true
+              }
+            )
+          ]
+        }
+      ),
+      toBoolean(showpreview) && /* @__PURE__ */ jsx(
+        Box,
+        {
+          component: "div",
+          className: "ta-preview wm-richtexteditor-preview",
+          style: { width },
+          dangerouslySetInnerHTML: { __html: sanitizeHtml(content) }
+        }
+      )
+    ] }),
+    [
+      content,
+      editorConfig,
+      handleEditorBlur,
+      handleEditorInit,
+      hint,
+      editorRootStyle,
+      name,
+      sanitizeHtml,
+      showpreview,
+      width
+    ]
+  );
+  useEffect(() => {
     if (isEditorLoaded && operationStack.length > 0) {
-      operationStack.forEach(function (operation) {
+      operationStack.forEach((operation) => {
         performEditorOperation(operation.type, operation.value);
       });
       setOperationStack([]);
     }
   }, [isEditorLoaded, operationStack, performEditorOperation]);
-
-  // Handle external value changes (two-way binding)
-  (0, _react.useEffect)(function () {
+  useEffect(() => {
     if (!isEditorLoaded || isInternalChange) {
       return;
     }
-    var newValue = actualValue || "";
-
-    // Only update if the value has actually changed
+    const newValue = actualValue || "";
     if (newValue !== lastValueRef.current && newValue !== content) {
       setIsInternalChange(true);
       performEditorOperation("code", newValue);
-      setTimeout(function () {
-        return setIsInternalChange(false);
-      }, 100);
+      setTimeout(() => setIsInternalChange(false), 100);
     }
   }, [actualValue, isEditorLoaded, content, performEditorOperation, isInternalChange]);
-
-  // Handle datavalue changes
-  (0, _react.useEffect)(function () {
+  useEffect(() => {
     if (datavalue != internalValueRef.current) {
       setContent(datavalue);
       internalValueRef.current = datavalue;
     }
   }, [datavalue]);
-
-  // Initialize editor and handle prop changes
-  (0, _react.useEffect)(function () {
-    var _editorRef$current6;
-    if ((_editorRef$current6 = editorRef.current) !== null && _editorRef$current6 !== void 0 && _editorRef$current6.editor && isEditorLoaded) {
-      // Handle readonly/disabled state changes
+  useEffect(() => {
+    var _a;
+    if (((_a = editorRef.current) == null ? void 0 : _a.editor) && isEditorLoaded) {
       if (readonly || disabled) {
         performEditorOperation("disable");
       } else {
         performEditorOperation("enable");
       }
-
-      // Handle placeholder changes
       if (placeholder) {
         performEditorOperation("placeholder", placeholder);
       }
-
-      // Handle height changes
       if (height) {
-        var heightValue = typeof height === "string" && height.endsWith("px") ? parseInt(height, 10) : height;
+        const heightValue = typeof height === "string" && height.endsWith("px") ? parseInt(height, 10) : height;
         performEditorOperation("height", heightValue);
       }
-
-      // Handle width changes
       if (width) {
         performEditorOperation("width", width);
       }
     }
   }, [readonly, disabled, placeholder, height, width, performEditorOperation, isEditorLoaded]);
-
-  // Clean up on unmount
-  (0, _react.useEffect)(function () {
+  useEffect(() => {
     isMountedRef.current = true;
-    return function () {
-      var _editorRef$current7;
+    return () => {
+      var _a, _b, _c;
       isMountedRef.current = false;
-      if ((_editorRef$current7 = editorRef.current) !== null && _editorRef$current7 !== void 0 && _editorRef$current7.editor) {
+      if ((_a = editorRef.current) == null ? void 0 : _a.editor) {
         try {
-          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();
+          (_c = (_b = editorRef == null ? void 0 : editorRef.current) == null ? void 0 : _b.editor) == null ? void 0 : _c.destruct();
         } catch (error) {
           console.error("Error destructing editor:", error);
         }
@@ -491,23 +518,30 @@ var WmRichTextEditorBase = function WmRichTextEditorBase(props) {
   }, []);
   return editorJSX;
 };
-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]);
+const WmRichTextEditor = React.memo(WmRichTextEditorBase, (prev, next) => {
+  const keys = [
+    "datavalue",
+    "readonly",
+    "disabled",
+    "placeholder",
+    "tabindex",
+    "showpreview",
+    "hint",
+    "arialabel",
+    "hidden",
+    "name"
+  ];
+  return keys.every((key) => {
+    return lodash.isEqual(
+      prev[key],
+      next[key]
+    );
   });
 });
-var RichTextWithForm = (0, _withFormController["default"])(WmRichTextEditor);
-var WmRichTextEditorStandalone = exports.WmRichtexteditor = (0, _withStandalone["default"])(RichTextWithForm);
-/**
- * The WmRichTextEditor component provides a comprehensive rich text editing experience.
- * It supports various formatting options, media embedding, and is highly customizable.
- *
- * - [Playground](https://react-components.wavemaker.ai/?path=/story/basic-richtexteditor--showcase)
- *
- * - [Docs](https://react-components.wavemaker.ai/?path=/story/basic-richtexteditor--docs)
- *
- * @param props - {@link WmRichTextEditorProps}
- */
-var _default = exports["default"] = (0, _withBaseWrapper.withBaseWrapper)(RichTextWithForm);
+const RichTextWithForm = withFormController(WmRichTextEditor);
+const WmRichTextEditorStandalone = withStandalone(RichTextWithForm);
+var richtexteditor_default = withBaseWrapper(RichTextWithForm);
+export {
+  WmRichTextEditorStandalone as WmRichtexteditor,
+  richtexteditor_default as default
+};