@hartl-services/medusa-base 2.5.0 → 2.6.0

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

@@ -0,0 +1,44 @@
+import type { AnyExtension, Editor, EditorOptions, JSONContent } from "@tiptap/react";
+import type { StarterKitOptions } from "@tiptap/starter-kit";
+import type { DependencyList } from "react";
+import type { NestedContainer } from "./drag-target";
+import type { SlashContext, SlashItem } from "./slash-items";
+export interface RichTextEditorConfig {
+    /** Passed to the starter kit; disable what the document may not contain. */
+    starterKit?: Partial<StarterKitOptions>;
+    /**
+     * The link mark. `false` leaves it out. Without `isAllowedHref` only http(s)
+     * and mailto targets are allowed. The base adds the mark itself (the starter
+     * kit's own is always off), never autolinks and never opens a link on click.
+     */
+    link?: false | {
+        isAllowedHref: (href: string) => boolean;
+    };
+    /** The owner's own nodes and marks, added after the starter kit and link. */
+    extensions?: AnyExtension[];
+    /** The entries of the "/" menu for a query; the menu exists only with it. */
+    slashItems?: (context: SlashContext) => SlashItem[];
+    /** A grip left of each block, to move it; `true` for the plain grip. */
+    dragHandle?: boolean | {
+        nestedContainers?: NestedContainer[];
+    };
+    /** Accessible name of the writing area. */
+    ariaLabel?: string;
+    /**
+     * ProseMirror props of the editor. `attributes` must be an object (not the
+     * function form); it is merged over the base's `role` and `aria-label`.
+     */
+    editorProps?: EditorOptions["editorProps"];
+}
+/**
+ * A TipTap editor for `RichTextEditor`: the starter kit as configured, the
+ * link mark, the owner's `extensions`, the slash menu and the drag handle.
+ *
+ * The editor is created once and re-created only when `deps` change, with the
+ * `config` and `initialContent` of that render: the starter kit, extensions,
+ * which features are on, `ariaLabel` and `editorProps` are read then. The
+ * `isAllowedHref` and `slashItems` callbacks are read on every use, so they
+ * always see the latest render. With `deps` = `[]` the editor lives as long
+ * as the component; `deps` is required.
+ */
+export declare const useRichTextEditor: (config: RichTextEditorConfig, initialContent: JSONContent | undefined, deps: DependencyList) => Editor | null;

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

@@ -0,0 +1,37 @@
+import { useEditor } from "@tiptap/react";
+import { useLayoutEffect, useMemo, useRef } from "react";
+import { buildExtensions } from "./build-extensions";
+/**
+ * A TipTap editor for `RichTextEditor`: the starter kit as configured, the
+ * link mark, the owner's `extensions`, the slash menu and the drag handle.
+ *
+ * The editor is created once and re-created only when `deps` change, with the
+ * `config` and `initialContent` of that render: the starter kit, extensions,
+ * which features are on, `ariaLabel` and `editorProps` are read then. The
+ * `isAllowedHref` and `slashItems` callbacks are read on every use, so they
+ * always see the latest render. With `deps` = `[]` the editor lives as long
+ * as the component; `deps` is required.
+ */
+export const useRichTextEditor = (config, initialContent, deps) => {
+    // Callbacks read the ref on use, after the layout effect has run; the editor
+    // itself is created from `config` of this render.
+    const configRef = useRef(config);
+    useLayoutEffect(() => {
+        configRef.current = config;
+    });
+    // The extensions are the editor's identity: `useEditor` re-creates the
+    // editor when they change and, with a stable list, keeps its options as is.
+    const extensions = useMemo(() => buildExtensions(config, configRef), deps);
+    return useEditor({
+        extensions,
+        content: initialContent,
+        editorProps: {
+            ...config.editorProps,
+            attributes: {
+                role: "textbox",
+                ...(config.ariaLabel ? { "aria-label": config.ariaLabel } : {}),
+                ...config.editorProps?.attributes,
+            },
+        },
+    }, [extensions]);
+};