@hartl-services/medusa-base 2.5.0 → 2.6.0

package/.medusa/server/src/admin/admin-components/shared/ui/rich-text-editor/SlashMenu.d.ts

@@ -0,0 +1,11 @@
+import type { SlashItem } from "./slash-items";
+export interface SlashMenuHandle {
+    /** Returns whether the key was used by the menu. */
+    onKeyDown: (event: KeyboardEvent) => boolean;
+}
+interface SlashMenuProps {
+    items: SlashItem[];
+    command: (item: SlashItem) => void;
+}
+export declare const SlashMenu: import("react").ForwardRefExoticComponent<SlashMenuProps & import("react").RefAttributes<SlashMenuHandle>>;
+export {};

package/.medusa/server/src/admin/admin-components/shared/ui/rich-text-editor/SlashMenu.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Text } from "@medusajs/ui";
+import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react";
+// The popup list of the slash menu. Keys come from the editor (it keeps the
+// focus), so the list is driven through the imperative `onKeyDown`.
+export const SlashMenu = forwardRef(({ items, command }, ref) => {
+    const [selected, setSelected] = useState(0);
+    const selectedRef = useRef(null);
+    useEffect(() => {
+        setSelected(0);
+    }, [items]);
+    useEffect(() => {
+        selectedRef.current?.scrollIntoView({ block: "nearest" });
+    }, [selected]);
+    const choose = (index) => {
+        const item = items[index];
+        if (item) {
+            command(item);
+        }
+    };
+    useImperativeHandle(ref, () => ({
+        onKeyDown: (event) => {
+            if (event.key === "ArrowDown") {
+                setSelected((current) => (items.length ? (current + 1) % items.length : 0));
+                return true;
+            }
+            if (event.key === "ArrowUp") {
+                setSelected((current) => items.length ? (current - 1 + items.length) % items.length : 0);
+                return true;
+            }
+            if (event.key === "Enter" && items.length) {
+                choose(selected);
+                return true;
+            }
+            return false;
+        },
+    }));
+    return (_jsx("div", { className: "bg-ui-bg-base border-ui-border-base shadow-elevation-flyout max-h-72 min-w-56 overflow-y-auto rounded-lg border p-1", role: "listbox", "aria-label": "Befehle", children: items.length ? (items.map((item, index) => (
+        // eslint-disable-next-line no-restricted-syntax -- Slash-Menü-Eintrag mit Fokus im Editor
+        _jsxs("button", { "aria-selected": index === selected, className: `flex w-full items-center justify-between gap-4 rounded-md px-2 py-1.5 text-left ${index === selected ? "bg-ui-bg-base-pressed" : "hover:bg-ui-bg-base-hover"}`, 
+            // Keep the focus in the editor.
+            onMouseDown: (event) => event.preventDefault(), onClick: () => choose(index), onMouseEnter: () => setSelected(index), ref: index === selected ? selectedRef : undefined, role: "option", type: "button", children: [_jsx(Text, { size: "small", children: item.label }), _jsx(Text, { className: "text-ui-fg-muted", size: "xsmall", children: item.hint })] }, item.id)))) : (_jsx(Text, { className: "text-ui-fg-subtle px-2 py-1.5", size: "small", children: "Keine Treffer" })) }));
+});
+SlashMenu.displayName = "SlashMenu";

package/.medusa/server/src/admin/admin-components/shared/ui/rich-text-editor/build-extensions.d.ts

@@ -0,0 +1,8 @@
+import type { AnyExtension } from "@tiptap/react";
+import type { MutableRefObject } from "react";
+import type { RichTextEditorConfig } from "./use-rich-text-editor";
+/**
+ * The extensions of one editor. `configRef` is read on use (link policy and
+ * slash items), everything else from `config` when the editor is created.
+ */
+export declare const buildExtensions: (config: RichTextEditorConfig, configRef: MutableRefObject<RichTextEditorConfig>) => AnyExtension[];

package/.medusa/server/src/admin/admin-components/shared/ui/rich-text-editor/build-extensions.js

