@uxf/wysiwyg 13.0.3 → 14.1.0

package/ui/toolbar/toolbar.js

@@ -4,6 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Toolbar = void 0;
+const compiler_runtime_1 = require("react/compiler-runtime");
 const translations_1 = require("@uxf/core-react/translations");
 const button_group_1 = require("@uxf/ui/button-group");
 const react_1 = __importDefault(require("react"));
@@ -31,47 +32,170 @@ const undo_redo_button_group_1 = require("./buttons/undo-redo-button-group");
 const video_toolbar_button_1 = require("./buttons/video-toolbar-button");
 const CLASS_NAME = "uxf-wysiwyg__toolbar";
 const BUTTON_GROUP_CLASS_NAME = `${CLASS_NAME}-button-group`;
-const Toolbar = (props) => {
+const Toolbar = props => {
     var _a;
-    // eslint-disable-next-line react/destructuring-assignment
-    const { customPluginsButtons, leftElement, plateId, rightElement, ...restProps } = props;
+    const $ = (0, compiler_runtime_1.c)(45);
+    let customPluginsButtons;
+    let leftElement;
+    let plateId;
+    let restProps;
+    let rightElement;
+    if ($[0] !== props) {
+        ({
+            customPluginsButtons,
+            leftElement,
+            plateId,
+            rightElement,
+            ...restProps
+        } = props);
+        $[0] = props;
+        $[1] = customPluginsButtons;
+        $[2] = leftElement;
+        $[3] = plateId;
+        $[4] = restProps;
+        $[5] = rightElement;
+    }
+    else {
+        customPluginsButtons = $[1];
+        leftElement = $[2];
+        plateId = $[3];
+        restProps = $[4];
+        rightElement = $[5];
+    }
     const editor = (0, hooks_1.useUxfPlateEditorState)(props.plateId);
     const t = (0, translations_1.useUxfTranslation)();
-    return (react_1.default.createElement("div", { ...restProps, className: `${CLASS_NAME} ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}` },
-        leftElement,
-        react_1.default.createElement("div", { className: `${CLASS_NAME}-buttons` },
-            (0, utils_1.isSomeOfPluginsEnabled)(editor, constants_1.KEYS_HEADING) && (react_1.default.createElement(button_group_1.ButtonGroup, { className: `${BUTTON_GROUP_CLASS_NAME} ${BUTTON_GROUP_CLASS_NAME}-headings` },
-                react_1.default.createElement(element_toolbar_button_1.ElementToolbarButton, { iconName: "h1", plateId: plateId, pluginKey: constants_1.ELEMENT_H1, tooltipText: t("uxf-wysiwyg:plugins.headings.h1.tooltip") }),
-                react_1.default.createElement(element_toolbar_button_1.ElementToolbarButton, { iconName: "h2", plateId: plateId, pluginKey: constants_1.ELEMENT_H2, tooltipText: t("uxf-wysiwyg:plugins.headings.h2.tooltip") }),
-                react_1.default.createElement(element_toolbar_button_1.ElementToolbarButton, { iconName: "h3", plateId: plateId, pluginKey: constants_1.ELEMENT_H3, tooltipText: t("uxf-wysiwyg:plugins.headings.h3.tooltip") }),
-                react_1.default.createElement(element_toolbar_button_1.ElementToolbarButton, { iconName: "h4", plateId: plateId, pluginKey: constants_1.ELEMENT_H4, tooltipText: t("uxf-wysiwyg:plugins.headings.h4.tooltip") }),
-                react_1.default.createElement(element_toolbar_button_1.ElementToolbarButton, { iconName: "h5", plateId: plateId, pluginKey: constants_1.ELEMENT_H5, tooltipText: t("uxf-wysiwyg:plugins.headings.h5.tooltip") }),
-                react_1.default.createElement(element_toolbar_button_1.ElementToolbarButton, { iconName: "h6", plateId: plateId, pluginKey: constants_1.ELEMENT_H6, tooltipText: t("uxf-wysiwyg:plugins.headings.h6.tooltip") }))),
-            (0, utils_1.isSomeOfPluginsEnabled)(editor, [
-                types_4.BOLD_PLUGIN_KEY,
-                types_6.ITALIC_PLUGIN_KEY,
-                types_7.UNDER_LINE_PLUGIN_KEY,
-                types_5.CODE_PLUGIN_KEY,
-                types_2.HIGHLIGHT_PLUGIN_KEY,
-            ]) && (react_1.default.createElement(button_group_1.ButtonGroup, { className: `${BUTTON_GROUP_CLASS_NAME} ${BUTTON_GROUP_CLASS_NAME}-marks` },
-                react_1.default.createElement(mark_toolbar_button_1.MarkToolbarButton, { iconName: "bold", iconSize: 12, plateId: plateId, pluginKey: types_4.BOLD_PLUGIN_KEY, tooltipText: t("uxf-wysiwyg:plugins.formatting.bold.tooltip") }),
-                react_1.default.createElement(mark_toolbar_button_1.MarkToolbarButton, { iconName: "italic", iconSize: 12, plateId: plateId, pluginKey: types_6.ITALIC_PLUGIN_KEY, tooltipText: t("uxf-wysiwyg:plugins.formatting.italic.tooltip") }),
-                react_1.default.createElement(mark_toolbar_button_1.MarkToolbarButton, { iconName: "underline", iconSize: 14, plateId: plateId, pluginKey: types_7.UNDER_LINE_PLUGIN_KEY, tooltipText: t("uxf-wysiwyg:plugins.formatting.underline.tooltip") }),
-                react_1.default.createElement(mark_toolbar_button_1.MarkToolbarButton, { iconName: "code-simple", plateId: plateId, pluginKey: types_5.CODE_PLUGIN_KEY, tooltipText: t("uxf-wysiwyg:plugins.formatting.code.tooltip") }),
-                react_1.default.createElement(mark_toolbar_button_1.MarkToolbarButton, { iconName: "highlighter-line", iconSize: 19, plateId: plateId, pluginKey: types_2.HIGHLIGHT_PLUGIN_KEY, tooltipText: t("uxf-wysiwyg:plugins.formatting.highlight.tooltip") }))),
-            (0, utils_1.isSomeOfPluginsEnabled)(editor, [types_1.BLOCKQUOTE_PLUGIN_KEY]) && (react_1.default.createElement(button_group_1.ButtonGroup, { className: `${BUTTON_GROUP_CLASS_NAME} ${BUTTON_GROUP_CLASS_NAME}-blocks` },
-                react_1.default.createElement(element_toolbar_button_1.ElementToolbarButton, { iconName: "block-quote", plateId: plateId, pluginKey: types_1.BLOCKQUOTE_PLUGIN_KEY, tooltipText: t("uxf-wysiwyg:plugins.blocks.quote.tooltip") }))),
-            (0, utils_1.isSomeOfPluginsEnabled)(editor, [constants_3.LIST_UNORDERED_TYPE, constants_3.LIST_ORDERED_TYPE]) && (react_1.default.createElement(button_group_1.ButtonGroup, { className: `${BUTTON_GROUP_CLASS_NAME} ${BUTTON_GROUP_CLASS_NAME}-lists` },
-                react_1.default.createElement(list_toolbar_button_1.ListToolbarButton, { iconName: "ul", plateId: plateId, pluginKey: constants_3.LIST_UNORDERED_TYPE, tooltipText: t("uxf-wysiwyg:plugins.lists.ul.tooltip") }),
-                react_1.default.createElement(list_toolbar_button_1.ListToolbarButton, { iconName: "ol", plateId: plateId, pluginKey: constants_3.LIST_ORDERED_TYPE, tooltipText: t("uxf-wysiwyg:plugins.lists.ol.tooltip") }))),
-            (0, utils_1.isSomeOfPluginsEnabled)(editor, [constants_2.ELEMENT_LINK, button_1.PLUGIN_BUTTON_KEY]) && (react_1.default.createElement(button_group_1.ButtonGroup, { className: `${BUTTON_GROUP_CLASS_NAME} ${BUTTON_GROUP_CLASS_NAME}-clickables` },
-                react_1.default.createElement(link_toolbar_button_1.LinkToolbarButton, { plateId: plateId }),
-                react_1.default.createElement(button_toolbar_button_1.ButtonToolbarButton, { plateId: plateId }))),
-            (0, utils_1.isSomeOfPluginsEnabled)(editor, [types_3.IMAGE_PLUGIN_KEY, create_video_plugin_1.ELEMENT_VIDEO_EMBED]) && (react_1.default.createElement(button_group_1.ButtonGroup, { className: `${BUTTON_GROUP_CLASS_NAME} ${BUTTON_GROUP_CLASS_NAME}-media` },
-                react_1.default.createElement(image_toolbar_button_1.ImageToolbarButton, { plateId: plateId }),
-                react_1.default.createElement(video_toolbar_button_1.VideoToolbarButton, { plateId: plateId }))),
+    const t0 = `${CLASS_NAME} ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}`;
+    let t1;
+    if ($[6] !== editor || $[7] !== plateId || $[8] !== t) {
+        t1 = (0, utils_1.isSomeOfPluginsEnabled)(editor, constants_1.KEYS_HEADING) && react_1.default.createElement(button_group_1.ButtonGroup, { className: `${BUTTON_GROUP_CLASS_NAME} ${BUTTON_GROUP_CLASS_NAME}-headings` },
+            react_1.default.createElement(element_toolbar_button_1.ElementToolbarButton, { iconName: "h1", plateId: plateId, pluginKey: constants_1.ELEMENT_H1, tooltipText: t("uxf-wysiwyg:plugins.headings.h1.tooltip") }),
+            react_1.default.createElement(element_toolbar_button_1.ElementToolbarButton, { iconName: "h2", plateId: plateId, pluginKey: constants_1.ELEMENT_H2, tooltipText: t("uxf-wysiwyg:plugins.headings.h2.tooltip") }),
+            react_1.default.createElement(element_toolbar_button_1.ElementToolbarButton, { iconName: "h3", plateId: plateId, pluginKey: constants_1.ELEMENT_H3, tooltipText: t("uxf-wysiwyg:plugins.headings.h3.tooltip") }),
+            react_1.default.createElement(element_toolbar_button_1.ElementToolbarButton, { iconName: "h4", plateId: plateId, pluginKey: constants_1.ELEMENT_H4, tooltipText: t("uxf-wysiwyg:plugins.headings.h4.tooltip") }),
+            react_1.default.createElement(element_toolbar_button_1.ElementToolbarButton, { iconName: "h5", plateId: plateId, pluginKey: constants_1.ELEMENT_H5, tooltipText: t("uxf-wysiwyg:plugins.headings.h5.tooltip") }),
+            react_1.default.createElement(element_toolbar_button_1.ElementToolbarButton, { iconName: "h6", plateId: plateId, pluginKey: constants_1.ELEMENT_H6, tooltipText: t("uxf-wysiwyg:plugins.headings.h6.tooltip") }));
+        $[6] = editor;
+        $[7] = plateId;
+        $[8] = t;
+        $[9] = t1;
+    }
+    else {
+        t1 = $[9];
+    }
+    let t2;
+    if ($[10] !== editor || $[11] !== plateId || $[12] !== t) {
+        t2 = (0, utils_1.isSomeOfPluginsEnabled)(editor, [types_4.BOLD_PLUGIN_KEY, types_6.ITALIC_PLUGIN_KEY, types_7.UNDER_LINE_PLUGIN_KEY, types_5.CODE_PLUGIN_KEY, types_2.HIGHLIGHT_PLUGIN_KEY]) && react_1.default.createElement(button_group_1.ButtonGroup, { className: `${BUTTON_GROUP_CLASS_NAME} ${BUTTON_GROUP_CLASS_NAME}-marks` },
+            react_1.default.createElement(mark_toolbar_button_1.MarkToolbarButton, { iconName: "bold", iconSize: 12, plateId: plateId, pluginKey: types_4.BOLD_PLUGIN_KEY, tooltipText: t("uxf-wysiwyg:plugins.formatting.bold.tooltip") }),
+            react_1.default.createElement(mark_toolbar_button_1.MarkToolbarButton, { iconName: "italic", iconSize: 12, plateId: plateId, pluginKey: types_6.ITALIC_PLUGIN_KEY, tooltipText: t("uxf-wysiwyg:plugins.formatting.italic.tooltip") }),
+            react_1.default.createElement(mark_toolbar_button_1.MarkToolbarButton, { iconName: "underline", iconSize: 14, plateId: plateId, pluginKey: types_7.UNDER_LINE_PLUGIN_KEY, tooltipText: t("uxf-wysiwyg:plugins.formatting.underline.tooltip") }),
+            react_1.default.createElement(mark_toolbar_button_1.MarkToolbarButton, { iconName: "code-simple", plateId: plateId, pluginKey: types_5.CODE_PLUGIN_KEY, tooltipText: t("uxf-wysiwyg:plugins.formatting.code.tooltip") }),
+            react_1.default.createElement(mark_toolbar_button_1.MarkToolbarButton, { iconName: "highlighter-line", iconSize: 19, plateId: plateId, pluginKey: types_2.HIGHLIGHT_PLUGIN_KEY, tooltipText: t("uxf-wysiwyg:plugins.formatting.highlight.tooltip") }));
+        $[10] = editor;
+        $[11] = plateId;
+        $[12] = t;
+        $[13] = t2;
+    }
+    else {
+        t2 = $[13];
+    }
+    let t3;
+    if ($[14] !== editor || $[15] !== plateId || $[16] !== t) {
+        t3 = (0, utils_1.isSomeOfPluginsEnabled)(editor, [types_1.BLOCKQUOTE_PLUGIN_KEY]) && react_1.default.createElement(button_group_1.ButtonGroup, { className: `${BUTTON_GROUP_CLASS_NAME} ${BUTTON_GROUP_CLASS_NAME}-blocks` },
+            react_1.default.createElement(element_toolbar_button_1.ElementToolbarButton, { iconName: "block-quote", plateId: plateId, pluginKey: types_1.BLOCKQUOTE_PLUGIN_KEY, tooltipText: t("uxf-wysiwyg:plugins.blocks.quote.tooltip") }));
+        $[14] = editor;
+        $[15] = plateId;
+        $[16] = t;
+        $[17] = t3;
+    }
+    else {
+        t3 = $[17];
+    }
+    let t4;
+    if ($[18] !== editor || $[19] !== plateId || $[20] !== t) {
+        t4 = (0, utils_1.isSomeOfPluginsEnabled)(editor, [constants_3.LIST_UNORDERED_TYPE, constants_3.LIST_ORDERED_TYPE]) && react_1.default.createElement(button_group_1.ButtonGroup, { className: `${BUTTON_GROUP_CLASS_NAME} ${BUTTON_GROUP_CLASS_NAME}-lists` },
+            react_1.default.createElement(list_toolbar_button_1.ListToolbarButton, { iconName: "ul", plateId: plateId, pluginKey: constants_3.LIST_UNORDERED_TYPE, tooltipText: t("uxf-wysiwyg:plugins.lists.ul.tooltip") }),
+            react_1.default.createElement(list_toolbar_button_1.ListToolbarButton, { iconName: "ol", plateId: plateId, pluginKey: constants_3.LIST_ORDERED_TYPE, tooltipText: t("uxf-wysiwyg:plugins.lists.ol.tooltip") }));
+        $[18] = editor;
+        $[19] = plateId;
+        $[20] = t;
+        $[21] = t4;
+    }
+    else {
+        t4 = $[21];
+    }
+    let t5;
+    if ($[22] !== editor || $[23] !== plateId) {
+        t5 = (0, utils_1.isSomeOfPluginsEnabled)(editor, [constants_2.ELEMENT_LINK, button_1.PLUGIN_BUTTON_KEY]) && react_1.default.createElement(button_group_1.ButtonGroup, { className: `${BUTTON_GROUP_CLASS_NAME} ${BUTTON_GROUP_CLASS_NAME}-clickables` },
+            react_1.default.createElement(link_toolbar_button_1.LinkToolbarButton, { plateId: plateId }),
+            react_1.default.createElement(button_toolbar_button_1.ButtonToolbarButton, { plateId: plateId }));
+        $[22] = editor;
+        $[23] = plateId;
+        $[24] = t5;
+    }
+    else {
+        t5 = $[24];
+    }
+    let t6;
+    if ($[25] !== editor || $[26] !== plateId) {
+        t6 = (0, utils_1.isSomeOfPluginsEnabled)(editor, [types_3.IMAGE_PLUGIN_KEY, create_video_plugin_1.ELEMENT_VIDEO_EMBED]) && react_1.default.createElement(button_group_1.ButtonGroup, { className: `${BUTTON_GROUP_CLASS_NAME} ${BUTTON_GROUP_CLASS_NAME}-media` },
+            react_1.default.createElement(image_toolbar_button_1.ImageToolbarButton, { plateId: plateId }),
+            react_1.default.createElement(video_toolbar_button_1.VideoToolbarButton, { plateId: plateId }));
+        $[25] = editor;
+        $[26] = plateId;
+        $[27] = t6;
+    }
+    else {
+        t6 = $[27];
+    }
+    let t7;
+    if ($[28] !== plateId) {
+        t7 = react_1.default.createElement(undo_redo_button_group_1.UndoRedoButtonGroup, { plateId: plateId });
+        $[28] = plateId;
+        $[29] = t7;
+    }
+    else {
+        t7 = $[29];
+    }
+    let t8;
+    if ($[30] !== customPluginsButtons || $[31] !== t1 || $[32] !== t2 || $[33] !== t3 || $[34] !== t4 || $[35] !== t5 || $[36] !== t6 || $[37] !== t7) {
+        t8 = react_1.default.createElement("div", { className: `${CLASS_NAME}-buttons` },
+            t1,
+            t2,
+            t3,
+            t4,
+            t5,
+            t6,
             customPluginsButtons,
-            react_1.default.createElement(undo_redo_button_group_1.UndoRedoButtonGroup, { plateId: plateId })),
-        rightElement));
+            t7);
+        $[30] = customPluginsButtons;
+        $[31] = t1;
+        $[32] = t2;
+        $[33] = t3;
+        $[34] = t4;
+        $[35] = t5;
+        $[36] = t6;
+        $[37] = t7;
+        $[38] = t8;
+    }
+    else {
+        t8 = $[38];
+    }
+    let t9;
+    if ($[39] !== leftElement || $[40] !== restProps || $[41] !== rightElement || $[42] !== t0 || $[43] !== t8) {
+        t9 = react_1.default.createElement("div", { ...restProps, className: t0 },
+            leftElement,
+            t8,
+            rightElement);
+        $[39] = leftElement;
+        $[40] = restProps;
+        $[41] = rightElement;
+        $[42] = t0;
+        $[43] = t8;
+        $[44] = t9;
+    }
+    else {
+        t9 = $[44];
+    }
+    return t9;
 };
 exports.Toolbar = Toolbar;

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;