@uxf/wysiwyg 11.74.0 → 11.74.1

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;

package/ui/list-unordered-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.ListUnorderedElement = void 0;
+const react_1 = __importDefault(require("react"));
+const CLASS_NAME = "uxf-wysiwyg__element";
+const ListUnorderedElement = (props) => {
+    var _a;
+    return (react_1.default.createElement("ul", { ...props.attributes, className: `${CLASS_NAME} ${CLASS_NAME}-list-unordered ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}` }, props.children));
+};
+exports.ListUnorderedElement = ListUnorderedElement;

package/ui/paragraph-element.d.ts

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

package/ui/paragraph-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.ParagraphElement = void 0;
+const react_1 = __importDefault(require("react"));
+const CLASS_NAME = "uxf-wysiwyg__element";
+const ParagraphElement = (props) => {
+    var _a;
+    return (react_1.default.createElement("p", { ...props.attributes, className: `${CLASS_NAME} ${CLASS_NAME}-paragraph${(_a = props.className) !== null && _a !== void 0 ? _a : ""}` }, props.children));
+};
+exports.ParagraphElement = ParagraphElement;

package/ui/toolbar/buttons/button-toolbar-button.d.ts

@@ -0,0 +1,10 @@
+import { PlateId } from "@udecode/plate-core";
+import { IconName } from "@uxf/ui/icon/types";
+import { FC } from "react";
+interface ButtonToolbarButtonProps {
+    className?: string;
+    iconName?: IconName;
+    plateId: PlateId;
+}
+export declare const ButtonToolbarButton: FC<ButtonToolbarButtonProps>;
+export {};

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

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ButtonToolbarButton = void 0;
+const translations_1 = require("@uxf/core-react/translations");
+const react_1 = __importDefault(require("react"));
+const hooks_1 = require("../../../hooks");
+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) => {
+    var _a, _b;
+    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") }));
+};
+exports.ButtonToolbarButton = ButtonToolbarButton;

package/ui/toolbar/buttons/element-toolbar-button.d.ts

@@ -0,0 +1,12 @@
+import { PlateId } from "@udecode/plate-core";
+import { IconName } from "@uxf/ui/icon/types";
+import { FC } from "react";
+interface ElementToolbarButtonProps {
+    className?: string;
+    iconName: IconName;
+    plateId: PlateId;
+    pluginKey: string;
+    tooltipText: string;
+}
+export declare const ElementToolbarButton: FC<ElementToolbarButtonProps>;
+export {};

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

@@ -0,0 +1,25 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ElementToolbarButton = void 0;
+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) => {
+    var _a;
+    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,
+        });
+    };
+    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 }));
+};
+exports.ElementToolbarButton = ElementToolbarButton;

package/ui/toolbar/buttons/image-toolbar-button.d.ts

@@ -0,0 +1,10 @@
+import { PlateId } from "@udecode/plate-core";
+import { IconName } from "@uxf/ui/icon/types";
+import { FC } from "react";
+interface ImageToolbarButtonProps {
+    className?: string;
+    iconName?: IconName;
+    plateId: PlateId;
+}
+export declare const ImageToolbarButton: FC<ImageToolbarButtonProps>;
+export {};

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

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImageToolbarButton = void 0;
+const translations_1 = require("@uxf/core-react/translations");
+const react_1 = __importDefault(require("react"));
+const hooks_1 = require("../../../hooks");
+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) => {
+    var _a, _b;
+    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") }));
+};
+exports.ImageToolbarButton = ImageToolbarButton;

package/ui/toolbar/buttons/link-toolbar-button.d.ts

@@ -0,0 +1,10 @@
+import { PlateId } from "@udecode/plate-core";
+import { IconName } from "@uxf/ui/icon/types";
+import { FC } from "react";
+interface LinkToolbarButtonProps {
+    className?: string;
+    iconName?: IconName;
+    plateId: PlateId;
+}
+export declare const LinkToolbarButton: FC<LinkToolbarButtonProps>;
+export {};

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

@@ -0,0 +1,29 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LinkToolbarButton = void 0;
+const translations_1 = require("@uxf/core-react/translations");
+const react_1 = __importDefault(require("react"));
+const hooks_1 = require("../../../hooks");
+const constants_1 = require("../../../plugins/link/constants");
+const is_link_selected_1 = require("../../../plugins/link/transforms/is-link-selected");
+const trigger_link_insert_or_edit_1 = require("../../../plugins/link/transforms/trigger-link-insert-or-edit");
+const utils_1 = require("../../../utils");
+const toolbar_button_1 = require("./toolbar-button");
+const CLASS_NAME = "uxf-wysiwyg__toolbar-button";
+const LinkToolbarButton = (props) => {
+    var _a, _b;
+    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.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") }));
+};
+exports.LinkToolbarButton = LinkToolbarButton;

package/ui/toolbar/buttons/list-toolbar-button.d.ts

