@wavemaker/react-runtime 11.14.1-16.6404

package/components/basic/richtexteditor/index.js

@@ -0,0 +1,533 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+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 _joditReact = _interopRequireDefault(require("jodit-react"));
+var _dompurify = _interopRequireDefault(require("dompurify"));
+var _withBaseWrapper = require("@wavemaker/react-runtime/higherOrder/withBaseWrapper");
+var lodash = _interopRequireWildcard(require("lodash-es"));
+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; }
+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; }
+var EditorContainer = (0, _styles.styled)(_material.Box)(function (_ref) {
+  var theme = _ref.theme,
+    height = _ref.height;
+  return {
+    "& .jodit-workplace": {
+      height: height ? "".concat(height, " !important") : "auto"
+    },
+    "& .jodit-container": {
+      border: "1px solid ".concat(theme.palette.divider)
+    },
+    "& .jodit-react-container": {
+      // Remove only min-height and min-width
+      minHeight: "unset !important",
+      minWidth: "unset !important",
+      maxWidth: "unset !important"
+    },
+    "& .jodit-status-bar": {
+      border: "1px solid ".concat(theme.palette.divider),
+      borderTop: "none"
+    },
+    "& .jodit-toolbar": {
+      background: theme.palette.background.paper,
+      border: "1px solid ".concat(theme.palette.divider),
+      borderBottom: "none"
+    },
+    "& .jodit-toolbar__box": {
+      background: theme.palette.background.paper
+    },
+    "& .jodit-toolbar-button": {
+      margin: "2px"
+    },
+    "& div[contenteditable='true']": {
+      background: "var(--wm-note-editable-background)",
+      color: "var(--wm-note-editable-color)w"
+    },
+    // Reset problematic global styles that override rich text editor
+    "& .jodit-wysiwyg": {
+      padding: "unset !important",
+      margin: "unset !important"
+    },
+    "& .jodit-wysiwyg ul, & .jodit-wysiwyg li": {
+      paddingLeft: "2em !important",
+      margin: "1em 0 !important",
+      listStyleType: "unset"
+    },
+    // Override any global styles that might affect the editor
+    "& .jodit-container *": {
+      boxSizing: "border-box"
+    },
+    "& .jodit-wysiwyg ol": {
+      listStyleType: "decimal",
+      paddingLeft: "2em !important",
+      margin: "1em 0 !important"
+    }
+  };
+});
+var PreviewContainer = (0, _styles.styled)(_material.Box)(function (_ref2) {
+  var theme = _ref2.theme;
+  return {
+    marginTop: theme.spacing(2),
+    padding: theme.spacing(2),
+    // border: `1px solid ${theme.palette.divider}`,
+    borderRadius: theme.shape.borderRadius,
+    backgroundColor: theme.palette.background.paper,
+    color: theme.palette.text.primary,
+    minHeight: "100px",
+    overflowY: "auto",
+    "& img": {
+      maxWidth: "100%"
+    },
+    "& table": {
+      borderCollapse: "collapse",
+      width: "100%",
+      margin: theme.spacing(1, 0)
+    },
+    "& th, & td": {
+      border: "1px solid ".concat(theme.palette.divider),
+      padding: theme.spacing(0.5)
+    }
+  };
+});
+var HiddenInput = (0, _styles.styled)("input")({
+  display: "none"
+});
+var WmRichTextEditor = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  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;
+
+  // 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 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: readonly || disabled,
+      statusbar: true,
+      toolbarAdaptive: true,
+      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"],
+      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 (listener !== null && listener !== void 0 && listener.onChange) {
+      listener.onChange(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$current;
+    if (!isEditorLoaded || !((_editorRef$current = editorRef.current) !== null && _editorRef$current !== void 0 && _editorRef$current.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]);
+
+  // Memoize handleOnBeforeRender
+  var handleOnBeforeRender = (0, _react.useCallback)(function () {
+    if (onBeforerender) {
+      var _editorRef$current2;
+      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
+      };
+      onBeforerender(syntheticEvent, widgetInstance);
+    }
+  }, [onBeforerender]);
+
+  // 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 || "";
+      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;
+      }
+    });
+  }, [name, listener, onChange, sanitizeHtml]);
+
+  // Cleanup debounced function on unmount
+  (0, _react.useEffect)(function () {
+    return function () {
+      debouncedHandleOnChange.cancel();
+    };
+  }, [debouncedHandleOnChange]);
+
+  // Memoize handleEditorInit
+  var handleEditorInit = (0, _react.useCallback)(function () {
+    var _editorRef$current4;
+    setIsEditorLoaded(true);
+    if ((_editorRef$current4 = editorRef.current) !== null && _editorRef$current4 !== void 0 && _editorRef$current4.editor) {
+      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: {
+        change: debouncedHandleOnChange,
+        beforeInit: handleOnBeforeRender
+      }
+    });
+  }, [editorOptions, tabindex, debouncedHandleOnChange, handleOnBeforeRender]);
+
+  // Memoize the component's JSX
+  var editorJSX = (0, _react.useMemo)(function () {
+    return __jsx(_react["default"].Fragment, null, __jsx(EditorContainer, {
+      className: "app-richtexteditor clearfix  ".concat(className),
+      title: hint,
+      style: {
+        width: width
+      },
+      height: styles === null || styles === void 0 ? void 0 : styles.height
+    }, __jsx(_joditReact["default"], {
+      ref: editorRef,
+      value: content.toString(),
+      config: editorConfig,
+      onBlur: handleEditorBlur,
+      onChange: function onChange() {} // Empty onChange as we handle it in config
+      ,
+      onReady: handleEditorInit
+    }), __jsx(HiddenInput, {
+      ref: hiddenInputRef,
+      className: "model-holder",
+      disabled: disabled,
+      value: content.toString(),
+      name: name,
+      readOnly: true
+    })), showpreview && __jsx(PreviewContainer, {
+      className: "ta-preview",
+      style: {
+        width: width
+      },
+      dangerouslySetInnerHTML: {
+        __html: sanitizeHtml(content)
+      }
+    }));
+  }, [content, editorConfig, handleEditorBlur, handleEditorInit, hint, 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 != lastValueRef.current) {
+      setContent(datavalue);
+      lastValueRef.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) {
+      // 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]);
+
+  // 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;
+    return function () {
+      var _editorRef$current7;
+      isMountedRef.current = false;
+      if ((_editorRef$current7 = editorRef.current) !== null && _editorRef$current7 !== void 0 && _editorRef$current7.editor) {
+        try {
+          editorRef.current.editor.destruct();
+        } catch (error) {
+          console.error("Error destructing editor:", error);
+        }
+      }
+    };
+  }, []);
+  return editorJSX;
+});
+WmRichTextEditor.displayName = "WmRichTextEditor";
+var _default = exports["default"] = /*#__PURE__*/_react["default"].memo((0, _withBaseWrapper.withBaseWrapper)(WmRichTextEditor));

package/components/basic/richtexteditor/props.js

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