@alfakit/vue 0.0.0-stage → 0.1.1

package/dist/components/fields/RichEditorInput.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,380 @@
+import { useActionRunner as e, usePanel as t, useT as n } from "../../context.js";
+import { cn as r } from "../../lib/utils.js";
+import ee from "../ui/Button2.js";
+import { useField as te } from "../form/form-context.js";
+import ne from "../schema/FieldWrapper.js";
+import { useRichEditorExtensions as re } from "./rich-editor-extensions.js";
+import ie from "./RichEditorSidePanel.js";
+import ae from "./RichEditorSuggestions.js";
+import i from "./RichEditorToolbarEntries.js";
+import { EditorAttachments as oe, TABLE_TOOLBAR_BUTTONS as se, allToolbarButtons as a, attachToolbarKeyboard as ce, detailsNodeConfigs as le, fieldIds as ue, fileAttachmentError as de, floatingToolbarStyle as fe, focusToolbar as pe, gridNodeConfigs as me, highlightMarkConfig as he, htmlToMarkdown as ge, isToolbarShortcut as _e, leadExtensionConfig as ve, linkExtensionOptions as ye, panelUploadOptions as be, resizableImageAttributes as xe, resizableImageOptions as Se, resolveFloatingToolbar as Ce, resolveStickyOffset as we, setTextColor as Te, showsTableToolbar as Ee, smallMarkConfig as De, subscriptMarkConfig as Oe, superscriptMarkConfig as ke, textAlignExtensionConfig as Ae, textColorMarkConfig as je, toEditorDocument as Me, toolbarButtonLabel as o, toolbarCommands as Ne, uploadTemporaryFile as Pe } from "@alfakit/core";
+import { Fragment as Fe, computed as s, createBlock as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, createVNode as f, defineComponent as p, normalizeClass as m, normalizeStyle as h, onBeforeUnmount as g, onMounted as Ie, openBlock as _, ref as v, renderList as Le, shallowRef as Re, toDisplayString as ze, unref as y, watch as b, withCtx as x, withModifiers as S } from "vue";
+import { EraserIcon as Be } from "@lucide/vue";
+import C from "@tiptap/extension-image";
+import Ve from "@tiptap/extension-link";
+import He from "@tiptap/extension-placeholder";
+import { TableKit as Ue } from "@tiptap/extension-table";
+import We from "@tiptap/starter-kit";
+import { EditorContent as Ge, Extension as w, Mark as T, Node as E, useEditor as Ke } from "@tiptap/vue-3";
+//#region src/components/fields/RichEditorInput.vue?vue&type=script&setup=true&lang.ts
+var qe = ["aria-label"], Je = ["aria-label"], Ye = [
+	"title",
+	"aria-label",
+	"aria-pressed",
+	"onClick"
+], Xe = ["aria-label", "title"], Ze = ["aria-label"], Qe = { class: "@container" }, $e = { class: "flex flex-col-reverse @2xl:flex-row" }, et = ["aria-label", "data-node"], tt = {
+	key: 4,
+	role: "alert",
+	class: "text-destructive px-3 pb-2 text-xs"
+}, nt = ["accept"], rt = "[&_[data-resize-handle]]:z-10 [&_[data-resize-handle]]:size-3 [&_[data-resize-handle]]:rounded-full [&_[data-resize-handle]]:border-2 [&_[data-resize-handle]]:border-background [&_[data-resize-handle]]:bg-primary [&_[data-resize-handle]]:opacity-0 [&_[data-resize-container]:hover_[data-resize-handle]]:opacity-100 [&_.ProseMirror-selectednode_[data-resize-handle]]:opacity-100 [&_[data-resize-handle=bottom-right]]:cursor-nwse-resize [&_[data-resize-handle=top-left]]:cursor-nwse-resize [&_[data-resize-handle=bottom-left]]:cursor-nesw-resize [&_[data-resize-handle=top-right]]:cursor-nesw-resize", D = /*@__PURE__*/ p({
+	__name: "RichEditorInput",
+	props: {
+		component: {},
+		plugins: {}
+	},
+	setup(p) {
+		function D(e) {
+			return e ? C.extend({ addAttributes() {
+				return xe(this.parent?.() ?? {});
+			} }).configure(Se()) : C;
+		}
+		function it(e, t) {
+			let n = (...t) => t.some((t) => e.includes(t)), r = [];
+			return n("table") && r.push(Ue.configure({ table: { resizable: !1 } })), t ? r : (n("highlight") && r.push(T.create(he())), n("subscript") && r.push(T.create(Oe())), n("superscript") && r.push(T.create(ke())), n("textColor") && r.push(T.create(je())), n("alignStart", "alignCenter", "alignEnd", "alignJustify") && r.push(w.create(Ae())), n("details") && r.push(...le().map((e) => E.create(e))), n("small") && r.push(T.create(De())), n("lead") && r.push(w.create(ve())), n("grid", "gridDelete", "gridAddColumnBefore", "gridAddColumnAfter", "gridDeleteColumn") && r.push(...me().map((e) => E.create(e))), r);
+		}
+		let O = p, k = n(), A = t(), at = e(), { value: j, setValue: ot, blur: st, error: M, id: N, disabled: ct, readOnly: lt, aria: ut } = te(() => O.component), dt = v(null), P = s(() => O.component.type === "MarkdownEditor"), F = s(() => !ct.value && !lt.value), I = new oe(), L = s(() => !!O.component.json && !P.value), R = Re(), z = re(() => O.component, R), B = v(null), V = v((() => {
+			let e = O.component.activePanel ?? null;
+			return e === "customBlocks" ? O.component.customBlocks?.length ? e : null : e === "mergeTags" && O.component.mergeTags?.length ? e : null;
+		})()), H = v(null), U = v(0), W = v(null), ft = s(() => !!(O.component.stickyToolbar || O.component.stickyPanels)), pt = () => {
+			W.value = ft.value ? we(O.component.stickyOffset) : null;
+		};
+		Ie(pt), b([ft, () => O.component.stickyOffset], pt);
+		let G = s(() => Ne(O.component.editorTools, {
+			runAction: (e, t) => e.action ? at.runField(e.action, {
+				...z.context.value,
+				arguments: t
+			}) : Promise.resolve(void 0),
+			editor: () => R.value ?? null
+		}, O.plugins.commands)), mt = (e) => {
+			if (L.value) {
+				let t = Me(e);
+				return t ? JSON.parse(I.toEditor(JSON.stringify(t))) : "";
+			}
+			return I.toEditor((P.value ? typeof O.component.html == "string" ? O.component.html : null : e) ?? "");
+		}, ht = (e) => {
+			if (e.isEmpty) return null;
+			if (L.value) return JSON.parse(I.toState(JSON.stringify(e.getJSON())));
+			let t = e.getHTML();
+			return I.toState(P.value ? ge(t) : t);
+		};
+		g(() => I.destroy());
+		let K = {
+			main: null,
+			table: null,
+			floating: null
+		}, gt = () => [
+			K.floating?.element,
+			K.main?.element,
+			K.table?.element
+		], q = (e, t) => {
+			let n = K[e];
+			n?.element !== t && (n?.detach(), K[e] = t instanceof HTMLElement ? {
+				element: t,
+				detach: ce(t, {
+					onEscape: () => R.value?.commands.focus(),
+					toolbars: gt
+				})
+			} : null);
+		};
+		g(() => {
+			for (let e of [
+				"main",
+				"table",
+				"floating"
+			]) q(e, null);
+		});
+		let J = Ke({
+			extensions: [
+				We.configure({ link: !1 }),
+				Ve.configure(ye(O.component.linkProtocols)),
+				D(!!O.component.resizableImages && !P.value),
+				He.configure({ placeholder: O.component.placeholder ?? "" }),
+				...it(a(O.component), P.value),
+				...P.value ? [] : z.extensions,
+				...P.value ? [] : O.plugins.extensions
+			],
+			content: mt(j.value),
+			editable: F.value,
+			editorProps: {
+				handleKeyDown: (e, t) => _e(t) ? pe(gt()) : R.value ? z.suggestions.handleKeyDown(t, R.value) : !1,
+				attributes: () => ({
+					class: r("alfakit-prose min-h-32 px-3 py-2 text-sm outline-none", O.component.resizableImages && rt),
+					...O.component.minHeight ? { style: `min-height: ${O.component.minHeight}px` } : {},
+					id: N,
+					dir: "auto",
+					role: "textbox",
+					"aria-multiline": "true",
+					...O.component.label ? { "aria-labelledby": ue(N).label } : {},
+					...Object.fromEntries(Object.entries(ut.value).map(([e, t]) => [e, String(t)]))
+				})
+			},
+			onUpdate: ({ editor: e }) => {
+				ot(ht(e));
+			},
+			onTransaction: ({ editor: e }) => {
+				z.suggestions.update(e), U.value++;
+			},
+			onBlur: () => {
+				z.suggestions.close(), st();
+			}
+		});
+		b(J, (e) => {
+			R.value = e;
+		}, { immediate: !0 }), b(j, (e) => {
+			let t = J.value;
+			if (!t) return;
+			let n = ht(t);
+			(L.value ? JSON.stringify(Me(e)) === JSON.stringify(n) : (e ?? "") === (n ?? "")) || t.commands.setContent(mt(e), { emitUpdate: !1 });
+		}), b(F, (e) => {
+			J.value?.setEditable(e);
+		}), b(ut, () => {
+			J.value && !J.value.isDestroyed && J.value.view.setProps({});
+		}), b(() => !!O.component.floatingToolbars, (e, t, n) => {
+			if (!e || typeof window > "u") return;
+			let r = () => U.value++;
+			window.addEventListener("scroll", r, {
+				capture: !0,
+				passive: !0
+			}), n(() => window.removeEventListener("scroll", r, { capture: !0 }));
+		}, { immediate: !0 });
+		let _t = () => dt.value?.click(), vt = async (e) => {
+			if (!A.value.endpoints.upload || !J.value) return;
+			let t = de(e, O.component.fileAttachments);
+			if (t) {
+				H.value = t === "too_large" ? k("form.file_too_large", {}, "This file is too large.") : k("form.file_invalid_type", {}, "This file type is not allowed.");
+				return;
+			}
+			H.value = null;
+			let n;
+			try {
+				n = await Pe(A.value.endpoints.upload, e, be(A.value, O.component.fileAttachments.uploadPolicy));
+			} catch (e) {
+				H.value = e.errors?.file?.[0] ?? k("form.upload_failed", {}, "The file could not be uploaded.");
+				return;
+			}
+			let r = I.add(n.key, e);
+			J.value.chain().focus().setImage({
+				src: r,
+				alt: e.name
+			}).run();
+		}, yt = (e) => {
+			let t = e.target.files?.[0];
+			t && vt(t);
+		}, bt = s(() => (O.component.fileAttachments.acceptedFileTypes ?? ["image/*"]).join(",")), Y = (e, t) => k(e, {}, t), X = (e) => {
+			let t = G.value[e];
+			t && J.value && t.run(J.value, {
+				prompt: (e) => window.prompt(e),
+				pickImage: _t,
+				togglePanel: (e) => {
+					B.value = B.value === e ? null : e;
+				},
+				t: Y
+			});
+		}, Z = (e) => {
+			V.value = V.value === e ? null : e;
+		}, xt = (e) => {
+			J.value?.chain().focus().insertContent({
+				type: "mergeTag",
+				attrs: { id: e }
+			}).run();
+		}, St = () => (U.value, J.value?.getAttributes("textColor").color), Ct = () => (U.value, !!(J.value && F.value && !O.component.floatingToolbars?.table && Ee(a(O.component), J.value))), Q = s(() => (U.value, F.value ? Ce(J.value ?? null, O.component.floatingToolbars) : null)), $ = (e, t = !0) => {
+			J.value && (Te(J.value, e), t && (B.value = null));
+		};
+		return (e, t) => (_(), c(ne, {
+			field: O.component,
+			"html-for": y(N),
+			error: y(M)
+		}, {
+			default: x(() => [d("div", { class: m(y(r)("border-input dark:bg-input/30 focus-within:border-ring focus-within:ring-ring/50 rounded-md border shadow-xs focus-within:ring-[3px]", y(M) && "border-destructive", y(ct) && "opacity-60")) }, [
+				O.component.toolbarButtons.length > 0 && y(J) ? (_(), u("div", {
+					key: 0,
+					ref: (e) => q("main", e),
+					role: "toolbar",
+					"aria-label": y(k)("editor.toolbar", {}, "Formatting"),
+					"aria-keyshortcuts": "Alt+F10",
+					"data-slot": "rich-editor-toolbar",
+					class: m(y(r)("flex flex-wrap items-center gap-0.5 border-b p-1", O.component.stickyToolbar && "bg-background sticky z-10 rounded-t-md")),
+					style: h(O.component.stickyToolbar ? { top: W.value ?? "0px" } : void 0)
+				}, [f(i, {
+					names: O.component.toolbarButtons,
+					component: O.component,
+					editor: y(J),
+					editable: F.value,
+					commands: G.value,
+					tick: U.value,
+					"open-panel": B.value,
+					"side-panel": V.value,
+					onRun: X,
+					onTogglePanel: Z
+				}, null, 8, [
+					"names",
+					"component",
+					"editor",
+					"editable",
+					"commands",
+					"tick",
+					"open-panel",
+					"side-panel"
+				])], 14, qe)) : l("", !0),
+				y(J) && B.value === "textColor" ? (_(), u("div", {
+					key: 1,
+					role: "group",
+					"aria-label": y(o)("textColor", Y),
+					class: "flex flex-wrap items-center gap-1 border-b p-1",
+					"data-slot": "rich-editor-text-colors"
+				}, [
+					(_(!0), u(Fe, null, Le(O.component.textColors ?? [], (e) => (_(), u("button", {
+						key: e.value,
+						type: "button",
+						title: e.label,
+						"aria-label": e.label,
+						"aria-pressed": St() === e.value ? "true" : "false",
+						class: "focus-visible:ring-ring/50 size-6 rounded-full border shadow-xs outline-none focus-visible:ring-[3px] aria-pressed:ring-2",
+						style: h({ backgroundColor: e.value }),
+						onMousedown: t[0] ||= S(() => {}, ["prevent"]),
+						onClick: (t) => $(e.value)
+					}, null, 44, Ye))), 128)),
+					O.component.customTextColors ? (_(), u("input", {
+						key: 0,
+						type: "color",
+						"aria-label": y(k)("editor.custom_color", {}, "Custom color"),
+						title: y(k)("editor.custom_color", {}, "Custom color"),
+						class: "size-6 cursor-pointer rounded border bg-transparent p-0",
+						onInput: t[1] ||= (e) => $(e.target.value, !1)
+					}, null, 40, Xe)) : l("", !0),
+					f(ee, {
+						type: "button",
+						variant: "ghost",
+						size: "icon-sm",
+						"aria-label": y(k)("editor.remove_color", {}, "Remove color"),
+						title: y(k)("editor.remove_color", {}, "Remove color"),
+						onMousedown: t[2] ||= S(() => {}, ["prevent"]),
+						onClick: t[3] ||= (e) => $(null)
+					}, {
+						default: x(() => [f(y(Be))]),
+						_: 1
+					}, 8, ["aria-label", "title"])
+				], 8, Je)) : l("", !0),
+				y(J) && Ct() ? (_(), u("div", {
+					key: 2,
+					ref: (e) => q("table", e),
+					role: "toolbar",
+					"aria-label": y(o)("table", Y),
+					class: "flex flex-wrap items-center gap-0.5 border-b p-1",
+					"data-slot": "rich-editor-table-toolbar"
+				}, [f(i, {
+					names: y(se),
+					component: O.component,
+					editor: y(J),
+					editable: F.value,
+					commands: G.value,
+					tick: U.value,
+					"open-panel": B.value,
+					"side-panel": V.value,
+					onRun: X,
+					onTogglePanel: Z
+				}, null, 8, [
+					"names",
+					"component",
+					"editor",
+					"editable",
+					"commands",
+					"tick",
+					"open-panel",
+					"side-panel"
+				])], 8, Ze)) : l("", !0),
+				d("div", Qe, [d("div", $e, [f(y(Ge), {
+					editor: y(J),
+					class: "min-w-0 flex-1",
+					style: h(O.component.maxHeight ? {
+						maxHeight: `${O.component.maxHeight}px`,
+						overflowY: "auto"
+					} : void 0)
+				}, null, 8, ["editor", "style"]), y(J) && V.value ? (_(), c(ie, {
+					key: 0,
+					panel: V.value,
+					component: O.component,
+					editable: F.value,
+					sticky: O.component.stickyPanels ? W.value ?? "0px" : null,
+					onInsertBlock: t[4] ||= (e) => void y(z).insertBlock(e),
+					onInsertMergeTag: xt,
+					onClose: t[5] ||= (e) => V.value = null
+				}, null, 8, [
+					"panel",
+					"component",
+					"editable",
+					"sticky"
+				])) : l("", !0)])]),
+				y(J) && Q.value && Q.value.buttons.length > 0 ? (_(), u("div", {
+					key: 3,
+					ref: (e) => q("floating", e),
+					role: "toolbar",
+					"aria-label": y(k)("editor.floating_toolbar", {}, "Selection formatting"),
+					"data-slot": "rich-editor-floating-toolbar",
+					"data-node": Q.value.node,
+					class: "bg-popover text-popover-foreground fixed z-50 flex items-center gap-0.5 rounded-md border p-1 shadow-md",
+					style: h(y(fe)(Q.value.coords))
+				}, [f(i, {
+					names: Q.value.buttons,
+					component: O.component,
+					editor: y(J),
+					editable: F.value,
+					commands: G.value,
+					tick: U.value,
+					"open-panel": B.value,
+					"side-panel": V.value,
+					onRun: X,
+					onTogglePanel: Z
+				}, null, 8, [
+					"names",
+					"component",
+					"editor",
+					"editable",
+					"commands",
+					"tick",
+					"open-panel",
+					"side-panel"
+				])], 12, et)) : l("", !0),
+				f(ae, {
+					id: `${y(N)}-suggestions`,
+					suggestions: y(z).suggestions,
+					editor: y(J)
+				}, null, 8, [
+					"id",
+					"suggestions",
+					"editor"
+				]),
+				H.value ? (_(), u("p", tt, ze(H.value), 1)) : l("", !0),
+				d("input", {
+					ref_key: "fileInput",
+					ref: dt,
+					type: "file",
+					accept: bt.value,
+					class: "sr-only",
+					tabindex: "-1",
+					"aria-hidden": "true",
+					onChange: yt
+				}, null, 40, nt)
+			], 2)]),
+			_: 1
+		}, 8, [
+			"field",
+			"html-for",
+			"error"
+		]));
+	}
+});
+//#endregion
+export { D as default };
+
+//# sourceMappingURL=RichEditorInput.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/fields/RichEditorInput.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RichEditorInput.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","FieldWrapper","_unref","_withCtx","_createElementVNode","_normalizeClass","_createElementBlock","_normalizeStyle","_createVNode","RichEditorToolbarEntries","_createCommentVNode","_Fragment","_renderList","_withModifiers","Button","RichEditorSidePanel","RichEditorSuggestions","_toDisplayString","Button_default","FieldWrapper_default","RichEditorSidePanel_default","RichEditorSuggestions_default","RichEditorToolbarEntries_default","Image","Link","Placeholder","StarterKit","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_8","_hoisted_9","_hoisted_10","RESIZE_HANDLE_CLASSES","RichEditorInput_vue_vue_type_script_setup_true_lang_default","imageExtension","resizable","resizableImageAttributes","resizableImageOptions","toolbarExtensions","has","names","buttons","name","extensions","TableKit","markdown","Mark","highlightMarkConfig","subscriptMarkConfig","superscriptMarkConfig","textColorMarkConfig","Extension","textAlignExtensionConfig","detailsNodeConfigs","Node","config","smallMarkConfig","leadExtensionConfig","gridNodeConfigs","props","__props","t","useT","panel","usePanel","runner","useActionRunner","useField","fileInput","ref","isMarkdown","computed","editable","disabled","readOnly","attachments","EditorAttachments","isJson","liveEditor","shallowRef","rich","useRichEditorExtensions","openPanel","sidePanel","initial","attachmentError","selectionTick","stickyTop","sticky","updateStickyTop","resolveStickyOffset","onMounted","watch","commands","toolbarCommands","tool","args","stateToContent","document","toEditorDocument","state","editorToState","instance","html","htmlToMarkdown","toolbarElements","toolbars","setToolbar","current","slot","element","attachToolbarKeyboard","editor","useEditor","linkExtensionOptions","allToolbarButtons","value","isToolbarShortcut","event","focusToolbar","cn","fieldIds","id","aria","attribute","blur","next","isEditable","hasFloatingToolbars","onScroll","onCleanup","pickImage","uploadImage","problem","fileAttachmentError","file","response","uploadTemporaryFile","panelUploadOptions","error","src","onFilePicked","accept","translate","key","fallback","runCommand","button","message","target","toggleSidePanel","insertMergeTag","tagId","currentTextColor","showTableToolbar","showsTableToolbar","floating","resolveFloatingToolbar","applyColor","setTextColor","color","close","openBlock","createBlock","unref","withCtx","createElementVNode","normalizeClass","createElementBlock","normalizeStyle","createVNode","createCommentVNode","toolbarButtonLabel","Fragment","renderList","_cache","withModifiers","$event","EraserIcon","TABLE_TOOLBAR_BUTTONS","EditorContent","blockId","floatingToolbarStyle","toDisplayString"],"sources":["../../../src/components/fields/RichEditorInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { LoadedRichEditorExtensions, RichEditorPanel, RichEditorSchema } from '@alfakit/core'\nimport {\n  allToolbarButtons,\n  attachToolbarKeyboard,\n  focusToolbar,\n  isToolbarShortcut,\n  detailsNodeConfigs,\n  gridNodeConfigs,\n  leadExtensionConfig,\n  linkExtensionOptions,\n  smallMarkConfig,\n  EditorAttachments,\n  fieldIds,\n  fileAttachmentError,\n  floatingToolbarStyle,\n  highlightMarkConfig,\n  htmlToMarkdown,\n  resizableImageAttributes,\n  resizableImageOptions,\n  resolveFloatingToolbar,\n  resolveStickyOffset,\n  setTextColor,\n  showsTableToolbar,\n  subscriptMarkConfig,\n  superscriptMarkConfig,\n  TABLE_TOOLBAR_BUTTONS,\n  textAlignExtensionConfig,\n  textColorMarkConfig,\n  toEditorDocument,\n  toolbarButtonLabel,\n  toolbarCommands,\n  panelUploadOptions,\n  uploadTemporaryFile,\n} from '@alfakit/core'\nimport { EraserIcon } from '@lucide/vue'\nimport Image from '@tiptap/extension-image'\nimport Link from '@tiptap/extension-link'\nimport Placeholder from '@tiptap/extension-placeholder'\nimport { TableKit } from '@tiptap/extension-table'\nimport StarterKit from '@tiptap/starter-kit'\nimport {\n  EditorContent,\n  Extension,\n  Mark,\n  Node,\n  useEditor,\n  type Editor,\n  type Extensions,\n} from '@tiptap/vue-3'\nimport { computed, onBeforeUnmount, onMounted, ref, shallowRef, watch } from 'vue'\nimport { useActionRunner, usePanel, useT } from '../../context'\nimport { cn } from '../../lib/utils'\nimport { useField } from '../form/form-context'\nimport FieldWrapper from '../schema/FieldWrapper.vue'\nimport Button from '../ui/Button.vue'\nimport { useRichEditorExtensions } from './rich-editor-extensions'\nimport RichEditorSidePanel from './RichEditorSidePanel.vue'\nimport RichEditorSuggestions from './RichEditorSuggestions.vue'\nimport RichEditorToolbarEntries from './RichEditorToolbarEntries.vue'\n\ntype MarkConfig = Parameters<typeof Mark.create>[0]\ntype NodeConfig = Parameters<typeof Node.create>[0]\ntype ExtensionConfig = Parameters<typeof Extension.create>[0]\n\n/**\n * Resize handles of `resizableImages()` (Tiptap's node view adds bare `data-resize-handle`\n * elements): round dots on the corners, shown on hover and while the image is selected.\n */\nconst RESIZE_HANDLE_CLASSES =\n  '[&_[data-resize-handle]]:z-10 [&_[data-resize-handle]]:size-3 [&_[data-resize-handle]]:rounded-full [&_[data-resize-handle]]:border-2 [&_[data-resize-handle]]:border-background [&_[data-resize-handle]]:bg-primary [&_[data-resize-handle]]:opacity-0 [&_[data-resize-container]:hover_[data-resize-handle]]:opacity-100 [&_.ProseMirror-selectednode_[data-resize-handle]]:opacity-100 [&_[data-resize-handle=bottom-right]]:cursor-nwse-resize [&_[data-resize-handle=top-left]]:cursor-nwse-resize [&_[data-resize-handle=bottom-left]]:cursor-nesw-resize [&_[data-resize-handle=top-right]]:cursor-nesw-resize'\n\n/** The image extension, with drag handles for `resizableImages()`. */\nfunction imageExtension(resizable: boolean) {\n  if (!resizable) return Image\n\n  return Image.extend({\n    addAttributes() {\n      return resizableImageAttributes(this.parent?.() ?? {})\n    },\n  }).configure(resizableImageOptions())\n}\n\n/** Extensions for the extra toolbar buttons (only those the toolbar uses are loaded). */\nfunction toolbarExtensions(buttons: string[], markdown: boolean): Extensions {\n  const has = (...names: string[]) => names.some((name) => buttons.includes(name))\n  const extensions: Extensions = []\n\n  if (has('table')) extensions.push(TableKit.configure({ table: { resizable: false } }))\n  // Markdown has no syntax for these.\n  if (markdown) return extensions\n\n  if (has('highlight')) extensions.push(Mark.create(highlightMarkConfig() as MarkConfig))\n  if (has('subscript')) extensions.push(Mark.create(subscriptMarkConfig() as MarkConfig))\n  if (has('superscript')) extensions.push(Mark.create(superscriptMarkConfig() as MarkConfig))\n  if (has('textColor')) extensions.push(Mark.create(textColorMarkConfig() as MarkConfig))\n  if (has('alignStart', 'alignCenter', 'alignEnd', 'alignJustify')) {\n    extensions.push(Extension.create(textAlignExtensionConfig() as ExtensionConfig))\n  }\n  if (has('details')) {\n    extensions.push(...detailsNodeConfigs().map((config) => Node.create(config as NodeConfig)))\n  }\n  if (has('small')) extensions.push(Mark.create(smallMarkConfig() as MarkConfig))\n  if (has('lead')) extensions.push(Extension.create(leadExtensionConfig() as ExtensionConfig))\n  if (has('grid', 'gridDelete', 'gridAddColumnBefore', 'gridAddColumnAfter', 'gridDeleteColumn')) {\n    extensions.push(...gridNodeConfigs().map((config) => Node.create(config as NodeConfig)))\n  }\n\n  return extensions\n}\n\nconst props = defineProps<{ component: RichEditorSchema; plugins: LoadedRichEditorExtensions }>()\nconst t = useT()\nconst panel = usePanel()\nconst runner = useActionRunner()\nconst { value, setValue, blur, error, id, disabled, readOnly, aria } = useField<unknown>(\n  () => props.component,\n)\nconst fileInput = ref<HTMLInputElement | null>(null)\nconst isMarkdown = computed(() => props.component.type === 'MarkdownEditor')\nconst editable = computed(() => !disabled.value && !readOnly.value)\n// Uploaded images preview from a local URL but are stored by their `tmp:` key.\nconst attachments = new EditorAttachments()\nconst isJson = computed(() => Boolean(props.component.json) && !isMarkdown.value)\n// The editor's live instance, for the custom block node views and suggestions.\nconst liveEditor = shallowRef<Editor | undefined>()\nconst rich = useRichEditorExtensions(() => props.component, liveEditor)\n// The open toolbar panel (the text colour palette).\nconst openPanel = ref<'textColor' | null>(null)\n// The open side panel (custom blocks or merge tags).\nconst initialSidePanel = (): RichEditorPanel | null => {\n  const initial = props.component.activePanel ?? null\n\n  if (initial === 'customBlocks') return props.component.customBlocks?.length ? initial : null\n  if (initial === 'mergeTags') return props.component.mergeTags?.length ? initial : null\n\n  return null\n}\nconst sidePanel = ref<RichEditorPanel | null>(initialSidePanel())\nconst attachmentError = ref<string | null>(null)\n// Bumped on every transaction so active states and the table row follow the cursor.\nconst selectionTick = ref(0)\nconst stickyTop = ref<string | null>(null)\nconst sticky = computed(() =>\n  Boolean(props.component.stickyToolbar || props.component.stickyPanels),\n)\n\nconst updateStickyTop = () => {\n  stickyTop.value = sticky.value ? resolveStickyOffset(props.component.stickyOffset) : null\n}\n\nonMounted(updateStickyTop)\nwatch([sticky, () => props.component.stickyOffset], updateStickyTop)\n\n// Built-in buttons, plugin tools and commands of plugin JavaScript extensions.\nconst commands = computed(() =>\n  toolbarCommands(\n    props.component.editorTools,\n    {\n      runAction: (tool, args) =>\n        tool.action\n          ? runner.runField(tool.action, { ...rich.context.value, arguments: args })\n          : Promise.resolve(undefined),\n      editor: () => liveEditor.value ?? null,\n    },\n    props.plugins.commands,\n  ),\n)\n\n// Field state ↔ editor content: HTML, Markdown (loaded from the server's HTML) or a\n// Tiptap JSON document. `tmp:` upload keys become local preview URLs and back.\nconst stateToContent = (state: unknown): string | Record<string, unknown> => {\n  if (isJson.value) {\n    const document = toEditorDocument(state)\n\n    return document ? JSON.parse(attachments.toEditor(JSON.stringify(document))) : ''\n  }\n\n  return attachments.toEditor(\n    ((isMarkdown.value\n      ? typeof props.component.html === 'string'\n        ? props.component.html\n        : null\n      : state) as string | null) ?? '',\n  )\n}\nconst editorToState = (instance: Pick<Editor, 'isEmpty' | 'getJSON' | 'getHTML'>): unknown => {\n  if (instance.isEmpty) return null\n  if (isJson.value) return JSON.parse(attachments.toState(JSON.stringify(instance.getJSON())))\n\n  const html = instance.getHTML()\n\n  return attachments.toState(isMarkdown.value ? htmlToMarkdown(html) : html)\n}\n\nonBeforeUnmount(() => attachments.destroy())\n\n// Keyboard access to the toolbars (roving tabindex, arrows, Escape, Alt+F10).\ntype ToolbarSlot = 'main' | 'table' | 'floating'\nconst toolbarElements: Record<ToolbarSlot, { element: HTMLElement; detach: () => void } | null> = {\n  main: null,\n  table: null,\n  floating: null,\n}\nconst toolbars = () => [\n  toolbarElements.floating?.element,\n  toolbarElements.main?.element,\n  toolbarElements.table?.element,\n]\nconst setToolbar = (slot: ToolbarSlot, element: unknown) => {\n  const current = toolbarElements[slot]\n\n  if (current?.element === element) return\n\n  current?.detach()\n  toolbarElements[slot] =\n    element instanceof HTMLElement\n      ? {\n          element,\n          detach: attachToolbarKeyboard(element, {\n            onEscape: () => liveEditor.value?.commands.focus(),\n            toolbars,\n          }),\n        }\n      : null\n}\n\nonBeforeUnmount(() => {\n  for (const slot of ['main', 'table', 'floating'] as const) setToolbar(slot, null)\n})\n\nconst editor = useEditor({\n  extensions: [\n    StarterKit.configure({ link: false }),\n    Link.configure(linkExtensionOptions(props.component.linkProtocols)),\n    imageExtension(Boolean(props.component.resizableImages) && !isMarkdown.value),\n    Placeholder.configure({ placeholder: props.component.placeholder ?? '' }),\n    ...toolbarExtensions(allToolbarButtons(props.component), isMarkdown.value),\n    ...(isMarkdown.value ? [] : rich.extensions),\n    ...(isMarkdown.value ? [] : (props.plugins.extensions as Extensions)),\n  ],\n  // Markdown is loaded from the server's HTML rendering of it, never parsed as HTML.\n  content: stateToContent(value.value),\n  editable: editable.value,\n  editorProps: {\n    // The mention / merge tag popup takes the arrow, Enter, Tab and Escape keys.\n    handleKeyDown: (_view, event) => {\n      // Alt+F10: into the floating toolbar, else the main one.\n      if (isToolbarShortcut(event)) return focusToolbar(toolbars())\n\n      return liveEditor.value ? rich.suggestions.handleKeyDown(event, liveEditor.value) : false\n    },\n    // ProseMirror reads its DOM attributes on every view update, so they follow `aria`.\n    attributes: () => ({\n      class: cn(\n        'alfakit-prose min-h-32 px-3 py-2 text-sm outline-none',\n        props.component.resizableImages && RESIZE_HANDLE_CLASSES,\n      ),\n      // Runtime sizes cannot be Tailwind classes (they would never be generated).\n      ...(props.component.minHeight ? { style: `min-height: ${props.component.minHeight}px` } : {}),\n      id,\n      // Each paragraph follows its own script, so Arabic and English mix correctly.\n      dir: 'auto',\n      role: 'textbox',\n      'aria-multiline': 'true',\n      ...(props.component.label ? { 'aria-labelledby': fieldIds(id).label } : {}),\n      ...Object.fromEntries(\n        Object.entries(aria.value).map(([name, attribute]) => [name, String(attribute)]),\n      ),\n    }),\n  },\n  onUpdate: ({ editor: instance }) => {\n    setValue(editorToState(instance))\n  },\n  onTransaction: ({ editor: instance }) => {\n    rich.suggestions.update(instance)\n    selectionTick.value++\n  },\n  onBlur: () => {\n    rich.suggestions.close()\n    blur()\n  },\n})\n\nwatch(\n  editor,\n  (instance) => {\n    liveEditor.value = instance\n  },\n  { immediate: true },\n)\n\n// Keep editor in sync when the server refreshes the state.\nwatch(value, (next) => {\n  const instance = editor.value\n\n  if (!instance) return\n\n  const current = editorToState(instance)\n  const same = isJson.value\n    ? JSON.stringify(toEditorDocument(next)) === JSON.stringify(current)\n    : (next ?? '') === (current ?? '')\n\n  if (!same) {\n    instance.commands.setContent(stateToContent(next), { emitUpdate: false })\n  }\n})\n\nwatch(editable, (isEditable) => {\n  editor.value?.setEditable(isEditable)\n})\n\n// Re-apply the editable element's attributes when the error or description changes.\nwatch(aria, () => {\n  if (editor.value && !editor.value.isDestroyed) {\n    editor.value.view.setProps({})\n  }\n})\n\n// A floating toolbar follows its selection while the page scrolls.\nwatch(\n  () => Boolean(props.component.floatingToolbars),\n  (hasFloatingToolbars, _previous, onCleanup) => {\n    if (!hasFloatingToolbars || typeof window === 'undefined') return\n\n    const onScroll = () => selectionTick.value++\n\n    window.addEventListener('scroll', onScroll, { capture: true, passive: true })\n    onCleanup(() => window.removeEventListener('scroll', onScroll, { capture: true }))\n  },\n  { immediate: true },\n)\n\nconst pickImage = () => fileInput.value?.click()\n\nconst uploadImage = async (file: File) => {\n  if (!panel.value.endpoints.upload || !editor.value) return\n\n  // The server checks again when the form is saved.\n  const problem = fileAttachmentError(file, props.component.fileAttachments)\n\n  if (problem) {\n    attachmentError.value =\n      problem === 'too_large'\n        ? t('form.file_too_large', {}, 'This file is too large.')\n        : t('form.file_invalid_type', {}, 'This file type is not allowed.')\n\n    return\n  }\n\n  attachmentError.value = null\n\n  let response: { key: string }\n\n  try {\n    // Large attachments go in resumable chunks.\n    response = await uploadTemporaryFile(\n      panel.value.endpoints.upload,\n      file,\n      panelUploadOptions(panel.value, props.component.fileAttachments.uploadPolicy),\n    )\n  } catch (error) {\n    attachmentError.value =\n      (error as { errors?: Record<string, string[]> }).errors?.file?.[0] ??\n      t('form.upload_failed', {}, 'The file could not be uploaded.')\n\n    return\n  }\n\n  const src = attachments.add(response.key, file)\n\n  editor.value.chain().focus().setImage({ src, alt: file.name }).run()\n}\n\nconst onFilePicked = (event: Event) => {\n  const file = (event.target as HTMLInputElement).files?.[0]\n\n  if (file) void uploadImage(file)\n}\n\nconst accept = computed(() =>\n  (props.component.fileAttachments.acceptedFileTypes ?? ['image/*']).join(','),\n)\n\nconst translate = (key: string, fallback: string) => t(key, {}, fallback)\n\nconst runCommand = (name: string) => {\n  const button = commands.value[name]\n\n  if (!button || !editor.value) return\n\n  button.run(editor.value, {\n    // Messages arrive translated (`form.link_prompt`, `editor.grid_columns`).\n    prompt: (message) => window.prompt(message),\n    pickImage,\n    togglePanel: (target) => {\n      openPanel.value = openPanel.value === target ? null : target\n    },\n    t: translate,\n  })\n}\n\nconst toggleSidePanel = (target: RichEditorPanel) => {\n  sidePanel.value = sidePanel.value === target ? null : target\n}\n\nconst insertMergeTag = (tagId: string) => {\n  editor.value\n    ?.chain()\n    .focus()\n    .insertContent({ type: 'mergeTag', attrs: { id: tagId } })\n    .run()\n}\n\nconst currentTextColor = () => {\n  void selectionTick.value\n\n  return editor.value?.getAttributes('textColor').color\n}\n\n// A `table` floating toolbar replaces the table row of buttons.\nconst showTableToolbar = () => {\n  void selectionTick.value\n\n  return Boolean(\n    editor.value &&\n    editable.value &&\n    !props.component.floatingToolbars?.table &&\n    showsTableToolbar(allToolbarButtons(props.component), editor.value),\n  )\n}\n\nconst floating = computed(() => {\n  void selectionTick.value\n\n  return editable.value\n    ? resolveFloatingToolbar(editor.value ?? null, props.component.floatingToolbars)\n    : null\n})\n\nconst applyColor = (color: string | null, close = true) => {\n  if (!editor.value) return\n\n  setTextColor(editor.value, color)\n\n  if (close) openPanel.value = null\n}\n</script>\n\n<template>\n  <FieldWrapper :field=\"props.component\" :html-for=\"id\" :error=\"error\">\n    <div\n      :class=\"\n        cn(\n          'border-input dark:bg-input/30 focus-within:border-ring focus-within:ring-ring/50 rounded-md border shadow-xs focus-within:ring-[3px]',\n          error && 'border-destructive',\n          disabled && 'opacity-60',\n        )\n      \"\n    >\n      <!-- The sticky offset is a runtime value: no Tailwind class can hold it. -->\n      <div\n        v-if=\"props.component.toolbarButtons.length > 0 && editor\"\n        :ref=\"(element) => setToolbar('main', element)\"\n        role=\"toolbar\"\n        :aria-label=\"t('editor.toolbar', {}, 'Formatting')\"\n        aria-keyshortcuts=\"Alt+F10\"\n        data-slot=\"rich-editor-toolbar\"\n        :class=\"\n          cn(\n            'flex flex-wrap items-center gap-0.5 border-b p-1',\n            props.component.stickyToolbar && 'bg-background sticky z-10 rounded-t-md',\n          )\n        \"\n        :style=\"props.component.stickyToolbar ? { top: stickyTop ?? '0px' } : undefined\"\n      >\n        <RichEditorToolbarEntries\n          :names=\"props.component.toolbarButtons\"\n          :component=\"props.component\"\n          :editor=\"editor\"\n          :editable=\"editable\"\n          :commands=\"commands\"\n          :tick=\"selectionTick\"\n          :open-panel=\"openPanel\"\n          :side-panel=\"sidePanel\"\n          @run=\"runCommand\"\n          @toggle-panel=\"toggleSidePanel\"\n        />\n      </div>\n      <div\n        v-if=\"editor && openPanel === 'textColor'\"\n        role=\"group\"\n        :aria-label=\"toolbarButtonLabel('textColor', translate)\"\n        class=\"flex flex-wrap items-center gap-1 border-b p-1\"\n        data-slot=\"rich-editor-text-colors\"\n      >\n        <!-- Palette colours are runtime values: no Tailwind class can hold them. -->\n        <button\n          v-for=\"color in props.component.textColors ?? []\"\n          :key=\"color.value\"\n          type=\"button\"\n          :title=\"color.label\"\n          :aria-label=\"color.label\"\n          :aria-pressed=\"currentTextColor() === color.value ? 'true' : 'false'\"\n          class=\"focus-visible:ring-ring/50 size-6 rounded-full border shadow-xs outline-none focus-visible:ring-[3px] aria-pressed:ring-2\"\n          :style=\"{ backgroundColor: color.value }\"\n          @mousedown.prevent\n          @click=\"applyColor(color.value)\"\n        />\n        <input\n          v-if=\"props.component.customTextColors\"\n          type=\"color\"\n          :aria-label=\"t('editor.custom_color', {}, 'Custom color')\"\n          :title=\"t('editor.custom_color', {}, 'Custom color')\"\n          class=\"size-6 cursor-pointer rounded border bg-transparent p-0\"\n          @input=\"applyColor(($event.target as HTMLInputElement).value, false)\"\n        />\n        <Button\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          :aria-label=\"t('editor.remove_color', {}, 'Remove color')\"\n          :title=\"t('editor.remove_color', {}, 'Remove color')\"\n          @mousedown.prevent\n          @click=\"applyColor(null)\"\n        >\n          <EraserIcon />\n        </Button>\n      </div>\n      <div\n        v-if=\"editor && showTableToolbar()\"\n        :ref=\"(element) => setToolbar('table', element)\"\n        role=\"toolbar\"\n        :aria-label=\"toolbarButtonLabel('table', translate)\"\n        class=\"flex flex-wrap items-center gap-0.5 border-b p-1\"\n        data-slot=\"rich-editor-table-toolbar\"\n      >\n        <RichEditorToolbarEntries\n          :names=\"TABLE_TOOLBAR_BUTTONS\"\n          :component=\"props.component\"\n          :editor=\"editor\"\n          :editable=\"editable\"\n          :commands=\"commands\"\n          :tick=\"selectionTick\"\n          :open-panel=\"openPanel\"\n          :side-panel=\"sidePanel\"\n          @run=\"runCommand\"\n          @toggle-panel=\"toggleSidePanel\"\n        />\n      </div>\n      <div class=\"@container\">\n        <div class=\"flex flex-col-reverse @2xl:flex-row\">\n          <EditorContent\n            :editor=\"editor\"\n            class=\"min-w-0 flex-1\"\n            :style=\"\n              props.component.maxHeight\n                ? { maxHeight: `${props.component.maxHeight}px`, overflowY: 'auto' }\n                : undefined\n            \"\n          />\n          <RichEditorSidePanel\n            v-if=\"editor && sidePanel\"\n            :panel=\"sidePanel\"\n            :component=\"props.component\"\n            :editable=\"editable\"\n            :sticky=\"props.component.stickyPanels ? (stickyTop ?? '0px') : null\"\n            @insert-block=\"(blockId: string) => void rich.insertBlock(blockId)\"\n            @insert-merge-tag=\"insertMergeTag\"\n            @close=\"sidePanel = null\"\n          />\n        </div>\n      </div>\n      <!-- Runtime coordinates cannot be Tailwind classes. -->\n      <div\n        v-if=\"editor && floating && floating.buttons.length > 0\"\n        :ref=\"(element) => setToolbar('floating', element)\"\n        role=\"toolbar\"\n        :aria-label=\"t('editor.floating_toolbar', {}, 'Selection formatting')\"\n        data-slot=\"rich-editor-floating-toolbar\"\n        :data-node=\"floating.node\"\n        class=\"bg-popover text-popover-foreground fixed z-50 flex items-center gap-0.5 rounded-md border p-1 shadow-md\"\n        :style=\"floatingToolbarStyle(floating.coords)\"\n      >\n        <RichEditorToolbarEntries\n          :names=\"floating.buttons\"\n          :component=\"props.component\"\n          :editor=\"editor\"\n          :editable=\"editable\"\n          :commands=\"commands\"\n          :tick=\"selectionTick\"\n          :open-panel=\"openPanel\"\n          :side-panel=\"sidePanel\"\n          @run=\"runCommand\"\n          @toggle-panel=\"toggleSidePanel\"\n        />\n      </div>\n      <RichEditorSuggestions\n        :id=\"`${id}-suggestions`\"\n        :suggestions=\"rich.suggestions\"\n        :editor=\"editor\"\n      />\n      <p v-if=\"attachmentError\" role=\"alert\" class=\"text-destructive px-3 pb-2 text-xs\">\n        {{ attachmentError }}\n      </p>\n      <input\n        ref=\"fileInput\"\n        type=\"file\"\n        :accept=\"accept\"\n        class=\"sr-only\"\n        tabindex=\"-1\"\n        aria-hidden=\"true\"\n        @change=\"onFilePicked\"\n      />\n    </div>\n  </FieldWrapper>\n</template>\n"],"mappings":"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"}

