@uxf/wysiwyg 11.129.0 → 11.130.0

package/hooks.js

@@ -1,20 +1,27 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useSelected = exports.useUxfPlateStates = exports.useUxfPlateActions = exports.useUxfPlateSelectors = exports.useUxfPlateEditorState = exports.useUxfEditorState = exports.useUxfEditorRef = exports.useUxfPlateEditorRef = void 0;
-const plate_core_1 = require("@udecode/plate-core");
-const useUxfPlateEditorRef = (id) => (0, plate_core_1.usePlateEditorRef)(id);
+exports.useSelected = exports.usePlateStore = exports.useUxfPlateStates = exports.useUxfPlateActions = exports.useUxfPlateSelectors = exports.useUxfPlateEditorState = exports.useUxfEditorState = exports.useUxfEditorRef = exports.useUxfPlateEditorRef = void 0;
+const react_1 = require("platejs/react");
+const useUxfPlateEditorRef = (id) => (0, react_1.useEditorRef)((0, react_1.useEventPlateId)(id));
 exports.useUxfPlateEditorRef = useUxfPlateEditorRef;
-const useUxfEditorRef = () => (0, plate_core_1.useEditorRef)();
+const useUxfEditorRef = () => (0, react_1.useEditorRef)();
 exports.useUxfEditorRef = useUxfEditorRef;
-const useUxfEditorState = () => (0, plate_core_1.useEditorState)();
+const useUxfEditorState = () => (0, react_1.useEditorState)();
 exports.useUxfEditorState = useUxfEditorState;
-const useUxfPlateEditorState = (id) => (0, plate_core_1.usePlateEditorState)((0, plate_core_1.useEventPlateId)(id));
+const useUxfPlateEditorState = (id) => (0, react_1.useEditorState)((0, react_1.useEventPlateId)(id));
 exports.useUxfPlateEditorState = useUxfPlateEditorState;
-const useUxfPlateSelectors = (id) => (0, plate_core_1.usePlateSelectors)(id);
+/**
+ * Plate 53 merged the split selectors/actions/states store into one, so these three cannot honour
+ * their old contract; they keep their names and hand back that store. `unknown` because naming its
+ * type would emit a `.d.ts` pointing into `@platejs/core/node_modules` (TS2883) – use the re-exported
+ * `usePlateStore` instead. Nothing in the monorepo consumes them.
+ */
+const useUxfPlateSelectors = (id) => (0, react_1.usePlateStore)(id);
 exports.useUxfPlateSelectors = useUxfPlateSelectors;
-const useUxfPlateActions = (id) => (0, plate_core_1.usePlateActions)(id);
+const useUxfPlateActions = (id) => (0, react_1.usePlateStore)(id);
 exports.useUxfPlateActions = useUxfPlateActions;
-const useUxfPlateStates = (id) => (0, plate_core_1.usePlateStates)(id);
+const useUxfPlateStates = (id) => (0, react_1.usePlateStore)(id);
 exports.useUxfPlateStates = useUxfPlateStates;
-var slate_react_1 = require("slate-react");
-Object.defineProperty(exports, "useSelected", { enumerable: true, get: function () { return slate_react_1.useSelected; } });
+var react_2 = require("platejs/react");
+Object.defineProperty(exports, "usePlateStore", { enumerable: true, get: function () { return react_2.usePlateStore; } });
+Object.defineProperty(exports, "useSelected", { enumerable: true, get: function () { return react_2.useSelected; } });

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@uxf/wysiwyg",
-    "version": "11.129.0",
+    "version": "11.130.0",
     "description": "UXF Wysiwyg editor",
     "author": "Robin Dvorak <dvorak@uxf.cz>",
     "homepage": "https://gitlab.com/uxf-npm/wysiwyg",
