@uxf/wysiwyg 11.129.0 → 11.130.1

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

@@ -1,3 +1,38 @@
-import { LinkPlugin } from "@udecode/plate-link";
-import { UxfPlatePlugin } from "../../types";
-export declare const createLinkPlugin: () => UxfPlatePlugin<LinkPlugin>;
+/**
+ * `key` stays `"a"` (Plate's own) while the stored node type stays `"link"` – the `.configure({ node:
+ * { type } })` call is what keeps every existing document readable.
+ */
+export declare const createLinkPlugin: () => 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;
+}>>;

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

@@ -1,15 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createLinkPlugin = void 0;
-const plate_link_1 = require("@udecode/plate-link");
+const react_1 = require("@platejs/link/react");
 const floating_link_1 = require("../../ui/floating-link");
 const url_helper_1 = require("../../utils/url-helper");
 const constants_1 = require("./constants");
-const createLinkPlugin = () => (0, plate_link_1.createLinkPlugin)({
-    type: constants_1.LINK_PLUGIN_TYPE,
-    renderAfterEditable: floating_link_1.FloatingLink,
-    options: {
-        isUrl: url_helper_1.UrlHelper.isValid,
-    },
+/**
+ * `key` stays `"a"` (Plate's own) while the stored node type stays `"link"` – the `.configure({ node:
+ * { type } })` call is what keeps every existing document readable.
+ */
+const createLinkPlugin = () => react_1.LinkPlugin.configure({
+    node: { type: constants_1.LINK_PLUGIN_TYPE },
+    options: { isUrl: url_helper_1.UrlHelper.isValid },
+    render: { afterEditable: floating_link_1.FloatingLink },
 });
 exports.createLinkPlugin = createLinkPlugin;

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

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

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

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const platejs_1 = require("platejs");
+const url_helper_1 = require("../../utils/url-helper");
+const create_paragraph_plugin_1 = require("../paragraph/create-paragraph-plugin");
+const create_link_plugin_1 = require("./create-link-plugin");
+const editor = (0, platejs_1.createSlateEditor)({ plugins: [(0, create_paragraph_plugin_1.createParagraphPlugin)(), (0, create_link_plugin_1.createLinkPlugin)()] });
+describe("link", () => {
+    // The key/type split: Plate's own key is "a", the stored node type has always been "link".
+    it("keeps key a and stored type link", () => {
+        expect(editor.plugins.a.node.type).toBe("link");
+        expect(editor.getType("a")).toBe("link");
+    });
+    it("is an inline element", () => {
+        expect(editor.api.isInline({ children: [{ text: "x" }], type: "link" })).toBe(true);
+    });
+    it("validates urls with our own helper rather than Plate's", () => {
+        expect(editor.getOptions({ key: "a" }).isUrl).toBe(url_helper_1.UrlHelper.isValid);
+    });
+    // The floating-link state moved from a global zustand store to plugin options. Same field names.
+    it.each(["url", "text", "newTab", "isEditing", "mode"])("exposes %s as a plugin option", (option) => {
+        expect(editor.getOptions({ key: "a" })).toHaveProperty(option);
+    });
+});

package/plugins/link/floating-link-wrapper.d.ts

@@ -1,11 +1,18 @@
-import { HTMLPropsAs } from "@udecode/plate-common";
-import { UseVirtualFloatingOptions } from "@udecode/plate-floating";
-export type FloatingLinkProps = HTMLPropsAs<"div"> & {
+import { UseVirtualFloatingOptions } from "@platejs/floating";
+import React, { HTMLAttributes } from "react";
+export type FloatingLinkProps = HTMLAttributes<HTMLDivElement> & {
     floatingOptions?: UseVirtualFloatingOptions;
 };
-export declare const FloatingLinkEditRoot: import("@udecode/plate-utils").Component<FloatingLinkProps>;
-export declare const FloatingLinkInsertRoot: import("@udecode/plate-utils").Component<FloatingLinkProps>;
+/**
+ * Both wrappers exist to force our own `z-index` token over Plate's hardcoded 50, and to render
+ * nothing while the popover is closed. The `z-index` is load-bearing: a positioner is `position:
+ * fixed` and so its own stacking context (`.claude/learnings.md`, 2026-08-19).
+ *
+ * The insert hook reports `hidden`; the edit hook does not, so it is derived from its state.
+ */
+export declare function FloatingLinkInsertRoot(props: FloatingLinkProps): React.JSX.Element | null;
+export declare function FloatingLinkEditRoot(props: FloatingLinkProps): React.JSX.Element | null;
 export declare const FloatingLinkWrapper: {
-    EditRoot: import("@udecode/plate-utils").Component<FloatingLinkProps>;
-    InsertRoot: import("@udecode/plate-utils").Component<FloatingLinkProps>;
+    EditRoot: typeof FloatingLinkEditRoot;
+    InsertRoot: typeof FloatingLinkInsertRoot;
 };

package/plugins/link/floating-link-wrapper.js

@@ -1,26 +1,55 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FloatingLinkWrapper = exports.FloatingLinkInsertRoot = exports.FloatingLinkEditRoot = void 0;
-const plate_common_1 = require("@udecode/plate-common");
-const plate_link_1 = require("@udecode/plate-link");
+exports.FloatingLinkWrapper = void 0;
+exports.FloatingLinkInsertRoot = FloatingLinkInsertRoot;
+exports.FloatingLinkEditRoot = FloatingLinkEditRoot;
+const floating_1 = require("@platejs/floating");
+const react_1 = require("@platejs/link/react");
 const tw_z_index_1 = require("@uxf/ui/tw-tokens/tw-z-index");
-exports.FloatingLinkEditRoot = (0, plate_common_1.createComponentAs)((props) => {
-    var _a;
-    const htmlProps = (0, plate_link_1.useFloatingLinkEdit)(props);
-    if (((_a = htmlProps.style) === null || _a === void 0 ? void 0 : _a.display) === "none") {
+const react_2 = __importDefault(require("react"));
+/**
+ * Plate 20's `useVirtualFloatingLink` supplied these; Plate 53 passes only `onOpenChange` and leaves
+ * the rest to the consumer, so without them the popover never flips above the selection when there is
+ * no room below, sits flush against it, and centres instead of aligning to the start. Values are
+ * Plate 20's verbatim.
+ */
+const FLOATING_DEFAULTS = {
+    middleware: [(0, floating_1.offset)(12), (0, floating_1.flip)({ padding: 96 })],
+    placement: "bottom-start",
+};
+/** `floatingOptions` is consumed by the hook and must not reach the DOM. */
+function toDivProps(props) {
+    const divProps = { ...props };
+    delete divProps.floatingOptions;
+    return divProps;
+}
+/**
+ * Both wrappers exist to force our own `z-index` token over Plate's hardcoded 50, and to render
+ * nothing while the popover is closed. The `z-index` is load-bearing: a positioner is `position:
+ * fixed` and so its own stacking context (`.claude/learnings.md`, 2026-08-19).
+ *
+ * The insert hook reports `hidden`; the edit hook does not, so it is derived from its state.
+ */
+function FloatingLinkInsertRoot(props) {
+    const state = (0, react_1.useFloatingLinkInsertState)({ floatingOptions: { ...FLOATING_DEFAULTS, ...props.floatingOptions } });
+    const root = (0, react_1.useFloatingLinkInsert)(state);
+    if (root.hidden) {
         return null;
     }
-    return (0, plate_common_1.createElementAs)("div", { ...htmlProps, style: { ...htmlProps.style, zIndex: tw_z_index_1.twZIndex.modal } });
-});
-exports.FloatingLinkInsertRoot = (0, plate_common_1.createComponentAs)((props) => {
-    var _a;
-    const htmlProps = (0, plate_link_1.useFloatingLinkInsert)(props);
-    if (((_a = htmlProps.style) === null || _a === void 0 ? void 0 : _a.display) === "none") {
+    return (react_2.default.createElement("div", { ...toDivProps(props), ...root.props, ref: root.ref, style: { ...root.props.style, zIndex: tw_z_index_1.twZIndex.modal } }));
+}
+function FloatingLinkEditRoot(props) {
+    const state = (0, react_1.useFloatingLinkEditState)({ floatingOptions: { ...FLOATING_DEFAULTS, ...props.floatingOptions } });
+    const root = (0, react_1.useFloatingLinkEdit)(state);
+    if (state.readOnly || !state.isOpen) {
         return null;
     }
-    return (0, plate_common_1.createElementAs)("div", { ...htmlProps, style: { ...htmlProps.style, zIndex: tw_z_index_1.twZIndex.modal } });
-});
+    return (react_2.default.createElement("div", { ...toDivProps(props), ...root.props, ref: root.ref, style: { ...root.props.style, zIndex: tw_z_index_1.twZIndex.modal } }));
+}
 exports.FloatingLinkWrapper = {
-    EditRoot: exports.FloatingLinkEditRoot,
-    InsertRoot: exports.FloatingLinkInsertRoot,
+    EditRoot: FloatingLinkEditRoot,
+    InsertRoot: FloatingLinkInsertRoot,
 };

package/plugins/link/hooks/index.d.ts

@@ -1,4 +1,4 @@
-export { useFloatingLinkSelectors } from "@udecode/plate-link";
+export { useFloatingLinkSelectors } from "./use-floating-link-selectors";
 export { useLinkActions } from "./use-link-actions";
 export { useLinkCancelOnEscape } from "./use-link-cancel-on-escape";
 export { useLinkSubmitOnEnter } from "./use-link-submit-on-enter";

package/plugins/link/hooks/index.js

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useLinkSubmitOnEnter = exports.useLinkCancelOnEscape = exports.useLinkActions = exports.useFloatingLinkSelectors = void 0;
-var plate_link_1 = require("@udecode/plate-link");
-Object.defineProperty(exports, "useFloatingLinkSelectors", { enumerable: true, get: function () { return plate_link_1.useFloatingLinkSelectors; } });
+var use_floating_link_selectors_1 = require("./use-floating-link-selectors");
+Object.defineProperty(exports, "useFloatingLinkSelectors", { enumerable: true, get: function () { return use_floating_link_selectors_1.useFloatingLinkSelectors; } });
 var use_link_actions_1 = require("./use-link-actions");
 Object.defineProperty(exports, "useLinkActions", { enumerable: true, get: function () { return use_link_actions_1.useLinkActions; } });
 var use_link_cancel_on_escape_1 = require("./use-link-cancel-on-escape");

package/plugins/link/hooks/use-floating-link-selectors.d.ts

@@ -0,0 +1,8 @@
+/** Shim over `LinkPlugin` options, so the three call sites keep the Plate 20 getter-bundle shape. */
+export declare const useFloatingLinkSelectors: () => {
+    isEditing: () => boolean;
+    mode: () => import("@platejs/link/react").FloatingLinkMode;
+    newTab: () => boolean;
+    text: () => string;
+    url: () => string;
+};

package/plugins/link/hooks/use-floating-link-selectors.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFloatingLinkSelectors = void 0;
+const react_1 = require("@platejs/link/react");
+const react_2 = require("platejs/react");
+/** Shim over `LinkPlugin` options, so the three call sites keep the Plate 20 getter-bundle shape. */
+const useFloatingLinkSelectors = () => {
+    const isEditing = (0, react_2.usePluginOption)(react_1.LinkPlugin, "isEditing");
+    const url = (0, react_2.usePluginOption)(react_1.LinkPlugin, "url");
+    const text = (0, react_2.usePluginOption)(react_1.LinkPlugin, "text");
+    const newTab = (0, react_2.usePluginOption)(react_1.LinkPlugin, "newTab");
+    const mode = (0, react_2.usePluginOption)(react_1.LinkPlugin, "mode");
+    return {
+        isEditing: () => isEditing,
+        mode: () => mode,
+        newTab: () => newTab,
+        text: () => text,
+        url: () => url,
+    };
+};
+exports.useFloatingLinkSelectors = useFloatingLinkSelectors;