package/dist/components/fields/RichEditorSidePanel.js

@@ -0,0 +1,7 @@
+import e from "./RichEditorSidePanel.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/fields/RichEditorSidePanel.vue
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=RichEditorSidePanel.js.map

package/dist/components/fields/RichEditorSidePanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RichEditorSidePanel.js","names":["_sfc_main","RichEditorSidePanel_vue_vue_type_script_setup_true_lang_default","RichEditorSidePanel_default"],"sources":["../../../src/components/fields/RichEditorSidePanel.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { RichEditorPanel, RichEditorSchema } from '@alfakit/core'\nimport { groupCustomBlocks, mergeTagText } from '@alfakit/core'\nimport { BlocksIcon, XIcon } from '@lucide/vue'\nimport { computed, ref } from 'vue'\nimport { useT } from '../../context'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport Button from '../ui/Button.vue'\nimport Input from '../ui/Input.vue'\n\n/**\n * The custom blocks or merge tags panel: beside the content on wide editors, above it on\n * narrow ones. Blocks are grouped, optionally searchable and shown as a grid.\n */\nconst props = defineProps<{\n  panel: RichEditorPanel\n  component: RichEditorSchema\n  editable: boolean\n  /** `top` of a sticky panel, or null. */\n  sticky: string | null\n}>()\nconst emit = defineEmits<{\n  insertBlock: [id: string]\n  insertMergeTag: [id: string]\n  close: []\n}>()\nconst t = useT()\nconst search = ref('')\n\nconst heading = computed(() =>\n  props.panel === 'customBlocks'\n    ? t('editor.custom_blocks_heading', {}, 'Custom blocks')\n    : t('editor.merge_tags_heading', {}, 'Merge tags'),\n)\nconst groups = computed(() =>\n  props.panel === 'customBlocks'\n    ? groupCustomBlocks(props.component.customBlocks ?? [], search.value)\n    : [],\n)\nconst grid = computed(() => Boolean(props.component.customBlocksGrid))\nconst itemClass =\n  'hover:bg-accent hover:text-accent-foreground focus-visible:ring-ring/50 flex min-w-0 items-center gap-2 rounded-md px-2 py-1.5 text-start text-sm outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50'\n</script>\n\n<template>\n  <aside\n    :aria-label=\"heading\"\n    data-slot=\"rich-editor-panel\"\n    :data-panel=\"props.panel\"\n    class=\"bg-muted/20 shrink-0 border-b @2xl:w-64 @2xl:border-s @2xl:border-b-0\"\n  >\n    <!-- The offset is a runtime value: no Tailwind class can hold it. -->\n    <div\n      :class=\"cn('flex flex-col gap-2 p-2', props.sticky !== null && '@2xl:sticky')\"\n      :style=\"props.sticky !== null ? { top: props.sticky } : undefined\"\n    >\n      <div class=\"flex items-center justify-between gap-2\">\n        <span class=\"text-muted-foreground text-xs font-medium\">{{ heading }}</span>\n        <Button\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          :aria-label=\"t('editor.close_panel', {}, 'Close panel')\"\n          :title=\"t('editor.close_panel', {}, 'Close panel')\"\n          @mousedown.prevent\n          @click=\"emit('close')\"\n        >\n          <XIcon />\n        </Button>\n      </div>\n      <Input\n        v-if=\"props.panel === 'customBlocks' && props.component.searchableCustomBlocks\"\n        v-model=\"search\"\n        type=\"search\"\n        :aria-label=\"t('editor.search_blocks', {}, 'Search blocks')\"\n        :placeholder=\"t('editor.search_blocks', {}, 'Search blocks')\"\n        class=\"h-8\"\n      />\n      <template v-if=\"props.panel === 'customBlocks'\">\n        <p v-if=\"groups.length === 0\" class=\"text-muted-foreground px-2 py-1.5 text-sm\">\n          {{ t('no_results', {}, 'No results.') }}\n        </p>\n        <div\n          v-for=\"entry in groups\"\n          v-else\n          :key=\"entry.group ?? ''\"\n          role=\"group\"\n          :aria-label=\"entry.group ?? heading\"\n        >\n          <div\n            v-if=\"entry.group\"\n            class=\"text-muted-foreground px-2 pt-1 pb-0.5 text-xs font-medium\"\n          >\n            {{ entry.group }}\n          </div>\n          <div :class=\"cn(grid ? 'grid grid-cols-2 gap-1' : 'flex flex-col gap-0.5')\">\n            <button\n              v-for=\"block in entry.blocks\"\n              :key=\"block.id\"\n              type=\"button\"\n              :disabled=\"!props.editable\"\n              :class=\"cn(itemClass, grid && 'flex-col justify-center border py-3 text-center')\"\n              @mousedown.prevent\n              @click=\"emit('insertBlock', block.id)\"\n            >\n              <Icon v-if=\"block.icon\" :name=\"block.icon\" class=\"size-4 shrink-0\" />\n              <BlocksIcon v-else class=\"size-4 shrink-0\" />\n              <span class=\"truncate\">{{ block.label }}</span>\n            </button>\n          </div>\n        </div>\n      </template>\n      <div v-else class=\"flex flex-col gap-0.5\">\n        <button\n          v-for=\"tag in props.component.mergeTags ?? []\"\n          :key=\"tag.id\"\n          type=\"button\"\n          :disabled=\"!props.editable\"\n          :class=\"itemClass\"\n          @mousedown.prevent\n          @click=\"emit('insertMergeTag', tag.id)\"\n        >\n          <span class=\"truncate\">{{ tag.label }}</span>\n          <span class=\"text-muted-foreground ms-auto font-mono text-xs\" dir=\"ltr\">{{\n            mergeTagText({ id: tag.id })\n          }}</span>\n        </button>\n      </div>\n    </div>\n  </aside>\n</template>\n"],"mappings":""}

