@uxf/wysiwyg 14.0.0 → 14.1.0

package/ui/floating-link.js

@@ -34,6 +34,7 @@ var __importStar = (this && this.__importStar) || (function () {
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FloatingLink = void 0;
+const compiler_runtime_1 = require("react/compiler-runtime");
 const floating_1 = require("@platejs/floating");
 const react_1 = require("@platejs/link/react");
 const translations_1 = require("@uxf/core-react/translations");
@@ -53,68 +54,402 @@ const CLASS_NAME = "uxf-wysiwyg__floating-link";
 const EDIT_CLASS_NAME = `${CLASS_NAME}-edit`;
 const Edit = () => {
     var _a, _b;
+    const $ = (0, compiler_runtime_1.c)(26);
     const editor = (0, hooks_1.useUxfEditorRef)();
-    const url = (_b = (_a = (0, get_active_link_1.getActiveLink)(editor)) === null || _a === void 0 ? void 0 : _a.url) !== null && _b !== void 0 ? _b : "";
-    return (react_2.default.createElement(button_group_1.ButtonGroup, { className: EDIT_CLASS_NAME },
-        react_2.default.createElement(button_1.Button, { className: `${EDIT_CLASS_NAME}__button ${EDIT_CLASS_NAME}__button-edit`, isIconButton: true, onClick: () => (0, react_1.triggerFloatingLinkEdit)(editor), variant: "secondary" },
-            react_2.default.createElement(icon_1.Icon, { name: "edit", size: 15 })),
-        react_2.default.createElement(button_1.Button, { className: `${EDIT_CLASS_NAME}__button ${EDIT_CLASS_NAME}__button-open`, href: !url_helper_1.UrlHelper.hasProtocol(url) ? `https://${url}` : url, isIconButton: true, target: "_blank", variant: "secondary" },
-            react_2.default.createElement(icon_1.Icon, { name: "open-link-in-new-tab", size: 15 })),
-        react_2.default.createElement(button_1.Button, { className: `${EDIT_CLASS_NAME}__button ${EDIT_CLASS_NAME}__button-delete`, isIconButton: true, onClick: () => (0, unwrap_link_1.removeLink)(editor), variant: "secondary" },
-            react_2.default.createElement(icon_1.Icon, { name: "delete", size: 15 }))));
+    let T0;
+    let T1;
+    let t0;
+    let t1;
+    let t2;
+    let t3;
+    if ($[0] !== editor) {
+        const url = (_b = (_a = (0, get_active_link_1.getActiveLink)(editor)) === null || _a === void 0 ? void 0 : _a.url) !== null && _b !== void 0 ? _b : "";
+        T1 = button_group_1.ButtonGroup;
+        t2 = EDIT_CLASS_NAME;
+        const t4 = () => (0, react_1.triggerFloatingLinkEdit)(editor);
+        let t5;
+        if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+            t5 = react_2.default.createElement(icon_1.Icon, { name: "edit", size: 15 });
+            $[7] = t5;
+        }
+        else {
+            t5 = $[7];
+        }
+        if ($[8] !== t4) {
+            t3 = react_2.default.createElement(button_1.Button, { className: `${EDIT_CLASS_NAME}__button ${EDIT_CLASS_NAME}__button-edit`, isIconButton: true, onClick: t4, variant: "secondary" }, t5);
+            $[8] = t4;
+            $[9] = t3;
+        }
+        else {
+            t3 = $[9];
+        }
+        T0 = button_1.Button;
+        t0 = `${EDIT_CLASS_NAME}__button ${EDIT_CLASS_NAME}__button-open`;
+        t1 = !url_helper_1.UrlHelper.hasProtocol(url) ? `https://${url}` : url;
+        $[0] = editor;
+        $[1] = T0;
+        $[2] = T1;
+        $[3] = t0;
+        $[4] = t1;
+        $[5] = t2;
+        $[6] = t3;
+    }
+    else {
+        T0 = $[1];
+        T1 = $[2];
+        t0 = $[3];
+        t1 = $[4];
+        t2 = $[5];
+        t3 = $[6];
+    }
+    let t4;
+    if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+        t4 = react_2.default.createElement(icon_1.Icon, { name: "open-link-in-new-tab", size: 15 });
+        $[10] = t4;
+    }
+    else {
+        t4 = $[10];
+    }
+    let t5;
+    if ($[11] !== T0 || $[12] !== t0 || $[13] !== t1) {
+        t5 = react_2.default.createElement(T0, { className: t0, href: t1, isIconButton: true, target: "_blank", variant: "secondary" }, t4);
+        $[11] = T0;
+        $[12] = t0;
+        $[13] = t1;
+        $[14] = t5;
+    }
+    else {
+        t5 = $[14];
+    }
+    let t6;
+    if ($[15] !== editor) {
+        t6 = () => (0, unwrap_link_1.removeLink)(editor);
+        $[15] = editor;
+        $[16] = t6;
+    }
+    else {
+        t6 = $[16];
+    }
+    let t7;
+    if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
+        t7 = react_2.default.createElement(icon_1.Icon, { name: "delete", size: 15 });
+        $[17] = t7;
+    }
+    else {
+        t7 = $[17];
+    }
+    let t8;
+    if ($[18] !== t6) {
+        t8 = react_2.default.createElement(button_1.Button, { className: `${EDIT_CLASS_NAME}__button ${EDIT_CLASS_NAME}__button-delete`, isIconButton: true, onClick: t6, variant: "secondary" }, t7);
+        $[18] = t6;
+        $[19] = t8;
+    }
+    else {
+        t8 = $[19];
+    }
+    let t9;
+    if ($[20] !== T1 || $[21] !== t2 || $[22] !== t3 || $[23] !== t5 || $[24] !== t8) {
+        t9 = react_2.default.createElement(T1, { className: t2 },
+            t3,
+            t5,
+            t8);
+        $[20] = T1;
+        $[21] = t2;
+        $[22] = t3;
+        $[23] = t5;
+        $[24] = t8;
+        $[25] = t9;
+    }
+    else {
+        t9 = $[25];
+    }
+    return t9;
 };
 function useInsertLinkFormAutoFocus() {
+    const $ = (0, compiler_runtime_1.c)(3);
     const id = (0, react_2.useId)();
-    // TODO FEB-139 - native html autoFocus breaks popover placement in insert mode
-    (0, react_2.useEffect)(() => {
-        let timer;
-        const firstInput = document.querySelector(`#${CSS.escape(id)}`);
-        if (firstInput instanceof HTMLElement) {
-            timer = window.setTimeout(() => firstInput.focus(), 0);
-        }
-        return () => {
-            clearTimeout(timer);
+    let t0;
+    let t1;
+    if ($[0] !== id) {
+        t0 = () => {
+            let timer;
+            const firstInput = document.querySelector(`#${CSS.escape(id)}`);
+            if (firstInput instanceof HTMLElement) {
+                timer = window.setTimeout(() => firstInput.focus(), 0);
+            }
+            return () => {
+                clearTimeout(timer);
+            };
         };
-    }, [id]);
+        t1 = [id];
+        $[0] = id;
+        $[1] = t0;
+        $[2] = t1;
+    }
+    else {
+        t0 = $[1];
+        t1 = $[2];
+    }
+    (0, react_2.useEffect)(t0, t1);
     return id;
 }
 const INSERT_CLASS_NAME = `${CLASS_NAME}-insert`;
 const Insert = () => {
+    const $ = (0, compiler_runtime_1.c)(58);
     const t = (0, translations_1.useUxfTranslation)();
     const linkActions = (0, hooks_2.useLinkActions)();
     const editor = (0, hooks_1.useUxfEditorRef)();
     const [isSubmitted, setIsSubmitted] = (0, react_2.useState)(false);
     const firstInputId = useInsertLinkFormAutoFocus();
-    const onSubmit = (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        setIsSubmitted(true);
-        if (!linkActions.getUrl || !url_helper_1.UrlHelper.isValid(linkActions.getUrl)) {
-            return;
-        }
-        (0, react_1.submitFloatingLink)(editor);
-    };
+    let t0;
+    if ($[0] !== editor || $[1] !== linkActions.getUrl) {
+        t0 = e => {
+            e.preventDefault();
+            e.stopPropagation();
+            setIsSubmitted(true);
+            if (!linkActions.getUrl || !url_helper_1.UrlHelper.isValid(linkActions.getUrl)) {
+                return;
+            }
+            (0, react_1.submitFloatingLink)(editor);
+        };
+        $[0] = editor;
+        $[1] = linkActions.getUrl;
+        $[2] = t0;
+    }
+    else {
+        t0 = $[2];
+    }
+    const onSubmit = t0;
     const emptyUrl = isSubmitted && !linkActions.getUrl;
-    const invalidUrl = isSubmitted && !url_helper_1.UrlHelper.isValid(linkActions.getUrl);
-    return (react_2.default.createElement("div", { className: INSERT_CLASS_NAME },
-        react_2.default.createElement("form", { className: `${INSERT_CLASS_NAME}__form`, id: "insert-link-form", onSubmit: onSubmit },
-            react_2.default.createElement("div", { className: `${INSERT_CLASS_NAME}__form-inputs` },
-                react_2.default.createElement(text_input_1.TextInput, { helperText: emptyUrl
-                        ? t("uxf-wysiwyg:plugins.link.url-address.required")
-                        : invalidUrl
-                            ? t("uxf-wysiwyg:plugins.link.url-address.invalid")
-                            : undefined, hiddenLabel: true, id: firstInputId, isInvalid: emptyUrl || invalidUrl, isRequired: true, label: t("uxf-wysiwyg:plugins.link.url-address.label"), leftAddon: t("uxf-wysiwyg:plugins.link.url-address.label"), name: "url-address", onChange: linkActions.setUrl, placeholder: t("uxf-wysiwyg:plugins.link.url-address.placeholder"), value: linkActions.getUrl }),
-                react_2.default.createElement(text_input_1.TextInput, { hiddenLabel: true, label: t("uxf-wysiwyg:plugins.link.link-text.label"), leftAddon: t("uxf-wysiwyg:plugins.link.link-text.label"), name: "link-text", onChange: linkActions.setText, placeholder: t("uxf-wysiwyg:plugins.link.link-text.placeholder"), value: linkActions.getText }),
-                react_2.default.createElement(checkbox_input_1.CheckboxInput, { label: t("uxf-wysiwyg:plugins.link.open-in-new-tab"), name: "open-in-new-tab", onChange: (checked) => linkActions.setTarget(checked ? "_blank" : "_self"), value: linkActions.getTarget === "_blank" })),
-            react_2.default.createElement("div", { className: `${INSERT_CLASS_NAME}__form-buttons` },
-                react_2.default.createElement(button_1.Button, { className: `${INSERT_CLASS_NAME}__form-submit-button`, type: "submit" }, t("uxf-wysiwyg:plugins.link.button-save"))),
-            react_2.default.createElement("button", { hidden: true, type: "submit" }))));
+    let t1;
+    if ($[3] !== isSubmitted || $[4] !== linkActions.getUrl) {
+        t1 = isSubmitted && !url_helper_1.UrlHelper.isValid(linkActions.getUrl);
+        $[3] = isSubmitted;
+        $[4] = linkActions.getUrl;
+        $[5] = t1;
+    }
+    else {
+        t1 = $[5];
+    }
+    const invalidUrl = t1;
+    let t2;
+    if ($[6] !== emptyUrl || $[7] !== invalidUrl || $[8] !== t) {
+        t2 = emptyUrl ? t("uxf-wysiwyg:plugins.link.url-address.required") : invalidUrl ? t("uxf-wysiwyg:plugins.link.url-address.invalid") : undefined;
+        $[6] = emptyUrl;
+        $[7] = invalidUrl;
+        $[8] = t;
+        $[9] = t2;
+    }
+    else {
+        t2 = $[9];
+    }
+    const t3 = emptyUrl || invalidUrl;
+    let t4;
+    if ($[10] !== t) {
+        t4 = t("uxf-wysiwyg:plugins.link.url-address.label");
+        $[10] = t;
+        $[11] = t4;
+    }
+    else {
+        t4 = $[11];
+    }
+    let t5;
+    if ($[12] !== t) {
+        t5 = t("uxf-wysiwyg:plugins.link.url-address.label");
+        $[12] = t;
+        $[13] = t5;
+    }
+    else {
+        t5 = $[13];
+    }
+    const t6 = linkActions.setUrl;
+    let t7;
+    if ($[14] !== t) {
+        t7 = t("uxf-wysiwyg:plugins.link.url-address.placeholder");
+        $[14] = t;
+        $[15] = t7;
+    }
+    else {
+        t7 = $[15];
+    }
+    let t8;
+    if ($[16] !== firstInputId || $[17] !== linkActions.getUrl || $[18] !== linkActions.setUrl || $[19] !== t2 || $[20] !== t3 || $[21] !== t4 || $[22] !== t5 || $[23] !== t7) {
+        t8 = react_2.default.createElement(text_input_1.TextInput, { helperText: t2, hiddenLabel: true, id: firstInputId, isInvalid: t3, isRequired: true, label: t4, leftAddon: t5, name: "url-address", onChange: t6, placeholder: t7, value: linkActions.getUrl });
+        $[16] = firstInputId;
+        $[17] = linkActions.getUrl;
+        $[18] = linkActions.setUrl;
+        $[19] = t2;
+        $[20] = t3;
+        $[21] = t4;
+        $[22] = t5;
+        $[23] = t7;
+        $[24] = t8;
+    }
+    else {
+        t8 = $[24];
+    }
+    let t9;
+    if ($[25] !== t) {
+        t9 = t("uxf-wysiwyg:plugins.link.link-text.label");
+        $[25] = t;
+        $[26] = t9;
+    }
+    else {
+        t9 = $[26];
+    }
+    let t10;
+    if ($[27] !== t) {
+        t10 = t("uxf-wysiwyg:plugins.link.link-text.label");
+        $[27] = t;
+        $[28] = t10;
+    }
+    else {
+        t10 = $[28];
+    }
+    const t11 = linkActions.setText;
+    let t12;
+    if ($[29] !== t) {
+        t12 = t("uxf-wysiwyg:plugins.link.link-text.placeholder");
+        $[29] = t;
+        $[30] = t12;
+    }
+    else {
+        t12 = $[30];
+    }
+    let t13;
+    if ($[31] !== linkActions.getText || $[32] !== linkActions.setText || $[33] !== t10 || $[34] !== t12 || $[35] !== t9) {
+        t13 = react_2.default.createElement(text_input_1.TextInput, { hiddenLabel: true, label: t9, leftAddon: t10, name: "link-text", onChange: t11, placeholder: t12, value: linkActions.getText });
+        $[31] = linkActions.getText;
+        $[32] = linkActions.setText;
+        $[33] = t10;
+        $[34] = t12;
+        $[35] = t9;
+        $[36] = t13;
+    }
+    else {
+        t13 = $[36];
+    }
+    let t14;
+    if ($[37] !== t) {
+        t14 = t("uxf-wysiwyg:plugins.link.open-in-new-tab");
+        $[37] = t;
+        $[38] = t14;
+    }
+    else {
+        t14 = $[38];
+    }
+    let t15;
+    if ($[39] !== linkActions) {
+        t15 = checked => linkActions.setTarget(checked ? "_blank" : "_self");
+        $[39] = linkActions;
+        $[40] = t15;
+    }
+    else {
+        t15 = $[40];
+    }
+    const t16 = linkActions.getTarget === "_blank";
+    let t17;
+    if ($[41] !== t14 || $[42] !== t15 || $[43] !== t16) {
+        t17 = react_2.default.createElement(checkbox_input_1.CheckboxInput, { label: t14, name: "open-in-new-tab", onChange: t15, value: t16 });
+        $[41] = t14;
+        $[42] = t15;
+        $[43] = t16;
+        $[44] = t17;
+    }
+    else {
+        t17 = $[44];
+    }
+    let t18;
+    if ($[45] !== t13 || $[46] !== t17 || $[47] !== t8) {
+        t18 = react_2.default.createElement("div", { className: `${INSERT_CLASS_NAME}__form-inputs` },
+            t8,
+            t13,
+            t17);
+        $[45] = t13;
+        $[46] = t17;
+        $[47] = t8;
+        $[48] = t18;
+    }
+    else {
+        t18 = $[48];
+    }
+    let t19;
+    if ($[49] !== t) {
+        t19 = t("uxf-wysiwyg:plugins.link.button-save");
+        $[49] = t;
+        $[50] = t19;
+    }
+    else {
+        t19 = $[50];
+    }
+    let t20;
+    if ($[51] !== t19) {
+        t20 = react_2.default.createElement("div", { className: `${INSERT_CLASS_NAME}__form-buttons` },
+            react_2.default.createElement(button_1.Button, { className: `${INSERT_CLASS_NAME}__form-submit-button`, type: "submit" }, t19));
+        $[51] = t19;
+        $[52] = t20;
+    }
+    else {
+        t20 = $[52];
+    }
+    let t21;
+    if ($[53] === Symbol.for("react.memo_cache_sentinel")) {
+        t21 = react_2.default.createElement("button", { hidden: true, type: "submit" });
+        $[53] = t21;
+    }
+    else {
+        t21 = $[53];
+    }
+    let t22;
+    if ($[54] !== onSubmit || $[55] !== t18 || $[56] !== t20) {
+        t22 = react_2.default.createElement("div", { className: INSERT_CLASS_NAME },
+            react_2.default.createElement("form", { className: `${INSERT_CLASS_NAME}__form`, id: "insert-link-form", onSubmit: onSubmit },
+                t18,
+                t20,
+                t21));
+        $[54] = onSubmit;
+        $[55] = t18;
+        $[56] = t20;
+        $[57] = t22;
+    }
+    else {
+        t22 = $[57];
+    }
+    return t22;
 };
 const FloatingLink = () => {
-    const isEditing = (0, hooks_2.useFloatingLinkSelectors)().isEditing();
-    return (react_2.default.createElement(floating_1.FloatingPortal, null,
-        react_2.default.createElement(floating_link_wrapper_1.FloatingLinkWrapper.InsertRoot, null,
-            react_2.default.createElement(Insert, null)),
-        react_2.default.createElement(floating_link_wrapper_1.FloatingLinkWrapper.EditRoot, null, !isEditing ? react_2.default.createElement(Edit, null) : react_2.default.createElement(Insert, null))));
+    const $ = (0, compiler_runtime_1.c)(5);
+    const t0 = (0, hooks_2.useFloatingLinkSelectors)();
+    let t1;
+    if ($[0] !== t0) {
+        t1 = t0.isEditing();
+        $[0] = t0;
+        $[1] = t1;
+    }
+    else {
+        t1 = $[1];
+    }
+    const isEditing = t1;
+    let t2;
+    if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+        t2 = react_2.default.createElement(floating_link_wrapper_1.FloatingLinkWrapper.InsertRoot, null,
+            react_2.default.createElement(Insert, null));
+        $[2] = t2;
+    }
+    else {
+        t2 = $[2];
+    }
+    let t3;
+    if ($[3] !== isEditing) {
+        t3 = react_2.default.createElement(floating_1.FloatingPortal, null,
+            t2,
+            react_2.default.createElement(floating_link_wrapper_1.FloatingLinkWrapper.EditRoot, null, !isEditing ? react_2.default.createElement(Edit, null) : react_2.default.createElement(Insert, null)));
+        $[3] = isEditing;
+        $[4] = t3;
+    }
+    else {
+        t3 = $[4];
+    }
+    return t3;
 };
 exports.FloatingLink = FloatingLink;

