@uxf/wysiwyg 11.129.0 → 11.130.0

package/plugins/node-id/create-node-id-plugin.d.ts

@@ -1,3 +1,22 @@
-import { NodeIdPlugin } from "@udecode/plate-node-id";
-import { UxfEditor, WysiwygContent } from "../../types";
-export declare const createNodeIdPlugin: () => import("@udecode/plate-core").PlatePlugin<NodeIdPlugin, WysiwygContent, UxfEditor>;
+export declare const createNodeIdPlugin: () => import("platejs/react").PlatePlugin<import("platejs").PluginConfig<"nodeId", {
+    disableInsertOverrides?: boolean;
+    filterInline?: boolean;
+    filterText?: boolean;
+    idKey?: string;
+    initialValueIds?: false | "always" | "if-needed";
+    normalizeInitialValue?: boolean | null;
+    onDuplicateIdScan?: (stats: {
+        candidateCount: number;
+        duration: number;
+        existingCount: number;
+        visitedCount: number;
+    }) => void;
+    reuseId?: boolean;
+    idCreator?: () => any;
+} & import("platejs").QueryNodeOptions, {}, {
+    nodeId: {
+        normalize: () => void;
+    };
+} & Record<"nodeId", {
+    normalize(): void;
+}>, {}>>;

package/plugins/node-id/create-node-id-plugin.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createNodeIdPlugin = void 0;
-const plate_node_id_1 = require("@udecode/plate-node-id");
-const createNodeIdPlugin = () => (0, plate_node_id_1.createNodeIdPlugin)();
+const platejs_1 = require("platejs");
+const react_1 = require("platejs/react");
+const createNodeIdPlugin = () => (0, react_1.toPlatePlugin)(platejs_1.NodeIdPlugin);
 exports.createNodeIdPlugin = createNodeIdPlugin;

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

@@ -1,3 +1 @@
-import { HotkeyPlugin } from "@udecode/plate-core";
-import { UxfPlatePlugin } from "../../types";
-export declare const createParagraphPlugin: () => UxfPlatePlugin<HotkeyPlugin>;
+export declare const createParagraphPlugin: () => import("platejs/react").PlatePlugin<import("platejs").PluginConfig<"p", {}, {}, {}, {}>>;

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

@@ -1,9 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createParagraphPlugin = void 0;
-const plate_paragraph_1 = require("@udecode/plate-paragraph");
+const platejs_1 = require("platejs");
+const react_1 = require("platejs/react");
 const types_1 = require("./types");
-const createParagraphPlugin = () => (0, plate_paragraph_1.createParagraphPlugin)({
-    type: types_1.PARAGRAPH_PLUGIN_TYPE,
-});
+const createParagraphPlugin = () => (0, react_1.toPlatePlugin)(platejs_1.BaseParagraphPlugin).configure({ node: { type: types_1.PARAGRAPH_PLUGIN_TYPE } });
 exports.createParagraphPlugin = createParagraphPlugin;

package/plugins/paragraph/types.d.ts

@@ -1,2 +1,2 @@
-export declare const PARAGRAPH_PLUGIN_KEY = "p";
+export declare const PARAGRAPH_PLUGIN_KEY: "p";
 export declare const PARAGRAPH_PLUGIN_TYPE = "paragraph";

package/plugins/paragraph/types.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PARAGRAPH_PLUGIN_TYPE = exports.PARAGRAPH_PLUGIN_KEY = void 0;
-const plate_paragraph_1 = require("@udecode/plate-paragraph");
-exports.PARAGRAPH_PLUGIN_KEY = plate_paragraph_1.ELEMENT_PARAGRAPH;
+const platejs_1 = require("platejs");
+exports.PARAGRAPH_PLUGIN_KEY = platejs_1.KEYS.p;
 exports.PARAGRAPH_PLUGIN_TYPE = "paragraph";

package/plugins/structural.test.d.ts

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

