@uxf/wysiwyg 11.74.0 → 11.74.2

package/ui/components/modal/modal-button-cancel.d.ts

@@ -0,0 +1,9 @@
+import { FC } from "react";
+import { UxfEditor } from "../../../types";
+interface ModalButtonCancelProps {
+    editor: UxfEditor;
+    onCancel?: () => void;
+    cancelText?: string;
+}
+export declare const ModalButtonCancel: FC<ModalButtonCancelProps>;
+export {};

package/ui/components/modal/modal-button-cancel.js

@@ -0,0 +1,45 @@
+"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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ModalButtonCancel = void 0;
+const translations_1 = require("@uxf/core-react/translations");
+const button_1 = require("@uxf/ui/button");
+const react_1 = __importStar(require("react"));
+const utils_1 = require("../../utils");
+const ModalButtonCancel = (props) => {
+    var _a;
+    const t = (0, translations_1.useUxfTranslation)();
+    const onCancel = props.onCancel;
+    const cancelHandler = (0, react_1.useCallback)(() => {
+        if (onCancel) {
+            onCancel();
+        }
+        else {
+            (0, utils_1.closeModalWithFocus)(props.editor);
+        }
+    }, [onCancel, props.editor]);
+    return (react_1.default.createElement(button_1.Button, { className: "uxf-wysiwyg__modal-button-cancel", color: "default", onClick: cancelHandler, variant: "secondary" }, (_a = props.cancelText) !== null && _a !== void 0 ? _a : t("uxf-wysiwyg:components.modal.button-cancel")));
+};
+exports.ModalButtonCancel = ModalButtonCancel;

package/ui/components/modal/modal-button-submit.d.ts

@@ -0,0 +1,6 @@
+import { FC } from "react";
+interface ModalButtonSubmitProps {
+    submitText: string;
+}
+export declare const ModalButtonSubmit: FC<ModalButtonSubmitProps>;
+export {};

package/ui/components/modal/modal-button-submit.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ModalButtonSubmit = void 0;
+const button_1 = require("@uxf/ui/button");
+const react_1 = __importDefault(require("react"));
+const ModalButtonSubmit = (props) => {
+    return (react_1.default.createElement(button_1.Button, { className: "uxf-wysiwyg__modal-button-submit", color: "default", type: "submit" }, props.submitText));
+};
+exports.ModalButtonSubmit = ModalButtonSubmit;

package/ui/components/modal/modal-buttons.d.ts

@@ -0,0 +1,11 @@
+import { FC } from "react";
+import { UxfEditor } from "../../../types";
+interface ModalButtonsProps {
+    className?: string;
+    editor: UxfEditor;
+    submitText: string;
+    onCancel?: () => void;
+    cancelText?: string;
+}
+export declare const ModalButtons: FC<ModalButtonsProps>;
+export {};

package/ui/components/modal/modal-buttons.js

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ModalButtons = void 0;
+const react_1 = __importDefault(require("react"));
+const modal_button_cancel_1 = require("./modal-button-cancel");
+const modal_button_submit_1 = require("./modal-button-submit");
+const ModalButtons = (props) => {
+    var _a;
+    return (react_1.default.createElement("div", { className: `uxf-wysiwyg__modal-buttons ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}` },
+        react_1.default.createElement(modal_button_cancel_1.ModalButtonCancel, { cancelText: props.cancelText, editor: props.editor, onCancel: props.onCancel }),
+        react_1.default.createElement(modal_button_submit_1.ModalButtonSubmit, { submitText: props.submitText })));
+};
+exports.ModalButtons = ModalButtons;

package/ui/components/modal/modal-content.d.ts

@@ -0,0 +1,6 @@
+import { FC, PropsWithChildren } from "react";
+interface Props extends PropsWithChildren {
+    title: string;
+}
+export declare const ModalContent: FC<Props>;
+export {};

package/ui/components/modal/modal-content.js

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ModalContent = void 0;
+const react_1 = __importDefault(require("react"));
+const CLASS_NAME = "uxf-wysiwyg__modal";
+const ModalContent = (props) => {
+    return (react_1.default.createElement("div", { className: CLASS_NAME },
+        react_1.default.createElement("p", { className: `${CLASS_NAME}-title` }, props.title),
+        props.children));
+};
+exports.ModalContent = ModalContent;