@@ -0,0 +1,13 @@
+import { PlateId } from "@udecode/plate-core";
+import { IconName } from "@uxf/ui/icon/types";
+import { FC } from "react";
+import { LIST_ORDERED_TYPE, LIST_UNORDERED_TYPE } from "../../../plugins/list/constants";
+interface ListToolbarButtonProps {
+    className?: string;
+    iconName: IconName;
+    plateId: PlateId;
+    pluginKey: typeof LIST_UNORDERED_TYPE | typeof LIST_ORDERED_TYPE;
+    tooltipText: string;
+}
+export declare const ListToolbarButton: FC<ListToolbarButtonProps>;
+export {};

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

@@ -0,0 +1,27 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ListToolbarButton = void 0;
+const plate_list_1 = require("@udecode/plate-list");
+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 ListToolbarButton = (props) => {
+    var _a;
+    const editor = (0, hooks_1.useUxfPlateEditorState)(props.plateId);
+    const type = (0, utils_1.getPluginType)(editor, props.pluginKey);
+    const res = (0, is_not_nil_1.isNotNil)(editor.selection) ? (0, plate_list_1.getListItemEntry)(editor) : undefined;
+    const isActive = (res === null || res === void 0 ? void 0 : res.list[0].type) === type;
+    const onMouseDown = () => {
+        (0, plate_list_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 }));
+};
+exports.ListToolbarButton = ListToolbarButton;

package/ui/toolbar/buttons/mark-toolbar-button.d.ts

@@ -0,0 +1,13 @@
+import { PlateId } from "@udecode/plate-core";
+import { IconName } from "@uxf/ui/icon/types";
+import { FC } from "react";
+interface LeafToolbarButtonProps {
+    className?: string;
+    iconName: IconName;
+    iconSize?: number;
+    plateId: PlateId;
+    pluginKey: string;
+    tooltipText: string;
+}
+export declare const MarkToolbarButton: FC<LeafToolbarButtonProps>;
+export {};

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

@@ -0,0 +1,25 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MarkToolbarButton = void 0;
+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 MarkToolbarButton = (props) => {
+    var _a, _b;
+    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.isMarkActive)(editor, type);
+    const onMouseDown = () => {
+        (0, utils_1.toggleMark)(editor, {
+            key: props.pluginKey,
+        });
+    };
+    return (react_1.default.createElement(toolbar_button_1.ToolbarButton, { className: `${CLASS_NAME} ${CLASS_NAME}-mark ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}`, editor: editor, iconName: props.iconName, iconSize: (_b = props.iconSize) !== null && _b !== void 0 ? _b : 20, isActive: isActive, onMouseDown: onMouseDown, pluginKey: props.pluginKey, tooltipText: props.tooltipText }));
+};
+exports.MarkToolbarButton = MarkToolbarButton;

package/ui/toolbar/buttons/modal-toolbar-button.d.ts

@@ -0,0 +1,15 @@
+import type { DialogPanelWidth } from "@uxf/ui/dialog";
+import { IconName } from "@uxf/ui/icon/types";
+import { FC, ReactNode } from "react";
+import { UxfEditor } from "../../../types";
+interface ModalToolbarButtonProps {
+    className?: string;
+    iconName: IconName;
+    modalWidth?: DialogPanelWidth;
+    Modal: ReactNode;
+    editor: UxfEditor;
+    pluginKey: string;
+    tooltipText: string;
+}
+export declare const ModalToolbarButton: FC<ModalToolbarButtonProps>;
+export {};

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

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ModalToolbarButton = 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 = __importDefault(require("react"));
+const toolbar_button_1 = require("./toolbar-button");
+const CLASS_NAME = "uxf-wysiwyg__toolbar-button";
+const ModalToolbarButton = (props) => {
+    var _a;
+    const onMouseDown = () => {
+        var _a;
+        (0, modal_service_1.openModal)({
+            children: react_1.default.createElement(dialog_panel_1.DialogPanel, { width: (_a = props.modalWidth) !== null && _a !== void 0 ? _a : "lg" }, props.Modal),
+        });
+    };
+    return (react_1.default.createElement(toolbar_button_1.ToolbarButton, { className: `${CLASS_NAME} ${CLASS_NAME}-modal ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}`, editor: props.editor, iconName: props.iconName, isActive: false, onMouseDown: onMouseDown, pluginKey: props.pluginKey, tooltipText: props.tooltipText }));
+};
+exports.ModalToolbarButton = ModalToolbarButton;

package/ui/toolbar/buttons/toolbar-button.d.ts

@@ -0,0 +1,15 @@
+import { IconName } from "@uxf/ui/icon/types";
+import { FC, MouseEventHandler } from "react";
+import { UxfEditor } from "../../../types";
+interface ToolbarButtonProps {
+    className?: string;
+    editor: UxfEditor;
+    isActive: boolean;
+    pluginKey: string;
+    onMouseDown: MouseEventHandler<HTMLAnchorElement>;
+    iconName: IconName;
+    iconSize?: number;
+    tooltipText: string;
+}
+export declare const ToolbarButton: FC<ToolbarButtonProps>;
+export {};

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

