@uxf/wysiwyg 11.74.0 → 11.74.2

package/translations/en.json

@@ -0,0 +1,134 @@
+{
+  "uxf-wysiwyg": {
+    "common": {
+      "placeholder": "Write something nice..."
+    },
+    "components": {
+      "modal": {
+        "button-cancel": "Cancel"
+      }
+    },
+    "plugins": {
+      "formatting": {
+        "bold": {
+          "tooltip": "Bold (Ctrl+B)"
+        },
+        "italic": {
+          "tooltip": "Italic (Ctrl+I)"
+        },
+        "underline": {
+          "tooltip": "Underline (Ctrl+U)"
+        },
+        "code": {
+          "tooltip": "Code"
+        },
+        "highlight": {
+          "tooltip": "Highlight (Ctrl+Shift+H)"
+        }
+      },
+      "headings": {
+        "h1": {
+          "tooltip": "Heading H1"
+        },
+        "h2": {
+          "tooltip": "Heading H2"
+        },
+        "h3": {
+          "tooltip": "Heading H3"
+        },
+        "h4": {
+          "tooltip": "Heading H4"
+        },
+        "h5": {
+          "tooltip": "Heading H5"
+        },
+        "h6": {
+          "tooltip": "Heading H6"
+        }
+      },
+      "link": {
+        "url-address": {
+          "invalid": "Invalid URL address",
+          "required": "URL address is required",
+          "label": "URL address",
+          "placeholder": "Enter URL address"
+        },
+        "link-text": {
+          "label": "Link text",
+          "placeholder": "Enter link text"
+        },
+        "open-in-new-tab": "Open in new tab",
+        "tooltip": "Insert link",
+        "button-save": "Save",
+        "button-close": "Close"
+      },
+      "blocks": {
+        "quote": {
+          "tooltip": "Quote"
+        }
+      },
+      "lists": {
+        "ul": {
+          "tooltip": "Insert bullet list"
+        },
+        "ol": {
+          "tooltip": "Insert numbered list"
+        }
+      },
+      "button": {
+        "tooltip": "Insert button",
+        "button-text": {
+          "label": "Button text",
+          "placeholder": "Enter button text",
+          "required": "This field is required"
+        },
+        "url-address": {
+          "label": "URL address",
+          "placeholder": "Enter URL address",
+          "required": "This field is required"
+        },
+        "button-insert": "Insert button",
+        "button-edit": "Edit button"
+      },
+      "image": {
+        "tooltip": "Insert image",
+        "alt": {
+          "label": "Image alt",
+          "placeholder": "Enter image alt"
+        },
+        "caption": {
+          "label": "Image caption",
+          "placeholder": "Enter image caption"
+        },
+        "source": {
+          "label": "Image source",
+          "placeholder": "Enter image source"
+        },
+        "file-upload": {
+          "label": "Image"
+        },
+        "button-insert": "Insert image",
+        "button-edit": "Edit image"
+      },
+      "video": {
+        "tooltip": "Insert video",
+        "url-address": {
+          "label": "URL address",
+          "placeholder": "Enter URL address",
+          "invalid": "Invalid URL address."
+        },
+        "iframe-title": "Video",
+        "button-insert": "Insert video",
+        "button-edit": "Edit video"
+      },
+      "actions": {
+        "undo": {
+          "tooltip": "Undo (Ctrl+Z)"
+        },
+        "redo": {
+          "tooltip": "Redo (Ctrl+Y)"
+        }
+      }
+    }
+  }
+}

package/translations/sk.json