@@ -0,0 +1,43 @@
+import Link from "@tiptap/extension-link";
+import StarterKit from "@tiptap/starter-kit";
+import { DragHandle } from "./drag-handle";
+import { isDefaultAllowedHref } from "./link-href";
+import { LinkPolicy } from "./link-policy";
+import { SlashCommand } from "./slash-command";
+const currentIsAllowedHref = (configRef, href) => {
+    const { link } = configRef.current;
+    return (link ? link.isAllowedHref : isDefaultAllowedHref)(href);
+};
+/**
+ * The extensions of one editor. `configRef` is read on use (link policy and
+ * slash items), everything else from `config` when the editor is created.
+ */
+export const buildExtensions = (config, configRef) => {
+    const extensions = [
+        StarterKit.configure({ ...config.starterKit, link: false }),
+    ];
+    if (config.link !== false) {
+        extensions.push(LinkPolicy.configure({
+            isAllowedHref: (href) => currentIsAllowedHref(configRef, href),
+        }), Link.configure({
+            autolink: false,
+            linkOnPaste: false,
+            openOnClick: false,
+            isAllowedUri: (url) => currentIsAllowedHref(configRef, url),
+        }));
+    }
+    extensions.push(...(config.extensions ?? []));
+    if (config.slashItems) {
+        extensions.push(SlashCommand.configure({
+            items: (context) => configRef.current.slashItems?.(context) ?? [],
+        }));
+    }
+    if (config.dragHandle) {
+        extensions.push(DragHandle.configure({
+            nestedContainers: typeof config.dragHandle === "object"
+                ? (config.dragHandle.nestedContainers ?? [])
+                : [],
+        }));
+    }
+    return extensions;
+};

package/.medusa/server/src/admin/admin-components/shared/ui/rich-text-editor/drag-handle.d.ts

@@ -0,0 +1,15 @@
+import { Extension } from "@tiptap/react";
+import { PluginKey } from "@tiptap/pm/state";
+import type { NestedContainer } from "./drag-target";
+export declare const dragHandleKey: PluginKey<any>;
+interface DragHandleOptions {
+    /** Containers whose children get a grip of their own. */
+    nestedContainers: NestedContainer[];
+}
+/**
+ * A grip left of the block under the pointer; dragging it moves the whole
+ * top-level block. Inside a nested container the grip belongs to the child
+ * under the pointer. The grip sits in the editor's left padding.
+ */
+export declare const DragHandle: Extension<DragHandleOptions, any>;
+export {};

package/.medusa/server/src/admin/admin-components/shared/ui/rich-text-editor/drag-handle.js

