@uxf/wysiwyg 11.74.0 → 11.74.2

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 {};

package/ui/toolbar/buttons/video-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.VideoToolbarButton = void 0;
+const translations_1 = require("@uxf/core-react/translations");
+const react_1 = __importDefault(require("react"));
+const hooks_1 = require("../../../hooks");
+const create_video_plugin_1 = require("../../../plugins/embedded/video/create-video-plugin");
+const insert_video_modal_content_1 = require("../../video/insert-video-modal-content");
+const modal_toolbar_button_1 = require("./modal-toolbar-button");
+const CLASS_NAME = "uxf-wysiwyg__toolbar-button";
+const VideoToolbarButton = (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_video_modal_content_1.InsertVideoModalContent, { editor: editor }), className: `${CLASS_NAME} ${CLASS_NAME}-video ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}`, editor: editor, iconName: (_b = props.iconName) !== null && _b !== void 0 ? _b : "youtube", pluginKey: create_video_plugin_1.ELEMENT_VIDEO_EMBED, tooltipText: t("uxf-wysiwyg:plugins.video.tooltip") }));
+};
+exports.VideoToolbarButton = VideoToolbarButton;

package/ui/toolbar/toolbar.d.ts

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

package/ui/toolbar/toolbar.js

@@ -0,0 +1,77 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Toolbar = void 0;
+const translations_1 = require("@uxf/core-react/translations");
+const button_group_1 = require("@uxf/ui/button-group");
+const react_1 = __importDefault(require("react"));
+const hooks_1 = require("../../hooks");
+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/highlight/types");
+const types_3 = require("../../plugins/image/types");
+const constants_2 = require("../../plugins/link/constants");
+const constants_3 = require("../../plugins/list/constants");
+const types_4 = require("../../plugins/mark-bold/types");
+const types_5 = require("../../plugins/mark-code/types");
+const types_6 = require("../../plugins/mark-italic/types");
+const types_7 = require("../../plugins/mark-underline/types");
+const utils_1 = require("../../utils");
+const button_toolbar_button_1 = require("./buttons/button-toolbar-button");
+const element_toolbar_button_1 = require("./buttons/element-toolbar-button");
+const image_toolbar_button_1 = require("./buttons/image-toolbar-button");
+const link_toolbar_button_1 = require("./buttons/link-toolbar-button");
+const list_toolbar_button_1 = require("./buttons/list-toolbar-button");
+const mark_toolbar_button_1 = require("./buttons/mark-toolbar-button");
+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) => {
+    var _a;
+    // eslint-disable-next-line react/destructuring-assignment
+    const { customPluginsButtons, leftElement, plateId, rightElement, ...restProps } = props;
+    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 }))),
+            customPluginsButtons,
+            react_1.default.createElement(undo_redo_button_group_1.UndoRedoButtonGroup, { plateId: plateId })),
+        rightElement));
+};
+exports.Toolbar = Toolbar;

package/ui/toolbar/types.d.ts

@@ -0,0 +1,8 @@
+import { PlateId } from "@udecode/plate-core";
+import { HTMLAttributes, ReactNode } from "react";
+export interface ToolbarProps extends HTMLAttributes<HTMLDivElement> {
+    customPluginsButtons?: ReactNode;
+    leftElement?: ReactNode;
+    plateId: PlateId;
+    rightElement?: ReactNode;
+}

package/ui/toolbar/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/ui/underline-mark.d.ts

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

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

package/ui/utils.d.ts

@@ -0,0 +1,2 @@
+import { UxfEditor } from "../types";
+export declare const closeModalWithFocus: (editor: UxfEditor) => void;

package/ui/utils.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.closeModalWithFocus = void 0;
+const modal_service_1 = require("@uxf/ui/modal/modal-service");
+const utils_1 = require("../utils");
+const closeModalWithFocus = (editor) => {
+    var _a;
+    (0, modal_service_1.closeModal)();
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    const selection = (_a = editor.selection) !== null && _a !== void 0 ? _a : editor.prevSelection;
+    (0, utils_1.focusEditor)(editor, selection);
+};
+exports.closeModalWithFocus = closeModalWithFocus;

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

@@ -0,0 +1,8 @@
+import { FC } from "react";
+import { UxfEditor, UxfVideoElement } from "../../types";
+interface InsertVideoModalContentProps {
+    editor: UxfEditor;
+    editedVideo?: UxfVideoElement;
+}
+export declare const InsertVideoModalContent: FC<InsertVideoModalContentProps>;
+export {};