@thebes/cadmea 1.1.1 → 1.3.0

package/dist/RichTextEditor-CPQTvhQD.js

@@ -0,0 +1,190 @@
+import { createComponent, escape, ssr, ssrAttribute, ssrStyleProperty } from "solid-js/web";
+import { For, Show, createSignal, onCleanup, onMount } from "solid-js";
+import "@tiptap/core";
+import "@tiptap/extension-image";
+import "@tiptap/starter-kit";
+//#region src/RichTextEditor.tsx
+var _tmpl$ = "<span class=\"font-bold\">B</span>", _tmpl$2 = "<span class=\"italic\">I</span>", _tmpl$3 = "<span class=\"underline\">U</span>", _tmpl$4 = "<span class=\"bg-base-300 mx-1 h-4 w-px\" aria-hidden=\"true\"></span>", _tmpl$5 = [
+	"<div role=\"menu\" aria-label=\"Insert block\" class=\"bg-base-100 border-base-300 rounded-box absolute z-10 flex min-w-44 flex-col border p-1 shadow\" style=\"",
+	"\">",
+	"</div>"
+], _tmpl$6 = "<input type=\"file\" accept=\"image/*\" class=\"hidden\">", _tmpl$7 = [
+	"<div class=\"border-base-300 rounded-box border\"><div class=\"border-base-300 flex flex-wrap items-center gap-0.5 border-b p-1\">",
+	"",
+	"",
+	"",
+	"<span class=\"bg-base-300 mx-1 h-4 w-px\" aria-hidden=\"true\"></span>",
+	"",
+	"",
+	"",
+	"",
+	"",
+	"",
+	"</div><div class=\"relative\"><div",
+	" class=\"min-h-32 p-3\"></div>",
+	"</div>",
+	"</div>"
+], _tmpl$8 = [
+	"<button type=\"button\" role=\"menuitem\" class=\"",
+	"\">",
+	"</button>"
+], _tmpl$9 = [
+	"<button type=\"button\"",
+	" class=\"",
+	"\">",
+	"</button>"
+];
+function filterSlashItems(items, query) {
+	const q = query.toLowerCase();
+	if (!q) return items;
+	return items.filter((it) => it.label.toLowerCase().includes(q) || it.keywords.includes(q));
+}
+function RichTextEditor(props) {
+	const [tick, setTick] = createSignal(0);
+	const [slash, setSlash] = createSignal(null);
+	const [activeIdx, setActiveIdx] = createSignal(0);
+	const slashItems = () => {
+		const items = [
+			{
+				label: "Heading 2",
+				keywords: "h2 title heading",
+				run: (e) => e.chain().focus().toggleHeading({ level: 2 }).run()
+			},
+			{
+				label: "Heading 3",
+				keywords: "h3 subtitle heading",
+				run: (e) => e.chain().focus().toggleHeading({ level: 3 }).run()
+			},
+			{
+				label: "Bullet list",
+				keywords: "ul unordered bullets",
+				run: (e) => e.chain().focus().toggleBulletList().run()
+			},
+			{
+				label: "Numbered list",
+				keywords: "ol ordered numbers",
+				run: (e) => e.chain().focus().toggleOrderedList().run()
+			},
+			{
+				label: "Quote",
+				keywords: "blockquote citation",
+				run: (e) => e.chain().focus().toggleBlockquote().run()
+			},
+			{
+				label: "Divider",
+				keywords: "hr rule separator line",
+				run: (e) => e.chain().focus().setHorizontalRule().run()
+			}
+		];
+		if (props.onUploadFile) items.push({
+			label: "Image",
+			keywords: "img photo picture upload",
+			run: () => void 0
+		});
+		return items;
+	};
+	const filteredSlash = () => {
+		const s = slash();
+		return s ? filterSlashItems(slashItems(), s.query) : [];
+	};
+	onMount(() => {});
+	onCleanup(() => void 0);
+	const isActive = (name, attrs) => {
+		tick();
+		return Boolean(void 0);
+	};
+	function setLink() {}
+	return ssr(_tmpl$7, escape(createComponent(ToolbarButton, {
+		label: "Bold",
+		onClick: () => void 0,
+		active: () => isActive("bold"),
+		get children() {
+			return ssr(_tmpl$);
+		}
+	})), escape(createComponent(ToolbarButton, {
+		label: "Italic",
+		onClick: () => void 0,
+		active: () => isActive("italic"),
+		get children() {
+			return ssr(_tmpl$2);
+		}
+	})), escape(createComponent(ToolbarButton, {
+		label: "Underline",
+		onClick: () => void 0,
+		active: () => isActive("underline"),
+		get children() {
+			return ssr(_tmpl$3);
+		}
+	})), escape(createComponent(ToolbarButton, {
+		label: "Link",
+		onClick: setLink,
+		active: () => isActive("link"),
+		children: "Link"
+	})), escape(createComponent(ToolbarButton, {
+		label: "Heading 2",
+		onClick: () => void 0,
+		active: () => isActive("heading", { level: 2 }),
+		children: "H2"
+	})), escape(createComponent(ToolbarButton, {
+		label: "Heading 3",
+		onClick: () => void 0,
+		active: () => isActive("heading", { level: 3 }),
+		children: "H3"
+	})), escape(createComponent(ToolbarButton, {
+		label: "Bullet list",
+		onClick: () => void 0,
+		active: () => isActive("bulletList"),
+		children: "•"
+	})), escape(createComponent(ToolbarButton, {
+		label: "Numbered list",
+		onClick: () => void 0,
+		active: () => isActive("orderedList"),
+		children: "1."
+	})), escape(createComponent(ToolbarButton, {
+		label: "Quote",
+		onClick: () => void 0,
+		active: () => isActive("blockquote"),
+		children: "❝"
+	})), escape(createComponent(ToolbarButton, {
+		label: "Divider",
+		onClick: () => void 0,
+		children: "—"
+	})), escape(createComponent(Show, {
+		get when() {
+			return props.onUploadFile;
+		},
+		get children() {
+			return [ssr(_tmpl$4), createComponent(ToolbarButton, {
+				label: "Image",
+				onClick: () => void 0,
+				children: "Image"
+			})];
+		}
+	})), ssrAttribute("id", escape(props.id, true), false), escape(createComponent(Show, {
+		get when() {
+			return slash() && filteredSlash().length > 0;
+		},
+		get children() {
+			return ssr(_tmpl$5, ssrStyleProperty("left:", `${escape(slash()?.left ?? 0, true)}px`) + ssrStyleProperty(";top:", `${escape(slash()?.top ?? 0, true) + 4}px`), escape(createComponent(For, {
+				get each() {
+					return filteredSlash();
+				},
+				children: (item, i) => ssr(_tmpl$8, `rounded px-3 py-1.5 text-left text-sm ${i() === activeIdx() ? "bg-base-200" : ""}`, escape(item.label))
+			})));
+		}
+	})), escape(createComponent(Show, {
+		get when() {
+			return props.onUploadFile;
+		},
+		get children() {
+			return ssr(_tmpl$6);
+		}
+	})));
+}
+function ToolbarButton(props) {
+	return ssr(_tmpl$9, ssrAttribute("aria-label", escape(props.label, true), false) + ssrAttribute("aria-pressed", escape(props.active?.() ?? false, true), false) + ssrAttribute("title", escape(props.label, true), false), `btn btn-ghost btn-xs ${props.active?.() ?? false ? "btn-active" : ""}`, escape(props.children));
+}
+//#endregion
+export { RichTextEditor };
+
+//# sourceMappingURL=RichTextEditor-CPQTvhQD.js.map