package/ui/create-uxf-ui.d.ts

@@ -0,0 +1,21 @@
+export declare const createUxfUi: () => {
+    p: import("..").ElementUiComponent;
+    blockquote: import("..").ElementUiComponent;
+    h1: import("..").ElementUiComponent;
+    h2: import("..").ElementUiComponent;
+    h3: import("..").ElementUiComponent;
+    h4: import("..").ElementUiComponent;
+    h5: import("..").ElementUiComponent;
+    h6: import("..").ElementUiComponent;
+    bold: import("..").LeafUiComponent;
+    italic: import("..").ElementUiComponent;
+    underline: import("..").LeafUiComponent;
+    code: import("..").LeafUiComponent;
+    li: import("..").ElementUiComponent;
+    ul: import("..").ElementUiComponent;
+    ol: import("..").ElementUiComponent;
+    a: import("..").ElementUiComponent<import("../plugins/link/types").TLinkElement>;
+    img: import("..").ElementUiComponent<import("..").UxfImageElement>;
+    video: import("..").ElementUiComponent<import("..").UxfVideoElement>;
+    button: import("..").ElementUiComponent<import("..").UxfButtonElement>;
+};

package/ui/create-uxf-ui.js

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createUxfUi = void 0;
+const types_1 = require("../plugins/blockquote/types");
+const button_1 = require("../plugins/button");
+const create_video_plugin_1 = require("../plugins/embedded/video/create-video-plugin");
+const constants_1 = require("../plugins/heading/constants");
+const types_2 = require("../plugins/image/types");
+const constants_2 = require("../plugins/link/constants");
+const constants_3 = require("../plugins/list/constants");
+const types_3 = require("../plugins/mark-bold/types");
+const types_4 = require("../plugins/mark-code/types");
+const types_5 = require("../plugins/mark-italic/types");
+const types_6 = require("../plugins/mark-underline/types");
+const types_7 = require("../plugins/paragraph/types");
+const blockquote_element_1 = require("./blockquote-element");
+const bold_mark_1 = require("./bold-mark");
+const button_2 = require("./button");
+const code_mark_1 = require("./code-mark");
+const heading_elements_1 = require("./heading-elements");
+const image_element_1 = require("./image/image-element");
+const italic_mark_1 = require("./italic-mark");
+const link_element_1 = require("./link-element");
+const list_item_element_1 = require("./list-item-element");
+const list_ordered_element_1 = require("./list-ordered-element");
+const list_unordered_element_1 = require("./list-unordered-element");
+const paragraph_element_1 = require("./paragraph-element");
+const underline_mark_1 = require("./underline-mark");
+const video_element_1 = require("./video/video-element");
+const createUxfUi = () => ({
+    [types_7.PARAGRAPH_PLUGIN_KEY]: paragraph_element_1.ParagraphElement,
+    [types_1.BLOCKQUOTE_PLUGIN_KEY]: blockquote_element_1.BlockquoteElement,
+    [constants_1.ELEMENT_H1]: heading_elements_1.H1Element,
+    [constants_1.ELEMENT_H2]: heading_elements_1.H2Element,
+    [constants_1.ELEMENT_H3]: heading_elements_1.H3Element,
+    [constants_1.ELEMENT_H4]: heading_elements_1.H4Element,
+    [constants_1.ELEMENT_H5]: heading_elements_1.H5Element,
+    [constants_1.ELEMENT_H6]: heading_elements_1.H6Element,
+    [types_3.BOLD_PLUGIN_KEY]: bold_mark_1.BoldMark,
+    [types_5.ITALIC_PLUGIN_KEY]: italic_mark_1.ItalicMark,
+    [types_6.UNDER_LINE_PLUGIN_KEY]: underline_mark_1.UnderlineMark,
+    [types_4.CODE_PLUGIN_KEY]: code_mark_1.CodeMark,
+    [constants_3.ELEMENT_LI]: list_item_element_1.ListItemElement,
+    [constants_3.ELEMENT_UL]: list_unordered_element_1.ListUnorderedElement,
+    [constants_3.ELEMENT_OL]: list_ordered_element_1.ListOrderedElement,
+    [constants_2.ELEMENT_LINK]: link_element_1.LinkElement,
+    [types_2.IMAGE_PLUGIN_KEY]: image_element_1.ImageElement,
+    [create_video_plugin_1.ELEMENT_VIDEO_EMBED]: video_element_1.VideoElement,
+    [button_1.PLUGIN_BUTTON_KEY]: button_2.ButtonElement,
+});
+exports.createUxfUi = createUxfUi;