@@ -13,63 +13,31 @@
         "typecheck": "tsc --noEmit"
     },
     "peerDependencies": {
-        "@udecode/plate-basic-marks": "20.7.2",
-        "@udecode/plate-block-quote": "20.7.2",
-        "@udecode/plate-break": "20.7.2",
-        "@udecode/plate-code-block": "20.7.2",
-        "@udecode/plate-common": "20.7.2",
-        "@udecode/plate-core": "20.7.2",
-        "@udecode/plate-floating": "20.7.2",
-        "@udecode/plate-link": "20.7.2",
-        "@udecode/plate-list": "20.7.2",
-        "@udecode/plate-media": "20.7.2",
-        "@udecode/plate-node-id": "20.7.2",
-        "@udecode/plate-paragraph": "20.7.2",
-        "@udecode/plate-reset-node": "20.7.2",
-        "@udecode/plate-select": "20.7.2",
-        "@udecode/plate-trailing-block": "20.7.2",
-        "@udecode/slate": "19.8.0",
-        "@udecode/slate-react": "19.7.1",
-        "@udecode/slate-utils": "19.7.1",
+        "@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",
         "@uxf/core": "11.129.0",
         "@uxf/core-react": "11.129.0",
         "@uxf/ui": "11.129.0",
+        "platejs": "53.3.9",
         "react": ">=18.2.0",
-        "react-dom": ">=18.2.0",
-        "slate": "0.90.0",
-        "slate-history": "0.86.0",
-        "slate-hyperscript": "0.77.0",
-        "slate-react": "0.91.11"
+        "react-dom": ">=18.2.0"
     },
     "devDependencies": {
+        "@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",
         "@types/react": "18.3.31",
         "@types/react-dom": "18.3.7",
-        "@udecode/plate-basic-marks": "20.7.2",
-        "@udecode/plate-block-quote": "20.7.2",
-        "@udecode/plate-break": "20.7.2",
-        "@udecode/plate-code-block": "20.7.2",
-        "@udecode/plate-common": "20.7.2",
-        "@udecode/plate-core": "20.7.2",
-        "@udecode/plate-floating": "20.7.2",
-        "@udecode/plate-link": "20.7.2",
-        "@udecode/plate-list": "20.7.2",
-        "@udecode/plate-media": "20.7.2",
-        "@udecode/plate-node-id": "20.7.2",
-        "@udecode/plate-paragraph": "20.7.2",
-        "@udecode/plate-reset-node": "20.7.2",
-        "@udecode/plate-select": "20.7.2",
-        "@udecode/plate-trailing-block": "20.7.2",
-        "@udecode/slate": "19.8.0",
-        "@udecode/slate-react": "19.7.1",
-        "@udecode/slate-utils": "19.7.1",
         "@uxf/core": "11.129.0",
         "@uxf/core-react": "11.129.0",
         "@uxf/ui": "11.129.0",
+        "platejs": "53.3.9",
         "react": "18.3.1",
-        "react-dom": "18.3.1",
-        "slate": "0.90.0",
-        "slate-history": "0.86.0",
-        "slate-hyperscript": "0.77.0",
-        "slate-react": "0.91.11"
+        "react-dom": "18.3.1"
     }
 }

package/plugins/blockquote/create-blockquote-plugin.d.ts

@@ -1,3 +1,9 @@
-import { HotkeyPlugin } from "@udecode/plate-core";
-import { UxfEditor, WysiwygContent } from "../../types";
-export declare const createBlockquotePlugin: () => import("@udecode/plate-core").PlatePlugin<HotkeyPlugin, WysiwygContent, UxfEditor>;
+/**
+ * Hand-built, not Plate's `BlockquotePlugin`: that one treats a quote as a container of blocks and
+ * normalizes `blockquote > text` into `blockquote > paragraph > text`, rewriting every stored quote.
+ * The wrapping lives in an `overrideEditor` and cannot be configured away.
+ *
+ * `delete.start` and the hotkey replace plugins Plate 53 dropped. Why each is what it is:
+ * docs/decisions/wysiwyg-plate-53-migration.md.
+ */
+export declare const createBlockquotePlugin: () => import("platejs/react").PlatePlugin<import("platejs").PluginConfig<"blockquote", {}, {}, {}, {}>>;

package/plugins/blockquote/create-blockquote-plugin.js

@@ -1,9 +1,37 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createBlockquotePlugin = void 0;
-const plate_block_quote_1 = require("@udecode/plate-block-quote");
+const platejs_1 = require("platejs");
+const react_1 = require("platejs/react");
 const types_1 = require("./types");