package/dist/components/fields/RichEditorSidePanel.vue.d.ts

@@ -0,0 +1,23 @@
+import type { RichEditorPanel, RichEditorSchema } from '@alfakit/core';
+/**
+ * The custom blocks or merge tags panel: beside the content on wide editors, above it on
+ * narrow ones. Blocks are grouped, optionally searchable and shown as a grid.
+ */
+type __VLS_Props = {
+    panel: RichEditorPanel;
+    component: RichEditorSchema;
+    editable: boolean;
+    /** `top` of a sticky panel, or null. */
+    sticky: string | null;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: () => any;
+    insertBlock: (id: string) => any;
+    insertMergeTag: (id: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: (() => any) | undefined;
+    onInsertBlock?: ((id: string) => any) | undefined;
+    onInsertMergeTag?: ((id: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;
+//# sourceMappingURL=RichEditorSidePanel.vue.d.ts.map

package/dist/components/fields/RichEditorSidePanel.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RichEditorSidePanel.vue.d.ts","sourceRoot":"","sources":["../../../src/components/fields/RichEditorSidePanel.vue"],"names":[],"mappings":"AAsIA,OAAO,KAAK,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAA;AAUtE;;;GAGG;AACH,KAAK,WAAW,GAAG;IACjB,KAAK,EAAE,eAAe,CAAA;IACtB,SAAS,EAAE,gBAAgB,CAAA;IAC3B,QAAQ,EAAE,OAAO,CAAA;IACjB,wCAAwC;IACxC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAA;CACtB,CAAC;;;;;;;;;;AAkRF,wBAOG"}

package/dist/components/fields/RichEditorSidePanel.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,103 @@
+import { useT as e } from "../../context.js";
+import { cn as t } from "../../lib/utils.js";
+import n from "../../lib/Icon.js";
+import r from "../ui/Button2.js";
+import i from "../ui/Input.js";
+import { groupCustomBlocks as a, mergeTagText as o } from "@alfakit/core";
+import { Fragment as s, computed as c, createBlock as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createVNode as p, defineComponent as m, normalizeClass as h, normalizeStyle as g, openBlock as _, ref as v, renderList as y, toDisplayString as b, unref as x, withCtx as S, withModifiers as C } from "vue";
+import { BlocksIcon as w, XIcon as T } from "@lucide/vue";
+//#region src/components/fields/RichEditorSidePanel.vue?vue&type=script&setup=true&lang.ts
+var E = ["aria-label", "data-panel"], D = { class: "flex items-center justify-between gap-2" }, O = { class: "text-muted-foreground text-xs font-medium" }, k = {
+	key: 0,
+	class: "text-muted-foreground px-2 py-1.5 text-sm"
+}, A = ["aria-label"], j = {
+	key: 0,
+	class: "text-muted-foreground px-2 pt-1 pb-0.5 text-xs font-medium"
+}, M = ["disabled", "onClick"], N = { class: "truncate" }, P = {
+	key: 2,
+	class: "flex flex-col gap-0.5"
+}, F = ["disabled", "onClick"], I = { class: "truncate" }, L = {
+	class: "text-muted-foreground ms-auto font-mono text-xs",
+	dir: "ltr"
+}, R = "hover:bg-accent hover:text-accent-foreground focus-visible:ring-ring/50 flex min-w-0 items-center gap-2 rounded-md px-2 py-1.5 text-start text-sm outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50", z = /*@__PURE__*/ m({
+	__name: "RichEditorSidePanel",
+	props: {
+		panel: {},
+		component: {},
+		editable: { type: Boolean },
+		sticky: {}
+	},
+	emits: [
+		"insertBlock",
+		"insertMergeTag",
+		"close"
+	],
+	setup(m, { emit: z }) {
+		let B = m, V = z, H = e(), U = v(""), W = c(() => B.panel === "customBlocks" ? H("editor.custom_blocks_heading", {}, "Custom blocks") : H("editor.merge_tags_heading", {}, "Merge tags")), G = c(() => B.panel === "customBlocks" ? a(B.component.customBlocks ?? [], U.value) : []), K = c(() => !!B.component.customBlocksGrid);
+		return (e, a) => (_(), d("aside", {
+			"aria-label": W.value,
+			"data-slot": "rich-editor-panel",
+			"data-panel": B.panel,
+			class: "bg-muted/20 shrink-0 border-b @2xl:w-64 @2xl:border-s @2xl:border-b-0"
+		}, [f("div", {
+			class: h(x(t)("flex flex-col gap-2 p-2", B.sticky !== null && "@2xl:sticky")),
+			style: g(B.sticky === null ? void 0 : { top: B.sticky })
+		}, [
+			f("div", D, [f("span", O, b(W.value), 1), p(r, {
+				type: "button",
+				variant: "ghost",
+				size: "icon-sm",
+				"aria-label": x(H)("editor.close_panel", {}, "Close panel"),
+				title: x(H)("editor.close_panel", {}, "Close panel"),
+				onMousedown: a[0] ||= C(() => {}, ["prevent"]),
+				onClick: a[1] ||= (e) => V("close")
+			}, {
+				default: S(() => [p(x(T))]),
+				_: 1
+			}, 8, ["aria-label", "title"])]),
+			B.panel === "customBlocks" && B.component.searchableCustomBlocks ? (_(), l(i, {
+				key: 0,
+				modelValue: U.value,
+				"onUpdate:modelValue": a[2] ||= (e) => U.value = e,
+				type: "search",
+				"aria-label": x(H)("editor.search_blocks", {}, "Search blocks"),
+				placeholder: x(H)("editor.search_blocks", {}, "Search blocks"),
+				class: "h-8"
+			}, null, 8, [
+				"modelValue",
+				"aria-label",
+				"placeholder"
+			])) : u("", !0),
+			B.panel === "customBlocks" ? (_(), d(s, { key: 1 }, [G.value.length === 0 ? (_(), d("p", k, b(x(H)("no_results", {}, "No results.")), 1)) : (_(!0), d(s, { key: 1 }, y(G.value, (e) => (_(), d("div", {
+				key: e.group ?? "",
+				role: "group",
+				"aria-label": e.group ?? W.value
+			}, [e.group ? (_(), d("div", j, b(e.group), 1)) : u("", !0), f("div", { class: h(x(t)(K.value ? "grid grid-cols-2 gap-1" : "flex flex-col gap-0.5")) }, [(_(!0), d(s, null, y(e.blocks, (e) => (_(), d("button", {
+				key: e.id,
+				type: "button",
+				disabled: !B.editable,
+				class: h(x(t)(R, K.value && "flex-col justify-center border py-3 text-center")),
+				onMousedown: a[3] ||= C(() => {}, ["prevent"]),
+				onClick: (t) => V("insertBlock", e.id)
+			}, [e.icon ? (_(), l(x(n), {
+				key: 0,
+				name: e.icon,
+				class: "size-4 shrink-0"
+			}, null, 8, ["name"])) : (_(), l(x(w), {
+				key: 1,
+				class: "size-4 shrink-0"
+			})), f("span", N, b(e.label), 1)], 42, M))), 128))], 2)], 8, A))), 128))], 64)) : (_(), d("div", P, [(_(!0), d(s, null, y(B.component.mergeTags ?? [], (e) => (_(), d("button", {
+				key: e.id,
+				type: "button",
+				disabled: !B.editable,
+				class: h(R),
+				onMousedown: a[4] ||= C(() => {}, ["prevent"]),
+				onClick: (t) => V("insertMergeTag", e.id)
+			}, [f("span", I, b(e.label), 1), f("span", L, b(x(o)({ id: e.id })), 1)], 40, F))), 128))]))
+		], 6)], 8, E));
+	}
+});
+//#endregion
+export { z as default };
+
+//# sourceMappingURL=RichEditorSidePanel.vue_vue_type_script_setup_true_lang.js.map