package/dist/RichTextEditor-CPQTvhQD.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RichTextEditor-CPQTvhQD.js","names":["Editor","Image","StarterKit","createSignal","For","JSX","onCleanup","onMount","Show","RichTextEditorProps","id","content","onChange","doc","onUploadFile","file","File","Promise","url","SlashItem","label","keywords","run","editor","matchSlashQuery","textBeforeCursor","m","match","filterSlashItems","items","query","q","toLowerCase","filter","it","includes","SlashState","from","to","left","top","RichTextEditor","props","container","HTMLDivElement","fileInput","HTMLInputElement","tick","setTick","bump","t","slash","setSlash","activeIdx","setActiveIdx","slashItems","e","chain","focus","toggleHeading","level","toggleBulletList","toggleOrderedList","toggleBlockquote","setHorizontalRule","push","click","filteredSlash","s","detectSlash","state","sel","selection","empty","$from","textBefore","parent","textBetween","parentOffset","undefined","start","coords","view","coordsAtPos","rect","getBoundingClientRect","bottom","runSlashItem","item","deleteRange","element","extensions","configure","link","openOnClick","editorProps","attributes","class","handleKeyDown","_view","event","key","i","Math","min","length","max","onUpdate","current","getJSON","onSelectionUpdate","destroy","isActive","name","attrs","Record","Boolean","setLink","prev","getAttributes","href","window","prompt","extendMarkRange","unsetLink","handleImageFile","Event","currentTarget","files","setImage","src","value","_$ssr","_tmpl$7","_$escape","_$createComponent","ToolbarButton","onClick","toggleBold","active","children","_tmpl$","toggleItalic","_tmpl$2","toggleUnderline","_tmpl$3","when","_tmpl$4","_$ssrAttribute","_tmpl$5","_$ssrStyleProperty","each","_tmpl$8","_tmpl$6","Element","_tmpl$9"],"sources":["../src/RichTextEditor.tsx"],"sourcesContent":["import { Editor } from \"@tiptap/core\";\nimport Image from \"@tiptap/extension-image\";\nimport StarterKit from \"@tiptap/starter-kit\";\nimport {\n  createSignal,\n  For,\n  type JSX,\n  onCleanup,\n  onMount,\n  Show,\n} from \"solid-js\";\n\nexport interface RichTextEditorProps {\n  id?: string;\n  /** TipTap's native JSON document shape — stored as-is, no transform layer. */\n  content?: object;\n  onChange: (doc: object) => void;\n  /**\n   * Resolves a picked image file to a stored URL (same contract as the form's\n   * upload fields). When provided, the toolbar and slash menu expose an\n   * \"Image\" insert; omitted, image insertion is hidden.\n   */\n  onUploadFile?: (file: File) => Promise<{ url: string }>;\n}\n\ninterface SlashItem {\n  label: string;\n  /** Extra search terms so e.g. \"ul\" finds \"Bullet list\". */\n  keywords: string;\n  run: (editor: Editor) => void;\n}\n\n// Pure: a slash menu opens only when the current block's text up to the\n// cursor is a bare `/` followed by an optional word (Notion/Ghost-style, at\n// the start of an empty-ish block). Returns the query (may be \"\") or null.\n// Exported for unit testing without a live ProseMirror view.\nexport function matchSlashQuery(textBeforeCursor: string): string | null {\n  const m = textBeforeCursor.match(/^\\/(\\w*)$/);\n  return m ? m[1] : null;\n}\n\n// Pure: filter slash items by label or keywords against a (lowercased) query.\nexport function filterSlashItems(\n  items: SlashItem[],\n  query: string,\n): SlashItem[] {\n  const q = query.toLowerCase();\n  if (!q) return items;\n  return items.filter(\n    (it) => it.label.toLowerCase().includes(q) || it.keywords.includes(q),\n  );\n}\n\ninterface SlashState {\n  from: number;\n  to: number;\n  query: string;\n  left: number;\n  top: number;\n}\n\n// No official Solid binding for TipTap exists, so this wraps @tiptap/core's\n// vanilla `Editor` class directly in Solid's onMount/onCleanup lifecycle —\n// per CLAUDE.md's preference for the framework-agnostic core API over an\n// unofficial community port. A persistent formatting toolbar (discoverable\n// for non-technical clients) plus a `/` slash menu for inserting blocks make\n// this a Ghost-like writing surface rather than a bare textarea. `content`\n// is only read once at mount, matching how the form's other fields init from\n// `initialValues` rather than reacting to later prop changes.\nexport function RichTextEditor(props: RichTextEditorProps) {\n  let container: HTMLDivElement | undefined;\n  let fileInput: HTMLInputElement | undefined;\n  let editor: Editor | undefined;\n\n  // Tiptap's Editor isn't reactive; bump a signal on every transaction so the\n  // toolbar's active states (bold on/off, current heading…) re-render.\n  const [tick, setTick] = createSignal(0);\n  const bump = () => setTick((t) => t + 1);\n  const [slash, setSlash] = createSignal<SlashState | null>(null);\n  const [activeIdx, setActiveIdx] = createSignal(0);\n\n  const slashItems = (): SlashItem[] => {\n    const items: SlashItem[] = [\n      {\n        label: \"Heading 2\",\n        keywords: \"h2 title heading\",\n        run: (e) => e.chain().focus().toggleHeading({ level: 2 }).run(),\n      },\n      {\n        label: \"Heading 3\",\n        keywords: \"h3 subtitle heading\",\n        run: (e) => e.chain().focus().toggleHeading({ level: 3 }).run(),\n      },\n      {\n        label: \"Bullet list\",\n        keywords: \"ul unordered bullets\",\n        run: (e) => e.chain().focus().toggleBulletList().run(),\n      },\n      {\n        label: \"Numbered list\",\n        keywords: \"ol ordered numbers\",\n        run: (e) => e.chain().focus().toggleOrderedList().run(),\n      },\n      {\n        label: \"Quote\",\n        keywords: \"blockquote citation\",\n        run: (e) => e.chain().focus().toggleBlockquote().run(),\n      },\n      {\n        label: \"Divider\",\n        keywords: \"hr rule separator line\",\n        run: (e) => e.chain().focus().setHorizontalRule().run(),\n      },\n    ];\n    if (props.onUploadFile) {\n      items.push({\n        label: \"Image\",\n        keywords: \"img photo picture upload\",\n        run: () => fileInput?.click(),\n      });\n    }\n    return items;\n  };\n\n  const filteredSlash = () => {\n    const s = slash();\n    return s ? filterSlashItems(slashItems(), s.query) : [];\n  };\n\n  // Re-evaluate whether a slash menu should be open after every selection or\n  // doc change.\n  function detectSlash() {\n    if (!editor) return;\n    const { state } = editor;\n    const sel = state.selection;\n    if (!sel.empty) {\n      setSlash(null);\n      return;\n    }\n    const $from = sel.$from;\n    const textBefore = $from.parent.textBetween(\n      0,\n      $from.parentOffset,\n      undefined,\n      \"\",\n    );\n    const query = matchSlashQuery(textBefore);\n    if (query === null) {\n      setSlash(null);\n      return;\n    }\n    const to = sel.from;\n    const from = $from.start();\n    let left = 0;\n    let top = 0;\n    try {\n      const coords = editor.view.coordsAtPos(to);\n      const rect = container?.getBoundingClientRect();\n      left = coords.left - (rect?.left ?? 0);\n      top = coords.bottom - (rect?.top ?? 0);\n    } catch {\n      // coordsAtPos throws if layout isn't ready (e.g. jsdom) — fall back to\n      // the top-left of the editor; the menu is still usable.\n    }\n    setSlash({ from, to, query, left, top });\n    setActiveIdx(0);\n  }\n\n  function runSlashItem(item: SlashItem) {\n    const s = slash();\n    if (!s || !editor) return;\n    // Drop the typed \"/query\" first, then run the block command at that spot.\n    editor.chain().focus().deleteRange({ from: s.from, to: s.to }).run();\n    item.run(editor);\n    setSlash(null);\n  }\n\n  onMount(() => {\n    if (!container) return;\n    editor = new Editor({\n      element: container,\n      extensions: [\n        StarterKit.configure({ link: { openOnClick: false } }),\n        Image,\n      ],\n      content: props.content ?? \"\",\n      editorProps: {\n        attributes: { class: \"prose-site max-w-none focus:outline-none\" },\n        // Drive slash-menu keyboard nav while it's open; let TipTap handle\n        // everything else.\n        handleKeyDown: (_view, event) => {\n          if (!slash()) return false;\n          const items = filteredSlash();\n          if (event.key === \"ArrowDown\") {\n            setActiveIdx((i) => Math.min(i + 1, items.length - 1));\n            return true;\n          }\n          if (event.key === \"ArrowUp\") {\n            setActiveIdx((i) => Math.max(i - 1, 0));\n            return true;\n          }\n          if (event.key === \"Enter\") {\n            const item = items[activeIdx()];\n            if (item) {\n              runSlashItem(item);\n              return true;\n            }\n          }\n          if (event.key === \"Escape\") {\n            setSlash(null);\n            return true;\n          }\n          return false;\n        },\n      },\n      onUpdate: ({ editor: current }) => {\n        props.onChange(current.getJSON());\n        bump();\n        detectSlash();\n      },\n      onSelectionUpdate: () => {\n        bump();\n        detectSlash();\n      },\n    });\n  });\n\n  onCleanup(() => editor?.destroy());\n\n  // Reading `tick()` here subscribes the caller (each toolbar button's\n  // `active` accessor) to editor transactions, so active states re-render.\n  const isActive = (name: string, attrs?: Record<string, unknown>): boolean => {\n    tick();\n    return Boolean(editor?.isActive(name, attrs));\n  };\n\n  function setLink() {\n    if (!editor) return;\n    const prev = editor.getAttributes(\"link\").href as string | undefined;\n    const url = window.prompt(\"Link URL\", prev ?? \"https://\");\n    if (url === null) return;\n    if (url === \"\") {\n      editor.chain().focus().extendMarkRange(\"link\").unsetLink().run();\n      return;\n    }\n    editor.chain().focus().extendMarkRange(\"link\").setLink({ href: url }).run();\n  }\n\n  async function handleImageFile(\n    e: Event & { currentTarget: HTMLInputElement },\n  ) {\n    const file = e.currentTarget.files?.[0];\n    if (!file || !props.onUploadFile || !editor) return;\n    try {\n      const { url } = await props.onUploadFile(file);\n      editor.chain().focus().setImage({ src: url }).run();\n    } finally {\n      e.currentTarget.value = \"\";\n    }\n  }\n\n  return (\n    <div class=\"border-base-300 rounded-box border\">\n      <div class=\"border-base-300 flex flex-wrap items-center gap-0.5 border-b p-1\">\n        <ToolbarButton\n          label=\"Bold\"\n          onClick={() => editor?.chain().focus().toggleBold().run()}\n          active={() => isActive(\"bold\")}\n        >\n          <span class=\"font-bold\">B</span>\n        </ToolbarButton>\n        <ToolbarButton\n          label=\"Italic\"\n          onClick={() => editor?.chain().focus().toggleItalic().run()}\n          active={() => isActive(\"italic\")}\n        >\n          <span class=\"italic\">I</span>\n        </ToolbarButton>\n        <ToolbarButton\n          label=\"Underline\"\n          onClick={() => editor?.chain().focus().toggleUnderline().run()}\n          active={() => isActive(\"underline\")}\n        >\n          <span class=\"underline\">U</span>\n        </ToolbarButton>\n        <ToolbarButton\n          label=\"Link\"\n          onClick={setLink}\n          active={() => isActive(\"link\")}\n        >\n          Link\n        </ToolbarButton>\n        <span class=\"bg-base-300 mx-1 h-4 w-px\" aria-hidden=\"true\" />\n        <ToolbarButton\n          label=\"Heading 2\"\n          onClick={() =>\n            editor?.chain().focus().toggleHeading({ level: 2 }).run()\n          }\n          active={() => isActive(\"heading\", { level: 2 })}\n        >\n          H2\n        </ToolbarButton>\n        <ToolbarButton\n          label=\"Heading 3\"\n          onClick={() =>\n            editor?.chain().focus().toggleHeading({ level: 3 }).run()\n          }\n          active={() => isActive(\"heading\", { level: 3 })}\n        >\n          H3\n        </ToolbarButton>\n        <ToolbarButton\n          label=\"Bullet list\"\n          onClick={() => editor?.chain().focus().toggleBulletList().run()}\n          active={() => isActive(\"bulletList\")}\n        >\n          •\n        </ToolbarButton>\n        <ToolbarButton\n          label=\"Numbered list\"\n          onClick={() => editor?.chain().focus().toggleOrderedList().run()}\n          active={() => isActive(\"orderedList\")}\n        >\n          1.\n        </ToolbarButton>\n        <ToolbarButton\n          label=\"Quote\"\n          onClick={() => editor?.chain().focus().toggleBlockquote().run()}\n          active={() => isActive(\"blockquote\")}\n        >\n          ❝\n        </ToolbarButton>\n        <ToolbarButton\n          label=\"Divider\"\n          onClick={() => editor?.chain().focus().setHorizontalRule().run()}\n        >\n          —\n        </ToolbarButton>\n        <Show when={props.onUploadFile}>\n          <span class=\"bg-base-300 mx-1 h-4 w-px\" aria-hidden=\"true\" />\n          <ToolbarButton label=\"Image\" onClick={() => fileInput?.click()}>\n            Image\n          </ToolbarButton>\n        </Show>\n      </div>\n\n      <div class=\"relative\">\n        <div\n          id={props.id}\n          class=\"min-h-32 p-3\"\n          ref={(el) => (container = el)}\n        />\n        <Show when={slash() && filteredSlash().length > 0}>\n          <div\n            role=\"menu\"\n            aria-label=\"Insert block\"\n            class=\"bg-base-100 border-base-300 rounded-box absolute z-10 flex min-w-44 flex-col border p-1 shadow\"\n            style={{\n              left: `${slash()?.left ?? 0}px`,\n              top: `${(slash()?.top ?? 0) + 4}px`,\n            }}\n          >\n            <For each={filteredSlash()}>\n              {(item, i) => (\n                <button\n                  type=\"button\"\n                  role=\"menuitem\"\n                  class=\"rounded px-3 py-1.5 text-left text-sm\"\n                  classList={{ \"bg-base-200\": i() === activeIdx() }}\n                  onMouseDown={(e) => e.preventDefault()}\n                  onClick={() => runSlashItem(item)}\n                >\n                  {item.label}\n                </button>\n              )}\n            </For>\n          </div>\n        </Show>\n      </div>\n\n      <Show when={props.onUploadFile}>\n        <input\n          ref={(el) => (fileInput = el)}\n          type=\"file\"\n          accept=\"image/*\"\n          class=\"hidden\"\n          onChange={handleImageFile}\n        />\n      </Show>\n    </div>\n  );\n}\n\n// A toolbar button. `active` is an accessor so Solid re-tracks it on every\n// editor transaction (via the `tick` signal isActive reads).\nfunction ToolbarButton(props: {\n  label: string;\n  active?: () => boolean;\n  onClick: () => void;\n  children: JSX.Element;\n}): JSX.Element {\n  return (\n    <button\n      type=\"button\"\n      aria-label={props.label}\n      aria-pressed={props.active?.() ?? false}\n      title={props.label}\n      class=\"btn btn-ghost btn-xs\"\n      classList={{ \"btn-active\": props.active?.() ?? false }}\n      // Keep the editor selection while clicking the toolbar.\n      onMouseDown={(e) => e.preventDefault()}\n      onClick={props.onClick}\n    >\n      {props.children}\n    </button>\n  );\n}\n"],"mappings":"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"}

