@uxf/wysiwyg 11.74.0 → 11.74.2

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

@@ -0,0 +1,80 @@
+"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.InsertVideoModalContent = 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 utils_1 = require("../../plugins/embedded/utils");
+const insert_video_1 = require("../../plugins/embedded/video/insert-video");
+const update_video_1 = require("../../plugins/embedded/video/update-video");
+const get_video_meta_data_1 = require("../../utils/get-video-meta-data");
+const modal_buttons_1 = require("../components/modal/modal-buttons");
+const modal_content_1 = require("../components/modal/modal-content");
+const utils_2 = require("../utils");
+const CLASS_NAME = "uxf-wysiwyg__insert-modal-video";
+// eslint-disable-next-line react/destructuring-assignment
+const InsertVideoModalContent = ({ editor, editedVideo }) => {
+    var _a;
+    const t = (0, translations_1.useUxfTranslation)();
+    const [url, setUrl] = (0, react_1.useState)((_a = editedVideo === null || editedVideo === void 0 ? void 0 : editedVideo.url) !== null && _a !== void 0 ? _a : "");
+    const [embedUrl, setEmbedUrl] = (0, react_1.useState)(editedVideo
+        ? { id: editedVideo.videoId, provider: editedVideo.provider, url: editedVideo.embeddedUrl }
+        : undefined);
+    const [error, setError] = (0, react_1.useState)();
+    const onSubmit = (0, react_1.useCallback)(async (event) => {
+        event.preventDefault();
+        setEmbedUrl((0, utils_1.parseVideoUrl)(url));
+        if (!((embedUrl === null || embedUrl === void 0 ? void 0 : embedUrl.url) && embedUrl.provider && embedUrl.id)) {
+            setError(t("uxf-wysiwyg:plugins.video.url-address.invalid"));
+            return;
+        }
+        const metaData = await (0, get_video_meta_data_1.getVideoMetaData)(embedUrl.provider, embedUrl.id);
+        if (editedVideo) {
+            (0, update_video_1.updateVideo)(editor, url, embedUrl.url, embedUrl.provider, embedUrl.id, metaData);
+        }
+        else {
+            (0, insert_video_1.insertVideo)(editor, url, embedUrl.url, embedUrl.provider, embedUrl.id, metaData);
+        }
+        (0, utils_2.closeModalWithFocus)(editor);
+    }, [editedVideo, editor, embedUrl, url, t]);
+    const onChange = (0, react_1.useCallback)((v) => {
+        setUrl(v);
+        setError(undefined);
+        setEmbedUrl((0, utils_1.parseVideoUrl)(v));
+    }, []);
+    const title = editedVideo
+        ? t("uxf-wysiwyg:plugins.video.button-edit")
+        : t("uxf-wysiwyg:plugins.video.button-insert");
+    return (react_1.default.createElement(modal_content_1.ModalContent, { title: title },
+        react_1.default.createElement("form", { className: `${CLASS_NAME}__form`, id: "insert-video-form", onSubmit: onSubmit },
+            react_1.default.createElement("div", { className: `${CLASS_NAME}__form-inputs` },
+                react_1.default.createElement(text_input_1.TextInput, { helperText: error, isInvalid: Boolean(error), label: t("uxf-wysiwyg:plugins.video.url-address.label"), name: "url-address", onChange: onChange, placeholder: t("uxf-wysiwyg:plugins.video.url-address.placeholder"), type: "text", value: url })),
+            (embedUrl === null || embedUrl === void 0 ? void 0 : embedUrl.url) && (react_1.default.createElement("div", { className: `${CLASS_NAME}__iframe-wrapper` },
+                react_1.default.createElement("iframe", { className: `${CLASS_NAME}__iframe`, height: "100%", src: embedUrl.url, title: t("uxf-wysiwyg:plugins.video.iframe-title"), width: "100%" }))),
+            react_1.default.createElement(modal_buttons_1.ModalButtons, { className: `${CLASS_NAME}__form-buttons`, editor: editor, submitText: title }),
+            react_1.default.createElement("button", { hidden: true, type: "submit" }))));
+};
+exports.InsertVideoModalContent = InsertVideoModalContent;

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

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

package/ui/video/video-element.js