-const createBlockquotePlugin = () => (0, plate_block_quote_1.createBlockquotePlugin)({
-    type: types_1.BLOCKQUOTE_PLUGIN_TYPE,
+/**
+ * Hand-built, not Plate's `BlockquotePlugin`: that one treats a quote as a container of blocks and
+ * normalizes `blockquote > text` into `blockquote > paragraph > text`, rewriting every stored quote.
+ * The wrapping lives in an `overrideEditor` and cannot be configured away.
+ *
+ * `delete.start` and the hotkey replace plugins Plate 53 dropped. Why each is what it is:
+ * docs/decisions/wysiwyg-plate-53-migration.md.
+ */
+const createBlockquotePlugin = () => (0, react_1.createPlatePlugin)({
+    key: platejs_1.KEYS.blockquote,
+    node: { isElement: true, type: types_1.BLOCKQUOTE_PLUGIN_TYPE },
+    parsers: { html: { deserializer: { rules: [{ validNodeName: "BLOCKQUOTE" }] } } },
+    rules: {
+        // Enter splits the quote and a second Enter on the empty line leaves it, as every editor
+        // does. Plate 20 inserted a literal "\n" here and never let Enter out of a quote at all,
+        // which was an accident of matching a plugin key against a node type, not a decision.
+        // shift+enter still soft-breaks, from slate-react's own hotkey table.
+        break: { empty: "reset" },
+        delete: { start: "reset" },
+    },
+    shortcuts: {
+        toggle: {
+            handler: ({ editor }) => {
+                editor.tf.toggleBlock(types_1.BLOCKQUOTE_PLUGIN_TYPE);
+                return true;
+            },
+            keys: "mod+shift+.",
+        },
+    },
 });
 exports.createBlockquotePlugin = createBlockquotePlugin;

package/plugins/blockquote/create-blockquote-plugin.test.d.ts

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

package/plugins/blockquote/create-blockquote-plugin.test.js

@@ -0,0 +1,55 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const platejs_1 = require("platejs");
+const create_paragraph_plugin_1 = require("../paragraph/create-paragraph-plugin");
+const create_blockquote_plugin_1 = require("./create-blockquote-plugin");
+function editor(value) {
+    return (0, platejs_1.createSlateEditor)({
+        plugins: [(0, create_paragraph_plugin_1.createParagraphPlugin)(), (0, create_blockquote_plugin_1.createBlockquotePlugin)()],
+        value,
+    });
+}
+describe("blockquote", () => {
+    it("keeps the stored node type", () => {
+        expect(editor([]).plugins.blockquote.node.type).toBe("blockquote");
+    });
+    // Why the plugin is hand-built: Plate's own quote normalizes inline children into a paragraph,
+    // rewriting every stored quote. Swapping back to `BlockquotePlugin` makes this fail.
+    it("does not wrap inline children in a paragraph on normalisation", () => {
+        const e = (0, platejs_1.createSlateEditor)({
+            plugins: [(0, create_paragraph_plugin_1.createParagraphPlugin)(), (0, create_blockquote_plugin_1.createBlockquotePlugin)()],
+            shouldNormalizeEditor: true,
+            value: [{ children: [{ text: "citace" }], type: "blockquote" }],
+        });
+        expect(e.children[0].children).toEqual([{ text: "citace" }]);
+    });
+    // @udecode/plate-block-quote@20.7.2 defaulted to mod+shift+. ; Plate 53 ships no quote shortcut.
+    it("keeps the mod+shift+. hotkey", () => {
+        var _a;
+        expect((_a = editor([]).plugins.blockquote.shortcuts.toggle) === null || _a === void 0 ? void 0 : _a.keys).toBe("mod+shift+.");
+    });
+    // Plate 20 inserted a literal "\n" and never let Enter out of a quote. Deliberately changed.
+    it("splits the quote on Enter", () => {
+        const e = editor([{ children: [{ text: "citace" }], type: "blockquote" }]);
+        e.tf.select({ offset: 6, path: [0, 0] });
+        e.tf.insertBreak();
+        expect(e.children.map((node) => node.type)).toEqual(["blockquote", "blockquote"]);
+        expect(e.api.string([0])).toBe("citace");
+    });
+    // The empty line becomes a paragraph in place, leaving no stray quote behind. "lift" is a no-op
+    // for a top-level quote and "exit" strands the empty one, so neither would do.
+    it("leaves the quote on a second Enter, on the now empty line", () => {
+        const e = editor([{ children: [{ text: "" }], type: "blockquote" }]);
+        e.tf.select({ offset: 0, path: [0, 0] });
+        e.tf.insertBreak();
+        expect(e.children.map((node) => node.type)).toEqual(["paragraph"]);
+    });
+    // The one approved deviation: the old rule reset to "p", which nothing registers.
+    it("resets a quote to a paragraph on Backspace at its start", () => {
+        const e = editor([{ children: [{ text: "citace" }], type: "blockquote" }]);
+        e.tf.select({ offset: 0, path: [0, 0] });
+        e.tf.deleteBackward("character");
+        expect(e.children.map((node) => node.type)).toEqual(["paragraph"]);
+        expect(e.api.string([0])).toBe("citace");
+    });
+});

package/plugins/blockquote/types.d.ts

@@ -1,2 +1,2 @@
-export declare const BLOCKQUOTE_PLUGIN_KEY = "blockquote";
+export declare const BLOCKQUOTE_PLUGIN_KEY: "blockquote";
 export declare const BLOCKQUOTE_PLUGIN_TYPE = "blockquote";

package/plugins/blockquote/types.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.BLOCKQUOTE_PLUGIN_TYPE = exports.BLOCKQUOTE_PLUGIN_KEY = void 0;
-const plate_block_quote_1 = require("@udecode/plate-block-quote");
-exports.BLOCKQUOTE_PLUGIN_KEY = plate_block_quote_1.ELEMENT_BLOCKQUOTE;
+const platejs_1 = require("platejs");
+exports.BLOCKQUOTE_PLUGIN_KEY = platejs_1.KEYS.blockquote;
 exports.BLOCKQUOTE_PLUGIN_TYPE = "blockquote";

package/plugins/button/create-button-plugin.d.ts

@@ -1,2 +1 @@
-import { WysiwygContent } from "../../types";
-export declare const createButtonPlugin: <OP = import("@udecode/utils").AnyObject, OV extends import("@udecode/slate").Value = WysiwygContent, OE extends import("@udecode/plate-core").PlateEditor<OV> = import("@udecode/plate-core").PlateEditor<OV>>(override?: Partial<import("@udecode/plate-core").PlatePlugin<import("@udecode/plate-core").NoInfer<OP>, OV, OE>> | undefined, overrideByKey?: import("@udecode/plate-core").OverrideByKey<OV, OE> | undefined) => import("@udecode/plate-core").PlatePlugin<import("@udecode/plate-core").NoInfer<OP>, OV, OE>;
+export declare const createButtonPlugin: import("platejs/react").PlatePlugin<import("platejs").PluginConfig<"button", {}, {}, {}, {}>>;

package/plugins/button/create-button-plugin.js

@@ -1,11 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createButtonPlugin = void 0;
-const plate_core_1 = require("@udecode/plate-core");
+const react_1 = require("platejs/react");
 const constants_1 = require("./constants");
-exports.createButtonPlugin = (0, plate_core_1.createPluginFactory)({
+exports.createButtonPlugin = (0, react_1.createPlatePlugin)({
     key: constants_1.PLUGIN_BUTTON_KEY,
-    type: constants_1.PLUGIN_BUTTON_TYPE,
-    isElement: true,
-    isVoid: true,
+    node: { isElement: true, isVoid: true, type: constants_1.PLUGIN_BUTTON_TYPE },
 });

package/plugins/button/transforms/is-button-active.js

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.isButtonActive = void 0;
-const plate_common_1 = require("@udecode/plate-common");
 const get_active_button_1 = require("./get-active-button");
-const isButtonActive = (editor) => Boolean((0, get_active_button_1.getActiveButton)(editor) && (0, plate_common_1.isRangeInSameBlock)(editor));
+const isButtonActive = (editor) => Boolean((0, get_active_button_1.getActiveButton)(editor) && editor.api.isAt({ block: true }));
 exports.isButtonActive = isButtonActive;

package/plugins/button/transforms/update-button.js

@@ -1,8 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.updateButton = void 0;
-const plate_common_1 = require("@udecode/plate-common");
-const updateButton = (editor, buttonText, buttonUrl) => (0, plate_common_1.setNodes)(editor, {
+const updateButton = (editor, buttonText, buttonUrl) => editor.tf.setNodes({
     buttonText,
     buttonUrl,
 });

package/plugins/constants.test.d.ts

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

package/plugins/constants.test.js

@@ -0,0 +1,52 @@
+"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 types_1 = require("./blockquote/types");
+const constants_1 = require("./button/constants");
+const create_video_plugin_1 = require("./embedded/video/create-video-plugin");
+const constants_2 = require("./heading/constants");
+const types_2 = require("./highlight/types");
+const types_3 = require("./image/types");
+const constants_3 = require("./link/constants");
+const constants_4 = require("./list/constants");
+const types_4 = require("./mark-bold/types");
+const types_5 = require("./mark-code/types");
+const types_6 = require("./mark-italic/types");
+const types_7 = require("./mark-underline/types");
+const types_8 = require("./paragraph/types");
+const FILE = { extension: ".png", id: 1, name: "a.png", namespace: "wysiwyg", uuid: "u" };
+const editor = (0, platejs_1.createSlateEditor)({
+    plugins: (0, create_all_plugins_with_ui_1.createAllPluginsWithUi)({
+        image: { getImageUrl: (file) => file.name, uploadImage: async () => FILE },
+    }),
+});
+/**
+ * Guards the bug that took a browser to find: `ELEMENT_UL` read from `KEYS.ul` is "disc", so the
+ * toolbar silently dropped its list group while the elements kept rendering.
+ */
+describe("exported plugin key constants", () => {
+    it.each([
+        ["PARAGRAPH_PLUGIN_KEY", types_8.PARAGRAPH_PLUGIN_KEY],
+        ["BLOCKQUOTE_PLUGIN_KEY", types_1.BLOCKQUOTE_PLUGIN_KEY],
+        ["BOLD_PLUGIN_KEY", types_4.BOLD_PLUGIN_KEY],
+        ["ITALIC_PLUGIN_KEY", types_6.ITALIC_PLUGIN_KEY],
+        ["UNDER_LINE_PLUGIN_KEY", types_7.UNDER_LINE_PLUGIN_KEY],
+        ["CODE_PLUGIN_KEY", types_5.CODE_PLUGIN_KEY],
+        ["HIGHLIGHT_PLUGIN_KEY", types_2.HIGHLIGHT_PLUGIN_KEY],
+        ["ELEMENT_LINK", constants_3.ELEMENT_LINK],
+        ["IMAGE_PLUGIN_KEY", types_3.IMAGE_PLUGIN_KEY],
+        ["ELEMENT_VIDEO_EMBED", create_video_plugin_1.ELEMENT_VIDEO_EMBED],
+        ["PLUGIN_BUTTON_KEY", constants_1.PLUGIN_BUTTON_KEY],
+        ["ELEMENT_UL", constants_4.ELEMENT_UL],
+        ["ELEMENT_OL", constants_4.ELEMENT_OL],
+        ["ELEMENT_LI", constants_4.ELEMENT_LI],
+        ["ELEMENT_LIC", constants_4.ELEMENT_LIC],
+        ...constants_2.KEYS_HEADING.map((key) => [`KEYS_HEADING ${key}`, key]),
+    ])("%s addresses a registered plugin", (_name, key) => {
+        expect(editor.plugins[key]).toBeDefined();
+    });
+    it("keeps the list keys as the stored element names", () => {
+        expect([constants_4.ELEMENT_UL, constants_4.ELEMENT_OL, constants_4.ELEMENT_LI, constants_4.ELEMENT_LIC]).toEqual(["ul", "ol", "li", "lic"]);
+    });
+});

package/plugins/embedded/types.d.ts

@@ -0,0 +1,6 @@
+/** Plate 53 no longer exports `EmbedUrlData`, so the shape `parseVideoUrl` returns is declared here. */
+export interface EmbedUrlData {
+    id?: string;
+    provider?: string;
+    url?: string;
+}

package/plugins/embedded/types.js

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

package/plugins/embedded/utils.d.ts

@@ -1 +1,2 @@
-export { parseIframeUrl, parseTwitterUrl, parseVideoUrl } from "@udecode/plate-media";
+export { parseIframeUrl, parseTwitterUrl, parseVideoUrl } from "@platejs/media";
+export type { EmbedUrlData } from "./types";

package/plugins/embedded/utils.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.parseVideoUrl = exports.parseTwitterUrl = exports.parseIframeUrl = void 0;
-var plate_media_1 = require("@udecode/plate-media");
-Object.defineProperty(exports, "parseIframeUrl", { enumerable: true, get: function () { return plate_media_1.parseIframeUrl; } });
-Object.defineProperty(exports, "parseTwitterUrl", { enumerable: true, get: function () { return plate_media_1.parseTwitterUrl; } });
-Object.defineProperty(exports, "parseVideoUrl", { enumerable: true, get: function () { return plate_media_1.parseVideoUrl; } });
+var media_1 = require("@platejs/media");
+Object.defineProperty(exports, "parseIframeUrl", { enumerable: true, get: function () { return media_1.parseIframeUrl; } });
+Object.defineProperty(exports, "parseTwitterUrl", { enumerable: true, get: function () { return media_1.parseTwitterUrl; } });
+Object.defineProperty(exports, "parseVideoUrl", { enumerable: true, get: function () { return media_1.parseVideoUrl; } });

package/plugins/embedded/video/create-video-plugin.d.ts

@@ -1,4 +1,11 @@
-import { MediaPlugin } from "@udecode/plate-media";
-import { WysiwygContent } from "../../../types";
 export declare const ELEMENT_VIDEO_EMBED = "video";
-export declare const createVideoPlugin: <OP = MediaPlugin, OV extends import("@udecode/slate").Value = WysiwygContent, OE extends import("@udecode/plate-core").PlateEditor<OV> = import("@udecode/plate-core").PlateEditor<OV>>(override?: Partial<import("@udecode/plate-core").PlatePlugin<import("@udecode/plate-core").NoInfer<OP>, OV, OE>> | undefined, overrideByKey?: import("@udecode/plate-core").OverrideByKey<OV, OE> | undefined) => import("@udecode/plate-core").PlatePlugin<import("@udecode/plate-core").NoInfer<OP>, OV, OE>;
+/**
+ * Custom, as in Plate 20 – Plate's own `media_embed` uses a different node type. `transformUrl` and
+ * `rules` are inert; kept so the options object a consumer can read is unchanged.
+ */
+export declare const createVideoPlugin: import("platejs/react").PlatePlugin<import("platejs").PluginConfig<"video", {
+    rules: {
+        parser: (url: string) => import("@platejs/media").EmbedUrlData | undefined;
+    }[];
+    transformUrl: (url: string) => string;
+}, {}, {}, {}>>;

package/plugins/embedded/video/create-video-plugin.js

@@ -1,19 +1,18 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createVideoPlugin = exports.ELEMENT_VIDEO_EMBED = void 0;
-const plate_core_1 = require("@udecode/plate-core");
+const react_1 = require("platejs/react");
 const utils_1 = require("../utils");
 exports.ELEMENT_VIDEO_EMBED = "video";
-exports.createVideoPlugin = (0, plate_core_1.createPluginFactory)({
+/**
+ * Custom, as in Plate 20 – Plate's own `media_embed` uses a different node type. `transformUrl` and
+ * `rules` are inert; kept so the options object a consumer can read is unchanged.
+ */
+exports.createVideoPlugin = (0, react_1.createPlatePlugin)({
     key: exports.ELEMENT_VIDEO_EMBED,
-    isElement: true,
-    isVoid: true,
+    node: { isElement: true, isVoid: true },
     options: {
+        rules: [{ parser: utils_1.parseVideoUrl }],
         transformUrl: utils_1.parseIframeUrl,
-        rules: [
-            {
-                parser: utils_1.parseVideoUrl,
-            },
-        ],
     },
 });

package/plugins/embedded/video/create-video-plugin.test.d.ts

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

package/plugins/embedded/video/create-video-plugin.test.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const platejs_1 = require("platejs");
+const create_button_plugin_1 = require("../../button/create-button-plugin");
+const create_paragraph_plugin_1 = require("../../paragraph/create-paragraph-plugin");
+const utils_1 = require("../utils");
+const create_video_plugin_1 = require("./create-video-plugin");
+const editor = (0, platejs_1.createSlateEditor)({
+    plugins: [(0, create_paragraph_plugin_1.createParagraphPlugin)(), create_video_plugin_1.createVideoPlugin, create_button_plugin_1.createButtonPlugin],
+});
+describe("video", () => {
+    it("registers a void element under the stored type", () => {
+        expect(editor.plugins.video.node.type).toBe("video");
+        expect(editor.plugins.video.node.isVoid).toBe(true);
+    });
+    // toMatchObject, not toEqual: Plate 53 adds sourceKind and sourceUrl, which nothing here reads.
+    it("still parses a youtube url into id, provider and embed url", () => {
+        expect((0, utils_1.parseVideoUrl)("https://www.youtube.com/watch?v=dQw4w9WgXcQ")).toMatchObject({
+            id: "dQw4w9WgXcQ",
+            provider: "youtube",
+            url: "https://www.youtube.com/embed/dQw4w9WgXcQ",
+        });
+    });
+});
+describe("button", () => {
+    it("registers a void element under the stored type", () => {
+        expect(editor.plugins.button.node.type).toBe("button");
+        expect(editor.plugins.button.node.isVoid).toBe(true);
+    });
+});

package/plugins/embedded/video/update-video.js

@@ -1,8 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.updateVideo = void 0;
-const plate_common_1 = require("@udecode/plate-common");
-const updateVideo = (editor, url, embeddedUrl, provider, videoId, metaData) => (0, plate_common_1.setNodes)(editor, {
+const updateVideo = (editor, url, embeddedUrl, provider, videoId, metaData) => editor.tf.setNodes({
     url,
     embeddedUrl,
     provider,

package/plugins/exit-break/create-exit-break-plugin.d.ts

@@ -1,3 +1,8 @@
-import { ExitBreakPlugin } from "@udecode/plate-break";
-import { UxfEditor, WysiwygContent } from "../../types";
-export declare const createExitBreakPlugin: () => import("@udecode/plate-core").PlatePlugin<ExitBreakPlugin, WysiwygContent, UxfEditor>;
+/**
+ * Plate 53 has no `options.rules` here; the two `mod` hotkeys are `shortcuts`. The third rule (Enter
+ * in an empty heading or quote) lives as `rules.break.empty` on those plugins.
+ */
+export declare const createExitBreakPlugin: () => import("platejs/react").PlatePlugin<import("platejs").PluginConfig<"exitBreak", {}, {}, Record<"exitBreak", {
+    insert: (options: Omit<import("platejs").InsertExitBreakOptions, "reverse">) => true | undefined;
+    insertBefore: (options: Omit<import("platejs").InsertExitBreakOptions, "reverse">) => true | undefined;
+}>, {}>>;

package/plugins/exit-break/create-exit-break-plugin.js

@@ -1,30 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createExitBreakPlugin = void 0;
-const plate_break_1 = require("@udecode/plate-break");
-const types_1 = require("../blockquote/types");
-const constants_1 = require("../heading/constants");
-const createExitBreakPlugin = () => (0, plate_break_1.createExitBreakPlugin)({
-    options: {
-        rules: [
-            {
-                hotkey: "mod+enter",
-            },
-            {
-                hotkey: "mod+shift+enter",
-                before: true,
-            },
-            {
-                hotkey: "enter",
-                query: {
-                    start: true,
-                    end: true,
-                    allow: [...constants_1.KEYS_HEADING, types_1.BLOCKQUOTE_PLUGIN_KEY],
-                },
-                relative: true,
-                level: 1,
-            },
-        ],
-    },
+const platejs_1 = require("platejs");
+const react_1 = require("platejs/react");
+/**
+ * Plate 53 has no `options.rules` here; the two `mod` hotkeys are `shortcuts`. The third rule (Enter
+ * in an empty heading or quote) lives as `rules.break.empty` on those plugins.
+ */
+const createExitBreakPlugin = () => (0, react_1.toPlatePlugin)(platejs_1.ExitBreakPlugin).configure({
+    shortcuts: { insert: { keys: "mod+enter" }, insertBefore: { keys: "mod+shift+enter" } },
 });
 exports.createExitBreakPlugin = createExitBreakPlugin;

package/plugins/heading/create-headings-plugin.d.ts

@@ -1,8 +1,17 @@
-import { HotkeyPlugin } from "@udecode/plate-common";
-import { WysiwygContent } from "../../types";
-export type HeadingPlugin = HotkeyPlugin;
 export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
 export interface HeadingsPluginOptions {
     disabledLevels?: HeadingLevel[];
 }
-export declare const createHeadingsPlugin: <OP = HeadingsPluginOptions, OV extends import("@udecode/slate").Value = WysiwygContent, OE extends import("@udecode/plate-core").PlateEditor<OV> = import("@udecode/plate-core").PlateEditor<OV>>(override?: Partial<import("@udecode/plate-core").PlatePlugin<import("@udecode/plate-core").NoInfer<OP>, OV, OE>> | undefined, overrideByKey?: import("@udecode/plate-core").OverrideByKey<OV, OE> | undefined) => import("@udecode/plate-core").PlatePlugin<import("@udecode/plate-core").NoInfer<OP>, OV, OE>;
+/**
+ * A wrapper plugin whose nested `plugins` are the enabled levels; a disabled level is left out, which
+ * is what makes `disabledLevels` work.
+ *
+ * `break.empty: "exit"` reproduces Plate 20's exit-break rule. Without it the inherited `splitReset`
+ * puts the new paragraph *before* the empty heading.
+ *
+ * No hotkeys, matching Plate 20 – its `mod+opt+N` condition tested an empty options object and never
+ * fired.
+ */
+export declare const createHeadingsPlugin: (config?: {
+    options?: HeadingsPluginOptions;
+}) => import("platejs/react").PlatePlugin<import("platejs").PluginConfig<"heading", {}, {}, {}, {}>>;

package/plugins/heading/create-headings-plugin.js

@@ -1,40 +1,26 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createHeadingsPlugin = void 0;
-const plate_common_1 = require("@udecode/plate-common");
+const react_1 = require("@platejs/basic-nodes/react");
+const react_2 = require("platejs/react");
 const constants_1 = require("./constants");
-exports.createHeadingsPlugin = (0, plate_common_1.createPluginFactory)({
-    key: constants_1.HEADINGS_PLUGIN_KEY,
-    then: (_editor, { options: { disabledLevels } = {} }) => {
-        var _a;
-        const plugins = [];
-        for (let level = 1; level <= 6; level++) {
-            if (disabledLevels === null || disabledLevels === void 0 ? void 0 : disabledLevels.find((e) => e === level)) {
-                continue;
-            }
-            const key = constants_1.KEYS_HEADING[level - 1];
-            const plugin = {
-                key,
-                isElement: true,
-                deserializeHtml: {
-                    rules: [
-                        {
-                            validNodeName: `H${level}`,
-                        },
-                    ],
-                },
-                handlers: {
-                    onKeyDown: plate_common_1.onKeyDownToggleElement,
-                },
-                options: {},
-            };
-            if (level < 4 && ((_a = plugin.options) === null || _a === void 0 ? void 0 : _a.hotkey)) {
-                plugin.options.hotkey = [`mod+opt+${level}`, `mod+shift+${level}`];
-            }
-            plugins.push(plugin);
-        }
-        return {
-            plugins,
-        };
-    },
-});
+const PLUGINS_BY_LEVEL = [react_1.H1Plugin, react_1.H2Plugin, react_1.H3Plugin, react_1.H4Plugin, react_1.H5Plugin, react_1.H6Plugin];
+/**
+ * A wrapper plugin whose nested `plugins` are the enabled levels; a disabled level is left out, which
+ * is what makes `disabledLevels` work.
+ *
+ * `break.empty: "exit"` reproduces Plate 20's exit-break rule. Without it the inherited `splitReset`
+ * puts the new paragraph *before* the empty heading.
+ *
+ * No hotkeys, matching Plate 20 – its `mod+opt+N` condition tested an empty options object and never
+ * fired.
+ */
+const createHeadingsPlugin = (config) => {
+    var _a, _b;
+    const disabledLevels = (_b = (_a = config === null || config === void 0 ? void 0 : config.options) === null || _a === void 0 ? void 0 : _a.disabledLevels) !== null && _b !== void 0 ? _b : [];
+    return (0, react_2.createPlatePlugin)({
+        key: constants_1.HEADINGS_PLUGIN_KEY,
+        plugins: PLUGINS_BY_LEVEL.filter((_, index) => !disabledLevels.includes((index + 1))).map((plugin) => plugin.configure({ rules: { break: { empty: "exit" } } })),
+    });
+};
+exports.createHeadingsPlugin = createHeadingsPlugin;

package/plugins/heading/create-headings-plugin.test.d.ts

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