package/ui/floating-link.d.ts

@@ -0,0 +1,2 @@
+import { RenderAfterEditable } from "../types";
+export declare const FloatingLink: RenderAfterEditable;

package/ui/floating-link.js

@@ -0,0 +1,110 @@
+"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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FloatingLink = void 0;
+const plate_floating_1 = require("@udecode/plate-floating");
+const plate_link_1 = require("@udecode/plate-link");
+const translations_1 = require("@uxf/core-react/translations");
+const button_1 = require("@uxf/ui/button");
+const button_group_1 = require("@uxf/ui/button-group");
+const checkbox_input_1 = require("@uxf/ui/checkbox-input");
+const icon_1 = require("@uxf/ui/icon");
+const text_input_1 = require("@uxf/ui/text-input");
+const react_1 = __importStar(require("react"));
+const hooks_1 = require("../hooks");
+const floating_link_wrapper_1 = require("../plugins/link/floating-link-wrapper");
+const hooks_2 = require("../plugins/link/hooks");
+const get_active_link_1 = require("../plugins/link/transforms/get-active-link");
+const unwrap_link_1 = require("../plugins/link/transforms/unwrap-link");
+const url_helper_1 = require("../utils/url-helper");
+const CLASS_NAME = "uxf-wysiwyg__floating-link";
+const EDIT_CLASS_NAME = `${CLASS_NAME}-edit`;
+const Edit = () => {
+    var _a, _b;
+    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_1.default.createElement(button_group_1.ButtonGroup, { className: EDIT_CLASS_NAME },
+        react_1.default.createElement(button_1.Button, { className: `${EDIT_CLASS_NAME}__button ${EDIT_CLASS_NAME}__button-edit`, isIconButton: true, onClick: () => (0, plate_link_1.triggerFloatingLinkEdit)(editor), variant: "secondary" },
+            react_1.default.createElement(icon_1.Icon, { name: "edit", size: 15 })),
+        react_1.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_1.default.createElement(icon_1.Icon, { name: "open-link-in-new-tab", size: 15 })),
+        react_1.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_1.default.createElement(icon_1.Icon, { name: "delete", size: 15 }))));
+};
+function useInsertLinkFormAutoFocus() {
+    const id = (0, react_1.useId)();
+    // TODO FEB-139 - native html autoFocus breaks popover placement in insert mode
+    (0, react_1.useEffect)(() => {
+        let timer;
+        const firstInput = document.querySelector(`#${CSS.escape(id)}`);
+        if (firstInput instanceof HTMLElement) {
+            timer = window.setTimeout(() => firstInput.focus(), 0);
+        }
+        return () => {
+            clearTimeout(timer);
+        };
+    }, [id]);
+    return id;
+}
+const INSERT_CLASS_NAME = `${CLASS_NAME}-insert`;
+const Insert = () => {
+    const t = (0, translations_1.useUxfTranslation)();
+    const linkActions = (0, hooks_2.useLinkActions)();
+    const editor = (0, hooks_1.useUxfEditorRef)();
+    const [isSubmitted, setIsSubmitted] = (0, react_1.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, plate_link_1.submitFloatingLink)(editor);
+    };
+    const emptyUrl = isSubmitted && !linkActions.getUrl;
+    const invalidUrl = isSubmitted && !url_helper_1.UrlHelper.isValid(linkActions.getUrl);
+    return (react_1.default.createElement("div", { className: INSERT_CLASS_NAME },
+        react_1.default.createElement("form", { className: `${INSERT_CLASS_NAME}__form`, id: "insert-link-form", onSubmit: onSubmit },
+            react_1.default.createElement("div", { className: `${INSERT_CLASS_NAME}__form-inputs` },
+                react_1.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_1.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_1.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_1.default.createElement("div", { className: `${INSERT_CLASS_NAME}__form-buttons` },
+                react_1.default.createElement(button_1.Button, { className: `${INSERT_CLASS_NAME}__form-submit-button`, type: "submit" }, t("uxf-wysiwyg:plugins.link.button-save"))),
+            react_1.default.createElement("button", { hidden: true, type: "submit" }))));
+};
+const FloatingLink = () => {
+    const isEditing = (0, plate_link_1.useFloatingLinkSelectors)().isEditing();
+    return (react_1.default.createElement(plate_floating_1.FloatingPortal, null,
+        react_1.default.createElement(floating_link_wrapper_1.FloatingLinkWrapper.InsertRoot, null,
+            react_1.default.createElement(Insert, null)),
+        react_1.default.createElement(floating_link_wrapper_1.FloatingLinkWrapper.EditRoot, null, !isEditing ? react_1.default.createElement(Edit, null) : react_1.default.createElement(Insert, null))));
+};
+exports.FloatingLink = FloatingLink;