@@ -0,0 +1,55 @@
+"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.VideoElement = void 0;
+const translations_1 = require("@uxf/core-react/translations");
+const dialog_panel_1 = require("@uxf/ui/dialog/dialog-panel");
+const modal_service_1 = require("@uxf/ui/modal/modal-service");
+const react_1 = __importStar(require("react"));
+const hooks_1 = require("../../hooks");
+const get_active_video_1 = require("../../plugins/embedded/video/get-active-video");
+const utils_1 = require("../../utils");
+const element_with_action_buttons_1 = require("../components/element/element-with-action-buttons");
+const insert_video_modal_content_1 = require("./insert-video-modal-content");
+const CLASS_NAME = "uxf-wysiwyg__element";
+const VideoElement = (props) => {
+    var _a;
+    const t = (0, translations_1.useUxfTranslation)();
+    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_video_modal_content_1.InsertVideoModalContent, { editedVideo: (0, get_active_video_1.getActiveVideo)(props.editor), editor: props.editor }))),
+        });
+    }, [props.editor]);
+    const onDelete = (0, react_1.useCallback)(() => {
+        (0, utils_1.removeSelectedNode)(props.editor);
+    }, [props.editor]);
+    return (react_1.default.createElement("div", { ...props.attributes, className: `${CLASS_NAME} ${CLASS_NAME}-video ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}` },
+        react_1.default.createElement(element_with_action_buttons_1.ElementWithActionButtons, { className: `${CLASS_NAME}-video__action-buttons`, isSelected: selected, onDelete: onDelete, onEdit: onEdit },
+            react_1.default.createElement("iframe", { className: `${CLASS_NAME}-video__iframe`, src: props.element.embeddedUrl, tabIndex: -1, title: t("uxf-wysiwyg:plugins.video.iframe-title") })),
+        props.children));
+};
+exports.VideoElement = VideoElement;

package/utils/get-video-meta-data.d.ts

@@ -0,0 +1,2 @@
+import type { UxfVideoMetaData } from "../types";
+export declare function getVideoMetaData(provider: string, id: string): Promise<UxfVideoMetaData | null>;

package/utils/get-video-meta-data.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getVideoMetaData = getVideoMetaData;
+function getOembedEndpoint(provider, id) {
+    switch (provider) {
+        case "youtube":
+            return `https://www.youtube.com/oembed?url=https://www.youtube.com/watch?v=${id}&format=json`;
+        case "vimeo":
+            return `https://vimeo.com/api/oembed.json?url=https://vimeo.com/${id}`;
+        default:
+            return null;
+    }
+}
+async function getVideoMetaData(provider, id) {
+    const endpoint = getOembedEndpoint(provider, id);
+    if (endpoint === null) {
+        return null;
+    }
+    return fetch(endpoint)
+        .then((res) => res.json())
+        .then((data) => ({
+        authorName: data.author_name,
+        authorUrl: data.author_url,
+        width: data.width,
+        height: data.height,
+        description: data.description,
+        duration: data.duration,
+        uploadDate: data.upload_date,
+        thumbnail: {
+            width: data.thumbnail_width,
+            height: data.thumbnail_height,
+            url: data.thumbnail_url,
+        },
+        title: data.title,
+    }))
+        .catch((e) => {
+        // eslint-disable-next-line no-console
+        console.error(e);
+        return null;
+    });
+}

package/utils/url-helper.d.ts

@@ -0,0 +1,7 @@
+declare function hasProtocol(value: string): RegExpMatchArray | null;
+declare function isValid(value: string): boolean;
+export declare const UrlHelper: {
+    hasProtocol: typeof hasProtocol;
+    isValid: typeof isValid;
+};
+export {};

package/utils/url-helper.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UrlHelper = void 0;
+const is_not_nil_1 = require("@uxf/core/utils/is-not-nil");
+function hasProtocol(value) {
+    return value.match(new RegExp("^(https?://)|(tel:)|(mailto:)(#)(.*)"));
+}
+const URL_PATTERN = new RegExp("(^(https?:\\/\\/)?([\\da-z.-]+)\\.([a-z.]{2,6})([\\/\\w .-]*)(.*)$)|(^tel:\\+?[0-9\\-() ]+$)|(^mailto:[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}$)|(^#.*$)");
+function isValid(value) {
+    return (0, is_not_nil_1.isNotNil)(value.match(URL_PATTERN));
+}
+exports.UrlHelper = {
+    hasProtocol,
+    isValid,
+};