@@ -0,0 +1,161 @@
+import { Extension } from "@tiptap/react";
+import { NodeSelection, Plugin, PluginKey } from "@tiptap/pm/state";
+import { resolveDragTarget } from "./drag-target";
+const HANDLE_CLASS = "rte-drag-handle";
+const HANDLE_GLYPH = "⠿";
+const HANDLE_TITLE = "Block verschieben";
+export const dragHandleKey = new PluginKey("rteDragHandle");
+const HANDLE_WIDTH = 22;
+const contains = (rect, x, y) => x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom;
+class DragHandleView {
+    constructor(view, containers) {
+        this.view = view;
+        this.containers = containers;
+        this.blockPos = null;
+        this.hide = () => {
+            this.blockPos = null;
+            this.handle.style.display = "none";
+        };
+        // Moving between the editor and its handle keeps the handle.
+        this.onLeave = (event) => {
+            const next = event.relatedTarget;
+            if (next instanceof Node &&
+                (this.handle.contains(next) || this.view.dom.contains(next))) {
+                return;
+            }
+            this.hide();
+        };
+        this.onMouseMove = (event) => {
+            const container = this.handle.parentElement;
+            if (!this.view.editable || !container) {
+                this.hide();
+                return;
+            }
+            // Over the handle itself the target stays, so the handle can be grabbed.
+            if (this.handle.style.display !== "none" &&
+                contains(this.handle.getBoundingClientRect(), event.clientX, event.clientY)) {
+                return;
+            }
+            container.style.position = "relative";
+            // The handle sits in the editor's left padding; look up the block at the
+            // text column so hovering the padding still finds it.
+            const contentRect = this.view.dom.getBoundingClientRect();
+            const paddingLeft = Number.parseFloat(getComputedStyle(this.view.dom).paddingLeft);
+            const left = Math.max(event.clientX, contentRect.left + paddingLeft + 1);
+            const hit = this.view.posAtCoords({ left, top: event.clientY });
+            if (!hit) {
+                this.hide();
+                return;
+            }
+            const pos = resolveDragTarget(this.view.state.doc, hit, this.containers, (containerPos, container) => this.pointerInContainerContent(containerPos, container, event));
+            if (pos === null) {
+                this.hide();
+                return;
+            }
+            if (pos === this.blockPos) {
+                return;
+            }
+            const dom = this.view.nodeDOM(pos);
+            if (!(dom instanceof HTMLElement)) {
+                this.hide();
+                return;
+            }
+            const domRect = dom.getBoundingClientRect();
+            const containerRect = container.getBoundingClientRect();
+            const nested = this.view.state.doc.resolve(pos).depth > 0;
+            this.blockPos = pos;
+            this.handle.style.top = `${domRect.top - containerRect.top}px`;
+            // A child of a nested container gets the handle at its own left edge,
+            // inside the container's padding; top-level blocks use the stylesheet's.
+            this.handle.style.left = nested
+                ? `${domRect.left - containerRect.left - HANDLE_WIDTH}px`
+                : "";
+            this.handle.style.display = "block";
+        };
+        this.onDragStart = (event) => {
+            const { view, blockPos } = this;
+            const node = blockPos === null ? null : view.state.doc.nodeAt(blockPos);
+            if (blockPos === null || !node || !event.dataTransfer) {
+                event.preventDefault();
+                return;
+            }
+            // Select the block and tell ProseMirror a move of the selection is under
+            // way; its drop handling then inserts at the drop point and deletes the
+            // original.
+            const selection = NodeSelection.create(view.state.doc, blockPos);
+            view.dispatch(view.state.tr.setSelection(selection));
+            view.dragging = { slice: selection.content(), move: true };
+            event.dataTransfer.effectAllowed = "copyMove";
+            event.dataTransfer.setData("text/plain", node.textContent || " ");
+            const dom = view.nodeDOM(blockPos);
+            if (dom instanceof HTMLElement) {
+                event.dataTransfer.setDragImage(dom, 0, 0);
+            }
+        };
+        // A cancelled drag never reaches ProseMirror's drop handler.
+        this.onDragEnd = () => {
+            setTimeout(() => {
+                this.view.dragging = null;
+            }, 50);
+        };
+        this.handle = document.createElement("div");
+        this.handle.className = HANDLE_CLASS;
+        this.handle.textContent = HANDLE_GLYPH;
+        this.handle.title = HANDLE_TITLE;
+        this.handle.draggable = true;
+        this.handle.style.display = "none";
+        // The handle is a sibling of the editor's DOM, in the same container.
+        // React's EditorContent moves all siblings into its own element on mount,
+        // so the container is looked up when it is needed, not stored.
+        view.dom.parentElement?.append(this.handle);
+        view.dom.addEventListener("mousemove", this.onMouseMove);
+        view.dom.addEventListener("mouseleave", this.onLeave);
+        this.handle.addEventListener("mouseleave", this.onLeave);
+        this.handle.addEventListener("dragstart", this.onDragStart);
+        this.handle.addEventListener("dragend", this.onDragEnd);
+    }
+    // The positions the handle remembers are stale after any document change.
+    update(view, previousState) {
+        if (!view.state.doc.eq(previousState.doc) || !view.editable) {
+            this.hide();
+        }
+    }
+    destroy() {
+        this.view.dom.removeEventListener("mousemove", this.onMouseMove);
+        this.view.dom.removeEventListener("mouseleave", this.onLeave);
+        this.handle.removeEventListener("mouseleave", this.onLeave);
+        this.handle.removeEventListener("dragstart", this.onDragStart);
+        this.handle.removeEventListener("dragend", this.onDragEnd);
+        this.handle.remove();
+    }
+    // Whether the real pointer is in the (padded) content column of the
+    // container at `containerPos`, not on its header or border.
+    pointerInContainerContent(containerPos, container, event) {
+        const dom = this.view.nodeDOM(containerPos);
+        const content = dom instanceof HTMLElement
+            ? dom.querySelector(container.contentSelector)
+            : null;
+        return (content !== null &&
+            contains(content.getBoundingClientRect(), event.clientX, event.clientY));
+    }
+}
+/**
+ * A grip left of the block under the pointer; dragging it moves the whole
+ * top-level block. Inside a nested container the grip belongs to the child
+ * under the pointer. The grip sits in the editor's left padding.
+ */
+export const DragHandle = Extension.create({
+    name: "dragHandle",
+    addOptions() {
+        return { nestedContainers: [] };
+    },
+    addProseMirrorPlugins() {
+        const { nestedContainers } = this.options;
+        return [
+            new Plugin({
+                key: dragHandleKey,
+                view: (view) => new DragHandleView(view, nestedContainers),
+            }),
+        ];
+    },
+});