@@ -0,0 +1,134 @@
+{
+  "uxf-wysiwyg": {
+    "common": {
+      "placeholder": "Napíšte niečo pekné..."
+    },
+    "components": {
+      "modal": {
+        "button-cancel": "Zrušiť"
+      }
+    },
+    "plugins": {
+      "formatting": {
+        "bold": {
+          "tooltip": "Tučné (Ctrl+B)"
+        },
+        "italic": {
+          "tooltip": "Kurzíva (Ctrl+I)"
+        },
+        "underline": {
+          "tooltip": "Podčiarknutie (Ctrl+U)"
+        },
+        "code": {
+          "tooltip": "Kód"
+        },
+        "highlight": {
+          "tooltip": "Zvýraznenie (Ctrl+Shift+H)"
+        }
+      },
+      "headings": {
+        "h1": {
+          "tooltip": "Nadpis H1"
+        },
+        "h2": {
+          "tooltip": "Nadpis H2"
+        },
+        "h3": {
+          "tooltip": "Nadpis H3"
+        },
+        "h4": {
+          "tooltip": "Nadpis H4"
+        },
+        "h5": {
+          "tooltip": "Nadpis H5"
+        },
+        "h6": {
+          "tooltip": "Nadpis H6"
+        }
+      },
+      "link": {
+        "url-address": {
+          "invalid": "Neplatná URL adresa",
+          "required": "URL adresa je povinná",
+          "label": "URL adresa",
+          "placeholder": "Zadajte URL adresu"
+        },
+        "link-text": {
+          "label": "Text odkazu",
+          "placeholder": "Zadajte text odkazu"
+        },
+        "open-in-new-tab": "Otvoriť v novej karte",
+        "tooltip": "Vložiť odkaz",
+        "button-save": "Uložiť",
+        "button-close": "Zatvoriť"
+      },
+      "blocks": {
+        "quote": {
+          "tooltip": "Citácia"
+        }
+      },
+      "lists": {
+        "ul": {
+          "tooltip": "Vložiť odrážkový zoznam"
+        },
+        "ol": {
+          "tooltip": "Vložiť číslovaný zoznam"
+        }
+      },
+      "button": {
+        "tooltip": "Vložiť tlačidlo",
+        "button-text": {
+          "label": "Text tlačidla",
+          "placeholder": "Zadajte text tlačidla",
+          "required": "Toto pole je povinné"
+        },
+        "url-address": {
+          "label": "URL adresa",
+          "placeholder": "Zadajte URL adresu",
+          "required": "Toto pole je povinné"
+        },
+        "button-insert": "Vložiť tlačidlo",
+        "button-edit": "Upraviť tlačidlo"
+      },
+      "image": {
+        "tooltip": "Vložiť obrázok",
+        "alt": {
+          "label": "Alt obrázka",
+          "placeholder": "Zadajte alt obrázka"
+        },
+        "caption": {
+          "label": "Popis obrázka",
+          "placeholder": "Zadajte popis obrázka"
+        },
+        "source": {
+          "label": "Zdroj obrázka",
+          "placeholder": "Zadajte zdroj obrázka"
+        },
+        "file-upload": {
+          "label": "Obrázok"
+        },
+        "button-insert": "Vložiť obrázok",
+        "button-edit": "Upraviť obrázok"
+      },
+      "video": {
+        "tooltip": "Vložiť video",
+        "url-address": {
+          "label": "URL adresa",
+          "placeholder": "Zadajte URL adresu",
+          "invalid": "Neplatná URL adresa."
+        },
+        "iframe-title": "Video",
+        "button-insert": "Vložiť video",
+        "button-edit": "Upraviť video"
+      },
+      "actions": {
+        "undo": {
+          "tooltip": "Vrátiť späť (Ctrl+Z)"
+        },
+        "redo": {
+          "tooltip": "Opakovať (Ctrl+Y)"
+        }
+      }
+    }
+  }
+}

package/types.d.ts