package/ui/image/image-element.js

@@ -1,64 +1,88 @@
 "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.ImageElement = void 0;
+const compiler_runtime_1 = require("react/compiler-runtime");
 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_image_1 = require("../../plugins/image/transforms/get-active-image");
 const remove_selected_image_1 = require("../../plugins/image/transforms/remove-selected-image");
 const element_with_action_buttons_1 = require("../components/element/element-with-action-buttons");
 const insert_image_modal_content_1 = require("./insert-image-modal-content");
 const CLASS_NAME = "uxf-wysiwyg__element";
-const ImageElement = (props) => {
+const ImageElement = props => {
     var _a;
+    const $ = (0, compiler_runtime_1.c)(17);
     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_image_modal_content_1.InsertImageModalContent, { editor: props.editor, imageToEdit: (0, get_active_image_1.getActiveImage)(props.editor) }))),
-        });
-    }, [props.editor]);
-    const onDelete = (0, react_1.useCallback)(() => {
-        (0, remove_selected_image_1.removeSelectedImage)(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_image_modal_content_1.InsertImageModalContent, { editor: props.editor, imageToEdit: (0, get_active_image_1.getActiveImage)(props.editor) }))
+            });
+        };
+        $[0] = props.editor;
+        $[1] = t0;
+    }
+    else {
+        t0 = $[1];
+    }
+    const onEdit = t0;
+    let t1;
+    if ($[2] !== props.editor) {
+        t1 = () => {
+            (0, remove_selected_image_1.removeSelectedImage)(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}-image ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}` },
-        react_1.default.createElement(element_with_action_buttons_1.ElementWithActionButtons, { className: `${CLASS_NAME}-image__action-buttons`, isSelected: isSelected, onDelete: onDelete, onEdit: onEdit },
-            react_1.default.createElement("img", { alt: element.alt, className: `${CLASS_NAME}-image__img`, src: element.url })),
-        props.children));
+    const t2 = `${CLASS_NAME} ${CLASS_NAME}-image ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}`;
+    let t3;
+    if ($[4] !== element.alt || $[5] !== element.url) {
+        t3 = react_1.default.createElement("img", { alt: element.alt, className: `${CLASS_NAME}-image__img`, src: element.url });
+        $[4] = element.alt;
+        $[5] = element.url;
+        $[6] = t3;
+    }
+    else {
+        t3 = $[6];
+    }
+    let t4;
+    if ($[7] !== isSelected || $[8] !== onDelete || $[9] !== onEdit || $[10] !== t3) {
+        t4 = react_1.default.createElement(element_with_action_buttons_1.ElementWithActionButtons, { className: `${CLASS_NAME}-image__action-buttons`, isSelected: isSelected, onDelete: onDelete, onEdit: onEdit }, t3);
+        $[7] = isSelected;
+        $[8] = onDelete;
+        $[9] = onEdit;
+        $[10] = t3;
+        $[11] = t4;
+    }
+    else {
+        t4 = $[11];
+    }
+    let t5;
+    if ($[12] !== props.attributes || $[13] !== props.children || $[14] !== t2 || $[15] !== t4) {
+        t5 = react_1.default.createElement("div", { ...props.attributes, className: t2 },
+            t4,
+            props.children);
+        $[12] = props.attributes;
+        $[13] = props.children;
+        $[14] = t2;
+        $[15] = t4;
+        $[16] = t5;
+    }
+    else {
+        t5 = $[16];
+    }
+    return t5;
 };
 exports.ImageElement = ImageElement;