package/dist/RichTextEditor-ComcBFfl.js

@@ -0,0 +1,334 @@
+import { addEventListener, createComponent, delegateEvents, effect, insert, memo, setAttribute, setStyleProperty, template, use } from "solid-js/web";
+import { For, Show, createSignal, onCleanup, onMount } from "solid-js";
+import { Editor } from "@tiptap/core";
+import Image from "@tiptap/extension-image";
+import StarterKit from "@tiptap/starter-kit";
+//#region src/RichTextEditor.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<span class=font-bold>B`), _tmpl$2 = /*#__PURE__*/ template(`<span class=italic>I`), _tmpl$3 = /*#__PURE__*/ template(`<span class=underline>U`), _tmpl$4 = /*#__PURE__*/ template(`<span class="bg-base-300 mx-1 h-4 w-px"aria-hidden=true>`), _tmpl$5 = /*#__PURE__*/ template(`<div role=menu aria-label="Insert block"class="bg-base-100 border-base-300 rounded-box absolute z-10 flex min-w-44 flex-col border p-1 shadow">`), _tmpl$6 = /*#__PURE__*/ template(`<input type=file accept=image/* class=hidden>`), _tmpl$7 = /*#__PURE__*/ template(`<div class="border-base-300 rounded-box border"><div class="border-base-300 flex flex-wrap items-center gap-0.5 border-b p-1"><span class="bg-base-300 mx-1 h-4 w-px"aria-hidden=true></span></div><div class=relative><div class="min-h-32 p-3">`), _tmpl$8 = /*#__PURE__*/ template(`<button type=button role=menuitem class="rounded px-3 py-1.5 text-left text-sm">`), _tmpl$9 = /*#__PURE__*/ template(`<button type=button class="btn btn-ghost btn-xs">`);
+function matchSlashQuery(textBeforeCursor) {
+	const m = textBeforeCursor.match(/^\/(\w*)$/);
+	return m ? m[1] : null;
+}
+function filterSlashItems(items, query) {
+	const q = query.toLowerCase();
+	if (!q) return items;
+	return items.filter((it) => it.label.toLowerCase().includes(q) || it.keywords.includes(q));
+}
+function RichTextEditor(props) {
+	let container;
+	let fileInput;
+	let editor;
+	const [tick, setTick] = createSignal(0);
+	const bump = () => setTick((t) => t + 1);
+	const [slash, setSlash] = createSignal(null);
+	const [activeIdx, setActiveIdx] = createSignal(0);
+	const slashItems = () => {
+		const items = [
+			{
+				label: "Heading 2",
+				keywords: "h2 title heading",
+				run: (e) => e.chain().focus().toggleHeading({ level: 2 }).run()
+			},
+			{
+				label: "Heading 3",
+				keywords: "h3 subtitle heading",
+				run: (e) => e.chain().focus().toggleHeading({ level: 3 }).run()
+			},
+			{
+				label: "Bullet list",
+				keywords: "ul unordered bullets",
+				run: (e) => e.chain().focus().toggleBulletList().run()
+			},
+			{
+				label: "Numbered list",
+				keywords: "ol ordered numbers",
+				run: (e) => e.chain().focus().toggleOrderedList().run()
+			},
+			{
+				label: "Quote",
+				keywords: "blockquote citation",
+				run: (e) => e.chain().focus().toggleBlockquote().run()
+			},
+			{
+				label: "Divider",
+				keywords: "hr rule separator line",
+				run: (e) => e.chain().focus().setHorizontalRule().run()
+			}
+		];
+		if (props.onUploadFile) items.push({
+			label: "Image",
+			keywords: "img photo picture upload",
+			run: () => fileInput?.click()
+		});
+		return items;
+	};
+	const filteredSlash = () => {
+		const s = slash();
+		return s ? filterSlashItems(slashItems(), s.query) : [];
+	};
+	function detectSlash() {
+		if (!editor) return;
+		const { state } = editor;
+		const sel = state.selection;
+		if (!sel.empty) {
+			setSlash(null);
+			return;
+		}
+		const $from = sel.$from;
+		const query = matchSlashQuery($from.parent.textBetween(0, $from.parentOffset, void 0, ""));
+		if (query === null) {
+			setSlash(null);
+			return;
+		}
+		const to = sel.from;
+		const from = $from.start();
+		let left = 0;
+		let top = 0;
+		try {
+			const coords = editor.view.coordsAtPos(to);
+			const rect = container?.getBoundingClientRect();
+			left = coords.left - (rect?.left ?? 0);
+			top = coords.bottom - (rect?.top ?? 0);
+		} catch {}
+		setSlash({
+			from,
+			to,
+			query,
+			left,
+			top
+		});
+		setActiveIdx(0);
+	}
+	function runSlashItem(item) {
+		const s = slash();
+		if (!s || !editor) return;
+		editor.chain().focus().deleteRange({
+			from: s.from,
+			to: s.to
+		}).run();
+		item.run(editor);
+		setSlash(null);
+	}
+	onMount(() => {
+		if (!container) return;
+		editor = new Editor({
+			element: container,
+			extensions: [StarterKit.configure({ link: { openOnClick: false } }), Image],
+			content: props.content ?? "",
+			editorProps: {
+				attributes: { class: "prose-site max-w-none focus:outline-none" },
+				handleKeyDown: (_view, event) => {
+					if (!slash()) return false;
+					const items = filteredSlash();
+					if (event.key === "ArrowDown") {
+						setActiveIdx((i) => Math.min(i + 1, items.length - 1));
+						return true;
+					}
+					if (event.key === "ArrowUp") {
+						setActiveIdx((i) => Math.max(i - 1, 0));
+						return true;
+					}
+					if (event.key === "Enter") {
+						const item = items[activeIdx()];
+						if (item) {
+							runSlashItem(item);
+							return true;
+						}
+					}
+					if (event.key === "Escape") {
+						setSlash(null);
+						return true;
+					}
+					return false;
+				}
+			},
+			onUpdate: ({ editor: current }) => {
+				props.onChange(current.getJSON());
+				bump();
+				detectSlash();
+			},
+			onSelectionUpdate: () => {
+				bump();
+				detectSlash();
+			}
+		});
+	});
+	onCleanup(() => editor?.destroy());
+	const isActive = (name, attrs) => {
+		tick();
+		return Boolean(editor?.isActive(name, attrs));
+	};
+	function setLink() {
+		if (!editor) return;
+		const prev = editor.getAttributes("link").href;
+		const url = window.prompt("Link URL", prev ?? "https://");
+		if (url === null) return;
+		if (url === "") {
+			editor.chain().focus().extendMarkRange("link").unsetLink().run();
+			return;
+		}
+		editor.chain().focus().extendMarkRange("link").setLink({ href: url }).run();
+	}
+	async function handleImageFile(e) {
+		const file = e.currentTarget.files?.[0];
+		if (!file || !props.onUploadFile || !editor) return;
+		try {
+			const { url } = await props.onUploadFile(file);
+			editor.chain().focus().setImage({ src: url }).run();
+		} finally {
+			e.currentTarget.value = "";
+		}
+	}
+	return (() => {
+		var _el$ = _tmpl$7(), _el$2 = _el$.firstChild, _el$6 = _el$2.firstChild, _el$8 = _el$2.nextSibling, _el$9 = _el$8.firstChild;
+		insert(_el$2, createComponent(ToolbarButton, {
+			label: "Bold",
+			onClick: () => editor?.chain().focus().toggleBold().run(),
+			active: () => isActive("bold"),
+			get children() {
+				return _tmpl$();
+			}
+		}), _el$6);
+		insert(_el$2, createComponent(ToolbarButton, {
+			label: "Italic",
+			onClick: () => editor?.chain().focus().toggleItalic().run(),
+			active: () => isActive("italic"),
+			get children() {
+				return _tmpl$2();
+			}
+		}), _el$6);
+		insert(_el$2, createComponent(ToolbarButton, {
+			label: "Underline",
+			onClick: () => editor?.chain().focus().toggleUnderline().run(),
+			active: () => isActive("underline"),
+			get children() {
+				return _tmpl$3();
+			}
+		}), _el$6);
+		insert(_el$2, createComponent(ToolbarButton, {
+			label: "Link",
+			onClick: setLink,
+			active: () => isActive("link"),
+			children: "Link"
+		}), _el$6);
+		insert(_el$2, createComponent(ToolbarButton, {
+			label: "Heading 2",
+			onClick: () => editor?.chain().focus().toggleHeading({ level: 2 }).run(),
+			active: () => isActive("heading", { level: 2 }),
+			children: "H2"
+		}), null);
+		insert(_el$2, createComponent(ToolbarButton, {
+			label: "Heading 3",
+			onClick: () => editor?.chain().focus().toggleHeading({ level: 3 }).run(),
+			active: () => isActive("heading", { level: 3 }),
+			children: "H3"
+		}), null);
+		insert(_el$2, createComponent(ToolbarButton, {
+			label: "Bullet list",
+			onClick: () => editor?.chain().focus().toggleBulletList().run(),
+			active: () => isActive("bulletList"),
+			children: "•"
+		}), null);
+		insert(_el$2, createComponent(ToolbarButton, {
+			label: "Numbered list",
+			onClick: () => editor?.chain().focus().toggleOrderedList().run(),
+			active: () => isActive("orderedList"),
+			children: "1."
+		}), null);
+		insert(_el$2, createComponent(ToolbarButton, {
+			label: "Quote",
+			onClick: () => editor?.chain().focus().toggleBlockquote().run(),
+			active: () => isActive("blockquote"),
+			children: "❝"
+		}), null);
+		insert(_el$2, createComponent(ToolbarButton, {
+			label: "Divider",
+			onClick: () => editor?.chain().focus().setHorizontalRule().run(),
+			children: "—"
+		}), null);
+		insert(_el$2, createComponent(Show, {
+			get when() {
+				return props.onUploadFile;
+			},
+			get children() {
+				return [_tmpl$4(), createComponent(ToolbarButton, {
+					label: "Image",
+					onClick: () => fileInput?.click(),
+					children: "Image"
+				})];
+			}
+		}), null);
+		use((el) => container = el, _el$9);
+		insert(_el$8, createComponent(Show, {
+			get when() {
+				return memo(() => !!slash())() && filteredSlash().length > 0;
+			},
+			get children() {
+				var _el$0 = _tmpl$5();
+				insert(_el$0, createComponent(For, {
+					get each() {
+						return filteredSlash();
+					},
+					children: (item, i) => (() => {
+						var _el$10 = _tmpl$8();
+						_el$10.$$click = () => runSlashItem(item);
+						_el$10.$$mousedown = (e) => e.preventDefault();
+						insert(_el$10, () => item.label);
+						effect(() => _el$10.classList.toggle("bg-base-200", !!(i() === activeIdx())));
+						return _el$10;
+					})()
+				}));
+				effect((_p$) => {
+					var _v$ = `${slash()?.left ?? 0}px`, _v$2 = `${(slash()?.top ?? 0) + 4}px`;
+					_v$ !== _p$.e && setStyleProperty(_el$0, "left", _p$.e = _v$);
+					_v$2 !== _p$.t && setStyleProperty(_el$0, "top", _p$.t = _v$2);
+					return _p$;
+				}, {
+					e: void 0,
+					t: void 0
+				});
+				return _el$0;
+			}
+		}), null);
+		insert(_el$, createComponent(Show, {
+			get when() {
+				return props.onUploadFile;
+			},
+			get children() {
+				var _el$1 = _tmpl$6();
+				_el$1.addEventListener("change", handleImageFile);
+				use((el) => fileInput = el, _el$1);
+				return _el$1;
+			}
+		}), null);
+		effect(() => setAttribute(_el$9, "id", props.id));
+		return _el$;
+	})();
+}
+function ToolbarButton(props) {
+	return (() => {
+		var _el$11 = _tmpl$9();
+		addEventListener(_el$11, "click", props.onClick, true);
+		_el$11.$$mousedown = (e) => e.preventDefault();
+		insert(_el$11, () => props.children);
+		effect((_p$) => {
+			var _v$3 = props.label, _v$4 = props.active?.() ?? false, _v$5 = props.label, _v$6 = !!(props.active?.() ?? false);
+			_v$3 !== _p$.e && setAttribute(_el$11, "aria-label", _p$.e = _v$3);
+			_v$4 !== _p$.t && setAttribute(_el$11, "aria-pressed", _p$.t = _v$4);
+			_v$5 !== _p$.a && setAttribute(_el$11, "title", _p$.a = _v$5);
+			_v$6 !== _p$.o && _el$11.classList.toggle("btn-active", _p$.o = _v$6);
+			return _p$;
+		}, {
+			e: void 0,
+			t: void 0,
+			a: void 0,
+			o: void 0
+		});
+		return _el$11;
+	})();
+}
+delegateEvents(["mousedown", "click"]);
+//#endregion
+export { RichTextEditor };
+
+//# sourceMappingURL=RichTextEditor-ComcBFfl.js.map