@@ -0,0 +1,118 @@
+import { OverrideByKey, PlateEditor, PlateId, PlatePlugin, PlatePluginComponent, RenderAfterEditable as PlateRenderAfterEditable, PlateRenderElementProps, PlateRenderLeafProps, PluginOptions } from "@udecode/plate-core";
+import { TElement, TText } from "@udecode/slate";
+import { FileResponse } from "@uxf/core/types";
+import { FC } from "react";
+export type EmptyText = {
+    text: "";
+};
+export interface RichText extends TText {
+    id?: PlateId;
+    bold?: boolean;
+    italic?: boolean;
+    underline?: boolean;
+    code?: boolean;
+    highlight?: boolean;
+}
+export interface UxfBlockElement extends TElement {
+    id?: PlateId;
+}
+export interface UxfLinkElement extends UxfBlockElement {
+    type: "link";
+    url: string;
+    target: "_blank" | "_self";
+}
+export type UxfInlineDescendant = RichText | UxfLinkElement;
+export type UxfInlineChildren = UxfInlineDescendant[];
+export interface UxfParagraphElement extends UxfBlockElement {
+    type: "paragraph";
+    children: UxfInlineChildren;
+}
+export interface UxfBlockQuoteElement extends UxfBlockElement {
+    type: "blockquote";
+    children: UxfInlineChildren;
+}
+export interface UxfImageElement extends UxfBlockElement {
+    type: "image";
+    children: [EmptyText];
+    file: FileResponse;
+    source?: string;
+    caption?: string;
+    alt?: string;
+    url?: string;
+}
+export interface UxfHeadingElement extends UxfBlockElement {
+    type: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+}
+export interface LicElement extends UxfBlockElement {
+    type: "lic";
+}
+export interface LiElement extends UxfBlockElement {
+    type: "li";
+    children: LicElement[];
+}
+export interface UxfUnorderedListElement extends UxfBlockElement {
+    type: "ul";
+    children: LiElement[];
+}
+export interface UxfOrderedListElement extends UxfBlockElement {
+    type: "ol";
+    children: LiElement[];
+}
+export type UxfVideoMetaData = {
+    title: string;
+    description: string;
+    authorName: string;
+    authorUrl: string;
+    width: number;
+    height: number;
+    duration: number;
+    uploadDate: string;
+    thumbnail: {
+        width: number;
+        height: number;
+        url: string;
+    };
+};
+export interface UxfVideoElement extends UxfBlockElement {
+    type: "video";
+    url: string;
+    embeddedUrl: string;
+    provider: string;
+    videoId: string;
+    children: [EmptyText];
+    metaData?: Partial<UxfVideoMetaData> | null;
+}
+export interface UxfButtonElement extends UxfBlockElement {
+    type: "button";
+    buttonUrl: string;
+    buttonText: string;
+    children: [EmptyText];
+}
+export type WysiwygRootBlock = UxfParagraphElement | UxfBlockQuoteElement | UxfImageElement | UxfHeadingElement | UxfLinkElement | UxfUnorderedListElement | UxfOrderedListElement | UxfVideoElement | UxfButtonElement;
+export type UiComponents = Record<string, PlatePluginComponent>;
+export type WysiwygContent = WysiwygRootBlock[];
+export type RenderElementProps<E extends TElement = UxfBlockElement> = PlateRenderElementProps<WysiwygContent, E>;
+export type ElementUiComponent<E extends TElement = UxfBlockElement> = FC<RenderElementProps<E>>;
+export type RenderLeafProps<L extends TText = RichText> = PlateRenderLeafProps<WysiwygContent, L>;
+export type LeafUiComponent<L extends TText = RichText> = FC<RenderLeafProps<L>>;
+export type RenderAfterEditable = PlateRenderAfterEditable<WysiwygContent>;
+export type UxfEditor = PlateEditor<WysiwygContent> & {
+    isDragging?: boolean;
+};
+export type UxfPlatePlugin<P = PluginOptions> = PlatePlugin<P, WysiwygContent, UxfEditor>;
+export interface WysiwygPlugin<E extends UxfBlockElement = UxfBlockElement> {
+    plugin: UxfPlatePlugin;
+    component: ElementUiComponent<E> | LeafUiComponent;
+}
+/**
+ * This is used when recursive plugin feature is used
+ * @see https://plate.udecode.io/docs/plugins#plugins
+ * E.g. Headings plugin
+ */
+export interface WysiwygRecursivePlugin<C extends string, E extends UxfBlockElement = UxfBlockElement> {
+    plugin: UxfPlatePlugin;
+    components: {
+        [key in C]: ElementUiComponent<E> | LeafUiComponent;
+    };
+}
+export type MyOverrideByKey = OverrideByKey<WysiwygContent, UxfEditor>;

package/types.js

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

package/ui/blockquote-element.d.ts

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

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

package/ui/bold-mark.d.ts

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

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

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

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

package/ui/button/button-element.js