package/plugins/structural.test.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const platejs_1 = require("platejs");
+const create_exit_break_plugin_1 = require("./exit-break/create-exit-break-plugin");
+const create_paragraph_plugin_1 = require("./paragraph/create-paragraph-plugin");
+const create_trailing_block_plugin_1 = require("./trailing-block/create-trailing-block-plugin");
+describe("exit break", () => {
+    it("keeps both historical hotkeys", () => {
+        const editor = (0, platejs_1.createSlateEditor)({ plugins: [(0, create_exit_break_plugin_1.createExitBreakPlugin)()] });
+        expect(editor.plugins.exitBreak.shortcuts).toEqual({
+            insert: { keys: "mod+enter" },
+            insertBefore: { keys: "mod+shift+enter" },
+        });
+    });
+});
+describe("trailing block", () => {
+    it("uses the stored paragraph type, not the bare plugin key", () => {
+        const editor = (0, platejs_1.createSlateEditor)({ plugins: [(0, create_paragraph_plugin_1.createParagraphPlugin)(), (0, create_trailing_block_plugin_1.createTrailingBlockPlugin)()] });
+        expect(editor.plugins.trailingBlock.options.type).toBe("paragraph");
+    });
+    it("appends a paragraph after a trailing non-paragraph block", () => {
+        const editor = (0, platejs_1.createSlateEditor)({
+            plugins: [(0, create_paragraph_plugin_1.createParagraphPlugin)(), (0, create_trailing_block_plugin_1.createTrailingBlockPlugin)()],
+            shouldNormalizeEditor: true,
+            value: [{ children: [{ text: "citace" }], type: "blockquote" }],
+        });
+        expect(editor.children.map((node) => node.type)).toEqual(["blockquote", "paragraph"]);
+    });
+});

package/plugins/trailing-block/create-trailing-block-plugin.d.ts

@@ -1,3 +1,13 @@
-import { TrailingBlockPlugin } from "@udecode/plate-trailing-block";
-import { UxfPlatePlugin } from "../../types";
-export declare const createTrailingBlockPlugin: () => UxfPlatePlugin<TrailingBlockPlugin>;
+/**
+ * `.extend()`, not `.configure()`: the plugin's own extension resolves `type` to the bare `"p"` key
+ * and overwrites anything `.configure` passes. Extensions apply in order, so ours has to be last.
+ */
+export declare const createTrailingBlockPlugin: () => import("platejs/react").PlatePlugin<import("platejs").PluginConfig<"trailingBlock", {
+    type: string;
+} & {
+    type: string;
+} & {
+    insert?: (editor: import("platejs").SlateEditor, options: import("platejs").TrailingBlockInsertOptions) => void;
+    level?: number;
+    type?: string;
+} & import("platejs").QueryNodeOptions, {}, {}, {}>>;

package/plugins/trailing-block/create-trailing-block-plugin.js

@@ -1,6 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createTrailingBlockPlugin = void 0;
-const plate_trailing_block_1 = require("@udecode/plate-trailing-block");
-const createTrailingBlockPlugin = () => (0, plate_trailing_block_1.createTrailingBlockPlugin)();
+const platejs_1 = require("platejs");
+const react_1 = require("platejs/react");
+const types_1 = require("../paragraph/types");
+/**
+ * `.extend()`, not `.configure()`: the plugin's own extension resolves `type` to the bare `"p"` key
+ * and overwrites anything `.configure` passes. Extensions apply in order, so ours has to be last.
+ */
+const createTrailingBlockPlugin = () => (0, react_1.toPlatePlugin)(platejs_1.TrailingBlockPlugin).extend(() => ({ options: { type: types_1.PARAGRAPH_PLUGIN_TYPE } }));
 exports.createTrailingBlockPlugin = createTrailingBlockPlugin;

package/serializers/serialize-to-plaintext.js

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.serializeToPlaintext = void 0;
-const slate_1 = require("slate");
+const platejs_1 = require("platejs");
 const serializeToPlaintext = (nodes, keepIndentation = true) => {
-    return nodes.map((n) => slate_1.Node.string(n)).join(keepIndentation ? "\n" : " ");
+    return nodes.map((n) => platejs_1.NodeApi.string(n)).join(keepIndentation ? "\n" : " ");
 };
 exports.serializeToPlaintext = serializeToPlaintext;

package/styles/styles.css