package/.medusa/server/src/admin/admin-components/shared/ui/rich-text-editor/drag-target.d.ts

@@ -0,0 +1,30 @@
+import type { Node as ProseMirrorNode } from "@tiptap/pm/model";
+/** What `EditorView.posAtCoords` returns. */
+export interface CoordsHit {
+    pos: number;
+    inside: number;
+}
+/**
+ * A top-level node whose children get a drag handle of their own: its
+ * `nodeName`, and the `contentSelector` of the element holding the children
+ * (the area the handle follows the child in, not the container's header).
+ */
+export interface NestedContainer {
+    nodeName: string;
+    contentSelector: string;
+}
+/**
+ * Document position of the block under a hit at the given depth: 1 = top-level
+ * block, 2 = child of a top-level container. Falls back to the shallower
+ * block when the hit is not nested that deep.
+ */
+export declare const blockPosAtDepth: (doc: ProseMirrorNode, hit: CoordsHit, depth: 1 | 2) => number | null;
+/**
+ * The block the drag handle belongs to. Normally the top-level block; with
+ * the pointer in the content area of a nested container (`isPointerInContent`
+ * is asked with the container's position and the container) it is the child
+ * under the pointer. The only child of a container has no handle (`null`):
+ * moving it would leave an empty container behind, so the container moves as
+ * a whole.
+ */
+export declare const resolveDragTarget: (doc: ProseMirrorNode, hit: CoordsHit, containers: readonly NestedContainer[], isPointerInContent: (containerPos: number, container: NestedContainer) => boolean) => number | null;

package/.medusa/server/src/admin/admin-components/shared/ui/rich-text-editor/drag-target.js

@@ -0,0 +1,47 @@
+/**
+ * Document position of the block under a hit at the given depth: 1 = top-level
+ * block, 2 = child of a top-level container. Falls back to the shallower
+ * block when the hit is not nested that deep.
+ */
+export const blockPosAtDepth = (doc, hit, depth) => {
+    if (hit.inside >= 0) {
+        const $inside = doc.resolve(hit.inside);
+        return $inside.depth < depth ? hit.inside : $inside.before(depth);
+    }
+    // Between blocks.
+    const $pos = doc.resolve(hit.pos);
+    if ($pos.depth >= depth) {
+        return $pos.before(depth);
+    }
+    if ($pos.nodeAfter) {
+        return hit.pos;
+    }
+    return $pos.nodeBefore ? hit.pos - $pos.nodeBefore.nodeSize : null;
+};
+/**
+ * The block the drag handle belongs to. Normally the top-level block; with
+ * the pointer in the content area of a nested container (`isPointerInContent`
+ * is asked with the container's position and the container) it is the child
+ * under the pointer. The only child of a container has no handle (`null`):
+ * moving it would leave an empty container behind, so the container moves as
+ * a whole.
+ */
+export const resolveDragTarget = (doc, hit, containers, isPointerInContent) => {
+    const top = blockPosAtDepth(doc, hit, 1);
+    if (top === null) {
+        return null;
+    }
+    const topNode = doc.nodeAt(top);
+    const container = containers.find((candidate) => candidate.nodeName === topNode?.type.name);
+    if (!topNode || !container || !isPointerInContent(top, container)) {
+        return top;
+    }
+    if (topNode.childCount <= 1) {
+        return null;
+    }
+    const child = blockPosAtDepth(doc, hit, 2);
+    // A hit on the container itself (e.g. its border) stays the container.
+    return child !== null && child > top && child < top + topNode.nodeSize
+        ? child
+        : top;
+};