package/utils/url-helper.test.d.ts

@@ -0,0 +1 @@
+export {};

package/utils/url-helper.test.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const url_helper_1 = require("./url-helper");
+describe("UrlHelper", () => {
+    describe("hasProtocol", () => {
+        it("should return true for valid URLs with http or https protocols", () => {
+            expect(url_helper_1.UrlHelper.hasProtocol("https://example.com")).not.toBeNull();
+            expect(url_helper_1.UrlHelper.hasProtocol("http://example.com")).not.toBeNull();
+        });
+        it("should return true for tel protocol", () => {
+            expect(url_helper_1.UrlHelper.hasProtocol("tel:+1234567890")).not.toBeNull();
+        });
+        it("should return true for mailto protocol", () => {
+            expect(url_helper_1.UrlHelper.hasProtocol("mailto:test@example.com")).toBeNull();
+        });
+        it("should return false for invalid URLs", () => {
+            expect(url_helper_1.UrlHelper.hasProtocol("example.com")).toBeNull();
+            expect(url_helper_1.UrlHelper.hasProtocol("ftp://example.com")).toBeNull();
+            expect(url_helper_1.UrlHelper.hasProtocol("")).toBeNull();
+        });
+    });
+    describe("isValid", () => {
+        it("should return true for valid URLs", () => {
+            expect(url_helper_1.UrlHelper.isValid("https://example.com")).toBe(true);
+            expect(url_helper_1.UrlHelper.isValid("http://example.com")).toBe(true);
+            expect(url_helper_1.UrlHelper.isValid("example.com")).toBe(true);
+            expect(url_helper_1.UrlHelper.isValid("tel:+1234567890")).toBe(true);
+            expect(url_helper_1.UrlHelper.isValid("mailto:test@example.com")).toBe(true);
+            expect(url_helper_1.UrlHelper.isValid("#section")).toBe(true);
+        });
+        it("should return false for invalid URLs", () => {
+            expect(url_helper_1.UrlHelper.isValid("ftp://example.com")).toBe(false);
+            expect(url_helper_1.UrlHelper.isValid("mailto:invalid-email")).toBe(false);
+            expect(url_helper_1.UrlHelper.isValid("")).toBe(false);
+        });
+    });
+});

package/utils.d.ts

@@ -0,0 +1,30 @@
+import { ToggleNodeTypeOptions } from "@udecode/plate-core";
+import { FindNodeOptions, GetNodeEntriesOptions } from "@udecode/slate";
+import { ToggleMarkOptions } from "@udecode/slate-utils";
+import { Location } from "slate";
+import { UxfBlockElement, UxfEditor, WysiwygContent } from "./types";
+export declare const getUxfEditor: (editor: UxfEditor) => import("@udecode/plate-common").Modify<UxfEditor, {
+    operations: import("@udecode/plate-common").TOperation<import("@udecode/plate-common").EElementOrText<WysiwygContent>>[];
+    isInline: (element: import("@udecode/plate-common").TElement | import("./types").LicElement | import("./types").LiElement | import("./types").WysiwygRootBlock) => boolean;
+    isVoid: (element: import("@udecode/plate-common").TElement | import("./types").LicElement | import("./types").LiElement | import("./types").WysiwygRootBlock) => boolean;
+    normalizeNode: (entry: import("@udecode/plate-common").TNodeEntry<import("@udecode/plate-common").ENode<WysiwygContent>>) => void;
+    apply: (operation: import("@udecode/plate-common").TOperation<import("@udecode/plate-common").EElementOrText<WysiwygContent>>) => void;
+    getFragment: () => import("@udecode/plate-common").EElementOrText<WysiwygContent>[];
+    insertFragment: (fragment: import("@udecode/plate-common").EElementOrText<WysiwygContent>[]) => void;
+    insertNode: (node: import("@udecode/plate-common").EElementOrText<WysiwygContent> | import("@udecode/plate-common").EElementOrText<WysiwygContent>[]) => void;
+}>;
+export declare const getPluginOptions: <P = import("@udecode/plate-common").AnyObject>(editor: UxfEditor, pluginKey: string) => P;
+export declare const getPluginType: (editor: UxfEditor, key: string) => string;
+export declare const someNode: (editor: UxfEditor, options: FindNodeOptions<WysiwygContent>) => boolean;
+export declare const toggleNodeType: (editor: UxfEditor, options: ToggleNodeTypeOptions, editorNodesOptions?: Omit<GetNodeEntriesOptions<WysiwygContent>, "match"> | undefined) => void;
+export declare const focusEditor: (editor: UxfEditor, target?: Location | undefined) => void;
+export declare const isRangeInSingleText: (editor: UxfEditor) => boolean;
+export declare const isMarkActive: (editor: UxfEditor, type: string) => boolean;
+export declare const toggleMark: (editor: UxfEditor, { key, clear }: ToggleMarkOptions) => void;
+export declare const isPluginEnabled: (editor: UxfEditor, pluginKey: string) => boolean;
+export declare const isSomeOfPluginsEnabled: (editor: UxfEditor, pluginKeys: string[]) => boolean;
+export declare const getSelectedNode: (editor: UxfEditor) => UxfBlockElement | null;
+export declare const getActiveElement: <E extends UxfBlockElement = UxfBlockElement>(editor: UxfEditor, elementKey: string) => E | undefined;
+export declare const removeElement: (editor: UxfEditor, node: UxfBlockElement) => boolean;
+export declare const insertVoid: (editor: UxfEditor, node: UxfBlockElement) => void;
+export declare const removeSelectedNode: (editor: UxfEditor) => void;