package/dist/RichTextEditor-ComcBFfl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RichTextEditor-ComcBFfl.js","names":["Editor","Image","StarterKit","createSignal","For","JSX","onCleanup","onMount","Show","RichTextEditorProps","id","content","onChange","doc","onUploadFile","file","File","Promise","url","SlashItem","label","keywords","run","editor","matchSlashQuery","textBeforeCursor","m","match","filterSlashItems","items","query","q","toLowerCase","filter","it","includes","SlashState","from","to","left","top","RichTextEditor","props","container","HTMLDivElement","fileInput","HTMLInputElement","tick","setTick","bump","t","slash","setSlash","activeIdx","setActiveIdx","slashItems","e","chain","focus","toggleHeading","level","toggleBulletList","toggleOrderedList","toggleBlockquote","setHorizontalRule","push","click","filteredSlash","s","detectSlash","state","sel","selection","empty","$from","textBefore","parent","textBetween","parentOffset","undefined","start","coords","view","coordsAtPos","rect","getBoundingClientRect","bottom","runSlashItem","item","deleteRange","element","extensions","configure","link","openOnClick","editorProps","attributes","class","handleKeyDown","_view","event","key","i","Math","min","length","max","onUpdate","current","getJSON","onSelectionUpdate","destroy","isActive","name","attrs","Record","Boolean","setLink","prev","getAttributes","href","window","prompt","extendMarkRange","unsetLink","handleImageFile","Event","currentTarget","files","setImage","src","value","_el$","_tmpl$7","_el$2","firstChild","_el$6","_el$8","nextSibling","_el$9","_$insert","_$createComponent","ToolbarButton","onClick","toggleBold","active","children","_tmpl$","toggleItalic","_tmpl$2","toggleUnderline","_tmpl$3","when","_tmpl$4","_$use","el","_$memo","_el$0","_tmpl$5","each","_el$10","_tmpl$8","$$click","$$mousedown","preventDefault","_$effect","classList","toggle","_p$","_v$","_v$2","_$setStyleProperty","_el$1","_tmpl$6","addEventListener","_$setAttribute","Element","_el$11","_tmpl$9","_$addEventListener","_v$3","_v$4","_v$5","_v$6","a","o","_$delegateEvents"],"sources":["../src/RichTextEditor.tsx"],"sourcesContent":["import { Editor } from \"@tiptap/core\";\nimport Image from \"@tiptap/extension-image\";\nimport StarterKit from \"@tiptap/starter-kit\";\nimport {\n  createSignal,\n  For,\n  type JSX,\n  onCleanup,\n  onMount,\n  Show,\n} from \"solid-js\";\n\nexport interface RichTextEditorProps {\n  id?: string;\n  /** TipTap's native JSON document shape — stored as-is, no transform layer. */\n  content?: object;\n  onChange: (doc: object) => void;\n  /**\n   * Resolves a picked image file to a stored URL (same contract as the form's\n   * upload fields). When provided, the toolbar and slash menu expose an\n   * \"Image\" insert; omitted, image insertion is hidden.\n   */\n  onUploadFile?: (file: File) => Promise<{ url: string }>;\n}\n\ninterface SlashItem {\n  label: string;\n  /** Extra search terms so e.g. \"ul\" finds \"Bullet list\". */\n  keywords: string;\n  run: (editor: Editor) => void;\n}\n\n// Pure: a slash menu opens only when the current block's text up to the\n// cursor is a bare `/` followed by an optional word (Notion/Ghost-style, at\n// the start of an empty-ish block). Returns the query (may be \"\") or null.\n// Exported for unit testing without a live ProseMirror view.\nexport function matchSlashQuery(textBeforeCursor: string): string | null {\n  const m = textBeforeCursor.match(/^\\/(\\w*)$/);\n  return m ? m[1] : null;\n}\n\n// Pure: filter slash items by label or keywords against a (lowercased) query.\nexport function filterSlashItems(\n  items: SlashItem[],\n  query: string,\n): SlashItem[] {\n  const q = query.toLowerCase();\n  if (!q) return items;\n  return items.filter(\n    (it) => it.label.toLowerCase().includes(q) || it.keywords.includes(q),\n  );\n}\n\ninterface SlashState {\n  from: number;\n  to: number;\n  query: string;\n  left: number;\n  top: number;\n}\n\n// No official Solid binding for TipTap exists, so this wraps @tiptap/core's\n// vanilla `Editor` class directly in Solid's onMount/onCleanup lifecycle —\n// per CLAUDE.md's preference for the framework-agnostic core API over an\n// unofficial community port. A persistent formatting toolbar (discoverable\n// for non-technical clients) plus a `/` slash menu for inserting blocks make\n// this a Ghost-like writing surface rather than a bare textarea. `content`\n// is only read once at mount, matching how the form's other fields init from\n// `initialValues` rather than reacting to later prop changes.\nexport function RichTextEditor(props: RichTextEditorProps) {\n  let container: HTMLDivElement | undefined;\n  let fileInput: HTMLInputElement | undefined;\n  let editor: Editor | undefined;\n\n  // Tiptap's Editor isn't reactive; bump a signal on every transaction so the\n  // toolbar's active states (bold on/off, current heading…) re-render.\n  const [tick, setTick] = createSignal(0);\n  const bump = () => setTick((t) => t + 1);\n  const [slash, setSlash] = createSignal<SlashState | null>(null);\n  const [activeIdx, setActiveIdx] = createSignal(0);\n\n  const slashItems = (): SlashItem[] => {\n    const items: SlashItem[] = [\n      {\n        label: \"Heading 2\",\n        keywords: \"h2 title heading\",\n        run: (e) => e.chain().focus().toggleHeading({ level: 2 }).run(),\n      },\n      {\n        label: \"Heading 3\",\n        keywords: \"h3 subtitle heading\",\n        run: (e) => e.chain().focus().toggleHeading({ level: 3 }).run(),\n      },\n      {\n        label: \"Bullet list\",\n        keywords: \"ul unordered bullets\",\n        run: (e) => e.chain().focus().toggleBulletList().run(),\n      },\n      {\n        label: \"Numbered list\",\n        keywords: \"ol ordered numbers\",\n        run: (e) => e.chain().focus().toggleOrderedList().run(),\n      },\n      {\n        label: \"Quote\",\n        keywords: \"blockquote citation\",\n        run: (e) => e.chain().focus().toggleBlockquote().run(),\n      },\n      {\n        label: \"Divider\",\n        keywords: \"hr rule separator line\",\n        run: (e) => e.chain().focus().setHorizontalRule().run(),\n      },\n    ];\n    if (props.onUploadFile) {\n      items.push({\n        label: \"Image\",\n        keywords: \"img photo picture upload\",\n        run: () => fileInput?.click(),\n      });\n    }\n    return items;\n  };\n\n  const filteredSlash = () => {\n    const s = slash();\n    return s ? filterSlashItems(slashItems(), s.query) : [];\n  };\n\n  // Re-evaluate whether a slash menu should be open after every selection or\n  // doc change.\n  function detectSlash() {\n    if (!editor) return;\n    const { state } = editor;\n    const sel = state.selection;\n    if (!sel.empty) {\n      setSlash(null);\n      return;\n    }\n    const $from = sel.$from;\n    const textBefore = $from.parent.textBetween(\n      0,\n      $from.parentOffset,\n      undefined,\n      \"\",\n    );\n    const query = matchSlashQuery(textBefore);\n    if (query === null) {\n      setSlash(null);\n      return;\n    }\n    const to = sel.from;\n    const from = $from.start();\n    let left = 0;\n    let top = 0;\n    try {\n      const coords = editor.view.coordsAtPos(to);\n      const rect = container?.getBoundingClientRect();\n      left = coords.left - (rect?.left ?? 0);\n      top = coords.bottom - (rect?.top ?? 0);\n    } catch {\n      // coordsAtPos throws if layout isn't ready (e.g. jsdom) — fall back to\n      // the top-left of the editor; the menu is still usable.\n    }\n    setSlash({ from, to, query, left, top });\n    setActiveIdx(0);\n  }\n\n  function runSlashItem(item: SlashItem) {\n    const s = slash();\n    if (!s || !editor) return;\n    // Drop the typed \"/query\" first, then run the block command at that spot.\n    editor.chain().focus().deleteRange({ from: s.from, to: s.to }).run();\n    item.run(editor);\n    setSlash(null);\n  }\n\n  onMount(() => {\n    if (!container) return;\n    editor = new Editor({\n      element: container,\n      extensions: [\n        StarterKit.configure({ link: { openOnClick: false } }),\n        Image,\n      ],\n      content: props.content ?? \"\",\n      editorProps: {\n        attributes: { class: \"prose-site max-w-none focus:outline-none\" },\n        // Drive slash-menu keyboard nav while it's open; let TipTap handle\n        // everything else.\n        handleKeyDown: (_view, event) => {\n          if (!slash()) return false;\n          const items = filteredSlash();\n          if (event.key === \"ArrowDown\") {\n            setActiveIdx((i) => Math.min(i + 1, items.length - 1));\n            return true;\n          }\n          if (event.key === \"ArrowUp\") {\n            setActiveIdx((i) => Math.max(i - 1, 0));\n            return true;\n          }\n          if (event.key === \"Enter\") {\n            const item = items[activeIdx()];\n            if (item) {\n              runSlashItem(item);\n              return true;\n            }\n          }\n          if (event.key === \"Escape\") {\n            setSlash(null);\n            return true;\n          }\n          return false;\n        },\n      },\n      onUpdate: ({ editor: current }) => {\n        props.onChange(current.getJSON());\n        bump();\n        detectSlash();\n      },\n      onSelectionUpdate: () => {\n        bump();\n        detectSlash();\n      },\n    });\n  });\n\n  onCleanup(() => editor?.destroy());\n\n  // Reading `tick()` here subscribes the caller (each toolbar button's\n  // `active` accessor) to editor transactions, so active states re-render.\n  const isActive = (name: string, attrs?: Record<string, unknown>): boolean => {\n    tick();\n    return Boolean(editor?.isActive(name, attrs));\n  };\n\n  function setLink() {\n    if (!editor) return;\n    const prev = editor.getAttributes(\"link\").href as string | undefined;\n    const url = window.prompt(\"Link URL\", prev ?? \"https://\");\n    if (url === null) return;\n    if (url === \"\") {\n      editor.chain().focus().extendMarkRange(\"link\").unsetLink().run();\n      return;\n    }\n    editor.chain().focus().extendMarkRange(\"link\").setLink({ href: url }).run();\n  }\n\n  async function handleImageFile(\n    e: Event & { currentTarget: HTMLInputElement },\n  ) {\n    const file = e.currentTarget.files?.[0];\n    if (!file || !props.onUploadFile || !editor) return;\n    try {\n      const { url } = await props.onUploadFile(file);\n      editor.chain().focus().setImage({ src: url }).run();\n    } finally {\n      e.currentTarget.value = \"\";\n    }\n  }\n\n  return (\n    <div class=\"border-base-300 rounded-box border\">\n      <div class=\"border-base-300 flex flex-wrap items-center gap-0.5 border-b p-1\">\n        <ToolbarButton\n          label=\"Bold\"\n          onClick={() => editor?.chain().focus().toggleBold().run()}\n          active={() => isActive(\"bold\")}\n        >\n          <span class=\"font-bold\">B</span>\n        </ToolbarButton>\n        <ToolbarButton\n          label=\"Italic\"\n          onClick={() => editor?.chain().focus().toggleItalic().run()}\n          active={() => isActive(\"italic\")}\n        >\n          <span class=\"italic\">I</span>\n        </ToolbarButton>\n        <ToolbarButton\n          label=\"Underline\"\n          onClick={() => editor?.chain().focus().toggleUnderline().run()}\n          active={() => isActive(\"underline\")}\n        >\n          <span class=\"underline\">U</span>\n        </ToolbarButton>\n        <ToolbarButton\n          label=\"Link\"\n          onClick={setLink}\n          active={() => isActive(\"link\")}\n        >\n          Link\n        </ToolbarButton>\n        <span class=\"bg-base-300 mx-1 h-4 w-px\" aria-hidden=\"true\" />\n        <ToolbarButton\n          label=\"Heading 2\"\n          onClick={() =>\n            editor?.chain().focus().toggleHeading({ level: 2 }).run()\n          }\n          active={() => isActive(\"heading\", { level: 2 })}\n        >\n          H2\n        </ToolbarButton>\n        <ToolbarButton\n          label=\"Heading 3\"\n          onClick={() =>\n            editor?.chain().focus().toggleHeading({ level: 3 }).run()\n          }\n          active={() => isActive(\"heading\", { level: 3 })}\n        >\n          H3\n        </ToolbarButton>\n        <ToolbarButton\n          label=\"Bullet list\"\n          onClick={() => editor?.chain().focus().toggleBulletList().run()}\n          active={() => isActive(\"bulletList\")}\n        >\n          •\n        </ToolbarButton>\n        <ToolbarButton\n          label=\"Numbered list\"\n          onClick={() => editor?.chain().focus().toggleOrderedList().run()}\n          active={() => isActive(\"orderedList\")}\n        >\n          1.\n        </ToolbarButton>\n        <ToolbarButton\n          label=\"Quote\"\n          onClick={() => editor?.chain().focus().toggleBlockquote().run()}\n          active={() => isActive(\"blockquote\")}\n        >\n          ❝\n        </ToolbarButton>\n        <ToolbarButton\n          label=\"Divider\"\n          onClick={() => editor?.chain().focus().setHorizontalRule().run()}\n        >\n          —\n        </ToolbarButton>\n        <Show when={props.onUploadFile}>\n          <span class=\"bg-base-300 mx-1 h-4 w-px\" aria-hidden=\"true\" />\n          <ToolbarButton label=\"Image\" onClick={() => fileInput?.click()}>\n            Image\n          </ToolbarButton>\n        </Show>\n      </div>\n\n      <div class=\"relative\">\n        <div\n          id={props.id}\n          class=\"min-h-32 p-3\"\n          ref={(el) => (container = el)}\n        />\n        <Show when={slash() && filteredSlash().length > 0}>\n          <div\n            role=\"menu\"\n            aria-label=\"Insert block\"\n            class=\"bg-base-100 border-base-300 rounded-box absolute z-10 flex min-w-44 flex-col border p-1 shadow\"\n            style={{\n              left: `${slash()?.left ?? 0}px`,\n              top: `${(slash()?.top ?? 0) + 4}px`,\n            }}\n          >\n            <For each={filteredSlash()}>\n              {(item, i) => (\n                <button\n                  type=\"button\"\n                  role=\"menuitem\"\n                  class=\"rounded px-3 py-1.5 text-left text-sm\"\n                  classList={{ \"bg-base-200\": i() === activeIdx() }}\n                  onMouseDown={(e) => e.preventDefault()}\n                  onClick={() => runSlashItem(item)}\n                >\n                  {item.label}\n                </button>\n              )}\n            </For>\n          </div>\n        </Show>\n      </div>\n\n      <Show when={props.onUploadFile}>\n        <input\n          ref={(el) => (fileInput = el)}\n          type=\"file\"\n          accept=\"image/*\"\n          class=\"hidden\"\n          onChange={handleImageFile}\n        />\n      </Show>\n    </div>\n  );\n}\n\n// A toolbar button. `active` is an accessor so Solid re-tracks it on every\n// editor transaction (via the `tick` signal isActive reads).\nfunction ToolbarButton(props: {\n  label: string;\n  active?: () => boolean;\n  onClick: () => void;\n  children: JSX.Element;\n}): JSX.Element {\n  return (\n    <button\n      type=\"button\"\n      aria-label={props.label}\n      aria-pressed={props.active?.() ?? false}\n      title={props.label}\n      class=\"btn btn-ghost btn-xs\"\n      classList={{ \"btn-active\": props.active?.() ?? false }}\n      // Keep the editor selection while clicking the toolbar.\n      onMouseDown={(e) => e.preventDefault()}\n      onClick={props.onClick}\n    >\n      {props.children}\n    </button>\n  );\n}\n"],"mappings":"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"}