package/ui/heading-elements.d.ts

@@ -0,0 +1,7 @@
+import { ElementUiComponent } from "../types";
+export declare const H1Element: ElementUiComponent;
+export declare const H2Element: ElementUiComponent;
+export declare const H3Element: ElementUiComponent;
+export declare const H4Element: ElementUiComponent;
+export declare const H5Element: ElementUiComponent;
+export declare const H6Element: ElementUiComponent;

package/ui/heading-elements.js

@@ -0,0 +1,38 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.H6Element = exports.H5Element = exports.H4Element = exports.H3Element = exports.H2Element = exports.H1Element = void 0;
+const react_1 = __importDefault(require("react"));
+const CLASS_NAME = "uxf-wysiwyg__element";
+const H1Element = (props) => {
+    var _a;
+    return (react_1.default.createElement("h1", { ...props.attributes, className: `${CLASS_NAME} ${CLASS_NAME}-heading-h1 ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}` }, props.children));
+};
+exports.H1Element = H1Element;
+const H2Element = (props) => {
+    var _a;
+    return (react_1.default.createElement("h2", { ...props.attributes, className: `${CLASS_NAME} ${CLASS_NAME}-heading-h2 ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}` }, props.children));
+};
+exports.H2Element = H2Element;
+const H3Element = (props) => {
+    var _a;
+    return (react_1.default.createElement("h3", { ...props.attributes, className: `${CLASS_NAME} ${CLASS_NAME}-heading-h3 ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}` }, props.children));
+};
+exports.H3Element = H3Element;
+const H4Element = (props) => {
+    var _a;
+    return (react_1.default.createElement("h4", { ...props.attributes, className: `${CLASS_NAME} ${CLASS_NAME}-heading-h4 ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}` }, props.children));
+};
+exports.H4Element = H4Element;
+const H5Element = (props) => {
+    var _a;
+    return (react_1.default.createElement("h5", { ...props.attributes, className: `${CLASS_NAME} ${CLASS_NAME}-heading-h5 ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}` }, props.children));
+};
+exports.H5Element = H5Element;
+const H6Element = (props) => {
+    var _a;
+    return (react_1.default.createElement("h6", { ...props.attributes, className: `${CLASS_NAME} ${CLASS_NAME}-heading-h6 ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}` }, props.children));
+};
+exports.H6Element = H6Element;

package/ui/highlight-mark.d.ts

@@ -0,0 +1,3 @@
+import { FC } from "react";
+import { HighlightLeafElementProps } from "../plugins/highlight/types";
+export declare const HighlightMark: FC<HighlightLeafElementProps>;

package/ui/highlight-mark.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HighlightMark = void 0;
+const react_1 = __importDefault(require("react"));
+const CLASS_NAME = "uxf-wysiwyg__element";
+const HighlightMark = (props) => {
+    var _a;
+    return (react_1.default.createElement("mark", { ...props.attributes, className: `${CLASS_NAME} ${CLASS_NAME}-highlight ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}`, style: { "--highlight-color": props.color } }, props.children));
+};
+exports.HighlightMark = HighlightMark;

package/ui/image/image-element.d.ts

@@ -0,0 +1,2 @@
+import { ElementUiComponent, UxfImageElement } from "../../types";
+export declare const ImageElement: ElementUiComponent<UxfImageElement>;

package/ui/image/image-element.js

