@uxf/wysiwyg 14.0.0 → 14.1.0

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

@@ -34,6 +34,7 @@ var __importStar = (this && this.__importStar) || (function () {
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.InsertImageModalContent = void 0;
+const compiler_runtime_1 = require("react/compiler-runtime");
 const translations_1 = require("@uxf/core-react/translations");
 const file_input_1 = require("@uxf/ui/file-input");
 const modal_service_1 = require("@uxf/ui/modal/modal-service");
@@ -46,54 +47,276 @@ const modal_buttons_1 = require("../components/modal/modal-buttons");
 const modal_content_1 = require("../components/modal/modal-content");
 const utils_1 = require("../utils");
 const CLASS_NAME = "uxf-wysiwyg__insert-modal";
-const InsertImageModalContent = (props) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
+const InsertImageModalContent = props => {
+    var _a, _b, _d, _e, _f, _g, _h, _j;
+    const $ = (0, compiler_runtime_1.c)(68);
     const t = (0, translations_1.useUxfTranslation)();
     const imageHandlers = (0, use_image_handlers_1.useImageHandlers)(props.editor);
     const [selectedFile, setSelectedFile] = (0, react_1.useState)((_b = (_a = props.imageToEdit) === null || _a === void 0 ? void 0 : _a.file) !== null && _b !== void 0 ? _b : null);
-    const [alt, setAlt] = (0, react_1.useState)((_d = (_c = props.imageToEdit) === null || _c === void 0 ? void 0 : _c.alt) !== null && _d !== void 0 ? _d : "");
-    const [caption, setCaption] = (0, react_1.useState)((_f = (_e = props.imageToEdit) === null || _e === void 0 ? void 0 : _e.caption) !== null && _f !== void 0 ? _f : "");
-    const [source, setSource] = (0, react_1.useState)((_h = (_g = props.imageToEdit) === null || _g === void 0 ? void 0 : _g.source) !== null && _h !== void 0 ? _h : "");
-    const title = props.imageToEdit
-        ? t("uxf-wysiwyg:plugins.image.button-edit")
-        : t("uxf-wysiwyg:plugins.image.button-insert");
-    const fileUploadHandler = (0, react_1.useCallback)(async (file) => {
-        const fileResponse = await imageHandlers.uploadImage(file);
-        setSelectedFile(fileResponse);
-        return fileResponse;
-    }, [imageHandlers]);
-    const reset = (0, react_1.useCallback)(() => {
-        setSelectedFile(null);
-        setAlt("");
-        setCaption("");
-        setSource("");
-    }, []);
-    const onCloseHandler = (0, react_1.useCallback)(() => {
-        reset();
-        (0, utils_1.closeModalWithFocus)(props.editor);
-    }, [props.editor, reset]);
-    const onAddHandler = (0, react_1.useCallback)((event) => {
-        event.preventDefault();
-        if (selectedFile && !props.imageToEdit) {
-            (0, insert_image_1.insertImage)(props.editor, selectedFile, alt !== "" ? alt : undefined, caption !== "" ? caption : undefined, source !== "" ? source : undefined, imageHandlers.getImageUrl(selectedFile));
-            reset();
-            (0, modal_service_1.closeModal)();
-        }
-        else if (selectedFile && props.imageToEdit) {
-            (0, update_image_1.updateImage)(props.editor, selectedFile, alt !== "" ? alt : undefined, caption !== "" ? caption : undefined, source !== "" ? source : undefined, imageHandlers.getImageUrl(selectedFile));
+    const [alt, setAlt] = (0, react_1.useState)((_e = (_d = props.imageToEdit) === null || _d === void 0 ? void 0 : _d.alt) !== null && _e !== void 0 ? _e : "");
+    const [caption, setCaption] = (0, react_1.useState)((_g = (_f = props.imageToEdit) === null || _f === void 0 ? void 0 : _f.caption) !== null && _g !== void 0 ? _g : "");
+    const [source, setSource] = (0, react_1.useState)((_j = (_h = props.imageToEdit) === null || _h === void 0 ? void 0 : _h.source) !== null && _j !== void 0 ? _j : "");
+    let t0;
+    if ($[0] !== props.imageToEdit || $[1] !== t) {
+        t0 = props.imageToEdit ? t("uxf-wysiwyg:plugins.image.button-edit") : t("uxf-wysiwyg:plugins.image.button-insert");
+        $[0] = props.imageToEdit;
+        $[1] = t;
+        $[2] = t0;
+    }
+    else {
+        t0 = $[2];
+    }
+    const title = t0;
+    let t1;
+    if ($[3] !== imageHandlers) {
+        t1 = async (file) => {
+            const fileResponse = await imageHandlers.uploadImage(file);
+            setSelectedFile(fileResponse);
+            return fileResponse;
+        };
+        $[3] = imageHandlers;
+        $[4] = t1;
+    }
+    else {
+        t1 = $[4];
+    }
+    const fileUploadHandler = t1;
+    let t2;
+    if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+        t2 = () => {
+            setSelectedFile(null);
+            setAlt("");
+            setCaption("");
+            setSource("");
+        };
+        $[5] = t2;
+    }
+    else {
+        t2 = $[5];
+    }
+    const reset = t2;
+    let t3;
+    if ($[6] !== props.editor) {
+        t3 = () => {
             reset();
-            (0, modal_service_1.closeModal)();
-        }
-    }, [alt, caption, imageHandlers, props.editor, props.imageToEdit, reset, selectedFile, source]);
-    return (react_1.default.createElement(modal_content_1.ModalContent, { title: title },
-        react_1.default.createElement("form", { className: `${CLASS_NAME}-image__form`, id: "insert-image-form", onSubmit: onAddHandler },
-            react_1.default.createElement("div", { className: `${CLASS_NAME}-image__form-inputs` },
-                react_1.default.createElement(file_input_1.FileInput, { label: t("uxf-wysiwyg:plugins.image.file-upload.label"), name: "image", onChange: setSelectedFile, onUploadFile: fileUploadHandler, value: selectedFile }),
-                react_1.default.createElement(text_input_1.TextInput, { className: `${CLASS_NAME}-image__optional-input`, label: t("uxf-wysiwyg:plugins.image.alt.label"), name: "alt", onChange: setAlt, placeholder: t("uxf-wysiwyg:plugins.image.alt.placeholder"), type: "text", value: alt }),
-                react_1.default.createElement(text_input_1.TextInput, { className: `${CLASS_NAME}-image__optional-input`, label: t("uxf-wysiwyg:plugins.image.caption.label"), name: "caption", onChange: setCaption, placeholder: t("uxf-wysiwyg:plugins.image.caption.placeholder"), type: "text", value: caption }),
-                react_1.default.createElement(text_input_1.TextInput, { className: `${CLASS_NAME}-image__optional-input`, label: t("uxf-wysiwyg:plugins.image.source.label"), name: "source", onChange: setSource, placeholder: t("uxf-wysiwyg:plugins.image.source.placeholder"), type: "text", value: source })),
-            selectedFile && (react_1.default.createElement("img", { alt: alt, className: `${CLASS_NAME}-image__selected-img`, src: imageHandlers.getImageUrl(selectedFile) })),
-            react_1.default.createElement(modal_buttons_1.ModalButtons, { className: `${CLASS_NAME}__form-buttons`, editor: props.editor, onCancel: onCloseHandler, submitText: title }),
-            react_1.default.createElement("button", { hidden: true, type: "submit" }))));
+            (0, utils_1.closeModalWithFocus)(props.editor);
+        };
+        $[6] = props.editor;
+        $[7] = t3;
+    }
+    else {
+        t3 = $[7];
+    }
+    const onCloseHandler = t3;
+    let t4;
+    if ($[8] !== alt || $[9] !== caption || $[10] !== imageHandlers || $[11] !== props.editor || $[12] !== props.imageToEdit || $[13] !== selectedFile || $[14] !== source) {
+        t4 = event => {
+            event.preventDefault();
+            if (selectedFile && !props.imageToEdit) {
+                (0, insert_image_1.insertImage)(props.editor, selectedFile, alt !== "" ? alt : undefined, caption !== "" ? caption : undefined, source !== "" ? source : undefined, imageHandlers.getImageUrl(selectedFile));
+                reset();
+                (0, modal_service_1.closeModal)();
+            }
+            else {
+                if (selectedFile && props.imageToEdit) {
+                    (0, update_image_1.updateImage)(props.editor, selectedFile, alt !== "" ? alt : undefined, caption !== "" ? caption : undefined, source !== "" ? source : undefined, imageHandlers.getImageUrl(selectedFile));
+                    reset();
+                    (0, modal_service_1.closeModal)();
+                }
+            }
+        };
+        $[8] = alt;
+        $[9] = caption;
+        $[10] = imageHandlers;
+        $[11] = props.editor;
+        $[12] = props.imageToEdit;
+        $[13] = selectedFile;
+        $[14] = source;
+        $[15] = t4;
+    }
+    else {
+        t4 = $[15];
+    }
+    const onAddHandler = t4;
+    let t5;
+    if ($[16] !== t) {
+        t5 = t("uxf-wysiwyg:plugins.image.file-upload.label");
+        $[16] = t;
+        $[17] = t5;
+    }
+    else {
+        t5 = $[17];
+    }
+    let t6;
+    if ($[18] !== fileUploadHandler || $[19] !== selectedFile || $[20] !== t5) {
+        t6 = react_1.default.createElement(file_input_1.FileInput, { label: t5, name: "image", onChange: setSelectedFile, onUploadFile: fileUploadHandler, value: selectedFile });
+        $[18] = fileUploadHandler;
+        $[19] = selectedFile;
+        $[20] = t5;
+        $[21] = t6;
+    }
+    else {
+        t6 = $[21];
+    }
+    let t7;
+    if ($[22] !== t) {
+        t7 = t("uxf-wysiwyg:plugins.image.alt.label");
+        $[22] = t;
+        $[23] = t7;
+    }
+    else {
+        t7 = $[23];
+    }
+    let t8;
+    if ($[24] !== t) {
+        t8 = t("uxf-wysiwyg:plugins.image.alt.placeholder");
+        $[24] = t;
+        $[25] = t8;
+    }
+    else {
+        t8 = $[25];
+    }
+    let t9;
+    if ($[26] !== alt || $[27] !== t7 || $[28] !== t8) {
+        t9 = react_1.default.createElement(text_input_1.TextInput, { className: `${CLASS_NAME}-image__optional-input`, label: t7, name: "alt", onChange: setAlt, placeholder: t8, type: "text", value: alt });
+        $[26] = alt;
+        $[27] = t7;
+        $[28] = t8;
+        $[29] = t9;
+    }
+    else {
+        t9 = $[29];
+    }
+    let t10;
+    if ($[30] !== t) {
+        t10 = t("uxf-wysiwyg:plugins.image.caption.label");
+        $[30] = t;
+        $[31] = t10;
+    }
+    else {
+        t10 = $[31];
+    }
+    let t11;
+    if ($[32] !== t) {
+        t11 = t("uxf-wysiwyg:plugins.image.caption.placeholder");
+        $[32] = t;
+        $[33] = t11;
+    }
+    else {
+        t11 = $[33];
+    }
+    let t12;
+    if ($[34] !== caption || $[35] !== t10 || $[36] !== t11) {
+        t12 = react_1.default.createElement(text_input_1.TextInput, { className: `${CLASS_NAME}-image__optional-input`, label: t10, name: "caption", onChange: setCaption, placeholder: t11, type: "text", value: caption });
+        $[34] = caption;
+        $[35] = t10;
+        $[36] = t11;
+        $[37] = t12;
+    }
+    else {
+        t12 = $[37];
+    }
+    let t13;
+    if ($[38] !== t) {
+        t13 = t("uxf-wysiwyg:plugins.image.source.label");
+        $[38] = t;
+        $[39] = t13;
+    }
+    else {
+        t13 = $[39];
+    }
+    let t14;
+    if ($[40] !== t) {
+        t14 = t("uxf-wysiwyg:plugins.image.source.placeholder");
+        $[40] = t;
+        $[41] = t14;
+    }
+    else {
+        t14 = $[41];
+    }
+    let t15;
+    if ($[42] !== source || $[43] !== t13 || $[44] !== t14) {
+        t15 = react_1.default.createElement(text_input_1.TextInput, { className: `${CLASS_NAME}-image__optional-input`, label: t13, name: "source", onChange: setSource, placeholder: t14, type: "text", value: source });
+        $[42] = source;
+        $[43] = t13;
+        $[44] = t14;
+        $[45] = t15;
+    }
+    else {
+        t15 = $[45];
+    }
+    let t16;
+    if ($[46] !== t12 || $[47] !== t15 || $[48] !== t6 || $[49] !== t9) {
+        t16 = react_1.default.createElement("div", { className: `${CLASS_NAME}-image__form-inputs` },
+            t6,
+            t9,
+            t12,
+            t15);
+        $[46] = t12;
+        $[47] = t15;
+        $[48] = t6;
+        $[49] = t9;
+        $[50] = t16;
+    }
+    else {
+        t16 = $[50];
+    }
+    let t17;
+    if ($[51] !== alt || $[52] !== imageHandlers || $[53] !== selectedFile) {
+        t17 = selectedFile && react_1.default.createElement("img", { alt: alt, className: `${CLASS_NAME}-image__selected-img`, src: imageHandlers.getImageUrl(selectedFile) });
+        $[51] = alt;
+        $[52] = imageHandlers;
+        $[53] = selectedFile;
+        $[54] = t17;
+    }
+    else {
+        t17 = $[54];
+    }
+    let t18;
+    if ($[55] !== onCloseHandler || $[56] !== props.editor || $[57] !== title) {
+        t18 = react_1.default.createElement(modal_buttons_1.ModalButtons, { className: `${CLASS_NAME}__form-buttons`, editor: props.editor, onCancel: onCloseHandler, submitText: title });
+        $[55] = onCloseHandler;
+        $[56] = props.editor;
+        $[57] = title;
+        $[58] = t18;
+    }
+    else {
+        t18 = $[58];
+    }
+    let t19;
+    if ($[59] === Symbol.for("react.memo_cache_sentinel")) {
+        t19 = react_1.default.createElement("button", { hidden: true, type: "submit" });
+        $[59] = t19;
+    }
+    else {
+        t19 = $[59];
+    }
+    let t20;
+    if ($[60] !== onAddHandler || $[61] !== t16 || $[62] !== t17 || $[63] !== t18) {
+        t20 = react_1.default.createElement("form", { className: `${CLASS_NAME}-image__form`, id: "insert-image-form", onSubmit: onAddHandler },
+            t16,
+            t17,
+            t18,
+            t19);
+        $[60] = onAddHandler;
+        $[61] = t16;
+        $[62] = t17;
+        $[63] = t18;
+        $[64] = t20;
+    }
+    else {
+        t20 = $[64];
+    }
+    let t21;
+    if ($[65] !== t20 || $[66] !== title) {
+        t21 = react_1.default.createElement(modal_content_1.ModalContent, { title: title }, t20);
+        $[65] = t20;
+        $[66] = title;
+        $[67] = t21;
+    }
+    else {
+        t21 = $[67];
+    }
+    return t21;
 };
 exports.InsertImageModalContent = InsertImageModalContent;

package/ui/toolbar/buttons/button-toolbar-button.js

@@ -4,6 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ButtonToolbarButton = void 0;
+const compiler_runtime_1 = require("react/compiler-runtime");
 const translations_1 = require("@uxf/core-react/translations");
 const react_1 = __importDefault(require("react"));
 const hooks_1 = require("../../../hooks");
@@ -11,10 +12,44 @@ const button_1 = require("../../../plugins/button");
 const insert_button_modal_content_1 = require("../../button/insert-button-modal-content");
 const modal_toolbar_button_1 = require("./modal-toolbar-button");
 const CLASS_NAME = "uxf-wysiwyg__toolbar-button";
-const ButtonToolbarButton = (props) => {
+const ButtonToolbarButton = props => {
     var _a, _b;
+    const $ = (0, compiler_runtime_1.c)(10);
     const t = (0, translations_1.useUxfTranslation)();
     const editor = (0, hooks_1.useUxfPlateEditorState)(props.plateId);
-    return (react_1.default.createElement(modal_toolbar_button_1.ModalToolbarButton, { Modal: react_1.default.createElement(insert_button_modal_content_1.InsertButtonModalContent, { editor: editor }), className: `${CLASS_NAME} ${CLASS_NAME}-button ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}`, editor: editor, iconName: (_b = props.iconName) !== null && _b !== void 0 ? _b : "rectangle-wide", pluginKey: button_1.PLUGIN_BUTTON_KEY, tooltipText: t("uxf-wysiwyg:plugins.button.tooltip") }));
+    let t0;
+    if ($[0] !== editor) {
+        t0 = react_1.default.createElement(insert_button_modal_content_1.InsertButtonModalContent, { editor: editor });
+        $[0] = editor;
+        $[1] = t0;
+    }
+    else {
+        t0 = $[1];
+    }
+    const t1 = `${CLASS_NAME} ${CLASS_NAME}-button ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}`;
+    const t2 = (_b = props.iconName) !== null && _b !== void 0 ? _b : "rectangle-wide";
+    let t3;
+    if ($[2] !== t) {
+        t3 = t("uxf-wysiwyg:plugins.button.tooltip");
+        $[2] = t;
+        $[3] = t3;
+    }
+    else {
+        t3 = $[3];
+    }
+    let t4;
+    if ($[4] !== editor || $[5] !== t0 || $[6] !== t1 || $[7] !== t2 || $[8] !== t3) {
+        t4 = react_1.default.createElement(modal_toolbar_button_1.ModalToolbarButton, { Modal: t0, className: t1, editor: editor, iconName: t2, pluginKey: button_1.PLUGIN_BUTTON_KEY, tooltipText: t3 });
+        $[4] = editor;
+        $[5] = t0;
+        $[6] = t1;
+        $[7] = t2;
+        $[8] = t3;
+        $[9] = t4;
+    }
+    else {
+        t4 = $[9];
+    }
+    return t4;
 };
 exports.ButtonToolbarButton = ButtonToolbarButton;

package/ui/toolbar/buttons/element-toolbar-button.js

@@ -4,22 +4,67 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ElementToolbarButton = void 0;
+const compiler_runtime_1 = require("react/compiler-runtime");
 const is_not_nil_1 = require("@uxf/core/utils/is-not-nil");
 const react_1 = __importDefault(require("react"));
 const hooks_1 = require("../../../hooks");
 const utils_1 = require("../../../utils");
 const toolbar_button_1 = require("./toolbar-button");
 const CLASS_NAME = "uxf-wysiwyg__toolbar-button";
-const ElementToolbarButton = (props) => {
+const ElementToolbarButton = props => {
     var _a;
+    const $ = (0, compiler_runtime_1.c)(15);
     const editor = (0, hooks_1.useUxfPlateEditorState)(props.plateId);
-    const type = (0, utils_1.getPluginType)(editor, props.pluginKey);
-    const isActive = (0, is_not_nil_1.isNotNil)(editor.selection) && (0, utils_1.isRangeInSingleText)(editor) && (0, utils_1.someNode)(editor, { match: { type: type } });
-    const onMouseDown = () => {
-        (0, utils_1.toggleNodeType)(editor, {
-            activeType: type,
+    let t0;
+    let type;
+    if ($[0] !== editor || $[1] !== props.pluginKey) {
+        type = (0, utils_1.getPluginType)(editor, props.pluginKey);
+        t0 = (0, is_not_nil_1.isNotNil)(editor.selection) && (0, utils_1.isRangeInSingleText)(editor) && (0, utils_1.someNode)(editor, {
+            match: {
+                type
+            }
         });
-    };
-    return (react_1.default.createElement(toolbar_button_1.ToolbarButton, { className: `${CLASS_NAME} ${CLASS_NAME}-element ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}`, editor: editor, iconName: props.iconName, isActive: isActive, onMouseDown: onMouseDown, pluginKey: props.pluginKey, tooltipText: props.tooltipText }));
+        $[0] = editor;
+        $[1] = props.pluginKey;
+        $[2] = t0;
+        $[3] = type;
+    }
+    else {
+        t0 = $[2];
+        type = $[3];
+    }
+    const isActive = t0;
+    let t1;
+    if ($[4] !== editor || $[5] !== type) {
+        t1 = () => {
+            (0, utils_1.toggleNodeType)(editor, {
+                activeType: type
+            });
+        };
+        $[4] = editor;
+        $[5] = type;
+        $[6] = t1;
+    }
+    else {
+        t1 = $[6];
+    }
+    const onMouseDown = t1;
+    const t2 = `${CLASS_NAME} ${CLASS_NAME}-element ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}`;
+    let t3;
+    if ($[7] !== editor || $[8] !== isActive || $[9] !== onMouseDown || $[10] !== props.iconName || $[11] !== props.pluginKey || $[12] !== props.tooltipText || $[13] !== t2) {
+        t3 = react_1.default.createElement(toolbar_button_1.ToolbarButton, { className: t2, editor: editor, iconName: props.iconName, isActive: isActive, onMouseDown: onMouseDown, pluginKey: props.pluginKey, tooltipText: props.tooltipText });
+        $[7] = editor;
+        $[8] = isActive;
+        $[9] = onMouseDown;
+        $[10] = props.iconName;
+        $[11] = props.pluginKey;
+        $[12] = props.tooltipText;
+        $[13] = t2;
+        $[14] = t3;
+    }
+    else {
+        t3 = $[14];
+    }
+    return t3;
 };
 exports.ElementToolbarButton = ElementToolbarButton;

package/ui/toolbar/buttons/image-toolbar-button.js

@@ -4,6 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ImageToolbarButton = void 0;
+const compiler_runtime_1 = require("react/compiler-runtime");
 const translations_1 = require("@uxf/core-react/translations");
 const react_1 = __importDefault(require("react"));
 const hooks_1 = require("../../../hooks");
@@ -11,10 +12,44 @@ const types_1 = require("../../../plugins/image/types");
 const insert_image_modal_content_1 = require("../../image/insert-image-modal-content");
 const modal_toolbar_button_1 = require("./modal-toolbar-button");
 const CLASS_NAME = "uxf-wysiwyg__toolbar-button";
-const ImageToolbarButton = (props) => {
+const ImageToolbarButton = props => {
     var _a, _b;
+    const $ = (0, compiler_runtime_1.c)(10);
     const t = (0, translations_1.useUxfTranslation)();
     const editor = (0, hooks_1.useUxfPlateEditorRef)(props.plateId);
-    return (react_1.default.createElement(modal_toolbar_button_1.ModalToolbarButton, { Modal: react_1.default.createElement(insert_image_modal_content_1.InsertImageModalContent, { editor: editor }), className: `${CLASS_NAME} ${CLASS_NAME}-image ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}`, editor: editor, iconName: (_b = props.iconName) !== null && _b !== void 0 ? _b : "image", pluginKey: types_1.IMAGE_PLUGIN_KEY, tooltipText: t("uxf-wysiwyg:plugins.image.tooltip") }));
+    let t0;
+    if ($[0] !== editor) {
+        t0 = react_1.default.createElement(insert_image_modal_content_1.InsertImageModalContent, { editor: editor });
+        $[0] = editor;
+        $[1] = t0;
+    }
+    else {
+        t0 = $[1];
+    }
+    const t1 = `${CLASS_NAME} ${CLASS_NAME}-image ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}`;
+    const t2 = (_b = props.iconName) !== null && _b !== void 0 ? _b : "image";
+    let t3;
+    if ($[2] !== t) {
+        t3 = t("uxf-wysiwyg:plugins.image.tooltip");
+        $[2] = t;
+        $[3] = t3;
+    }
+    else {
+        t3 = $[3];
+    }
+    let t4;
+    if ($[4] !== editor || $[5] !== t0 || $[6] !== t1 || $[7] !== t2 || $[8] !== t3) {
+        t4 = react_1.default.createElement(modal_toolbar_button_1.ModalToolbarButton, { Modal: t0, className: t1, editor: editor, iconName: t2, pluginKey: types_1.IMAGE_PLUGIN_KEY, tooltipText: t3 });
+        $[4] = editor;
+        $[5] = t0;
+        $[6] = t1;
+        $[7] = t2;
+        $[8] = t3;
+        $[9] = t4;
+    }
+    else {
+        t4 = $[9];
+    }
+    return t4;
 };
 exports.ImageToolbarButton = ImageToolbarButton;

package/ui/toolbar/buttons/link-toolbar-button.js

@@ -4,6 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LinkToolbarButton = void 0;
+const compiler_runtime_1 = require("react/compiler-runtime");
 const translations_1 = require("@uxf/core-react/translations");
 const react_1 = __importDefault(require("react"));
 const hooks_1 = require("../../../hooks");
@@ -13,17 +14,60 @@ const trigger_link_insert_or_edit_1 = require("../../../plugins/link/transforms/
 const utils_1 = require("../../../utils");
 const toolbar_button_1 = require("./toolbar-button");
 const CLASS_NAME = "uxf-wysiwyg__toolbar-button";
-const LinkToolbarButton = (props) => {
+const LinkToolbarButton = props => {
     var _a, _b;
+    const $ = (0, compiler_runtime_1.c)(13);
     const t = (0, translations_1.useUxfTranslation)();
     const editor = (0, hooks_1.useUxfPlateEditorState)(props.plateId);
-    const isLink = (0, is_link_selected_1.isLinkSelected)(editor);
-    const onMouseDown = () => {
-        var _a;
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        (0, utils_1.focusEditor)(editor, (_a = editor.selection) !== null && _a !== void 0 ? _a : editor.dom.prevSelection);
-        (0, trigger_link_insert_or_edit_1.triggerLinkInsertOrEdit)(editor, true);
-    };
-    return (react_1.default.createElement(toolbar_button_1.ToolbarButton, { className: `${CLASS_NAME} ${CLASS_NAME}-link ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}`, editor: editor, iconName: (_b = props.iconName) !== null && _b !== void 0 ? _b : "link", isActive: isLink, onMouseDown: onMouseDown, pluginKey: constants_1.ELEMENT_LINK, tooltipText: t("uxf-wysiwyg:plugins.link.tooltip") }));
+    let t0;
+    if ($[0] !== editor) {
+        t0 = (0, is_link_selected_1.isLinkSelected)(editor);
+        $[0] = editor;
+        $[1] = t0;
+    }
+    else {
+        t0 = $[1];
+    }
+    const isLink = t0;
+    let t1;
+    if ($[2] !== editor) {
+        t1 = () => {
+            var _a;
+            (0, utils_1.focusEditor)(editor, (_a = editor.selection) !== null && _a !== void 0 ? _a : editor.dom.prevSelection);
+            (0, trigger_link_insert_or_edit_1.triggerLinkInsertOrEdit)(editor, true);
+        };
+        $[2] = editor;
+        $[3] = t1;
+    }
+    else {
+        t1 = $[3];
+    }
+    const onMouseDown = t1;
+    const t2 = `${CLASS_NAME} ${CLASS_NAME}-link ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}`;
+    const t3 = (_b = props.iconName) !== null && _b !== void 0 ? _b : "link";
+    let t4;
+    if ($[4] !== t) {
+        t4 = t("uxf-wysiwyg:plugins.link.tooltip");
+        $[4] = t;
+        $[5] = t4;
+    }
+    else {
+        t4 = $[5];
+    }
+    let t5;
+    if ($[6] !== editor || $[7] !== isLink || $[8] !== onMouseDown || $[9] !== t2 || $[10] !== t3 || $[11] !== t4) {
+        t5 = react_1.default.createElement(toolbar_button_1.ToolbarButton, { className: t2, editor: editor, iconName: t3, isActive: isLink, onMouseDown: onMouseDown, pluginKey: constants_1.ELEMENT_LINK, tooltipText: t4 });
+        $[6] = editor;
+        $[7] = isLink;
+        $[8] = onMouseDown;
+        $[9] = t2;
+        $[10] = t3;
+        $[11] = t4;
+        $[12] = t5;
+    }
+    else {
+        t5 = $[12];
+    }
+    return t5;
 };
 exports.LinkToolbarButton = LinkToolbarButton;

package/ui/toolbar/buttons/list-toolbar-button.js

@@ -4,6 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ListToolbarButton = void 0;
+const compiler_runtime_1 = require("react/compiler-runtime");
 const is_nil_1 = require("@uxf/core/utils/is-nil");
 const is_not_nil_1 = require("@uxf/core/utils/is-not-nil");
 const react_1 = __importDefault(require("react"));
@@ -20,16 +21,56 @@ function getIsListElementActive(editor, type) {
     const [listElement] = res.list;
     return listElement.type === type;
 }
-const ListToolbarButton = (props) => {
+const ListToolbarButton = props => {
     var _a;
+    const $ = (0, compiler_runtime_1.c)(15);
     const editor = (0, hooks_1.useUxfPlateEditorState)(props.plateId);
-    const type = (0, utils_1.getPluginType)(editor, props.pluginKey);
-    const isActive = getIsListElementActive(editor, type);
-    const onMouseDown = () => {
-        (0, constants_1.toggleList)(editor, {
-            type,
-        });
-    };
-    return (react_1.default.createElement(toolbar_button_1.ToolbarButton, { className: `${CLASS_NAME} ${CLASS_NAME}-list ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}`, editor: editor, iconName: props.iconName, isActive: isActive, onMouseDown: onMouseDown, pluginKey: props.pluginKey, tooltipText: props.tooltipText }));
+    let t0;
+    let type;
+    if ($[0] !== editor || $[1] !== props.pluginKey) {
+        type = (0, utils_1.getPluginType)(editor, props.pluginKey);
+        t0 = getIsListElementActive(editor, type);
+        $[0] = editor;
+        $[1] = props.pluginKey;
+        $[2] = t0;
+        $[3] = type;
+    }
+    else {
+        t0 = $[2];
+        type = $[3];
+    }
+    const isActive = t0;
+    let t1;
+    if ($[4] !== editor || $[5] !== type) {
+        t1 = () => {
+            (0, constants_1.toggleList)(editor, {
+                type
+            });
+        };
+        $[4] = editor;
+        $[5] = type;
+        $[6] = t1;
+    }
+    else {
+        t1 = $[6];
+    }
+    const onMouseDown = t1;
+    const t2 = `${CLASS_NAME} ${CLASS_NAME}-list ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}`;
+    let t3;
+    if ($[7] !== editor || $[8] !== isActive || $[9] !== onMouseDown || $[10] !== props.iconName || $[11] !== props.pluginKey || $[12] !== props.tooltipText || $[13] !== t2) {
+        t3 = react_1.default.createElement(toolbar_button_1.ToolbarButton, { className: t2, editor: editor, iconName: props.iconName, isActive: isActive, onMouseDown: onMouseDown, pluginKey: props.pluginKey, tooltipText: props.tooltipText });
+        $[7] = editor;
+        $[8] = isActive;
+        $[9] = onMouseDown;
+        $[10] = props.iconName;
+        $[11] = props.pluginKey;
+        $[12] = props.tooltipText;
+        $[13] = t2;
+        $[14] = t3;
+    }
+    else {
+        t3 = $[14];
+    }
+    return t3;
 };
 exports.ListToolbarButton = ListToolbarButton;