package/utils.js

@@ -0,0 +1,88 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.removeSelectedNode = exports.insertVoid = exports.removeElement = exports.getActiveElement = exports.getSelectedNode = exports.isSomeOfPluginsEnabled = exports.isPluginEnabled = exports.toggleMark = exports.isMarkActive = exports.isRangeInSingleText = exports.focusEditor = exports.toggleNodeType = exports.someNode = exports.getPluginType = exports.getPluginOptions = exports.getUxfEditor = void 0;
+const plate_break_1 = require("@udecode/plate-break");
+const plate_common_1 = require("@udecode/plate-common");
+const plate_core_1 = require("@udecode/plate-core");
+const slate_1 = require("@udecode/slate");
+const slate_react_1 = require("@udecode/slate-react");
+const is_not_nil_1 = require("@uxf/core/utils/is-not-nil");
+const types_1 = require("./plugins/paragraph/types");
+const getUxfEditor = (editor) => (0, slate_1.getTEditor)(editor);
+exports.getUxfEditor = getUxfEditor;
+const getPluginOptions = (editor, pluginKey) => {
+    return (0, plate_core_1.getPluginOptions)(editor, pluginKey);
+};
+exports.getPluginOptions = getPluginOptions;
+const getPluginType = (editor, key) => (0, plate_core_1.getPluginType)(editor, key);
+exports.getPluginType = getPluginType;
+const someNode = (editor, options) => (0, plate_common_1.someNode)(editor, options);
+exports.someNode = someNode;
+const toggleNodeType = (editor, options, editorNodesOptions) => (0, plate_core_1.toggleNodeType)(editor, options, editorNodesOptions);
+exports.toggleNodeType = toggleNodeType;
+const focusEditor = (editor, target) => (0, plate_common_1.focusEditor)(editor, target);
+exports.focusEditor = focusEditor;
+const isRangeInSingleText = (editor) => editor.selection ? (0, plate_common_1.isRangeInSingleText)(editor.selection) : false;
+exports.isRangeInSingleText = isRangeInSingleText;
+const isMarkActive = (editor, type) => (0, plate_common_1.isMarkActive)(editor, type) && (0, exports.isRangeInSingleText)(editor);
+exports.isMarkActive = isMarkActive;
+const toggleMark = (editor, { key, clear }) => (0, plate_common_1.toggleMark)(editor, { key, clear });
+exports.toggleMark = toggleMark;
+const isPluginEnabled = (editor, pluginKey) => editor.plugins.findIndex((plugin) => plugin.key === pluginKey) !== -1;
+exports.isPluginEnabled = isPluginEnabled;
+const isSomeOfPluginsEnabled = (editor, pluginKeys) => editor.plugins.some((plugin) => pluginKeys.includes(plugin.key));
+exports.isSomeOfPluginsEnabled = isSomeOfPluginsEnabled;
+const getSelectedNode = (editor) => {
+    var _a;
+    const selection = editor.selection;
+    const firstAnchorPath = selection === null || selection === void 0 ? void 0 : selection.anchor.path.at(0);
+    if ((0, is_not_nil_1.isNotNil)(firstAnchorPath)) {
+        return (_a = editor.children.at(firstAnchorPath)) !== null && _a !== void 0 ? _a : null;
+    }
+    return null;
+};
+exports.getSelectedNode = getSelectedNode;
+const getActiveElement = (editor, elementKey) => {
+    var _a;
+    const entry = (0, slate_1.findNode)(editor, {
+        match: {
+            type: (0, exports.getPluginType)(editor, elementKey),
+        },
+        at: (_a = editor.selection) !== null && _a !== void 0 ? _a : undefined,
+    });
+    if (!entry) {
+        return;
+    }
+    const [element] = entry;
+    return element;
+};
+exports.getActiveElement = getActiveElement;
+const removeElement = (editor, node) => {
+    var _a;
+    const path = (0, slate_react_1.findNodePath)(editor, node);
+    (0, slate_1.removeNodes)(editor, { at: path });
+    (0, exports.focusEditor)(editor, (_a = editor.selection) !== null && _a !== void 0 ? _a : undefined);
+    return true;
+};
+exports.removeElement = removeElement;
+const insertVoid = (editor, node) => {
+    var _a;
+    const selectedNode = (0, exports.getSelectedNode)(editor);
+    if (!selectedNode) {
+        (0, slate_1.insertNodes)(editor, node);
+    }
+    else {
+        if (selectedNode.type !== types_1.PARAGRAPH_PLUGIN_TYPE || !(0, slate_1.isElementEmpty)(editor, selectedNode)) {
+            (0, plate_break_1.exitBreak)(editor, {});
+        }
+        (0, slate_1.setNodes)(editor, node);
+    }
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    (0, exports.focusEditor)(editor, (_a = editor.selection) !== null && _a !== void 0 ? _a : editor.prevSelection);
+};
+exports.insertVoid = insertVoid;
+const removeSelectedNode = (editor) => {
+    (0, slate_1.removeNodes)(editor);
+    (0, exports.focusEditor)(editor);
+};
+exports.removeSelectedNode = removeSelectedNode;