@@ -0,0 +1,54 @@
+"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.ButtonElement = void 0;
+const button_1 = require("@uxf/ui/button");
+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 button_2 = require("../../plugins/button");
+const remove_selected_button_1 = require("../../plugins/button/transforms/remove-selected-button");
+const element_with_action_buttons_1 = require("../components/element/element-with-action-buttons");
+const insert_button_modal_content_1 = require("./insert-button-modal-content");
+const CLASS_NAME = "uxf-wysiwyg__element";
+const ButtonElement = (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_button_modal_content_1.InsertButtonModalContent, { buttonToEdit: (0, button_2.getActiveButton)(props.editor), editor: props.editor }))),
+        });
+    }, [props.editor]);
+    const onRemove = (0, react_1.useCallback)(() => {
+        (0, remove_selected_button_1.removeSelectedButton)(props.editor);
+    }, [props.editor]);
+    return (react_1.default.createElement("div", { ...props.attributes, className: `${CLASS_NAME} ${CLASS_NAME}-button ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}` },
+        react_1.default.createElement(element_with_action_buttons_1.ElementWithActionButtons, { className: `${CLASS_NAME}-button__action-buttons`, isSelected: selected, onDelete: onRemove, onEdit: onEdit, padding: selected },
+            react_1.default.createElement(button_1.Button, { className: `${CLASS_NAME}-button__action-button`, href: props.element.buttonUrl, isDisabled: true, variant: "secondary" }, props.element.buttonText)),
+        props.children));
+};
+exports.ButtonElement = ButtonElement;

package/ui/button/index.d.ts

@@ -0,0 +1 @@
+export { ButtonElement } from "./button-element";

package/ui/button/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ButtonElement = void 0;
+var button_element_1 = require("./button-element");
+Object.defineProperty(exports, "ButtonElement", { enumerable: true, get: function () { return button_element_1.ButtonElement; } });

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

@@ -0,0 +1,8 @@
+import { FC } from "react";
+import { UxfButtonElement, UxfEditor } from "../../types";
+interface InsertButtonModalContentProps {
+    editor: UxfEditor;
+    buttonToEdit?: UxfButtonElement;
+}
+export declare const InsertButtonModalContent: FC<InsertButtonModalContentProps>;
+export {};

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

@@ -0,0 +1,81 @@
+"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.InsertButtonModalContent = void 0;
+const translations_1 = require("@uxf/core-react/translations");
+const text_input_1 = require("@uxf/ui/text-input");
+const react_1 = __importStar(require("react"));
+const button_1 = require("../../plugins/button");
+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-button";
+const InsertButtonModalContent = (props) => {
+    var _a, _b, _c, _d;
+    const t = (0, translations_1.useUxfTranslation)();
+    const [buttonText, setButtonText] = (0, react_1.useState)((_b = (_a = props.buttonToEdit) === null || _a === void 0 ? void 0 : _a.buttonText) !== null && _b !== void 0 ? _b : "");
+    const [buttonUrl, setButtonUrl] = (0, react_1.useState)((_d = (_c = props.buttonToEdit) === null || _c === void 0 ? void 0 : _c.buttonUrl) !== null && _d !== void 0 ? _d : "");
+    const [error, setError] = (0, react_1.useState)({
+        text: undefined,
+        url: undefined,
+    });
+    const title = props.buttonToEdit
+        ? t("uxf-wysiwyg:plugins.button.button-edit")
+        : t("uxf-wysiwyg:plugins.button.button-insert");
+    const onSubmit = (0, react_1.useCallback)(async (e) => {
+        e.preventDefault();
+        if (buttonText.length === 0) {
+            setError((prevError) => ({
+                ...prevError,
+                text: t("uxf-wysiwyg:plugins.button.button-text.required"),
+            }));
+        }
+        if (buttonUrl.length === 0) {
+            setError((prevError) => {
+                return {
+                    ...prevError,
+                    url: t("uxf-wysiwyg:plugins.button.url-address.required"),
+                };
+            });
+        }
+        if (buttonText.length !== 0 && buttonUrl.length !== 0) {
+            if (props.buttonToEdit) {
+                (0, button_1.updateButton)(props.editor, buttonText, buttonUrl);
+            }
+            else {
+                (0, button_1.insertButton)(props.editor, buttonText, buttonUrl);
+            }
+            (0, utils_1.closeModalWithFocus)(props.editor);
+        }
+    }, [buttonText, buttonUrl, props.buttonToEdit, props.editor, t]);
+    return (react_1.default.createElement(modal_content_1.ModalContent, { title: title },
+        react_1.default.createElement("form", { className: `${CLASS_NAME}__form`, id: "insert-button-form", onSubmit: onSubmit },
+            react_1.default.createElement("div", { className: `${CLASS_NAME}__form-inputs` },
+                react_1.default.createElement(text_input_1.TextInput, { helperText: error.text, isInvalid: Boolean(error.text), isRequired: true, label: t("uxf-wysiwyg:plugins.button.button-text.label"), name: "button-text", onChange: setButtonText, placeholder: t("uxf-wysiwyg:plugins.button.button-text.placeholder"), type: "text", value: buttonText }),
+                react_1.default.createElement(text_input_1.TextInput, { helperText: error.url, isInvalid: Boolean(error.url), isRequired: true, label: t("uxf-wysiwyg:plugins.button.url-address.label"), name: "url-address", onChange: setButtonUrl, placeholder: t("uxf-wysiwyg:plugins.button.url-address.placeholder"), type: "text", value: buttonUrl })),
+            react_1.default.createElement(modal_buttons_1.ModalButtons, { className: `${CLASS_NAME}__form-buttons`, editor: props.editor, submitText: title }),
+            react_1.default.createElement("button", { hidden: true, type: "submit" }))));
+};
+exports.InsertButtonModalContent = InsertButtonModalContent;