package/.medusa/server/src/admin/admin-components/shared/ui/rich-text-editor/editor-styles.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Base styles of the rich-text editor: the writing area, paragraphs, lists,
+ * links, selected nodes and the drag handle. The left padding is where the
+ * drag handle sits.
+ */
+export declare const RICH_TEXT_EDITOR_STYLES = "\n.rte-editor .ProseMirror {\n  min-height: 160px;\n  padding: 12px 16px 12px 40px;\n  outline: none;\n  font-size: 14px;\n  line-height: 1.5;\n}\n.rte-editor .ProseMirror p { margin: 0 0 0.75em; }\n.rte-editor .ProseMirror ul { margin: 0 0 0.75em; padding-left: 1.5rem; list-style: disc; }\n.rte-editor .ProseMirror li p { margin: 0 0 0.25em; }\n.rte-editor .ProseMirror a {\n  color: var(--fg-interactive, #3b82f6);\n  text-decoration: underline;\n  cursor: text;\n}\n.rte-editor .ProseMirror-selectednode,\n.rte-editor [data-selected=\"true\"] {\n  outline: 2px solid var(--border-interactive, #3b82f6);\n  outline-offset: 1px;\n}\n.rte-editor .ProseMirror-gapcursor:after { border-top-color: var(--fg-base, #111); }\n.rte-drag-handle {\n  position: absolute;\n  left: 10px;\n  width: 22px;\n  height: 22px;\n  border-radius: 4px;\n  color: var(--fg-muted, #9ca3af);\n  font-size: 16px;\n  line-height: 22px;\n  text-align: center;\n  cursor: grab;\n  user-select: none;\n}\n.rte-drag-handle:hover {\n  background: var(--bg-base-hover, #f4f4f5);\n  color: var(--fg-base, #111);\n}\n.rte-drag-handle:active { cursor: grabbing; }\n";

package/.medusa/server/src/admin/admin-components/shared/ui/rich-text-editor/editor-styles.js

@@ -0,0 +1,46 @@
+/**
+ * Base styles of the rich-text editor: the writing area, paragraphs, lists,
+ * links, selected nodes and the drag handle. The left padding is where the
+ * drag handle sits.
+ */
+export const RICH_TEXT_EDITOR_STYLES = `
+.rte-editor .ProseMirror {
+  min-height: 160px;
+  padding: 12px 16px 12px 40px;
+  outline: none;
+  font-size: 14px;
+  line-height: 1.5;
+}
+.rte-editor .ProseMirror p { margin: 0 0 0.75em; }
+.rte-editor .ProseMirror ul { margin: 0 0 0.75em; padding-left: 1.5rem; list-style: disc; }
+.rte-editor .ProseMirror li p { margin: 0 0 0.25em; }
+.rte-editor .ProseMirror a {
+  color: var(--fg-interactive, #3b82f6);
+  text-decoration: underline;
+  cursor: text;
+}
+.rte-editor .ProseMirror-selectednode,
+.rte-editor [data-selected="true"] {
+  outline: 2px solid var(--border-interactive, #3b82f6);
+  outline-offset: 1px;
+}
+.rte-editor .ProseMirror-gapcursor:after { border-top-color: var(--fg-base, #111); }
+.rte-drag-handle {
+  position: absolute;
+  left: 10px;
+  width: 22px;
+  height: 22px;
+  border-radius: 4px;
+  color: var(--fg-muted, #9ca3af);
+  font-size: 16px;
+  line-height: 22px;
+  text-align: center;
+  cursor: grab;
+  user-select: none;
+}
+.rte-drag-handle:hover {
+  background: var(--bg-base-hover, #f4f4f5);
+  color: var(--fg-base, #111);
+}
+.rte-drag-handle:active { cursor: grabbing; }
+`;

package/.medusa/server/src/admin/admin-components/shared/ui/rich-text-editor/index.d.ts

@@ -0,0 +1,9 @@
+export { RichTextEditor } from "./RichTextEditor";
+export { InsertMenu } from "./InsertMenu";
+export { useRichTextEditor } from "./use-rich-text-editor";
+export type { RichTextEditorConfig } from "./use-rich-text-editor";
+export { filterSlashItems } from "./slash-items";
+export type { SlashContext, SlashItem } from "./slash-items";
+export type { NestedContainer } from "./drag-target";
+export { isDefaultAllowedHref, normalizeLinkHref } from "./link-href";
+export * from "./tiptap";

package/.medusa/server/src/admin/admin-components/shared/ui/rich-text-editor/index.js

@@ -0,0 +1,6 @@
+export { RichTextEditor } from "./RichTextEditor";
+export { InsertMenu } from "./InsertMenu";
+export { useRichTextEditor } from "./use-rich-text-editor";
+export { filterSlashItems } from "./slash-items";
+export { isDefaultAllowedHref, normalizeLinkHref } from "./link-href";
+export * from "./tiptap";

package/.medusa/server/src/admin/admin-components/shared/ui/rich-text-editor/link-href.d.ts

