@uxf/wysiwyg 13.0.3 → 14.1.0

package/wysiwyg-editor.js

@@ -35,8 +35,9 @@ var __importStar = (this && this.__importStar) || (function () {
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.WysiwygEditor = void 0;
+const compiler_runtime_1 = require("react/compiler-runtime");
 const classes_1 = require("@uxf/core/constants/classes");
-const use_is_mounted_1 = require("@uxf/core-react/hooks/use-is-mounted");
+const use_is_hydrated_1 = require("@uxf/core-react/hooks/use-is-hydrated");
 const translations_1 = require("@uxf/core-react/translations");
 const loader_1 = require("@uxf/ui/loader");
 const react_1 = require("platejs/react");
@@ -50,50 +51,199 @@ const CLASS_NAME = "uxf-wysiwyg";
  * Must be rendered inside Plate component
  */
 function EditorRefHandler(props) {
+    const $ = (0, compiler_runtime_1.c)(2);
+    const { ref } = props;
     const editor = (0, hooks_1.useUxfEditorRef)();
-    (0, react_2.useImperativeHandle)(props.ref, () => ({
-        focus: () => {
-            // Select the end of the document first
-            editor.tf.select(editor.api.end([]));
-            // Then focus the editor
-            (0, utils_1.focusEditor)(editor);
-        },
-    }));
+    let t0;
+    if ($[0] !== editor) {
+        t0 = () => ({
+            focus: () => {
+                editor.tf.select(editor.api.end([]));
+                (0, utils_1.focusEditor)(editor);
+            }
+        });
+        $[0] = editor;
+        $[1] = t0;
+    }
+    else {
+        t0 = $[1];
+    }
+    (0, react_2.useImperativeHandle)(ref, t0);
     return null;
 }
 EditorRefHandler.displayName = "EditorRefHandler";
-const Editor = (props) => {
+const Editor = props => {
     var _a, _b;
+    const $ = (0, compiler_runtime_1.c)(29);
+    const { ref } = props;
     const t = (0, translations_1.useUxfTranslation)();
-    /**
-     * `<Plate>` renders no DOM of its own, so the toolbar moving inside it leaves the markup identical
-     * while letting it take the editor from context instead of by id.
-     */
-    const editor = (0, react_1.usePlateEditor)({
-        id: props.id,
-        plugins: props.plugins,
-        shouldNormalizeEditor: true,
-        value: props.initialValue,
-    }, [props.plugins]);
-    return (react_2.default.createElement(react_1.Plate, { editor: editor, onChange: ({ value }) => props.onChange(value) },
-        react_2.default.createElement(toolbar_1.Toolbar, { customPluginsButtons: props.customPluginsToolbarButtons, leftElement: props.toolbarLeftElement, plateId: props.id, rightElement: props.toolbarRightElement }),
-        react_2.default.createElement("div", { className: `${CLASS_NAME}__content` },
-            react_2.default.createElement(react_1.PlateContent, { autoFocus: false,
-                placeholder: t("uxf-wysiwyg:common.placeholder"),
-                readOnly: false,
-                spellCheck: false,
-                ...props.editableProps,
-                className: `${CLASS_NAME}__editable ${(_b = (_a = props.editableProps) === null || _a === void 0 ? void 0 : _a.className) !== null && _b !== void 0 ? _b : ""}` }),
-            props.ref && react_2.default.createElement(EditorRefHandler, { ref: props.ref }))));
+    let t0;
+    if ($[0] !== props.id || $[1] !== props.initialValue || $[2] !== props.plugins) {
+        t0 = {
+            id: props.id,
+            plugins: props.plugins,
+            shouldNormalizeEditor: true,
+            value: props.initialValue
+        };
+        $[0] = props.id;
+        $[1] = props.initialValue;
+        $[2] = props.plugins;
+        $[3] = t0;
+    }
+    else {
+        t0 = $[3];
+    }
+    let t1;
+    if ($[4] !== props.plugins) {
+        t1 = [props.plugins];
+        $[4] = props.plugins;
+        $[5] = t1;
+    }
+    else {
+        t1 = $[5];
+    }
+    const editor = (0, react_1.usePlateEditor)(t0, t1);
+    let t2;
+    if ($[6] !== props) {
+        t2 = t3 => {
+            const { value } = t3;
+            return props.onChange(value);
+        };
+        $[6] = props;
+        $[7] = t2;
+    }
+    else {
+        t2 = $[7];
+    }
+    let t3;
+    if ($[8] !== props.customPluginsToolbarButtons || $[9] !== props.id || $[10] !== props.toolbarLeftElement || $[11] !== props.toolbarRightElement) {
+        t3 = react_2.default.createElement(toolbar_1.Toolbar, { customPluginsButtons: props.customPluginsToolbarButtons, leftElement: props.toolbarLeftElement, plateId: props.id, rightElement: props.toolbarRightElement });
+        $[8] = props.customPluginsToolbarButtons;
+        $[9] = props.id;
+        $[10] = props.toolbarLeftElement;
+        $[11] = props.toolbarRightElement;
+        $[12] = t3;
+    }
+    else {
+        t3 = $[12];
+    }
+    let t4;
+    if ($[13] !== t) {
+        t4 = t("uxf-wysiwyg:common.placeholder");
+        $[13] = t;
+        $[14] = t4;
+    }
+    else {
+        t4 = $[14];
+    }
+    const t5 = `${CLASS_NAME}__editable ${(_b = (_a = props.editableProps) === null || _a === void 0 ? void 0 : _a.className) !== null && _b !== void 0 ? _b : ""}`;
+    let t6;
+    if ($[15] !== props.editableProps || $[16] !== t4 || $[17] !== t5) {
+        t6 = react_2.default.createElement(react_1.PlateContent, { autoFocus: false,
+            placeholder: t4,
+            readOnly: false,
+            spellCheck: false,
+            ...props.editableProps,
+            className: t5 });
+        $[15] = props.editableProps;
+        $[16] = t4;
+        $[17] = t5;
+        $[18] = t6;
+    }
+    else {
+        t6 = $[18];
+    }
+    let t7;
+    if ($[19] !== ref) {
+        t7 = ref && react_2.default.createElement(EditorRefHandler, { ref: ref });
+        $[19] = ref;
+        $[20] = t7;
+    }
+    else {
+        t7 = $[20];
+    }
+    let t8;
+    if ($[21] !== t6 || $[22] !== t7) {
+        t8 = react_2.default.createElement("div", { className: `${CLASS_NAME}__content` },
+            t6,
+            t7);
+        $[21] = t6;
+        $[22] = t7;
+        $[23] = t8;
+    }
+    else {
+        t8 = $[23];
+    }
+    let t9;
+    if ($[24] !== editor || $[25] !== t2 || $[26] !== t3 || $[27] !== t8) {
+        t9 = react_2.default.createElement(react_1.Plate, { editor: editor, onChange: t2 },
+            t3,
+            t8);
+        $[24] = editor;
+        $[25] = t2;
+        $[26] = t3;
+        $[27] = t8;
+        $[28] = t9;
+    }
+    else {
+        t9 = $[28];
+    }
+    return t9;
 };
-const WysiwygEditor = (props) => {
+const WysiwygEditor = props => {
     var _a, _b;
-    const isMounted = (0, use_is_mounted_1.useIsMounted)();
-    if (!isMounted) {
-        return (react_2.default.createElement("div", { className: `${CLASS_NAME} ${CLASS_NAME}--${classes_1.CLASSES.IS_LOADING} ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}` },
-            react_2.default.createElement(loader_1.Loader, { className: `${CLASS_NAME}__loader` })));
+    const $ = (0, compiler_runtime_1.c)(16);
+    const { ref } = props;
+    const isHydrated = (0, use_is_hydrated_1.useIsHydrated)();
+    if (!isHydrated) {
+        const t0 = `${CLASS_NAME} ${CLASS_NAME}--${classes_1.CLASSES.IS_LOADING} ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}`;
+        let t1;
+        if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+            t1 = react_2.default.createElement(loader_1.Loader, { className: `${CLASS_NAME}__loader` });
+            $[0] = t1;
+        }
+        else {
+            t1 = $[0];
+        }
+        let t2;
+        if ($[1] !== t0) {
+            t2 = react_2.default.createElement("div", { className: t0 }, t1);
+            $[1] = t0;
+            $[2] = t2;
+        }
+        else {
+            t2 = $[2];
+        }
+        return t2;
+    }
+    const t0 = `${CLASS_NAME} ${(_b = props.className) !== null && _b !== void 0 ? _b : ""}`;
+    let t1;
+    if ($[3] !== props.customPluginsToolbarButtons || $[4] !== props.editableProps || $[5] !== props.id || $[6] !== props.initialValue || $[7] !== props.onChange || $[8] !== props.plugins || $[9] !== props.toolbarLeftElement || $[10] !== props.toolbarRightElement || $[11] !== ref) {
+        t1 = react_2.default.createElement(Editor, { customPluginsToolbarButtons: props.customPluginsToolbarButtons, editableProps: props.editableProps, id: props.id, initialValue: props.initialValue, onChange: props.onChange, plugins: props.plugins, ref: ref, toolbarLeftElement: props.toolbarLeftElement, toolbarRightElement: props.toolbarRightElement });
+        $[3] = props.customPluginsToolbarButtons;
+        $[4] = props.editableProps;
+        $[5] = props.id;
+        $[6] = props.initialValue;
+        $[7] = props.onChange;
+        $[8] = props.plugins;
+        $[9] = props.toolbarLeftElement;
+        $[10] = props.toolbarRightElement;
+        $[11] = ref;
+        $[12] = t1;
+    }
+    else {
+        t1 = $[12];
+    }
+    let t2;
+    if ($[13] !== t0 || $[14] !== t1) {
+        t2 = react_2.default.createElement("div", { className: t0 }, t1);
+        $[13] = t0;
+        $[14] = t1;
+        $[15] = t2;
+    }
+    else {
+        t2 = $[15];
     }
-    return (react_2.default.createElement("div", { className: `${CLASS_NAME} ${(_b = props.className) !== null && _b !== void 0 ? _b : ""}` },
-        react_2.default.createElement(Editor, { customPluginsToolbarButtons: props.customPluginsToolbarButtons, editableProps: props.editableProps, id: props.id, initialValue: props.initialValue, onChange: props.onChange, plugins: props.plugins, ref: props.ref, toolbarLeftElement: props.toolbarLeftElement, toolbarRightElement: props.toolbarRightElement })));
+    return t2;
 };
 exports.WysiwygEditor = WysiwygEditor;