package/ui/code-mark.d.ts

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

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

package/ui/components/element/element-action-buttons.d.ts

@@ -0,0 +1,9 @@
+import { FC } from "react";
+interface ElementActionButtonsProps {
+    className?: string;
+    onEdit: () => void;
+    onDelete: () => void;
+    isSelected: boolean;
+}
+export declare const ElementActionButtons: FC<ElementActionButtonsProps>;
+export {};

package/ui/components/element/element-action-buttons.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.ElementActionButtons = void 0;
+const button_1 = require("@uxf/ui/button");
+const icon_1 = require("@uxf/ui/icon");
+const react_1 = __importDefault(require("react"));
+const CLASS_NAME = "uxf-wysiwyg__element-action-buttons";
+const ElementActionButtons = (props) => {
+    var _a;
+    if (!props.isSelected) {
+        return null;
+    }
+    return (react_1.default.createElement("div", { className: `${CLASS_NAME} ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}`, contentEditable: false, tabIndex: -1 },
+        react_1.default.createElement(button_1.Button, { className: `${CLASS_NAME}__edit`, isIconButton: true, onClick: props.onEdit, variant: "secondary" },
+            react_1.default.createElement(icon_1.Icon, { name: "edit" })),
+        react_1.default.createElement(button_1.Button, { className: `${CLASS_NAME}__delete`, isIconButton: true, onClick: props.onDelete, variant: "secondary" },
+            react_1.default.createElement(icon_1.Icon, { name: "delete" }))));
+};
+exports.ElementActionButtons = ElementActionButtons;

package/ui/components/element/element-with-action-buttons.d.ts

@@ -0,0 +1,10 @@
+import { FC, PropsWithChildren } from "react";
+interface Props extends PropsWithChildren {
+    className?: string;
+    onEdit: () => void;
+    onDelete: () => void;
+    isSelected: boolean;
+    padding?: boolean;
+}
+export declare const ElementWithActionButtons: FC<Props>;
+export {};

package/ui/components/element/element-with-action-buttons.js

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ElementWithActionButtons = void 0;
+const classes_1 = require("@uxf/core/constants/classes");
+const cx_1 = require("@uxf/core/utils/cx");
+const react_1 = __importDefault(require("react"));
+const element_action_buttons_1 = require("./element-action-buttons");
+const CLASS_NAME = "uxf-wysiwyg__element-with-action-buttons";
+const ElementWithActionButtons = (props) => {
+    return (react_1.default.createElement("div", { className: (0, cx_1.cx)(CLASS_NAME, props.padding && `${CLASS_NAME}--has-padding`, props.isSelected && `${CLASS_NAME}--${classes_1.CLASSES.IS_SELECTED}`, props.className), contentEditable: false },
+        react_1.default.createElement(element_action_buttons_1.ElementActionButtons, { isSelected: props.isSelected, onDelete: props.onDelete, onEdit: props.onEdit }),
+        props.children));
+};
+exports.ElementWithActionButtons = ElementWithActionButtons;