package/wysiwyg-editor.d.ts

@@ -0,0 +1,15 @@
+import { TEditableProps } from "@udecode/plate-core";
+import { FC, ReactNode } from "react";
+import { UxfPlatePlugin, WysiwygContent } from "./types";
+export interface WysiwygEditorProps {
+    className?: string;
+    customPluginsToolbarButtons?: ReactNode;
+    editableProps?: TEditableProps<WysiwygContent>;
+    id: string;
+    initialValue: WysiwygContent | undefined;
+    onChange: (value: WysiwygContent) => void;
+    plugins: UxfPlatePlugin[];
+    toolbarLeftElement?: ReactNode;
+    toolbarRightElement?: ReactNode;
+}
+export declare const WysiwygEditor: FC<WysiwygEditorProps>;

package/wysiwyg-editor.js

@@ -0,0 +1,42 @@
+"use strict";
+"use client";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WysiwygEditor = void 0;
+const plate_core_1 = require("@udecode/plate-core");
+const use_is_mounted_1 = require("@uxf/core-react/hooks/use-is-mounted");
+const translations_1 = require("@uxf/core-react/translations");
+const classes_1 = require("@uxf/core/constants/classes");
+const loader_1 = require("@uxf/ui/loader");
+const react_1 = __importDefault(require("react"));
+const toolbar_1 = require("./ui/toolbar/toolbar");
+const CLASS_NAME = "uxf-wysiwyg";
+const Editor = (props) => {
+    var _a, _b;
+    const t = (0, translations_1.useUxfTranslation)();
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(toolbar_1.Toolbar, { customPluginsButtons: props.customPluginsToolbarButtons, leftElement: props.toolbarLeftElement, plateId: props.plateId, rightElement: props.toolbarRightElement }),
+        react_1.default.createElement("div", { className: `${CLASS_NAME}__content` },
+            react_1.default.createElement(plate_core_1.Plate, { editableProps: {
+                    autoFocus: false,
+                    placeholder: t("uxf-wysiwyg:common.placeholder"),
+                    readOnly: false,
+                    spellCheck: false,
+                    ...props.editableProps,
+                    className: `${CLASS_NAME}__editable ${(_b = (_a = props.editableProps) === null || _a === void 0 ? void 0 : _a.className) !== null && _b !== void 0 ? _b : ""}`,
+                }, id: props.plateId, normalizeInitialValue: true }))));
+};
+const WysiwygEditor = (props) => {
+    var _a, _b;
+    const isMounted = (0, use_is_mounted_1.useIsMounted)();
+    if (!isMounted) {
+        return (react_1.default.createElement("div", { className: `${CLASS_NAME} ${CLASS_NAME}--${classes_1.CLASSES.IS_LOADING} ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}` },
+            react_1.default.createElement(loader_1.Loader, { className: `${CLASS_NAME}__loader` })));
+    }
+    return (react_1.default.createElement("div", { className: `${CLASS_NAME} ${(_b = props.className) !== null && _b !== void 0 ? _b : ""}` },
+        react_1.default.createElement(plate_core_1.PlateProvider, { id: props.id, initialValue: props.initialValue, onChange: props.onChange, plugins: props.plugins },
+            react_1.default.createElement(Editor, { customPluginsToolbarButtons: props.customPluginsToolbarButtons, editableProps: props.editableProps, plateId: props.id, toolbarLeftElement: props.toolbarLeftElement, toolbarRightElement: props.toolbarRightElement }))));
+};
+exports.WysiwygEditor = WysiwygEditor;

