@uxf/wysiwyg 11.129.0 → 11.130.1

package/README.md

@@ -1,6 +1,6 @@
 # @uxf/wysiwyg
 
-Rich-text / WYSIWYG editor for React, built on [Plate](https://plate.udecode.io) / [Slate](https://docs.slatejs.org). It ships a ready-made `WysiwygEditor` component, a toolbar, and a set of UXF-styled plugins (headings, marks, lists, links, images, videos, buttons, blockquote, highlight).
+Rich-text / WYSIWYG editor for React, built on [Plate](https://platejs.org) / [Slate](https://docs.slatejs.org). It ships a ready-made `WysiwygEditor` component, a toolbar, and a set of UXF-styled plugins (headings, marks, lists, links, images, videos, buttons, blockquote, highlight).
 
 ## When to use
 
@@ -17,11 +17,11 @@ yarn add @uxf/wysiwyg
 All Plate/Slate packages and the UXF packages are **peer dependencies** with pinned versions — install them at the versions declared in [`package.json`](./package.json):
 
 - UXF: `@uxf/core`, `@uxf/core-react`, `@uxf/ui`
-- Plate (`20.7.2`): `@udecode/plate-basic-marks`, `@udecode/plate-block-quote`, `@udecode/plate-break`, `@udecode/plate-code-block`, `@udecode/plate-common`, `@udecode/plate-core`, `@udecode/plate-floating`, `@udecode/plate-link`, `@udecode/plate-list`, `@udecode/plate-media`, `@udecode/plate-node-id`, `@udecode/plate-paragraph`, `@udecode/plate-reset-node`, `@udecode/plate-select`, `@udecode/plate-trailing-block`
-- Slate wrappers: `@udecode/slate` (`19.8.0`), `@udecode/slate-react` (`19.7.1`), `@udecode/slate-utils` (`19.7.1`)
-- Slate core: `slate` (`0.90.0`), `slate-history` (`0.86.0`), `slate-hyperscript` (`0.77.0`), `slate-react` (`0.91.11`)
+- Plate: `platejs` (`53.3.9`), `@platejs/basic-nodes` (`53.0.0`), `@platejs/floating` (`53.0.0`), `@platejs/link` (`53.3.5`), `@platejs/list-classic` (`53.0.0`), `@platejs/media` (`53.1.4`)
 - `react` / `react-dom` (`>=18.2.0`)
 
+`slate` and `slate-react` are deliberately **not** peer dependencies. Plate owns the whole Slate stack, and declaring them here made npm resolve a second physical copy of `slate-react` — two copies mean two React contexts and a silently broken `useSelected()`.
+
 ### Required CSS
 
 Import the published stylesheet once (e.g. in your global CSS):
@@ -125,7 +125,7 @@ Everything below is exported from the package root (`@uxf/wysiwyg`) unless a dee
 
 ### Plugin builders
 
-`createPluginsWithUi` / `createAllPluginsWithUi` return the `UxfPlatePlugin[]` you pass to `WysiwygEditor`. Both inject the base plugins automatically (paragraph, exit-break, reset-node, soft-break, node-id, select-on-backspace, trailing-block), so pass only the feature builders below — not raw Plate plugins.
+`createPluginsWithUi` / `createAllPluginsWithUi` return the `UxfPlatePlugin[]` you pass to `WysiwygEditor`. Both inject the base plugins automatically (paragraph, exit-break, node-id, trailing-block), so pass only the feature builders below — not raw Plate plugins.
 
 | Export                         | Signature                                                                                                                              | Notes                               |
 | ------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------- |
@@ -165,7 +165,9 @@ Everything below is exported from the package root (`@uxf/wysiwyg`) unless a dee
 
 `import { ... } from "@uxf/wysiwyg";` — thin, typed wrappers over Plate's editor hooks, bound to `WysiwygContent` / `UxfEditor`:
 
-`useUxfPlateEditorRef`, `useUxfEditorRef`, `useUxfEditorState`, `useUxfPlateEditorState`, `useUxfPlateSelectors`, `useUxfPlateActions`, `useUxfPlateStates`, and a re-export of `useSelected` (from `slate-react`).
+`useUxfPlateEditorRef`, `useUxfEditorRef`, `useUxfEditorState`, `useUxfPlateEditorState`, and re-exports of `useSelected` and `usePlateStore`.
+
+`useUxfPlateSelectors`, `useUxfPlateActions` and `useUxfPlateStates` still exist but return `unknown`: Plate 53 replaced the split selectors/actions/states store with a single store that these three cannot meaningfully wrap. Use the re-exported `usePlateStore` instead.
 
 ### Utilities
 
@@ -210,6 +212,6 @@ The full node model and editor types are re-exported, including: `WysiwygContent
 
 ## Links
 
-- [Plate documentation](https://plate.udecode.io) — the underlying editor framework.
+- [Plate documentation](https://platejs.org) — the underlying editor framework.
 - [Slate documentation](https://docs.slatejs.org) — the underlying document model.
 - Package homepage: [gitlab.com/uxf-npm/wysiwyg](https://gitlab.com/uxf-npm/wysiwyg)

package/create-all-plugins-with-ui.d.ts

@@ -3,37 +3,63 @@ import { HeadingsPluginOptions } from "./plugins/heading/create-headings-plugin"
 import { UxfImagePluginOptions } from "./plugins/image/types";
 import { ElementUiComponent } from "./types";
 export declare const createHeadingsPluginWithUi: (options?: HeadingsPluginOptions) => {
-    plugin: import("@udecode/plate-core").PlatePlugin<HeadingsPluginOptions, import("./types").WysiwygContent, import("@udecode/plate-core").PlateEditor<import("./types").WysiwygContent>>;
+    plugin: import("platejs/react").PlatePlugin<import("platejs").PluginConfig<"heading", {}, {}, {}, {}>>;
     components: {
         [key: string]: ElementUiComponent;
     };
 };
 export declare const createBlockquotePluginWithUi: () => {
-    plugin: import("@udecode/plate-core").PlatePlugin<import("@udecode/plate-core").HotkeyPlugin, import("./types").WysiwygContent, import("./types").UxfEditor>;
+    plugin: import("platejs/react").PlatePlugin<import("platejs").PluginConfig<"blockquote", {}, {}, {}, {}>>;
     component: ElementUiComponent;
 };
 export declare const createBoldPluginWithUi: () => {
-    plugin: import("@udecode/plate-core").PlatePlugin<import("@udecode/plate-core").ToggleMarkPlugin, import("./types").WysiwygContent, import("./types").UxfEditor>;
+    plugin: import("platejs/react").PlatePlugin<import("platejs").PluginConfig<"bold", {}, {}, Record<"bold", {
+        toggle: () => void;
+    }>, {}>>;
     component: import("./types").LeafUiComponent;
 };
 export declare const createHighlightPluginWithUi: (color?: CSSProperties["color"]) => {
-    plugin: import("@udecode/plate-core").PlatePlugin<import("./plugins/highlight/types").HighlightPluginOptions, import("./types").WysiwygContent, import("@udecode/plate-core").PlateEditor<import("./types").WysiwygContent>>;
-    component: import("react").FC<import("./plugins/highlight/types").HighlightLeafElementProps>;
+    plugin: import("platejs/react").PlatePlugin<import("platejs").PluginConfig<"highlight", {
+        color: import("csstype").Property.Color;
+    }, {}, {}, {}>>;
+    component: import("./types").LeafUiComponent;
 };
 export declare const createItalicPluginWithUi: () => {
-    plugin: import("@udecode/plate-core").PlatePlugin<import("@udecode/plate-core").ToggleMarkPlugin, import("./types").WysiwygContent, import("./types").UxfEditor>;
+    plugin: import("platejs/react").PlatePlugin<import("platejs").PluginConfig<"italic", {}, {}, Record<"italic", {
+        toggle: () => void;
+    }>, {}>>;
     component: ElementUiComponent;
 };
 export declare const createUnderlinePluginWithUi: () => {
-    plugin: import("@udecode/plate-core").PlatePlugin<import("@udecode/plate-core").ToggleMarkPlugin, import("./types").WysiwygContent, import("./types").UxfEditor>;
+    plugin: import("platejs/react").PlatePlugin<import("platejs").PluginConfig<"underline", {}, {}, Record<"underline", {
+        toggle: () => void;
+    }>, {}>>;
     component: import("./types").LeafUiComponent;
 };
 export declare const createCodePluginWithUi: () => {
-    plugin: import("@udecode/plate-core").PlatePlugin<import("@udecode/plate-core").ToggleMarkPlugin, import("./types").WysiwygContent, import("./types").UxfEditor>;
+    plugin: import("platejs/react").PlatePlugin<import("platejs").PluginConfig<"code", {}, {}, Record<"code", {
+        toggle: () => void;
+    }>, {}>>;
     component: import("./types").LeafUiComponent;
 };
 export declare const createListPluginWithUi: () => {
-    plugin: import("./types").UxfPlatePlugin<import("@udecode/plate-list").ListPlugin>;
+    plugin: import("platejs/react").PlatePlugin<import("platejs").PluginConfig<"listClassic", {
+        enableResetOnShiftTab?: boolean;
+        inheritCheckStateOnLineEndBreak?: boolean;
+        inheritCheckStateOnLineStartBreak?: boolean;
+        validLiChildrenTypes?: string[];
+    }, {}, {
+        toggle: {
+            bulletedList: (() => boolean) & (() => boolean);
+            list: ((args_0: {
+                type: string;
+            }) => boolean) & ((args_0: {
+                type: string;
+            }) => boolean);
+            numberedList: (() => boolean) & (() => boolean);
+            taskList: ((defaultChecked?: boolean | undefined) => boolean) & ((defaultChecked?: boolean | undefined) => boolean);
+        };
+    }, {}>>;
     components: {
         ul: ElementUiComponent;
         ol: ElementUiComponent;
@@ -41,19 +67,57 @@ export declare const createListPluginWithUi: () => {
     };
 };
 export declare const createLinkPluginWithUi: () => {
-    plugin: import("./types").UxfPlatePlugin<import("@udecode/plate-link").LinkPlugin>;
+    plugin: import("platejs/react").PlatePlugin<import("platejs").PluginConfig<"a", {
+        allowedSchemes?: string[];
+        dangerouslySkipSanitization?: boolean;
+        defaultLinkAttributes?: React.AnchorHTMLAttributes<HTMLAnchorElement>;
+        forceSubmit?: boolean;
+        keepSelectedTextOnPaste?: boolean;
+        rangeBeforeOptions?: import("platejs").EditorBeforeOptions;
+        triggerFloatingLinkHotkeys?: string[] | string;
+        getLinkUrl?: (prevUrl: string | null) => Promise<string | null>;
+        getUrlHref?: (url: string) => string | undefined;
+        isUrl?: (text: string) => boolean;
+        transformInput?: (url: string) => string | undefined;
+    } & {
+        isEditing: boolean;
+        mode: import("@platejs/link/react").FloatingLinkMode;
+        mouseDown: boolean;
+        newTab: boolean;
+        openEditorId: string | null;
+        text: string;
+        updated: boolean;
+        url: string;
+        triggerFloatingLinkHotkeys?: string;
+    }, {
+        floatingLink: {
+            hide: () => void;
+            reset: () => void;
+            show: (mode: import("@platejs/link/react").FloatingLinkMode, editorId: string) => void;
+        };
+        link: {
+            getAttributes: import("platejs").OmitFirst<(editor: import("platejs").SlateEditor, link: import("platejs").TLinkElement) => Pick<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, "href" | "target"> & import("platejs").UnknownObject>;
+        };
+    }, {}, {
+        isOpen?: (editorId: string) => boolean;
+    }>>;
     component: ElementUiComponent;
 };
 export declare const createImagePluginWithUi: (options: UxfImagePluginOptions) => {
-    plugin: import("@udecode/plate-core").PlatePlugin<UxfImagePluginOptions, import("./types").WysiwygContent, import("@udecode/plate-core").PlateEditor<import("./types").WysiwygContent>>;
+    plugin: import("platejs/react").PlatePlugin<import("platejs").PluginConfig<"img", UxfImagePluginOptions, {}, {}, {}>>;
     component: ElementUiComponent;
 };
 export declare const createVideoPluginWithUi: () => {
-    plugin: import("@udecode/plate-core").PlatePlugin<import("@udecode/plate-media").MediaPlugin, import("./types").WysiwygContent, import("@udecode/plate-core").PlateEditor<import("./types").WysiwygContent>>;
+    plugin: import("platejs/react").PlatePlugin<import("platejs").PluginConfig<"video", {
+        rules: {
+            parser: (url: string) => import("@platejs/media").EmbedUrlData | undefined;
+        }[];
+        transformUrl: (url: string) => string;
+    }, {}, {}, {}>>;
     component: ElementUiComponent;
 };
 export declare const createButtonPluginWithUi: () => {
-    plugin: import("@udecode/plate-core").PlatePlugin<import("@udecode/utils").AnyObject, import("./types").WysiwygContent, import("@udecode/plate-core").PlateEditor<import("./types").WysiwygContent>>;
+    plugin: import("platejs/react").PlatePlugin<import("platejs").PluginConfig<"button", {}, {}, {}, {}>>;
     component: ElementUiComponent;
 };
 export interface CreateAllPluginsOptions {
@@ -61,4 +125,4 @@ export interface CreateAllPluginsOptions {
     headings?: HeadingsPluginOptions;
     highlightColor?: CSSProperties["color"];
 }
-export declare const createAllPluginsWithUi: (options: CreateAllPluginsOptions) => import("./types").UxfPlatePlugin[];
+export declare const createAllPluginsWithUi: (options: CreateAllPluginsOptions) => import("platejs/react").AnyPlatePlugin[];

package/create-all-plugins-with-ui.js

@@ -94,19 +94,17 @@ const createLinkPluginWithUi = () => ({
 });
 exports.createLinkPluginWithUi = createLinkPluginWithUi;
 const createImagePluginWithUi = (options) => ({
-    plugin: (0, create_image_plugin_1.createImagePlugin)({
-        options,
-    }),
+    plugin: create_image_plugin_1.createImagePlugin.configure({ options }),
     component: image_element_1.ImageElement,
 });
 exports.createImagePluginWithUi = createImagePluginWithUi;
 const createVideoPluginWithUi = () => ({
-    plugin: (0, create_video_plugin_1.createVideoPlugin)(),
+    plugin: create_video_plugin_1.createVideoPlugin,
     component: video_element_1.VideoElement,
 });
 exports.createVideoPluginWithUi = createVideoPluginWithUi;
 const createButtonPluginWithUi = () => ({
-    plugin: (0, button_1.createButtonPlugin)(),
+    plugin: button_1.createButtonPlugin,
     component: button_2.ButtonElement,
 });
 exports.createButtonPluginWithUi = createButtonPluginWithUi;

package/create-plugins-with-ui.d.ts

@@ -1,4 +1,4 @@
-import { MyOverrideByKey, UxfPlatePlugin, WysiwygPlugin, WysiwygRecursivePlugin } from "./types";
+import { AnyWysiwygPlatePlugin, MyOverrideByKey, WysiwygPlugin, WysiwygRecursivePlugin } from "./types";
 export declare const createPluginsWithUi: (wysiwygPlugins: Array<WysiwygPlugin | WysiwygRecursivePlugin<string>>, options?: {
     overrideByKey?: MyOverrideByKey;
-}) => UxfPlatePlugin[];
+}) => AnyWysiwygPlatePlugin[];

package/create-plugins-with-ui.js

@@ -1,48 +1,43 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createPluginsWithUi = void 0;
-const plate_core_1 = require("@udecode/plate-core");
+const platejs_1 = require("platejs");
 const create_exit_break_plugin_1 = require("./plugins/exit-break/create-exit-break-plugin");
 const create_node_id_plugin_1 = require("./plugins/node-id/create-node-id-plugin");
 const create_paragraph_plugin_1 = require("./plugins/paragraph/create-paragraph-plugin");
-const types_1 = require("./plugins/paragraph/types");
-const create_reset_node_1 = require("./plugins/reset-node/create-reset-node");
-const create_select_on_backspace_plugin_1 = require("./plugins/select-on-backspace/create-select-on-backspace-plugin");
-const create_soft_break_plugin_1 = require("./plugins/soft-break/create-soft-break-plugin");
 const create_trailing_block_plugin_1 = require("./plugins/trailing-block/create-trailing-block-plugin");
 const paragraph_element_1 = require("./ui/paragraph-element");
 function isRecursivePlugin(plugin) {
     // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
     return plugin.components !== undefined;
 }
+/**
+ * The one place that overrides a plugin by key, which is the only way to reach a wrapper plugin's
+ * children (headings, lists). Plate declares `overridePluginsByKey` for headless plugins only and
+ * ships no React counterpart, so the double cast is the library's typing, not a shortcut: a React
+ * plugin is a superset at runtime and Plate's own code overrides them the same way.
+ */
+function overrideByKey(plugin, byKey) {
+    const override = platejs_1.overridePluginsByKey;
+    return override(plugin, byKey, true);
+}
+/** Flat plugins use `withComponent`; only the wrapper ones need the key-based override. */
+function withNestedComponents(plugin, components) {
+    return overrideByKey(plugin, Object.fromEntries(Object.entries(components).map(([key, component]) => [key, { node: { component } }])));
+}
 const createPluginsWithUi = (wysiwygPlugins, options) => {
-    const plugins = wysiwygPlugins.map((p) => p.plugin);
-    const pluginComponents = {
-        [types_1.PARAGRAPH_PLUGIN_KEY]: paragraph_element_1.ParagraphElement,
-    };
-    wysiwygPlugins.forEach((p) => {
-        if (isRecursivePlugin(p)) {
-            Object.keys(p.components).forEach((componentKey) => {
-                pluginComponents[componentKey] = p.components[componentKey];
-            });
-        }
-        else {
-            pluginComponents[p.plugin.key] = p.component;
-        }
-    });
-    return (0, plate_core_1.createPlugins)([
-        (0, create_paragraph_plugin_1.createParagraphPlugin)(),
+    const withUi = wysiwygPlugins.map((p) => isRecursivePlugin(p) ? withNestedComponents(p.plugin, p.components) : p.plugin.withComponent(p.component));
+    const plugins = [
+        (0, create_paragraph_plugin_1.createParagraphPlugin)().withComponent(paragraph_element_1.ParagraphElement),
         (0, create_exit_break_plugin_1.createExitBreakPlugin)(),
-        (0, create_reset_node_1.createResetNodePlugin)(),
-        (0, create_soft_break_plugin_1.createSoftBreakPlugin)(),
         (0, create_node_id_plugin_1.createNodeIdPlugin)(),
-        (0, create_select_on_backspace_plugin_1.createSelectOnBackspacePlugin)(),
         (0, create_trailing_block_plugin_1.createTrailingBlockPlugin)(),
-        ...plugins,
-    ], {
-        ...options,
-        // eslint-disable-next-line no-restricted-syntax
-        components: pluginComponents /* TODO: fix this type mismatch */,
-    });
+        ...withUi,
+    ];
+    const byKey = options === null || options === void 0 ? void 0 : options.overrideByKey;
+    if (!byKey) {
+        return plugins;
+    }
+    return plugins.map((plugin) => overrideByKey(plugin, byKey));
 };
 exports.createPluginsWithUi = createPluginsWithUi;

package/data-format.test.d.ts

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

package/data-format.test.js

@@ -0,0 +1,132 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const platejs_1 = require("platejs");
+const create_all_plugins_with_ui_1 = require("./create-all-plugins-with-ui");
+const FILE = { extension: ".png", id: 1, name: "a.png", namespace: "wysiwyg", uuid: "u" };
+/**
+ * Every node type and mark the stored format contains. Ids and the trailing empty paragraph are
+ * present because the node-id and trailing-block plugins would otherwise add them.
+ */
+const FIXTURE = [
+    { children: [{ text: "Nadpis" }], id: "a1", type: "h1" },
+    { children: [{ text: "H2" }], id: "a2", type: "h2" },
+    { children: [{ text: "H3" }], id: "a3", type: "h3" },
+    { children: [{ text: "H4" }], id: "a4", type: "h4" },
+    { children: [{ text: "H5" }], id: "a5", type: "h5" },
+    { children: [{ text: "H6" }], id: "a6", type: "h6" },
+    {
+        children: [{ bold: true, text: "tučně" }, { text: " a " }, { italic: true, text: "kurzíva" }],
+        id: "a7",
+        type: "paragraph",
+    },
+    {
+        children: [
+            { text: "podtržené", underline: true },
+            { code: true, text: "kód" },
+            { highlight: true, text: "zvýrazněné" },
+        ],
+        id: "a8",
+        type: "paragraph",
+    },
+    { children: [{ text: "citace" }], id: "a9", type: "blockquote" },
+    {
+        children: [{ children: [{ children: [{ text: "položka" }], id: "a12", type: "lic" }], id: "a11", type: "li" }],
+        id: "a10",
+        type: "ul",
+    },
+    {
+        children: [{ children: [{ children: [{ text: "první" }], id: "a15", type: "lic" }], id: "a14", type: "li" }],
+        id: "a13",
+        type: "ol",
+    },
+    {
+        children: [
+            { text: "" },
+            {
+                children: [{ text: "odkaz" }],
+                id: "a17",
+                target: "_blank",
+                type: "link",
+                url: "https://uxf.cz",
+            },
+            { text: "" },
+        ],
+        id: "a16",
+        type: "paragraph",
+    },
+    {
+        alt: "alt",
+        caption: "popisek",
+        children: [{ text: "" }],
+        file: FILE,
+        id: "a18",
+        source: "zdroj",
+        type: "image",
+        url: "https://example.test/a.png",
+    },
+    {
+        children: [{ text: "" }],
+        embeddedUrl: "https://www.youtube.com/embed/x",
+        id: "a19",
+        metaData: null,
+        provider: "youtube",
+        type: "video",
+        url: "https://youtu.be/x",
+        videoId: "x",
+    },
+    {
+        buttonText: "klik",
+        buttonUrl: "https://uxf.cz",
+        children: [{ text: "" }],
+        id: "a20",
+        type: "button",
+    },
+    { children: [{ text: "" }], id: "a21", type: "paragraph" },
+];
+describe("stored data format", () => {
+    it("survives a normalising round trip unchanged", () => {
+        const editor = (0, platejs_1.createSlateEditor)({
+            plugins: (0, create_all_plugins_with_ui_1.createAllPluginsWithUi)({
+                image: { getImageUrl: (file) => file.name, uploadImage: async () => FILE },
+            }),
+            shouldNormalizeEditor: true,
+            value: FIXTURE,
+        });
+        expect(editor.children).toEqual(FIXTURE);
+    });
+    it("registers every stored node type and no others", () => {
+        const editor = (0, platejs_1.createSlateEditor)({
+            plugins: (0, create_all_plugins_with_ui_1.createAllPluginsWithUi)({
+                image: { getImageUrl: (file) => file.name, uploadImage: async () => FILE },
+            }),
+        });
+        const storedTypes = [
+            "paragraph",
+            "blockquote",
+            "h1",
+            "h2",
+            "h3",
+            "h4",
+            "h5",
+            "h6",
+            "ul",
+            "ol",
+            "li",
+            "lic",
+            "link",
+            "image",
+            "video",
+            "button",
+            "bold",
+            "italic",
+            "underline",
+            "code",
+            "highlight",
+        ];
+        const registeredTypes = Object.values(editor.plugins)
+            .map((plugin) => plugin.node.type)
+            .filter((type) => Boolean(type));
+        expect(storedTypes.filter((type) => !registeredTypes.includes(type))).toEqual([]);
+        expect(registeredTypes).not.toContain("taskList");
+    });
+});

package/editor-smoke.test.d.ts

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

package/editor-smoke.test.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const platejs_1 = require("platejs");
+describe("platejs runs under this jest config", () => {
+    it("creates a working editor", () => {
+        const editor = (0, platejs_1.createSlateEditor)({ plugins: [], value: [{ children: [{ text: "ahoj" }], type: "p" }] });
+        expect(editor.api.string([])).toBe("ahoj");
+    });
+});