@@ -0,0 +1,35 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToolbarButton = void 0;
+const button_1 = require("@uxf/ui/button");
+const icon_1 = require("@uxf/ui/icon");
+const tooltip_1 = require("@uxf/ui/tooltip");
+const react_1 = __importDefault(require("react"));
+const utils_1 = require("../../../utils");
+const CLASS_NAME = "uxf-wysiwyg__toolbar-button";
+const ToolbarButton = (props) => {
+    var _a, _b;
+    const onMouseDown = props.onMouseDown;
+    /* `onPointerDown` must be used, because Editor loses focus on `onClick`. */
+    const onLeftMouseDown = (e) => {
+        if (e.button === 0) {
+            e.preventDefault();
+            e.stopPropagation();
+            onMouseDown(e);
+        }
+    };
+    if (!(0, utils_1.isPluginEnabled)(props.editor, props.pluginKey)) {
+        return null;
+    }
+    const button = (react_1.default.createElement(button_1.Button, { className: `${CLASS_NAME} ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}`, isIconButton: true, onPointerDown: onLeftMouseDown, variant: props.isActive ? "default" : "secondary" },
+        react_1.default.createElement(icon_1.Icon, { className: `${CLASS_NAME}__icon`, name: props.iconName, size: (_b = props.iconSize) !== null && _b !== void 0 ? _b : 20 })));
+    /* This detects touch input. */
+    if (window.matchMedia("(pointer: coarse)").matches) {
+        return button;
+    }
+    return (react_1.default.createElement(tooltip_1.Tooltip, { className: `${CLASS_NAME}__tooltip`, content: props.tooltipText }, button));
+};
+exports.ToolbarButton = ToolbarButton;

package/ui/toolbar/buttons/undo-redo-button-group.d.ts

@@ -0,0 +1,8 @@
+import { PlateId } from "@udecode/plate-core";
+import { FC } from "react";
+interface Props {
+    className?: string;
+    plateId: PlateId;
+}
+export declare const UndoRedoButtonGroup: FC<Props>;
+export {};

package/ui/toolbar/buttons/undo-redo-button-group.js

@@ -0,0 +1,64 @@
+"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.UndoRedoButtonGroup = void 0;
+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 icon_1 = require("@uxf/ui/icon");
+const tooltip_1 = require("@uxf/ui/tooltip");
+const react_1 = __importStar(require("react"));
+const hooks_1 = require("../../../hooks");
+const utils_1 = require("../../../utils");
+const CLASS_NAME = "uxf-wysiwyg__toolbar-button";
+const UndoRedoButtonGroup = (props) => {
+    var _a;
+    const t = (0, translations_1.useUxfTranslation)();
+    const editor = (0, hooks_1.useUxfPlateEditorState)(props.plateId);
+    const undoHandler = (0, react_1.useCallback)((e) => {
+        if (e.button === 0) {
+            e.preventDefault();
+            e.stopPropagation();
+            editor.undo();
+            (0, utils_1.focusEditor)(editor);
+        }
+    }, [editor]);
+    const redoHandler = (0, react_1.useCallback)((e) => {
+        if (e.button === 0) {
+            e.preventDefault();
+            e.stopPropagation();
+            editor.redo();
+            (0, utils_1.focusEditor)(editor);
+        }
+    }, [editor]);
+    return (react_1.default.createElement(button_group_1.ButtonGroup, { className: `${CLASS_NAME}-group ${CLASS_NAME}-group-undo-redo ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}` },
+        react_1.default.createElement(tooltip_1.Tooltip, { content: t("uxf-wysiwyg:plugins.actions.undo.tooltip") },
+            react_1.default.createElement(button_1.Button, { className: `${CLASS_NAME} ${CLASS_NAME}-undo`, isDisabled: editor.history.undos.length === 0, isIconButton: true, onMouseDown: undoHandler, variant: "secondary" },
+                react_1.default.createElement(icon_1.Icon, { className: `${CLASS_NAME}__icon`, name: "arrow-turn-down-left", size: 16 }))),
+        react_1.default.createElement(tooltip_1.Tooltip, { content: t("uxf-wysiwyg:plugins.actions.redo.tooltip") },
+            react_1.default.createElement(button_1.Button, { className: `${CLASS_NAME} ${CLASS_NAME}-redo`, isDisabled: editor.history.redos.length === 0, isIconButton: true, onMouseDown: redoHandler, variant: "secondary" },
+                react_1.default.createElement(icon_1.Icon, { className: `${CLASS_NAME}__icon`, name: "arrow-turn-down-right", size: 16 })))));
+};
+exports.UndoRedoButtonGroup = UndoRedoButtonGroup;

package/ui/toolbar/buttons/video-toolbar-button.d.ts

@@ -0,0 +1,10 @@
+import { PlateId } from "@udecode/plate-core";
+import { IconName } from "@uxf/ui/icon/types";
+import { FC } from "react";
+interface EmbedMediaToolbarButtonProps {
+    className?: string;
+    iconName?: IconName;
+    plateId: PlateId;
+}
+export declare const VideoToolbarButton: FC<EmbedMediaToolbarButtonProps>;
+export {};