package/wysiwyg-editor.stories.d.ts

@@ -0,0 +1,5 @@
+import { WysiwygContent } from "@uxf/wysiwyg";
+import React from "react";
+export declare const initialValue: WysiwygContent;
+export declare function Playground(): React.JSX.Element;
+export declare function SelectedPlugins(): React.JSX.Element;

package/wysiwyg-editor.stories.js

@@ -0,0 +1,193 @@
+"use strict";
+"use client";
+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.initialValue = void 0;
+exports.Playground = Playground;
+exports.SelectedPlugins = SelectedPlugins;
+const show_1 = require("@uxf/core-react/components/show");
+const use_is_mounted_1 = require("@uxf/core-react/hooks/use-is-mounted");
+const wysiwyg_1 = require("@uxf/wysiwyg");
+const react_1 = __importStar(require("react"));
+exports.initialValue = [
+    {
+        type: "h1",
+        id: "mnlt6",
+        children: [{ text: "Nadpis H1" }],
+    },
+    {
+        type: "h2",
+        id: "feu6s",
+        children: [{ text: "Nadpis H2" }],
+    },
+    {
+        type: "h3",
+        id: "i9cb4",
+        children: [{ text: "Nadpis H3" }],
+    },
+    {
+        type: "h4",
+        id: "967c7",
+        children: [{ text: "Nadpis H4" }],
+    },
+    {
+        type: "h5",
+        id: "4kyki",
+        children: [{ text: "Nadpis H5" }],
+    },
+    {
+        type: "h6",
+        id: "ximag",
+        children: [{ text: "Nadpis H6" }],
+    },
+    {
+        type: "paragraph",
+        id: "xnws3",
+        children: [
+            { text: "Toto je odstavec. " },
+            { type: "link", id: "j4bh1", url: "https://uxf.cz", target: "_blank", children: [{ text: "uxf.cz" }] },
+            { text: " " },
+            { text: "tučné ", bold: true },
+            { text: "kurzíva ", italic: true },
+            { text: "podtržení", underline: true },
+            { text: " kód", code: true },
+            { text: " " },
+            { text: "zvýraznění", highlight: true },
+        ],
+    },
+    {
+        type: "blockquote",
+        id: "imx33",
+        children: [{ text: "Toto je citace." }],
+    },
+    {
+        type: "ul",
+        id: "aq7rl",
+        children: [
+            {
+                type: "li",
+                id: "b8ljb",
+                children: [
+                    {
+                        type: "lic",
+                        id: "az5v2",
+                        children: [{ text: "Položka nečíslovaného seznamu" }],
+                    },
+                ],
+            },
+            {
+                type: "li",
+                id: "nq1e3",
+                children: [{ type: "lic", id: "dp5er", children: [{ text: "Druhá položka" }] }],
+            },
+        ],
+    },
+    {
+        type: "ol",
+        id: "hioy1",
+        children: [
+            {
+                type: "li",
+                id: "wm2vd",
+                children: [{ type: "lic", id: "q5ynx", children: [{ text: "Položka číslovaného seznamu" }] }],
+            },
+            {
+                type: "li",
+                id: "5qjr0",
+                children: [{ type: "lic", id: "8u41x", children: [{ text: "Druhá položka" }] }],
+            },
+        ],
+    },
+    {
+        type: "paragraph",
+        id: "9013p",
+        children: [
+            {
+                text: "Pokud vypneš nějaký plugin, zobrazení je nefunkční, ale v JSONu pořád je, protože je v initial values.",
+            },
+        ],
+    },
+];
+function Playground() {
+    const [value, setValue] = (0, react_1.useState)(exports.initialValue);
+    const plugins = (0, wysiwyg_1.createPluginsWithUi)([
+        (0, wysiwyg_1.createHeadingsPluginWithUi)({ disabledLevels: [1] }),
+        (0, wysiwyg_1.createBoldPluginWithUi)(),
+        (0, wysiwyg_1.createImagePluginWithUi)({
+            uploadImage: async (file) => ({
+                id: 1,
+                name: URL.createObjectURL(file),
+                extension: ".ext",
+                namespace: "wysiwyg",
+                uuid: "this-should-be-some-random-uuid",
+            }),
+            getImageUrl: (file) => file.name,
+        }),
+        (0, wysiwyg_1.createHighlightPluginWithUi)("red"),
+    ]);
+    const isMounted = (0, use_is_mounted_1.useIsMounted)();
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(wysiwyg_1.WysiwygEditor, { id: "editor", initialValue: exports.initialValue, onChange: setValue, plugins: plugins }),
+        react_1.default.createElement("div", { className: "relative mt-4" },
+            react_1.default.createElement("div", { "aria-hidden": "true", className: "absolute inset-0 flex items-center" },
+                react_1.default.createElement("div", { className: "w-full border-t border-gray-300" })),
+            react_1.default.createElement("div", { className: "relative flex justify-center" },
+                react_1.default.createElement("span", { className: "bg-white px-2 text-sm text-gray-500" }, "Value"))),
+        react_1.default.createElement(show_1.Show, { when: isMounted },
+            react_1.default.createElement("pre", null,
+                react_1.default.createElement("code", null, JSON.stringify(value, null, "    "))))));
+}
+function SelectedPlugins() {
+    const _initialValues = [
+        { type: "paragraph", id: "mnlt6", children: [{ text: "Použití pouze vybraných pluginů" }] },
+    ];
+    const [value, setValue] = (0, react_1.useState)(_initialValues);
+    const plugins = (0, wysiwyg_1.createPluginsWithUi)([
+        (0, wysiwyg_1.createHeadingsPluginWithUi)({ disabledLevels: [1] }),
+        (0, wysiwyg_1.createBoldPluginWithUi)(),
+        (0, wysiwyg_1.createImagePluginWithUi)({
+            uploadImage: async (file) => ({
+                id: 1,
+                name: URL.createObjectURL(file),
+                extension: ".ext",
+                namespace: "wysiwyg",
+                uuid: "this-should-be-some-random-uuid",
+            }),
+            getImageUrl: (file) => file.name,
+        }),
+        (0, wysiwyg_1.createHighlightPluginWithUi)("red"),
+    ]);
+    const isMounted = (0, use_is_mounted_1.useIsMounted)();
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(wysiwyg_1.WysiwygEditor, { id: "editor", initialValue: _initialValues, onChange: setValue, plugins: plugins }),
+        react_1.default.createElement("div", { className: "relative mt-4" },
+            react_1.default.createElement("div", { "aria-hidden": "true", className: "absolute inset-0 flex items-center" },
+                react_1.default.createElement("div", { className: "w-full border-t border-gray-300" })),
+            react_1.default.createElement("div", { className: "relative flex justify-center" },
+                react_1.default.createElement("span", { className: "bg-white px-2 text-sm text-gray-500" }, "Value"))),
+        react_1.default.createElement(show_1.Show, { when: isMounted },
+            react_1.default.createElement("pre", null,
+                react_1.default.createElement("code", null, JSON.stringify(value, null, "    "))))));
+}