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

package/components/basic/richtexteditor/index.js

@@ -0,0 +1,513 @@
+"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", {
+    className: "wm-richtexteditor-placeholder",
+    value: content,
+    placeholder: placeholder,
+    disabled: disabled,
+    readOnly: readonly,
+    style: {
+      minHeight: height || "100px",
+      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) {
+    if (typeof value === "number") {
+      return "".concat(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 {
+      toolbar: true,
+      placeholder: placeholder,
+      minHeight: height ? typeof height === "string" && height.endsWith("px") ? parseInt(height, 10) : 100 : 100,
+      width: width,
+      readonly: readonly,
+      disabled: 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"],
+      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) {
+    if (!html) return "";
+    return _dompurify["default"].sanitize(html, {
+      ADD_TAGS: ["iframe", "video", "source"],
+      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 {
+            setIsInternalChange(true);
+            var sanitizedValue = sanitizeHtml(value);
+            editor.value = sanitizedValue;
+            setContent(sanitizedValue);
+            lastValueRef.current = sanitizedValue;
+            setTimeout(function () {
+              return 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;
+      }
+    } catch (error) {
+      console.error("Error performing editor operation ".concat(operation, ":"), error);
+    }
+  }, [isEditorLoaded, sanitizeHtml]);
+  (0, _react.useEffect)(function () {
+    if (onBeforerender) {
+      var _editorRef$current3;
+      var 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
+      };
+      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);
+        }
+        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 () {
+      debouncedHandleOnChange.cancel();
+    };
+  }, [debouncedHandleOnChange]);
+
+  // Memoize handleEditorInit
+  var handleEditorInit = (0, _react.useCallback)(function () {
+    var _editorRef$current5;
+    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 (height) {
+        var 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;
+      if (editorElement) {
+        editorElement.setAttribute("aria-label", arialabel || "Rich Text Editor");
+        editorElement.setAttribute("role", "textbox");
+        editorElement.setAttribute("aria-multiline", "true");
+      }
+    }
+  }, [arialabel, height, width, performEditorOperation]);
+
+  // Memoize the editor config
+  var editorConfig = (0, _react.useMemo)(function () {
+    return _objectSpread(_objectSpread({}, 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,
+      "--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-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 () {
+    if (isEditorLoaded && operationStack.length > 0) {
+      operationStack.forEach(function (operation) {
+        performEditorOperation(operation.type, operation.value);
+      });
+      setOperationStack([]);
+    }
+  }, [isEditorLoaded, operationStack, performEditorOperation]);
+
+  // Handle external value changes (two-way binding)
+  (0, _react.useEffect)(function () {
+    if (!isEditorLoaded || isInternalChange) {
+      return;
+    }
+    var newValue = actualValue || "";
+
+    // Only update if the value has actually changed
+    if (newValue !== lastValueRef.current && newValue !== content) {
+      setIsInternalChange(true);
+      performEditorOperation("code", newValue);
+      setTimeout(function () {
+        return setIsInternalChange(false);
+      }, 100);
+    }
+  }, [actualValue, isEditorLoaded, content, performEditorOperation, isInternalChange]);
+
+  // Handle datavalue changes
+  (0, _react.useEffect)(function () {
+    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
+      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;
+        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 () {
+    isMountedRef.current = true;
+    return function () {
+      var _editorRef$current7;
+      isMountedRef.current = false;
+      if ((_editorRef$current7 = editorRef.current) !== null && _editorRef$current7 !== void 0 && _editorRef$current7.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();
+        } catch (error) {
+          console.error("Error destructing editor:", error);
+        }
+      }
+    };
+  }, []);
+  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]);
+  });
+});
+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);

package/components/basic/richtexteditor/props.d.ts

@@ -0,0 +1,89 @@
+import { BaseProps, Prettify } from "@wavemaker-ai/react-runtime/higherOrder/props";
+/**
+ * Options for configuring the rich text editor (Jodit).
+ */
+export interface EditorOptions {
+    buttons?: string[];
+    toolbar?: any;
+    placeholder?: string;
+    minHeight?: number;
+    maxHeight?: number;
+    height?: number | string;
+    width?: number | string;
+    readOnly?: boolean;
+    disabled?: boolean;
+    statusbar?: boolean;
+    uploader?: any;
+    toolbarAdaptive?: boolean;
+    buttonsMD?: string[];
+    buttonsSM?: string[];
+    buttonsXS?: string[];
+    enableDragAndDropFileToEditor?: boolean;
+    askBeforePasteHTML?: boolean;
+    askBeforePasteFromWord?: boolean;
+    disablePlugins?: string[];
+    autoHeight?: boolean;
+    autoresize?: boolean;
+    style?: {
+        height?: string;
+        minHeight?: string;
+        maxHeight?: string;
+    };
+    onBlur?: (newContent: string, event?: any) => void;
+    onChange?: (newContent: string) => void;
+    onFocus?: (event?: any) => void;
+    onReady?: () => void;
+    [key: string]: any;
+}
+/**
+ * Represents an operation performed in the editor.
+ */
+export interface EditorOperation {
+    type: string;
+    value?: any;
+}
+/**
+ * Base props specific to the WmRichTextEditor component.
+ */
+export interface RichTextEditorProps {
+    /**
+     * The placeholder text to display when the editor is empty.
+     */
+    placeholder?: string;
+    /**
+     * If true, the editor will be in read-only mode.
+     * @default false
+     */
+    readonly?: boolean;
+    /**
+     * If true, a preview of the content will be shown.
+     */
+    showpreview?: boolean;
+    /**
+     * If true, the editor will be disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    id?: string;
+    /**
+     * Callback fired before the editor is rendered.
+     */
+    onBeforerender?: (event: React.ChangeEvent<any>, widget: Record<string, any>) => void;
+    /**
+     * Callback fired when the editor content changes.
+     */
+    onChange?: (event: any, widget: any, newVal?: any, oldVal?: any) => void;
+    /**
+     * Delay in milliseconds before triggering an update.
+     * @default 10
+     */
+    updatedelay?: string;
+    /**
+     * The name of the field.
+     */
+    fieldName?: string;
+}
+/**
+ * Combined props for the WmRichTextEditor component, including base WaveMaker props.
+ */
+export type WmRichTextEditorProps = Prettify<RichTextEditorProps & BaseProps>;

package/components/basic/richtexteditor/props.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});