package/dist/index/index.d.ts

@@ -1,5 +1,5 @@
-import { JSX } from "solid-js";
 import { CollectionConfig, EditRef } from "@thebes/cadmus/cms";
+import { JSX } from "solid-js";
 import { ImageCrop, ImageHotspot } from "@thebes/cadmus/storage";
 
 //#region src/capabilities.d.ts
@@ -107,11 +107,10 @@ interface CollectionEditProps {
     url: string;
   }>;
   /**
-   * Options for `relationship` fields (hasMany:false only — see
-   * RelationshipFieldConfig's `hasMany` caveat), keyed by the field's
-   * `relationTo` collection slug. `CollectionEdit` can't query another
-   * collection itself, so the consuming route fetches the related rows
-   * and passes them in.
+   * Options for `relationship` fields (both single and `hasMany`), keyed by
+   * the field's `relationTo` collection slug. `CollectionEdit` can't query
+   * another collection itself, so the consuming route fetches the related
+   * rows and passes them in; the field renders them as a searchable combobox.
    */
   relationshipOptions?: Partial<Record<string, RelationshipOption[]>>;
   /**
@@ -140,10 +139,11 @@ interface CollectionEditProps {
 declare function CollectionEdit(props: CollectionEditProps): JSX.Element;
 //#endregion
 //#region src/CollectionList.d.ts
+type Row = Record<string, unknown>;
 interface CollectionListProps {
   config: CollectionConfig;
-  rows: Record<string, unknown>[];
-  onRowClick?: (row: Record<string, unknown>) => void;
+  rows: Row[];
+  onRowClick?: (row: Row) => void;
   /**
    * 1-based current page. Omit (along with `pageSize`) to render without
    * the pagination bar entirely — list views with no `find()` paging