@@ -0,0 +1,8 @@
+/** Link targets allowed unless an editor says otherwise: http(s) and mailto. */
+export declare const isDefaultAllowedHref: (href: string) => boolean;
+/**
+ * A link target typed by the Admin to an allowed href: a bare address becomes
+ * `mailto:`, a bare host `https://`. `null` when `isAllowed` accepts nothing
+ * that results.
+ */
+export declare const normalizeLinkHref: (input: string, isAllowed: (href: string) => boolean) => string | null;

package/.medusa/server/src/admin/admin-components/shared/ui/rich-text-editor/link-href.js

@@ -0,0 +1,21 @@
+const HAS_SCHEME = /^[a-z][a-z0-9+.-]*:/i;
+/** Link targets allowed unless an editor says otherwise: http(s) and mailto. */
+export const isDefaultAllowedHref = (href) => /^(https?:\/\/|mailto:)[^\s"<>]+$/i.test(href);
+/**
+ * A link target typed by the Admin to an allowed href: a bare address becomes
+ * `mailto:`, a bare host `https://`. `null` when `isAllowed` accepts nothing
+ * that results.
+ */
+export const normalizeLinkHref = (input, isAllowed) => {
+    const value = input.trim();
+    if (!value) {
+        return null;
+    }
+    let href = value;
+    if (!HAS_SCHEME.test(value)) {
+        href = /^[^\s@/]+@[^\s@/]+$/.test(value)
+            ? `mailto:${value}`
+            : `https://${value}`;
+    }
+    return isAllowed(href) ? href : null;
+};

package/.medusa/server/src/admin/admin-components/shared/ui/rich-text-editor/link-policy.d.ts

@@ -0,0 +1,13 @@
+import { Extension } from "@tiptap/react";
+import type { Editor } from "@tiptap/react";
+interface LinkPolicyOptions {
+    isAllowedHref: (href: string) => boolean;
+}
+/**
+ * Holds the link policy of an editor in its storage, so the Link mark, the
+ * toolbar and the link prompt all read the same function from the editor.
+ */
+export declare const LinkPolicy: Extension<LinkPolicyOptions, any>;
+/** The link targets `editor` accepts; http(s) and mailto without a policy. */
+export declare const getLinkPolicy: (editor: Editor) => ((href: string) => boolean);
+export {};

package/.medusa/server/src/admin/admin-components/shared/ui/rich-text-editor/link-policy.js

@@ -0,0 +1,20 @@
+import { Extension } from "@tiptap/react";
+import { isDefaultAllowedHref } from "./link-href";
+/**
+ * Holds the link policy of an editor in its storage, so the Link mark, the
+ * toolbar and the link prompt all read the same function from the editor.
+ */
+export const LinkPolicy = Extension.create({
+    name: "linkPolicy",
+    addOptions() {
+        return { isAllowedHref: isDefaultAllowedHref };
+    },
+    addStorage() {
+        return { isAllowedHref: this.options.isAllowedHref };
+    },
+});
+/** The link targets `editor` accepts; http(s) and mailto without a policy. */
+export const getLinkPolicy = (editor) => {
+    const storage = editor.storage;
+    return storage.linkPolicy?.isAllowedHref ?? isDefaultAllowedHref;
+};

package/.medusa/server/src/admin/admin-components/shared/ui/rich-text-editor/slash-command.d.ts

@@ -0,0 +1,13 @@
+import { Extension } from "@tiptap/react";
+import type { SlashContext, SlashItem } from "./slash-items";
+interface SlashCommandOptions {
+    /** The entries for the typed query; already filtered by it. */
+    items: (context: SlashContext) => SlashItem[];
+}
+/**
+ * "/" at the start of a line or after a space opens a filterable list of what
+ * can be inserted. The entries come from the `items` option; Tiptap's
+ * suggestion plugin handles the trigger, Escape and the anchor position.
+ */
+export declare const SlashCommand: Extension<SlashCommandOptions, any>;
+export {};

package/.medusa/server/src/admin/admin-components/shared/ui/rich-text-editor/slash-command.js

@@ -0,0 +1,60 @@
+import { Extension, ReactRenderer } from "@tiptap/react";
+import Suggestion from "@tiptap/suggestion";
+import { SlashMenu } from "./SlashMenu";
+const POPUP_Z_INDEX = "60";
+/**
+ * "/" at the start of a line or after a space opens a filterable list of what
+ * can be inserted. The entries come from the `items` option; Tiptap's
+ * suggestion plugin handles the trigger, Escape and the anchor position.
+ */
+export const SlashCommand = Extension.create({
+    name: "slashCommand",
+    addOptions() {
+        return { items: () => [] };
+    },
+    addProseMirrorPlugins() {
+        const { items } = this.options;
+        return [
+            Suggestion({
+                editor: this.editor,
+                char: "/",
+                allowedPrefixes: [" "],
+                items: ({ query, editor }) => items({ query, editor }),
+                command: ({ editor, range, props }) => {
+                    props.run(editor, range);
+                },
+                render: () => {
+                    let component = null;
+                    let unmount = null;
+                    return {
+                        onStart: (props) => {
+                            component = new ReactRenderer(SlashMenu, {
+                                props,
+                                editor: props.editor,
+                            });
+                            component.element.style.zIndex = POPUP_Z_INDEX;
+                            // The plugin mounts the popup, anchors it at the "/" and keeps
+                            // it positioned with Floating UI.
+                            unmount = props.mount(component.element);
+                        },
+                        onUpdate: (props) => {
+                            component?.updateProps(props);
+                        },
+                        onKeyDown: ({ event }) => {
+                            if (event.key === "Escape") {
+                                return true;
+                            }
+                            return component?.ref?.onKeyDown(event) ?? false;
+                        },
+                        onExit: () => {
+                            unmount?.();
+                            unmount = null;
+                            component?.destroy();
+                            component = null;
+                        },
+                    };
+                },
+            }),
+        ];
+    },
+});

package/.medusa/server/src/admin/admin-components/shared/ui/rich-text-editor/slash-items.d.ts

@@ -0,0 +1,25 @@
+import type { Editor, Range } from "@tiptap/react";
+/** One entry of the slash menu. */
+export interface SlashItem<T = unknown> {
+    /** Unique within one menu. */
+    id: string;
+    label: string;
+    /** What the entry is, shown beside the label. */
+    hint?: string;
+    /** The owner's own description of the entry, for its own code and tests. */
+    data: T;
+    /** Runs the entry; `range` is the typed "/query", still in the document. */
+    run: (editor: Editor, range: Range) => void;
+}
+/** What the slash menu knows when it asks for its entries. */
+export interface SlashContext {
+    query: string;
+    editor: Editor;
+}
+/**
+ * The entries whose label contains the typed query (case-insensitive, outer
+ * whitespace ignored); all of them for an empty query.
+ */
+export declare const filterSlashItems: <I extends {
+    label: string;
+}>(items: I[], query: string) => I[];

package/.medusa/server/src/admin/admin-components/shared/ui/rich-text-editor/slash-items.js

@@ -0,0 +1,10 @@
+/**
+ * The entries whose label contains the typed query (case-insensitive, outer
+ * whitespace ignored); all of them for an empty query.
+ */
+export const filterSlashItems = (items, query) => {
+    const needle = query.trim().toLowerCase();
+    return needle
+        ? items.filter((item) => item.label.toLowerCase().includes(needle))
+        : items;
+};

package/.medusa/server/src/admin/admin-components/shared/ui/rich-text-editor/tiptap.d.ts

@@ -0,0 +1,7 @@
+/**
+ * TipTap building blocks for nodes and marks written outside of base, so a
+ * plugin needs no @tiptap dependency (and no second copy of it) of its own.
+ */
+export { Extension, Mark, mergeAttributes, Node, NodeViewContent, NodeViewWrapper, ReactNodeViewRenderer, useEditorState, } from "@tiptap/react";
+export { NodeSelection, Plugin, PluginKey, TextSelection, } from "@tiptap/pm/state";
+export type { AnyExtension, ChainedCommands, Editor, JSONContent, NodeViewProps, Range, } from "@tiptap/react";

package/.medusa/server/src/admin/admin-components/shared/ui/rich-text-editor/tiptap.js

@@ -0,0 +1,7 @@
+/**
+ * TipTap building blocks for nodes and marks written outside of base, so a
+ * plugin needs no @tiptap dependency (and no second copy of it) of its own.
+ */
+export { Extension, Mark, mergeAttributes, Node, NodeViewContent, NodeViewWrapper, ReactNodeViewRenderer, useEditorState, } from "@tiptap/react";
+// ProseMirror pieces that extension authors need (plugins, selections).
+export { NodeSelection, Plugin, PluginKey, TextSelection, } from "@tiptap/pm/state";