@@ -46,6 +46,7 @@
     }
 
     &__editable {
+        outline: none; /* slate-react set this itself until 0.126; focus is shown by the wrapping input */
         overflow-wrap: anywhere !important; /* long links and texts wrap fix */
 
         > :first-child {

package/types.d.ts

@@ -1,7 +1,9 @@
-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 { AnySlatePlugin, NodeComponent, TElement, TText } from "platejs";
+import { AnyPlatePlugin, EditableSiblingComponent, PlateElementProps, PlateLeafProps, TPlateEditor } from "platejs/react";
 import { FC } from "react";
+/** Plate 53 has no `PlateId`; kept as a name because it is part of this package's surface. */
+export type PlateId = string;
 export type EmptyText = {
     text: "";
 };
@@ -89,30 +91,37 @@ export interface UxfButtonElement extends UxfBlockElement {
     children: [EmptyText];
 }
 export type WysiwygRootBlock = UxfParagraphElement | UxfBlockQuoteElement | UxfImageElement | UxfHeadingElement | UxfLinkElement | UxfUnorderedListElement | UxfOrderedListElement | UxfVideoElement | UxfButtonElement;
-export type UiComponents = Partial<Record<string, PlatePluginComponent>>;
+export type UiComponents = Partial<Record<string, NodeComponent>>;
 export type WysiwygContent = WysiwygRootBlock[];
-export type RenderElementProps<E extends TElement = UxfBlockElement> = PlateRenderElementProps<WysiwygContent, E>;
+/** `editor` is narrowed so components can pass `props.editor` to our transforms without a cast. */
+export type RenderElementProps<E extends TElement = UxfBlockElement> = Omit<PlateElementProps<E>, "editor"> & {
+    editor: UxfEditor;
+};
 export type ElementUiComponent<E extends TElement = UxfBlockElement> = FC<RenderElementProps<E>>;
-export type RenderLeafProps<L extends TText = RichText> = PlateRenderLeafProps<WysiwygContent, L>;
+export type RenderLeafProps<L extends TText = RichText> = Omit<PlateLeafProps<L>, "editor"> & {
+    editor: UxfEditor;
+};
 export type LeafUiComponent<L extends TText = RichText> = FC<RenderLeafProps<L>>;
-export type RenderAfterEditable = PlateRenderAfterEditable<WysiwygContent>;
-export type UxfEditor = PlateEditor<WysiwygContent> & {
+export type RenderAfterEditable = EditableSiblingComponent;
+export type UxfEditor = TPlateEditor<WysiwygContent> & {
     isDragging?: boolean;
 };
-export type UxfPlatePlugin<P = PluginOptions> = PlatePlugin<P, WysiwygContent, UxfEditor>;
+/** Every plugin this package builds is a React plugin, so the list is one homogeneous type. */
+export type AnyWysiwygPlatePlugin = AnyPlatePlugin;
+/** Its Plate 20 type parameter is gone: no plugin type in Plate 53 is keyed on its options. */
+export type UxfPlatePlugin = AnyWysiwygPlatePlugin;
 export interface WysiwygPlugin<E extends UxfBlockElement = UxfBlockElement> {
-    plugin: UxfPlatePlugin;
+    plugin: AnyWysiwygPlatePlugin;
     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
+ * For plugins that nest others, e.g. headings and lists.
+ * @see https://platejs.org/docs/plugin
  */
 export interface WysiwygRecursivePlugin<C extends string, E extends UxfBlockElement = UxfBlockElement> {
-    plugin: UxfPlatePlugin;
+    plugin: AnyWysiwygPlatePlugin;
     components: {
         [key in C]: ElementUiComponent<E> | LeafUiComponent;
     };
 }
-export type MyOverrideByKey = OverrideByKey<WysiwygContent, UxfEditor>;
+export type MyOverrideByKey = Record<string, Partial<AnySlatePlugin>>;

package/ui/floating-link.js

@@ -34,15 +34,15 @@ var __importStar = (this && this.__importStar) || (function () {
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FloatingLink = void 0;
-const plate_floating_1 = require("@udecode/plate-floating");
-const plate_link_1 = require("@udecode/plate-link");
+const floating_1 = require("@platejs/floating");
+const react_1 = require("@platejs/link/react");
 const translations_1 = require("@uxf/core-react/translations");
 const button_1 = require("@uxf/ui/button");
 const button_group_1 = require("@uxf/ui/button-group");
 const checkbox_input_1 = require("@uxf/ui/checkbox-input");
 const icon_1 = require("@uxf/ui/icon");
 const text_input_1 = require("@uxf/ui/text-input");
-const react_1 = __importStar(require("react"));
+const react_2 = __importStar(require("react"));
 const hooks_1 = require("../hooks");
 const floating_link_wrapper_1 = require("../plugins/link/floating-link-wrapper");
 const hooks_2 = require("../plugins/link/hooks");
@@ -55,18 +55,18 @@ const Edit = () => {
     var _a, _b;
     const editor = (0, hooks_1.useUxfEditorRef)();
     const url = (_b = (_a = (0, get_active_link_1.getActiveLink)(editor)) === null || _a === void 0 ? void 0 : _a.url) !== null && _b !== void 0 ? _b : "";
-    return (react_1.default.createElement(button_group_1.ButtonGroup, { className: EDIT_CLASS_NAME },
-        react_1.default.createElement(button_1.Button, { className: `${EDIT_CLASS_NAME}__button ${EDIT_CLASS_NAME}__button-edit`, isIconButton: true, onClick: () => (0, plate_link_1.triggerFloatingLinkEdit)(editor), variant: "secondary" },
-            react_1.default.createElement(icon_1.Icon, { name: "edit", size: 15 })),
-        react_1.default.createElement(button_1.Button, { className: `${EDIT_CLASS_NAME}__button ${EDIT_CLASS_NAME}__button-open`, href: !url_helper_1.UrlHelper.hasProtocol(url) ? `https://${url}` : url, isIconButton: true, target: "_blank", variant: "secondary" },
-            react_1.default.createElement(icon_1.Icon, { name: "open-link-in-new-tab", size: 15 })),
-        react_1.default.createElement(button_1.Button, { className: `${EDIT_CLASS_NAME}__button ${EDIT_CLASS_NAME}__button-delete`, isIconButton: true, onClick: () => (0, unwrap_link_1.removeLink)(editor), variant: "secondary" },
-            react_1.default.createElement(icon_1.Icon, { name: "delete", size: 15 }))));
+    return (react_2.default.createElement(button_group_1.ButtonGroup, { className: EDIT_CLASS_NAME },
+        react_2.default.createElement(button_1.Button, { className: `${EDIT_CLASS_NAME}__button ${EDIT_CLASS_NAME}__button-edit`, isIconButton: true, onClick: () => (0, react_1.triggerFloatingLinkEdit)(editor), variant: "secondary" },
+            react_2.default.createElement(icon_1.Icon, { name: "edit", size: 15 })),
+        react_2.default.createElement(button_1.Button, { className: `${EDIT_CLASS_NAME}__button ${EDIT_CLASS_NAME}__button-open`, href: !url_helper_1.UrlHelper.hasProtocol(url) ? `https://${url}` : url, isIconButton: true, target: "_blank", variant: "secondary" },
+            react_2.default.createElement(icon_1.Icon, { name: "open-link-in-new-tab", size: 15 })),
+        react_2.default.createElement(button_1.Button, { className: `${EDIT_CLASS_NAME}__button ${EDIT_CLASS_NAME}__button-delete`, isIconButton: true, onClick: () => (0, unwrap_link_1.removeLink)(editor), variant: "secondary" },
+            react_2.default.createElement(icon_1.Icon, { name: "delete", size: 15 }))));
 };
 function useInsertLinkFormAutoFocus() {
-    const id = (0, react_1.useId)();
+    const id = (0, react_2.useId)();
     // TODO FEB-139 - native html autoFocus breaks popover placement in insert mode
-    (0, react_1.useEffect)(() => {
+    (0, react_2.useEffect)(() => {
         let timer;
         const firstInput = document.querySelector(`#${CSS.escape(id)}`);
         if (firstInput instanceof HTMLElement) {
@@ -83,7 +83,7 @@ const Insert = () => {
     const t = (0, translations_1.useUxfTranslation)();
     const linkActions = (0, hooks_2.useLinkActions)();
     const editor = (0, hooks_1.useUxfEditorRef)();
-    const [isSubmitted, setIsSubmitted] = (0, react_1.useState)(false);
+    const [isSubmitted, setIsSubmitted] = (0, react_2.useState)(false);
     const firstInputId = useInsertLinkFormAutoFocus();
     const onSubmit = (e) => {
         e.preventDefault();
@@ -92,29 +92,29 @@ const Insert = () => {
         if (!linkActions.getUrl || !url_helper_1.UrlHelper.isValid(linkActions.getUrl)) {
             return;
         }
-        (0, plate_link_1.submitFloatingLink)(editor);
+        (0, react_1.submitFloatingLink)(editor);
     };
     const emptyUrl = isSubmitted && !linkActions.getUrl;
     const invalidUrl = isSubmitted && !url_helper_1.UrlHelper.isValid(linkActions.getUrl);
-    return (react_1.default.createElement("div", { className: INSERT_CLASS_NAME },
-        react_1.default.createElement("form", { className: `${INSERT_CLASS_NAME}__form`, id: "insert-link-form", onSubmit: onSubmit },
-            react_1.default.createElement("div", { className: `${INSERT_CLASS_NAME}__form-inputs` },
-                react_1.default.createElement(text_input_1.TextInput, { helperText: emptyUrl
+    return (react_2.default.createElement("div", { className: INSERT_CLASS_NAME },
+        react_2.default.createElement("form", { className: `${INSERT_CLASS_NAME}__form`, id: "insert-link-form", onSubmit: onSubmit },
+            react_2.default.createElement("div", { className: `${INSERT_CLASS_NAME}__form-inputs` },
+                react_2.default.createElement(text_input_1.TextInput, { helperText: emptyUrl
                         ? t("uxf-wysiwyg:plugins.link.url-address.required")
                         : invalidUrl
                             ? t("uxf-wysiwyg:plugins.link.url-address.invalid")
                             : undefined, hiddenLabel: true, id: firstInputId, isInvalid: emptyUrl || invalidUrl, isRequired: true, label: t("uxf-wysiwyg:plugins.link.url-address.label"), leftAddon: t("uxf-wysiwyg:plugins.link.url-address.label"), name: "url-address", onChange: linkActions.setUrl, placeholder: t("uxf-wysiwyg:plugins.link.url-address.placeholder"), value: linkActions.getUrl }),
-                react_1.default.createElement(text_input_1.TextInput, { hiddenLabel: true, label: t("uxf-wysiwyg:plugins.link.link-text.label"), leftAddon: t("uxf-wysiwyg:plugins.link.link-text.label"), name: "link-text", onChange: linkActions.setText, placeholder: t("uxf-wysiwyg:plugins.link.link-text.placeholder"), value: linkActions.getText }),
-                react_1.default.createElement(checkbox_input_1.CheckboxInput, { label: t("uxf-wysiwyg:plugins.link.open-in-new-tab"), name: "open-in-new-tab", onChange: (checked) => linkActions.setTarget(checked ? "_blank" : "_self"), value: linkActions.getTarget === "_blank" })),
-            react_1.default.createElement("div", { className: `${INSERT_CLASS_NAME}__form-buttons` },
-                react_1.default.createElement(button_1.Button, { className: `${INSERT_CLASS_NAME}__form-submit-button`, type: "submit" }, t("uxf-wysiwyg:plugins.link.button-save"))),
-            react_1.default.createElement("button", { hidden: true, type: "submit" }))));
+                react_2.default.createElement(text_input_1.TextInput, { hiddenLabel: true, label: t("uxf-wysiwyg:plugins.link.link-text.label"), leftAddon: t("uxf-wysiwyg:plugins.link.link-text.label"), name: "link-text", onChange: linkActions.setText, placeholder: t("uxf-wysiwyg:plugins.link.link-text.placeholder"), value: linkActions.getText }),
+                react_2.default.createElement(checkbox_input_1.CheckboxInput, { label: t("uxf-wysiwyg:plugins.link.open-in-new-tab"), name: "open-in-new-tab", onChange: (checked) => linkActions.setTarget(checked ? "_blank" : "_self"), value: linkActions.getTarget === "_blank" })),
+            react_2.default.createElement("div", { className: `${INSERT_CLASS_NAME}__form-buttons` },
+                react_2.default.createElement(button_1.Button, { className: `${INSERT_CLASS_NAME}__form-submit-button`, type: "submit" }, t("uxf-wysiwyg:plugins.link.button-save"))),
+            react_2.default.createElement("button", { hidden: true, type: "submit" }))));
 };
 const FloatingLink = () => {
-    const isEditing = (0, plate_link_1.useFloatingLinkSelectors)().isEditing();
-    return (react_1.default.createElement(plate_floating_1.FloatingPortal, null,
-        react_1.default.createElement(floating_link_wrapper_1.FloatingLinkWrapper.InsertRoot, null,
-            react_1.default.createElement(Insert, null)),
-        react_1.default.createElement(floating_link_wrapper_1.FloatingLinkWrapper.EditRoot, null, !isEditing ? react_1.default.createElement(Edit, null) : react_1.default.createElement(Insert, null))));
+    const isEditing = (0, hooks_2.useFloatingLinkSelectors)().isEditing();
+    return (react_2.default.createElement(floating_1.FloatingPortal, null,
+        react_2.default.createElement(floating_link_wrapper_1.FloatingLinkWrapper.InsertRoot, null,
+            react_2.default.createElement(Insert, null)),
+        react_2.default.createElement(floating_link_wrapper_1.FloatingLinkWrapper.EditRoot, null, !isEditing ? react_2.default.createElement(Edit, null) : react_2.default.createElement(Insert, null))));
 };
 exports.FloatingLink = FloatingLink;

package/ui/highlight-mark.d.ts

@@ -1,3 +1,2 @@
-import { FC } from "react";
-import { HighlightLeafElementProps } from "../plugins/highlight/types";
-export declare const HighlightMark: FC<HighlightLeafElementProps>;
+import { LeafUiComponent } from "../types";
+export declare const HighlightMark: LeafUiComponent;

package/ui/highlight-mark.js

@@ -8,6 +8,9 @@ const react_1 = __importDefault(require("react"));
 const CLASS_NAME = "uxf-wysiwyg__element";
 const HighlightMark = (props) => {
     var _a;
-    return (react_1.default.createElement("mark", { ...props.attributes, className: `${CLASS_NAME} ${CLASS_NAME}-highlight ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}`, style: { "--highlight-color": props.color } }, props.children));
+    // Not `node.props`: Plate 53 spreads those onto the DOM element as attributes rather than passing
+    // them to the component, so the colour has to come from the plugin's own options.
+    const color = props.getOptions().color;
+    return (react_1.default.createElement("mark", { ...props.attributes, className: `${CLASS_NAME} ${CLASS_NAME}-highlight ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}`, style: { "--highlight-color": color } }, props.children));
 };
 exports.HighlightMark = HighlightMark;

package/ui/link-element.js

@@ -4,11 +4,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LinkElement = void 0;
-const react_1 = __importDefault(require("react"));
+const react_1 = require("@platejs/link/react");
+const react_2 = __importDefault(require("react"));
 const CLASS_NAME = "uxf-wysiwyg__element";
 const LinkElement = (props) => {
     var _a;
-    return (react_1.default.createElement("span", null,
-        react_1.default.createElement("a", { ...props.attributes, className: `${CLASS_NAME} ${CLASS_NAME}-link ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}`, ...props.nodeProps }, props.children)));
+    // Plate 53 drops the `nodeProps` prop; the href/target pair comes from the plugin api, sanitised.
+    const linkAttributes = props.editor.getApi(react_1.LinkPlugin).link.getAttributes(props.element);
+    return (react_2.default.createElement("span", null,
+        react_2.default.createElement("a", { ...props.attributes, className: `${CLASS_NAME} ${CLASS_NAME}-link ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}`, ...linkAttributes }, props.children)));
 };
 exports.LinkElement = LinkElement;

package/ui/toolbar/buttons/button-toolbar-button.d.ts

@@ -1,6 +1,6 @@
-import { PlateId } from "@udecode/plate-core";
 import { IconName } from "@uxf/ui/icon/types";
 import { FC } from "react";
+import { PlateId } from "../../../types";
 interface ButtonToolbarButtonProps {
     className?: string;
     iconName?: IconName;

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

@@ -1,6 +1,6 @@
-import { PlateId } from "@udecode/plate-core";
 import { IconName } from "@uxf/ui/icon/types";
 import { FC } from "react";
+import { PlateId } from "../../../types";
 interface ElementToolbarButtonProps {
     className?: string;
     iconName: IconName;

package/ui/toolbar/buttons/image-toolbar-button.d.ts

@@ -1,6 +1,6 @@
-import { PlateId } from "@udecode/plate-core";
 import { IconName } from "@uxf/ui/icon/types";
 import { FC } from "react";
+import { PlateId } from "../../../types";
 interface ImageToolbarButtonProps {
     className?: string;
     iconName?: IconName;

package/ui/toolbar/buttons/link-toolbar-button.d.ts

@@ -1,6 +1,6 @@
-import { PlateId } from "@udecode/plate-core";
 import { IconName } from "@uxf/ui/icon/types";
 import { FC } from "react";
+import { PlateId } from "../../../types";
 interface LinkToolbarButtonProps {
     className?: string;
     iconName?: IconName;

package/ui/toolbar/buttons/link-toolbar-button.js

@@ -21,7 +21,7 @@ const LinkToolbarButton = (props) => {
     const onMouseDown = () => {
         var _a;
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        (0, utils_1.focusEditor)(editor, (_a = editor.selection) !== null && _a !== void 0 ? _a : editor.prevSelection);
+        (0, utils_1.focusEditor)(editor, (_a = editor.selection) !== null && _a !== void 0 ? _a : editor.dom.prevSelection);
         (0, trigger_link_insert_or_edit_1.triggerLinkInsertOrEdit)(editor, true);
     };
     return (react_1.default.createElement(toolbar_button_1.ToolbarButton, { className: `${CLASS_NAME} ${CLASS_NAME}-link ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}`, editor: editor, iconName: (_b = props.iconName) !== null && _b !== void 0 ? _b : "link", isActive: isLink, onMouseDown: onMouseDown, pluginKey: constants_1.ELEMENT_LINK, tooltipText: t("uxf-wysiwyg:plugins.link.tooltip") }));

package/ui/toolbar/buttons/list-toolbar-button.d.ts

@@ -1,7 +1,7 @@
-import { PlateId } from "@udecode/plate-core";
 import { IconName } from "@uxf/ui/icon/types";
 import { FC } from "react";
 import { LIST_ORDERED_TYPE, LIST_UNORDERED_TYPE } from "../../../plugins/list/constants";
+import { PlateId } from "../../../types";
 interface ListToolbarButtonProps {
     className?: string;
     iconName: IconName;

package/ui/toolbar/buttons/list-toolbar-button.js

@@ -4,16 +4,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ListToolbarButton = void 0;
-const plate_list_1 = require("@udecode/plate-list");
 const is_nil_1 = require("@uxf/core/utils/is-nil");
 const is_not_nil_1 = require("@uxf/core/utils/is-not-nil");
 const react_1 = __importDefault(require("react"));
 const hooks_1 = require("../../../hooks");
+const constants_1 = require("../../../plugins/list/constants");
 const utils_1 = require("../../../utils");
 const toolbar_button_1 = require("./toolbar-button");
 const CLASS_NAME = "uxf-wysiwyg__toolbar-button";
 function getIsListElementActive(editor, type) {
-    const res = (0, is_not_nil_1.isNotNil)(editor.selection) ? (0, plate_list_1.getListItemEntry)(editor) : undefined;
+    const res = (0, is_not_nil_1.isNotNil)(editor.selection) ? (0, constants_1.getListItemEntry)(editor) : undefined;
     if ((0, is_nil_1.isNil)(res)) {
         return false;
     }
@@ -26,7 +26,7 @@ const ListToolbarButton = (props) => {
     const type = (0, utils_1.getPluginType)(editor, props.pluginKey);
     const isActive = getIsListElementActive(editor, type);
     const onMouseDown = () => {
-        (0, plate_list_1.toggleList)(editor, {
+        (0, constants_1.toggleList)(editor, {
             type,
         });
     };

package/ui/toolbar/buttons/mark-toolbar-button.d.ts

@@ -1,6 +1,6 @@
-import { PlateId } from "@udecode/plate-core";
 import { IconName } from "@uxf/ui/icon/types";
 import { FC } from "react";
+import { PlateId } from "../../../types";
 interface LeafToolbarButtonProps {
     className?: string;
     iconName: IconName;

package/ui/toolbar/buttons/undo-redo-button-group.d.ts

@@ -1,5 +1,5 @@
-import { PlateId } from "@udecode/plate-core";
 import { FC } from "react";
+import { PlateId } from "../../../types";
 interface Props {
     className?: string;
     plateId: PlateId;

package/ui/toolbar/buttons/video-toolbar-button.d.ts

@@ -1,6 +1,6 @@
-import { PlateId } from "@udecode/plate-core";
 import { IconName } from "@uxf/ui/icon/types";
 import { FC } from "react";
+import { PlateId } from "../../../types";
 interface EmbedMediaToolbarButtonProps {
     className?: string;
     iconName?: IconName;

package/ui/toolbar/types.d.ts

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

package/ui/utils.js

@@ -7,7 +7,7 @@ const closeModalWithFocus = (editor) => {
     var _a;
     (0, modal_service_1.closeModal)();
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    const selection = (_a = editor.selection) !== null && _a !== void 0 ? _a : editor.prevSelection;
+    const selection = (_a = editor.selection) !== null && _a !== void 0 ? _a : editor.dom.prevSelection;
     (0, utils_1.focusEditor)(editor, selection);
 };
 exports.closeModalWithFocus = closeModalWithFocus;

package/utils.d.ts

@@ -1,26 +1,24 @@
-import { PluginOptions, ToggleNodeTypeOptions } from "@udecode/plate-core";
-import { FindNodeOptions, GetNodeEntriesOptions } from "@udecode/slate";
-import { ToggleMarkOptions } from "@udecode/slate-utils";
-import { Location } from "slate";
+import { At, EditorNodesOptions, QueryNodeOptions, TElement } from "platejs";
 import { UxfBlockElement, UxfEditor, WysiwygContent } from "./types";
-export declare const getUxfEditor: (editor: UxfEditor) => import("@udecode/utils").Modify<UxfEditor, {
-    operations: import("@udecode/slate").TOperation<import("@udecode/slate").EElementOrText<WysiwygContent>>[];
-    isInline: (element: import("@udecode/slate").TElement | import("./types").LicElement | import("./types").LiElement | import("./types").WysiwygRootBlock) => boolean;
-    isVoid: (element: import("@udecode/slate").TElement | import("./types").LicElement | import("./types").LiElement | import("./types").WysiwygRootBlock) => boolean;
-    normalizeNode: (entry: import("@udecode/slate").TNodeEntry<import("@udecode/slate").ENode<WysiwygContent>>) => void;
-    apply: (operation: import("@udecode/slate").TOperation<import("@udecode/slate").EElementOrText<WysiwygContent>>) => void;
-    getFragment: () => import("@udecode/slate").EElementOrText<WysiwygContent>[];
-    insertFragment: (fragment: import("@udecode/slate").EElementOrText<WysiwygContent>[]) => void;
-    insertNode: (node: import("@udecode/slate").EElementOrText<WysiwygContent> | import("@udecode/slate").EElementOrText<WysiwygContent>[]) => void;
-}>;
-export declare const getPluginOptions: <P = PluginOptions>(editor: UxfEditor, pluginKey: string) => P;
+export declare const getUxfEditor: (editor: UxfEditor) => UxfEditor;
+export declare const getPluginOptions: <P = object>(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 someNode: (editor: UxfEditor, options: EditorNodesOptions<WysiwygContent>) => boolean;
+export declare const toggleNodeType: (editor: UxfEditor, options: {
+    activeType?: string;
+    inactiveType?: string;
+}, editorNodesOptions?: Omit<EditorNodesOptions<WysiwygContent>, "match">) => void;
+export declare const focusEditor: (editor: UxfEditor, target?: At) => 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 toggleMark: (editor: UxfEditor, { key, clear }: {
+    key: string;
+    clear?: string[] | string;
+}) => void;
+/**
+ * `editor.plugins` is a keyed record in Plate 53, not the array it was in Plate 20. Both helpers gate
+ * every toolbar button, so indexing it as an array here would hide the whole toolbar.
+ */
 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;
@@ -28,3 +26,4 @@ export declare const getActiveElement: <E extends UxfBlockElement = UxfBlockElem
 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;
+export type { QueryNodeOptions, TElement };