@uxf/wysiwyg 14.0.0 → 14.1.0

package/ui/video/insert-video-modal-content.js

@@ -34,6 +34,7 @@ var __importStar = (this && this.__importStar) || (function () {
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.InsertVideoModalContent = void 0;
+const compiler_runtime_1 = require("react/compiler-runtime");
 const translations_1 = require("@uxf/core-react/translations");
 const text_input_1 = require("@uxf/ui/text-input");
 const react_1 = __importStar(require("react"));
@@ -46,45 +47,168 @@ const modal_content_1 = require("../components/modal/modal-content");
 const utils_2 = require("../utils");
 const CLASS_NAME = "uxf-wysiwyg__insert-modal-video";
 // eslint-disable-next-line react/destructuring-assignment
-const InsertVideoModalContent = ({ editor, editedVideo }) => {
+const InsertVideoModalContent = t0 => {
     var _a;
+    const $ = (0, compiler_runtime_1.c)(37);
+    const { editor, editedVideo } = t0;
     const t = (0, translations_1.useUxfTranslation)();
     const [url, setUrl] = (0, react_1.useState)((_a = editedVideo === null || editedVideo === void 0 ? void 0 : editedVideo.url) !== null && _a !== void 0 ? _a : "");
-    const [embedUrl, setEmbedUrl] = (0, react_1.useState)(editedVideo
-        ? { id: editedVideo.videoId, provider: editedVideo.provider, url: editedVideo.embeddedUrl }
-        : undefined);
+    let t1;
+    if ($[0] !== editedVideo) {
+        t1 = editedVideo ? {
+            id: editedVideo.videoId,
+            provider: editedVideo.provider,
+            url: editedVideo.embeddedUrl
+        } : undefined;
+        $[0] = editedVideo;
+        $[1] = t1;
+    }
+    else {
+        t1 = $[1];
+    }
+    const [embedUrl, setEmbedUrl] = (0, react_1.useState)(t1);
     const [error, setError] = (0, react_1.useState)();
-    const onSubmit = (0, react_1.useCallback)(async (event) => {
-        event.preventDefault();
-        setEmbedUrl((0, utils_1.parseVideoUrl)(url));
-        if (!((embedUrl === null || embedUrl === void 0 ? void 0 : embedUrl.url) && embedUrl.provider && embedUrl.id)) {
-            setError(t("uxf-wysiwyg:plugins.video.url-address.invalid"));
-            return;
-        }
-        const metaData = await (0, get_video_meta_data_1.getVideoMetaData)(embedUrl.provider, embedUrl.id);
-        if (editedVideo) {
-            (0, update_video_1.updateVideo)(editor, url, embedUrl.url, embedUrl.provider, embedUrl.id, metaData);
-        }
-        else {
-            (0, insert_video_1.insertVideo)(editor, url, embedUrl.url, embedUrl.provider, embedUrl.id, metaData);
-        }
-        (0, utils_2.closeModalWithFocus)(editor);
-    }, [editedVideo, editor, embedUrl, url, t]);
-    const onChange = (0, react_1.useCallback)((v) => {
-        setUrl(v);
-        setError(undefined);
-        setEmbedUrl((0, utils_1.parseVideoUrl)(v));
-    }, []);
-    const title = editedVideo
-        ? t("uxf-wysiwyg:plugins.video.button-edit")
-        : t("uxf-wysiwyg:plugins.video.button-insert");
-    return (react_1.default.createElement(modal_content_1.ModalContent, { title: title },
-        react_1.default.createElement("form", { className: `${CLASS_NAME}__form`, id: "insert-video-form", onSubmit: onSubmit },
-            react_1.default.createElement("div", { className: `${CLASS_NAME}__form-inputs` },
-                react_1.default.createElement(text_input_1.TextInput, { helperText: error, isInvalid: Boolean(error), label: t("uxf-wysiwyg:plugins.video.url-address.label"), name: "url-address", onChange: onChange, placeholder: t("uxf-wysiwyg:plugins.video.url-address.placeholder"), type: "text", value: url })),
-            (embedUrl === null || embedUrl === void 0 ? void 0 : embedUrl.url) && (react_1.default.createElement("div", { className: `${CLASS_NAME}__iframe-wrapper` },
-                react_1.default.createElement("iframe", { className: `${CLASS_NAME}__iframe`, height: "100%", src: embedUrl.url, title: t("uxf-wysiwyg:plugins.video.iframe-title"), width: "100%" }))),
-            react_1.default.createElement(modal_buttons_1.ModalButtons, { className: `${CLASS_NAME}__form-buttons`, editor: editor, submitText: title }),
-            react_1.default.createElement("button", { hidden: true, type: "submit" }))));
+    let t2;
+    if ($[2] !== editedVideo || $[3] !== editor || $[4] !== embedUrl || $[5] !== t || $[6] !== url) {
+        t2 = async (event) => {
+            event.preventDefault();
+            setEmbedUrl((0, utils_1.parseVideoUrl)(url));
+            if (!((embedUrl === null || embedUrl === void 0 ? void 0 : embedUrl.url) && embedUrl.provider && embedUrl.id)) {
+                setError(t("uxf-wysiwyg:plugins.video.url-address.invalid"));
+                return;
+            }
+            const metaData = await (0, get_video_meta_data_1.getVideoMetaData)(embedUrl.provider, embedUrl.id);
+            if (editedVideo) {
+                (0, update_video_1.updateVideo)(editor, url, embedUrl.url, embedUrl.provider, embedUrl.id, metaData);
+            }
+            else {
+                (0, insert_video_1.insertVideo)(editor, url, embedUrl.url, embedUrl.provider, embedUrl.id, metaData);
+            }
+            (0, utils_2.closeModalWithFocus)(editor);
+        };
+        $[2] = editedVideo;
+        $[3] = editor;
+        $[4] = embedUrl;
+        $[5] = t;
+        $[6] = url;
+        $[7] = t2;
+    }
+    else {
+        t2 = $[7];
+    }
+    const onSubmit = t2;
+    let t3;
+    if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+        t3 = v => {
+            setUrl(v);
+            setError(undefined);
+            setEmbedUrl((0, utils_1.parseVideoUrl)(v));
+        };
+        $[8] = t3;
+    }
+    else {
+        t3 = $[8];
+    }
+    const onChange = t3;
+    let t4;
+    if ($[9] !== editedVideo || $[10] !== t) {
+        t4 = editedVideo ? t("uxf-wysiwyg:plugins.video.button-edit") : t("uxf-wysiwyg:plugins.video.button-insert");
+        $[9] = editedVideo;
+        $[10] = t;
+        $[11] = t4;
+    }
+    else {
+        t4 = $[11];
+    }
+    const title = t4;
+    const t5 = Boolean(error);
+    let t6;
+    if ($[12] !== t) {
+        t6 = t("uxf-wysiwyg:plugins.video.url-address.label");
+        $[12] = t;
+        $[13] = t6;
+    }
+    else {
+        t6 = $[13];
+    }
+    let t7;
+    if ($[14] !== t) {
+        t7 = t("uxf-wysiwyg:plugins.video.url-address.placeholder");
+        $[14] = t;
+        $[15] = t7;
+    }
+    else {
+        t7 = $[15];
+    }
+    let t8;
+    if ($[16] !== error || $[17] !== t5 || $[18] !== t6 || $[19] !== t7 || $[20] !== url) {
+        t8 = react_1.default.createElement("div", { className: `${CLASS_NAME}__form-inputs` },
+            react_1.default.createElement(text_input_1.TextInput, { helperText: error, isInvalid: t5, label: t6, name: "url-address", onChange: onChange, placeholder: t7, type: "text", value: url }));
+        $[16] = error;
+        $[17] = t5;
+        $[18] = t6;
+        $[19] = t7;
+        $[20] = url;
+        $[21] = t8;
+    }
+    else {
+        t8 = $[21];
+    }
+    let t9;
+    if ($[22] !== embedUrl || $[23] !== t) {
+        t9 = (embedUrl === null || embedUrl === void 0 ? void 0 : embedUrl.url) && react_1.default.createElement("div", { className: `${CLASS_NAME}__iframe-wrapper` },
+            react_1.default.createElement("iframe", { className: `${CLASS_NAME}__iframe`, height: "100%", src: embedUrl.url, title: t("uxf-wysiwyg:plugins.video.iframe-title"), width: "100%" }));
+        $[22] = embedUrl;
+        $[23] = t;
+        $[24] = t9;
+    }
+    else {
+        t9 = $[24];
+    }
+    let t10;
+    if ($[25] !== editor || $[26] !== title) {
+        t10 = react_1.default.createElement(modal_buttons_1.ModalButtons, { className: `${CLASS_NAME}__form-buttons`, editor: editor, submitText: title });
+        $[25] = editor;
+        $[26] = title;
+        $[27] = t10;
+    }
+    else {
+        t10 = $[27];
+    }
+    let t11;
+    if ($[28] === Symbol.for("react.memo_cache_sentinel")) {
+        t11 = react_1.default.createElement("button", { hidden: true, type: "submit" });
+        $[28] = t11;
+    }
+    else {
+        t11 = $[28];
+    }
+    let t12;
+    if ($[29] !== onSubmit || $[30] !== t10 || $[31] !== t8 || $[32] !== t9) {
+        t12 = react_1.default.createElement("form", { className: `${CLASS_NAME}__form`, id: "insert-video-form", onSubmit: onSubmit },
+            t8,
+            t9,
+            t10,
+            t11);
+        $[29] = onSubmit;
+        $[30] = t10;
+        $[31] = t8;
+        $[32] = t9;
+        $[33] = t12;
+    }
+    else {
+        t12 = $[33];
+    }
+    let t13;
+    if ($[34] !== t12 || $[35] !== title) {
+        t13 = react_1.default.createElement(modal_content_1.ModalContent, { title: title }, t12);
+        $[34] = t12;
+        $[35] = title;
+        $[36] = t13;
+    }
+    else {
+        t13 = $[36];
+    }
+    return t13;
 };
 exports.InsertVideoModalContent = InsertVideoModalContent;

package/ui/video/video-element.js

@@ -1,66 +1,101 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.VideoElement = void 0;
+const compiler_runtime_1 = require("react/compiler-runtime");
 const translations_1 = require("@uxf/core-react/translations");
 const dialog_panel_1 = require("@uxf/ui/dialog/dialog-panel");
 const modal_service_1 = require("@uxf/ui/modal/modal-service");
-const react_1 = __importStar(require("react"));
+const react_1 = __importDefault(require("react"));
 const hooks_1 = require("../../hooks");
 const get_active_video_1 = require("../../plugins/embedded/video/get-active-video");
 const utils_1 = require("../../utils");
 const element_with_action_buttons_1 = require("../components/element/element-with-action-buttons");
 const insert_video_modal_content_1 = require("./insert-video-modal-content");
 const CLASS_NAME = "uxf-wysiwyg__element";
-const VideoElement = (props) => {
+const VideoElement = props => {
     var _a;
+    const $ = (0, compiler_runtime_1.c)(19);
     const t = (0, translations_1.useUxfTranslation)();
     const isSelected = (0, hooks_1.useSelected)();
-    const onEdit = (0, react_1.useCallback)(() => {
-        (0, modal_service_1.openModal)({
-            children: (react_1.default.createElement(dialog_panel_1.DialogPanel, { width: "lg" },
-                react_1.default.createElement(insert_video_modal_content_1.InsertVideoModalContent, { editedVideo: (0, get_active_video_1.getActiveVideo)(props.editor), editor: props.editor }))),
-        });
-    }, [props.editor]);
-    const onDelete = (0, react_1.useCallback)(() => {
-        (0, utils_1.removeSelectedNode)(props.editor);
-    }, [props.editor]);
+    let t0;
+    if ($[0] !== props.editor) {
+        t0 = () => {
+            (0, modal_service_1.openModal)({
+                children: react_1.default.createElement(dialog_panel_1.DialogPanel, { width: "lg" },
+                    react_1.default.createElement(insert_video_modal_content_1.InsertVideoModalContent, { editedVideo: (0, get_active_video_1.getActiveVideo)(props.editor), editor: props.editor }))
+            });
+        };
+        $[0] = props.editor;
+        $[1] = t0;
+    }
+    else {
+        t0 = $[1];
+    }
+    const onEdit = t0;
+    let t1;
+    if ($[2] !== props.editor) {
+        t1 = () => {
+            (0, utils_1.removeSelectedNode)(props.editor);
+        };
+        $[2] = props.editor;
+        $[3] = t1;
+    }
+    else {
+        t1 = $[3];
+    }
+    const onDelete = t1;
     const element = props.element;
-    return (react_1.default.createElement("div", { ...props.attributes, className: `${CLASS_NAME} ${CLASS_NAME}-video ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}` },
-        react_1.default.createElement(element_with_action_buttons_1.ElementWithActionButtons, { className: `${CLASS_NAME}-video__action-buttons`, isSelected: isSelected, onDelete: onDelete, onEdit: onEdit },
-            react_1.default.createElement("iframe", { className: `${CLASS_NAME}-video__iframe`, src: element.embeddedUrl, tabIndex: -1, title: t("uxf-wysiwyg:plugins.video.iframe-title") })),
-        props.children));
+    const t2 = props.attributes;
+    const t3 = `${CLASS_NAME} ${CLASS_NAME}-video ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}`;
+    const t4 = element.embeddedUrl;
+    let t5;
+    if ($[4] !== t) {
+        t5 = t("uxf-wysiwyg:plugins.video.iframe-title");
+        $[4] = t;
+        $[5] = t5;
+    }
+    else {
+        t5 = $[5];
+    }
+    let t6;
+    if ($[6] !== element.embeddedUrl || $[7] !== t5) {
+        t6 = react_1.default.createElement("iframe", { className: `${CLASS_NAME}-video__iframe`, src: t4, tabIndex: -1, title: t5 });
+        $[6] = element.embeddedUrl;
+        $[7] = t5;
+        $[8] = t6;
+    }
+    else {
+        t6 = $[8];
+    }
+    let t7;
+    if ($[9] !== isSelected || $[10] !== onDelete || $[11] !== onEdit || $[12] !== t6) {
+        t7 = react_1.default.createElement(element_with_action_buttons_1.ElementWithActionButtons, { className: `${CLASS_NAME}-video__action-buttons`, isSelected: isSelected, onDelete: onDelete, onEdit: onEdit }, t6);
+        $[9] = isSelected;
+        $[10] = onDelete;
+        $[11] = onEdit;
+        $[12] = t6;
+        $[13] = t7;
+    }
+    else {
+        t7 = $[13];
+    }
+    let t8;
+    if ($[14] !== props.attributes || $[15] !== props.children || $[16] !== t3 || $[17] !== t7) {
+        t8 = react_1.default.createElement("div", { ...t2, className: t3 },
+            t7,
+            props.children);
+        $[14] = props.attributes;
+        $[15] = props.children;
+        $[16] = t3;
+        $[17] = t7;
+        $[18] = t8;
+    }
+    else {
+        t8 = $[18];
+    }
+    return t8;
 };
 exports.VideoElement = VideoElement;

package/wysiwyg-editor.js

@@ -35,6 +35,7 @@ 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_hydrated_1 = require("@uxf/core-react/hooks/use-is-hydrated");
 const translations_1 = require("@uxf/core-react/translations");
@@ -50,52 +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;
-    // Plate needs the browser. Rendered on the client after hydration (e.g. after a client-side navigation), the
-    // editor shows at once instead of flashing the loader for a commit.
+    const $ = (0, compiler_runtime_1.c)(16);
+    const { ref } = props;
     const isHydrated = (0, use_is_hydrated_1.useIsHydrated)();
     if (!isHydrated) {
-        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 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;