@@ -0,0 +1,53 @@
+"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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImageElement = void 0;
+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 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) => {
+    var _a;
+    const selected = (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]);
+    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: selected, onDelete: onDelete, onEdit: onEdit },
+            react_1.default.createElement("img", { alt: props.element.alt, className: `${CLASS_NAME}-image__img`, src: props.element.url })),
+        props.children));
+};
+exports.ImageElement = ImageElement;

package/ui/image/insert-image-modal-content.d.ts

@@ -0,0 +1,8 @@
+import { FC } from "react";
+import { UxfEditor, UxfImageElement } from "../../types";
+interface InsertImageModalContentProps {
+    editor: UxfEditor;
+    imageToEdit?: UxfImageElement;
+}
+export declare const InsertImageModalContent: FC<InsertImageModalContentProps>;
+export {};

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

@@ -0,0 +1,89 @@
+"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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InsertImageModalContent = void 0;
+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");
+const text_input_1 = require("@uxf/ui/text-input");
+const react_1 = __importStar(require("react"));
+const use_image_handlers_1 = require("../../plugins/image/hooks/use-image-handlers");
+const insert_image_1 = require("../../plugins/image/transforms/insert-image");
+const update_image_1 = require("../../plugins/image/transforms/update-image");
+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 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));
+            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" }))));
+};
+exports.InsertImageModalContent = InsertImageModalContent;

package/ui/italic-mark.d.ts

@@ -0,0 +1,2 @@
+import { ElementUiComponent } from "../types";
+export declare const ItalicMark: ElementUiComponent;

package/ui/italic-mark.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ItalicMark = void 0;
+const react_1 = __importDefault(require("react"));
+const CLASS_NAME = "uxf-wysiwyg__element";
+const ItalicMark = (props) => {
+    var _a;
+    return (react_1.default.createElement("i", { ...props.attributes, className: `${CLASS_NAME} ${CLASS_NAME}-italic ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}` }, props.children));
+};
+exports.ItalicMark = ItalicMark;

package/ui/link-element.d.ts

@@ -0,0 +1,3 @@
+import { TLinkElement } from "../plugins/link/types";
+import { ElementUiComponent } from "../types";
+export declare const LinkElement: ElementUiComponent<TLinkElement>;

package/ui/link-element.js

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LinkElement = void 0;
+const react_1 = __importDefault(require("react"));
+const CLASS_NAME = "uxf-wysiwyg__element";
+const LinkElement = (props) => {
+    var _a;
+    return (react_1.default.createElement("span", null,
+        react_1.default.createElement("a", { ...props.attributes, className: `${CLASS_NAME} ${CLASS_NAME}-link ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}`, ...props.nodeProps }, props.children)));
+};
+exports.LinkElement = LinkElement;

package/ui/list-item-element.d.ts

@@ -0,0 +1,2 @@
+import { ElementUiComponent } from "../types";
+export declare const ListItemElement: ElementUiComponent;

package/ui/list-item-element.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ListItemElement = void 0;
+const react_1 = __importDefault(require("react"));
+const CLASS_NAME = "uxf-wysiwyg__element";
+const ListItemElement = (props) => {
+    var _a;
+    return (react_1.default.createElement("li", { ...props.attributes, className: `${CLASS_NAME} ${CLASS_NAME}-list-item ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}` }, props.children));
+};
+exports.ListItemElement = ListItemElement;

package/ui/list-ordered-element.d.ts

@@ -0,0 +1,2 @@
+import { ElementUiComponent } from "../types";
+export declare const ListOrderedElement: ElementUiComponent;

package/ui/list-ordered-element.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ListOrderedElement = void 0;
+const react_1 = __importDefault(require("react"));
+const CLASS_NAME = "uxf-wysiwyg__element";
+const ListOrderedElement = (props) => {
+    var _a;
+    return (react_1.default.createElement("ol", { ...props.attributes, className: `${CLASS_NAME} ${CLASS_NAME}-list-ordered ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}` }, props.children));
+};
+exports.ListOrderedElement = ListOrderedElement;

package/ui/list-unordered-element.d.ts

@@ -0,0 +1,2 @@
+import { ElementUiComponent } from "../types";
+export declare const ListUnorderedElement: ElementUiComponent;