@illinois-grad/grad-vue-rte 2.4.2 → 2.5.1

package/dist/grad-vue-rte-DDZoWaEh.js

@@ -0,0 +1,336 @@
+import { computed as e, createBlock as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, createVNode as a, defineComponent as o, mergeModels as s, normalizeClass as c, onMounted as l, openBlock as u, ref as d, toDisplayString as f, toRaw as p, toRef as m, toValue as h, unref as g, useModel as _, watch as v, withCtx as y } from "vue";
+import { EditorContent as b, useEditor as x } from "@tiptap/vue-3";
+import { BubbleMenu as S } from "@tiptap/vue-3/menus";
+import C from "@tiptap/extension-document";
+import w from "@tiptap/extension-paragraph";
+import T from "@tiptap/extension-text";
+import E from "@tiptap/extension-bold";
+import D from "@tiptap/extension-italic";
+import { ListKit as O } from "@tiptap/extension-list";
+import { Placeholder as k, UndoRedo as A } from "@tiptap/extensions";
+import { generateHTML as j } from "@tiptap/core";
+//#region src/composables/useRichTextEditor.ts
+function M(e) {
+	let { content: t, placeholder: n, label: r, onUpdate: i, editorProps: a = {} } = e, o = typeof n == "string" ? n : n.value, s = typeof r == "string" ? r : r.value, c = x({
+		content: t.value || "",
+		extensions: [
+			C,
+			w,
+			T,
+			E,
+			D,
+			O,
+			A,
+			k.configure({ placeholder: o })
+		],
+		editorProps: {
+			...a,
+			attributes: {
+				"aria-label": s,
+				...a.attributes
+			}
+		},
+		onUpdate({ editor: e }) {
+			t.value = e.getJSON(), i && i(e);
+		}
+	});
+	v(() => typeof r == "string" ? r : r.value, (e) => {
+		c.value && c.value?.setOptions({ editorProps: { attributes: { "aria-label": e } } });
+	}), v(() => t.value, (e) => {
+		c.value && JSON.stringify(e) !== JSON.stringify(c.value.getJSON()) && c.value.commands.setContent(p(e) || "");
+	});
+	function l() {
+		c.value?.commands?.focus();
+	}
+	return {
+		editor: c,
+		focusEditor: l
+	};
+}
+//#endregion
+//#region src/composables/useToolbarNavigation.ts
+function N(e, t) {
+	let n = d(0);
+	function r(r) {
+		let i = t.value;
+		if (!i) return;
+		let a = Array.from(i.querySelectorAll("button")), o = a.findIndex((e) => e === document.activeElement);
+		if (r.key === "Escape") {
+			r.preventDefault(), e.value?.commands?.focus();
+			return;
+		}
+		if (r.key === "Tab") return;
+		let s = o;
+		switch (r.key) {
+			case "ArrowRight":
+			case "ArrowDown":
+				r.preventDefault(), s = o < a.length - 1 ? o + 1 : 0;
+				break;
+			case "ArrowLeft":
+			case "ArrowUp":
+				r.preventDefault(), s = o > 0 ? o - 1 : a.length - 1;
+				break;
+			case "Home":
+				r.preventDefault(), s = 0;
+				break;
+			case "End":
+				r.preventDefault(), s = a.length - 1;
+				break;
+			default: return;
+		}
+		n.value = s, a[s]?.focus();
+	}
+	function i(e) {
+		return e === n.value ? 0 : -1;
+	}
+	return {
+		activeButtonIndex: n,
+		handleToolbarKeyDown: r,
+		getButtonTabIndex: i
+	};
+}
+//#endregion
+//#region src/components/editor/GRichTextToolbar.vue?vue&type=script&setup=true&lang.ts
+var P = ["aria-pressed", "tabindex"], F = ["aria-pressed", "tabindex"], I = ["aria-pressed", "tabindex"], L = ["aria-pressed", "tabindex"], R = /* @__PURE__ */ o({
+	__name: "GRichTextToolbar",
+	props: { editor: {} },
+	setup(t) {
+		let a = t, o = d(null), { handleToolbarKeyDown: s, getButtonTabIndex: l } = N(e(() => a.editor), o);
+		return (e, a) => t.editor ? (u(), r("div", {
+			key: 0,
+			class: "g-rich-text-toolbar",
+			role: "toolbar",
+			"aria-label": "Text formatting",
+			ref_key: "toolbarRef",
+			ref: o,
+			onKeydown: a[4] ||= (...e) => g(s) && g(s)(...e),
+			tabindex: "-1"
+		}, [
+			i("button", {
+				onClick: a[0] ||= (e) => t.editor.chain().focus().toggleBold().run(),
+				class: c({
+					bold: !0,
+					"is-active": t.editor.isActive("bold")
+				}),
+				"aria-pressed": t.editor.isActive("bold"),
+				title: "Bold",
+				"aria-label": "Bold",
+				type: "button",
+				tabindex: g(l)(0)
+			}, [...a[5] ||= [i("svg", {
+				xmlns: "http://www.w3.org/2000/svg",
+				viewBox: "0 0 384 512",
+				width: "16",
+				height: "16",
+				fill: "currentColor",
+				"aria-hidden": "true"
+			}, [i("path", { d: "M0 64C0 46.3 14.3 32 32 32H80 96 224c70.7 0 128 57.3 128 128c0 31.3-11.3 60.1-30 82.3c37.1 22.4 62 63.1 62 109.7c0 70.7-57.3 128-128 128H96 80 32c-17.7 0-32-14.3-32-32s14.3-32 32-32H48V256 96H32C14.3 96 0 81.7 0 64zM224 224c35.3 0 64-28.7 64-64s-28.7-64-64-64H112V224H224zM112 288V416H256c35.3 0 64-28.7 64-64s-28.7-64-64-64H224 112z" })], -1)]], 10, P),
+			i("button", {
+				onClick: a[1] ||= (e) => t.editor.chain().focus().toggleItalic().run(),
+				class: c({
+					italic: !0,
+					"is-active": t.editor.isActive("italic")
+				}),
+				"aria-pressed": t.editor.isActive("italic"),
+				title: "Italic",
+				"aria-label": "Italic",
+				type: "button",
+				tabindex: g(l)(1)
+			}, [...a[6] ||= [i("svg", {
+				xmlns: "http://www.w3.org/2000/svg",
+				viewBox: "0 0 384 512",
+				width: "16",
+				height: "16",
+				fill: "currentColor",
+				"aria-hidden": "true"
+			}, [i("path", { d: "M128 64c0-17.7 14.3-32 32-32H352c17.7 0 32 14.3 32 32s-14.3 32-32 32H293.3L160 416h64c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H90.7L224 96H160c-17.7 0-32-14.3-32-32z" })], -1)]], 10, F),
+			i("button", {
+				onClick: a[2] ||= (e) => t.editor.chain().focus().toggleOrderedList().run(),
+				class: c({ "is-active": t.editor.isActive("orderedList") }),
+				"aria-pressed": t.editor.isActive("orderedList"),
+				title: "Ordered List",
+				"aria-label": "Ordered List",
+				type: "button",
+				tabindex: g(l)(2)
+			}, [...a[7] ||= [i("svg", {
+				xmlns: "http://www.w3.org/2000/svg",
+				viewBox: "0 0 512 512",
+				width: "16",
+				height: "16",
+				fill: "currentColor",
+				"aria-hidden": "true"
+			}, [i("path", { d: "M24 56c0-13.3 10.7-24 24-24H80c13.3 0 24 10.7 24 24V176h16c13.3 0 24 10.7 24 24s-10.7 24-24 24H48c-13.3 0-24-10.7-24-24s10.7-24 24-24H64V80H48C34.7 80 24 69.3 24 56zM86.7 341.2c-6.5-7.4-18.3-6.9-24 1.2L51.5 357.9c-7.7 10.8-22.7 13.3-33.5 5.6s-13.3-22.7-5.6-33.5l11.1-15.6c23.7-33.2 72.3-35.6 99.2-4.9c21.3 24.4 20.8 60.9-1.1 84.7L86.8 432H120c13.3 0 24 10.7 24 24s-10.7 24-24 24H48c-9.5 0-18.2-5.6-22-14.4s-2.1-18.9 4.3-25.9l72-78c5.3-5.8 5.4-14.6 .3-20.5zM224 64H480c17.7 0 32 14.3 32 32s-14.3 32-32 32H224c-17.7 0-32-14.3-32-32s14.3-32 32-32zm0 160H480c17.7 0 32 14.3 32 32s-14.3 32-32 32H224c-17.7 0-32-14.3-32-32s14.3-32 32-32zm0 160H480c17.7 0 32 14.3 32 32s-14.3 32-32 32H224c-17.7 0-32-14.3-32-32s14.3-32 32-32z" })], -1)]], 10, I),
+			i("button", {
+				onClick: a[3] ||= (e) => t.editor.chain().focus().toggleBulletList().run(),
+				class: c({ "is-active": t.editor.isActive("bulletList") }),
+				"aria-pressed": t.editor.isActive("bulletList"),
+				title: "Unordered List",
+				"aria-label": "Unordered List",
+				type: "button",
+				tabindex: g(l)(3)
+			}, [...a[8] ||= [i("svg", {
+				xmlns: "http://www.w3.org/2000/svg",
+				viewBox: "0 0 512 512",
+				width: "16",
+				height: "16",
+				fill: "currentColor",
+				"aria-hidden": "true"
+			}, [i("path", { d: "M40 48C26.7 48 16 58.7 16 72v48c0 13.3 10.7 24 24 24H88c13.3 0 24-10.7 24-24V72c0-13.3-10.7-24-24-24H40zM192 64c-17.7 0-32 14.3-32 32s14.3 32 32 32H480c17.7 0 32-14.3 32-32s-14.3-32-32-32H192zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32H480c17.7 0 32-14.3 32-32s-14.3-32-32-32H192zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32H480c17.7 0 32-14.3 32-32s-14.3-32-32-32H192zM16 232v48c0 13.3 10.7 24 24 24H88c13.3 0 24-10.7 24-24V232c0-13.3-10.7-24-24-24H40c-13.3 0-24 10.7-24 24zM40 368c-13.3 0-24 10.7-24 24v48c0 13.3 10.7 24 24 24H88c13.3 0 24-10.7 24-24V392c0-13.3-10.7-24-24-24H40z" })], -1)]], 10, L)
+		], 544)) : n("", !0);
+	}
+}), z = (e, t) => {
+	let n = e.__vccOpts || e;
+	for (let [e, r] of t) n[e] = r;
+	return n;
+}, B = /* @__PURE__ */ z(R, [["__scopeId", "data-v-8c490655"]]), V = { class: "g-chat-input-wrap" }, H = ["disabled"], U = /* @__PURE__ */ z(/* @__PURE__ */ o({
+	inheritAttrs: !1,
+	__name: "GChatInput",
+	props: /* @__PURE__ */ s({
+		placeholder: { default: "Type a comment" },
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		maxRows: { default: 5 },
+		label: { default: "Comment input" }
+	}, {
+		modelValue: {},
+		modelModifiers: {}
+	}),
+	emits: /* @__PURE__ */ s(["send"], ["update:modelValue"]),
+	setup(o, { expose: s, emit: c }) {
+		let l = o, d = _(o, "modelValue"), f = c, { editor: p, focusEditor: m } = M({
+			content: d,
+			placeholder: e(() => l.placeholder),
+			label: e(() => l.label),
+			editorProps: {
+				handleKeyDown(e, t) {
+					if (p.value && t.key === "Enter") {
+						if (p.value.isActive("orderedList") || p.value.isActive("bulletList")) return !1;
+						if (t.shiftKey) p.value.commands.splitBlock();
+						else return d.value = p.value?.getJSON(), t.preventDefault(), h(p.value?.getJSON()), !0;
+					}
+					return !1;
+				},
+				attributes: { "aria-keyshortcuts": "Shift+Enter" }
+			}
+		});
+		function h(e) {
+			e && f("send", e);
+		}
+		function v() {
+			h(p.value?.getJSON());
+		}
+		function x() {
+			m();
+		}
+		return s({ focusInput: x }), (e, o) => (u(), r("div", V, [
+			g(p) ? (u(), t(g(S), {
+				key: 0,
+				editor: g(p)
+			}, {
+				default: y(() => [a(B, {
+					editor: g(p),
+					class: "bubble-menu"
+				}, null, 8, ["editor"])]),
+				_: 1
+			}, 8, ["editor"])) : n("", !0),
+			a(g(b), {
+				editor: g(p),
+				class: "editor-content"
+			}, null, 8, ["editor"]),
+			i("button", {
+				class: "g-chat-send-btn",
+				disabled: l.disabled || !d.value || d.value && Object.keys(d.value).length === 0,
+				onClick: v,
+				title: "Send",
+				"aria-label": "Send",
+				type: "button"
+			}, [...o[0] ||= [i("svg", {
+				xmlns: "http://www.w3.org/2000/svg",
+				viewBox: "0 0 512 512",
+				width: "16",
+				height: "16",
+				fill: "currentColor",
+				"aria-hidden": "true"
+			}, [i("path", { d: "M498.1 5.6c10.1 7 15.4 19.1 13.5 31.2l-64 416c-1.5 9.7-7.4 18.2-16 23s-18.9 5.4-28 1.6L284 427.7l-68.5 74.1c-8.9 9.7-22.9 12.9-35.2 8.1S160 493.2 160 480V396.4c0-4 1.5-7.8 4.2-10.7L331.8 202.8c5.8-6.3 5.6-16-.4-22s-15.7-6.4-22-.7L106 360.8 17.7 316.6C7.1 311.3 .3 300.7 0 288.9s5.9-22.8 16.1-28.7l448-256c10.7-6.1 23.9-5.5 34 1.4z" })], -1)]], 8, H)
+		]));
+	}
+}), [["__scopeId", "data-v-09bab62a"]]), W = { class: "g-note-input-wrap" }, G = /* @__PURE__ */ z(/* @__PURE__ */ o({
+	inheritAttrs: !1,
+	__name: "GNoteInput",
+	props: /* @__PURE__ */ s({
+		placeholder: { default: "Write a note..." },
+		label: { default: "Note input" }
+	}, {
+		modelValue: {},
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(t, { expose: n }) {
+		let i = t, { editor: o, focusEditor: s } = M({
+			content: _(t, "modelValue"),
+			placeholder: e(() => i.placeholder),
+			label: e(() => i.label)
+		});
+		function c() {
+			s();
+		}
+		return n({ focusInput: c }), (e, t) => (u(), r("div", W, [a(B, {
+			editor: g(o),
+			class: "toolbar"
+		}, null, 8, ["editor"]), a(g(b), {
+			editor: g(o),
+			class: "editor-content"
+		}, null, 8, ["editor"])]));
+	}
+}), [["__scopeId", "data-v-ebd8cfef"]]), K = [
+	C,
+	w,
+	T,
+	E,
+	D,
+	O
+];
+function q(t) {
+	let n = d("");
+	return l(() => {
+		v(t, () => {
+			let e = h(t);
+			if (!e || e.trim() === "") return "";
+			try {
+				n.value = j(JSON.parse(e), K);
+			} catch (t) {
+				console.error("Failed to parse content:", e), console.error(t), n.value = null;
+			}
+		}, { immediate: !0 });
+	}), {
+		rendered: n,
+		hasError: e(() => n.value === null)
+	};
+}
+//#endregion
+//#region src/components/GRichTextContent.vue?vue&type=script&setup=true&lang.ts
+var J = { class: "g-rich-text-content-wrap" }, Y = {
+	key: 0,
+	role: "alert",
+	class: "g-rich-text-content-error"
+}, X = ["innerHTML"], Z = /* @__PURE__ */ z(/* @__PURE__ */ o({
+	__name: "GRichTextContent",
+	props: {
+		error: {},
+		content: {}
+	},
+	setup(e) {
+		let { rendered: t, hasError: i } = q(m(e, "content"));
+		return (a, o) => (u(), r("div", J, [g(i) ? (u(), r("div", Y, f(e.error || "Failed to render content."), 1)) : g(t) ? (u(), r("div", {
+			key: 1,
+			class: "g-rich-text-content",
+			innerHTML: g(t)
+		}, null, 8, X)) : n("", !0)]));
+	}
+}), [["__scopeId", "data-v-68026e47"]]);
+//#endregion
+export { U as i, q as n, G as r, Z as t };
+
+//# sourceMappingURL=grad-vue-rte-DDZoWaEh.js.map

package/dist/grad-vue-rte-DDZoWaEh.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grad-vue-rte-DDZoWaEh.js","names":[],"sources":["../src/composables/useRichTextEditor.ts","../src/composables/useToolbarNavigation.ts","../src/components/editor/GRichTextToolbar.vue","../src/components/editor/GRichTextToolbar.vue","../src/components/GChatInput.vue","../src/components/GChatInput.vue","../src/components/GNoteInput.vue","../src/components/GNoteInput.vue","../src/composables/useRichTextRenderer.ts","../src/components/GRichTextContent.vue","../src/components/GRichTextContent.vue"],"sourcesContent":["import { toRaw, watch, type Ref } from \"vue\";\nimport { useEditor } from \"@tiptap/vue-3\";\nimport Document from \"@tiptap/extension-document\";\nimport Paragraph from \"@tiptap/extension-paragraph\";\nimport Text from \"@tiptap/extension-text\";\nimport Bold from \"@tiptap/extension-bold\";\nimport Italic from \"@tiptap/extension-italic\";\nimport { ListKit } from \"@tiptap/extension-list\";\nimport { UndoRedo, Placeholder } from \"@tiptap/extensions\";\n\ninterface UseRichTextEditorOptions {\n    content: Ref<object | \"\" | undefined>;\n    placeholder: Ref<string> | string;\n    label: Ref<string> | string;\n    onUpdate?: (editor: any) => void;\n    editorProps?: Record<string, any>;\n}\n\nexport function useRichTextEditor(options: UseRichTextEditorOptions) {\n    const { content, placeholder, label, onUpdate, editorProps = {} } = options;\n\n    const placeholderValue = typeof placeholder === 'string' ? placeholder : placeholder.value;\n    const labelValue = typeof label === 'string' ? label : label.value;\n\n    const editor = useEditor({\n        content: content.value || \"\",\n        extensions: [\n            Document,\n            Paragraph,\n            Text,\n            Bold,\n            Italic,\n            ListKit,\n            UndoRedo,\n            Placeholder.configure({ placeholder: placeholderValue }),\n        ],\n        editorProps: {\n            ...editorProps,\n            attributes: {\n                \"aria-label\": labelValue,\n                ...editorProps.attributes,\n            },\n        },\n        onUpdate({ editor }) {\n            content.value = editor.getJSON();\n            if (onUpdate) {\n                onUpdate(editor);\n            }\n        },\n    });\n\n    // Watch for label changes and update editor\n    watch(\n        () => typeof label === 'string' ? label : label.value,\n        (val) => {\n            if (editor.value) {\n                editor.value?.setOptions({\n                    editorProps: {\n                        attributes: {\n                            \"aria-label\": val,\n                        },\n                    },\n                });\n            }\n        },\n    );\n\n    // Watch for content changes and update editor\n    watch(\n        () => content.value,\n        (val) => {\n            if (\n                editor.value &&\n                JSON.stringify(val) !== JSON.stringify(editor.value.getJSON())\n            ) {\n                editor.value.commands.setContent(toRaw(val) || \"\");\n            }\n        },\n    );\n\n    function focusEditor() {\n        editor.value?.commands?.focus();\n    }\n\n    return {\n        editor,\n        focusEditor,\n    };\n}\n","import { ref, type Ref } from \"vue\";\nimport type { Editor } from \"@tiptap/vue-3\";\n\nexport function useToolbarNavigation(editor: Ref<Editor | undefined>, toolbarRef: Ref<HTMLElement | null>) {\n    const activeButtonIndex = ref(0);\n\n    function handleToolbarKeyDown(event: KeyboardEvent) {\n        const toolbar = toolbarRef.value;\n        if (!toolbar) return;\n\n        const buttons = Array.from(\n            toolbar.querySelectorAll(\"button\"),\n        ) as HTMLButtonElement[];\n        const currentIndex = buttons.findIndex(\n            (btn) => btn === document.activeElement,\n        );\n\n        // Handle Escape key - return focus to editor\n        if (event.key === \"Escape\") {\n            event.preventDefault();\n            editor.value?.commands?.focus();\n            return;\n        }\n\n        // Don't handle Tab - let it exit the toolbar naturally\n        if (event.key === \"Tab\") {\n            return;\n        }\n\n        let nextIndex = currentIndex;\n\n        switch (event.key) {\n            case \"ArrowRight\":\n            case \"ArrowDown\":\n                event.preventDefault();\n                nextIndex =\n                    currentIndex < buttons.length - 1 ? currentIndex + 1 : 0;\n                break;\n            case \"ArrowLeft\":\n            case \"ArrowUp\":\n                event.preventDefault();\n                nextIndex =\n                    currentIndex > 0 ? currentIndex - 1 : buttons.length - 1;\n                break;\n            case \"Home\":\n                event.preventDefault();\n                nextIndex = 0;\n                break;\n            case \"End\":\n                event.preventDefault();\n                nextIndex = buttons.length - 1;\n                break;\n            default:\n                return;\n        }\n\n        // Update active button index and focus\n        activeButtonIndex.value = nextIndex;\n        buttons[nextIndex]?.focus();\n    }\n\n    function getButtonTabIndex(index: number): number {\n        return index === activeButtonIndex.value ? 0 : -1;\n    }\n\n    return {\n        activeButtonIndex,\n        handleToolbarKeyDown,\n        getButtonTabIndex,\n    };\n}\n","<script lang=\"ts\" setup>\nimport { ref, computed } from \"vue\";\nimport type { Editor } from \"@tiptap/vue-3\";\nimport { useToolbarNavigation } from \"../../composables/useToolbarNavigation.ts\";\n\ninterface Props {\n    editor: Editor | undefined;\n}\n\nconst props = defineProps<Props>();\n\nconst toolbarRef = ref<HTMLElement | null>(null);\nconst editorRef = computed(() => props.editor);\nconst { handleToolbarKeyDown, getButtonTabIndex } = useToolbarNavigation(\n    editorRef,\n    toolbarRef,\n);\n</script>\n\n<template>\n    <div\n        v-if=\"editor\"\n        class=\"g-rich-text-toolbar\"\n        role=\"toolbar\"\n        aria-label=\"Text formatting\"\n        ref=\"toolbarRef\"\n        @keydown=\"handleToolbarKeyDown\"\n        tabindex=\"-1\"\n    >\n        <button\n            @click=\"editor.chain().focus().toggleBold().run()\"\n            :class=\"{\n                bold: true,\n                'is-active': editor.isActive('bold'),\n            }\"\n            :aria-pressed=\"editor.isActive('bold')\"\n            title=\"Bold\"\n            aria-label=\"Bold\"\n            type=\"button\"\n            :tabindex=\"getButtonTabIndex(0)\"\n        >\n            <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 384 512\"\n                width=\"16\"\n                height=\"16\"\n                fill=\"currentColor\"\n                aria-hidden=\"true\"\n            >\n                <path\n                    d=\"M0 64C0 46.3 14.3 32 32 32H80 96 224c70.7 0 128 57.3 128 128c0 31.3-11.3 60.1-30 82.3c37.1 22.4 62 63.1 62 109.7c0 70.7-57.3 128-128 128H96 80 32c-17.7 0-32-14.3-32-32s14.3-32 32-32H48V256 96H32C14.3 96 0 81.7 0 64zM224 224c35.3 0 64-28.7 64-64s-28.7-64-64-64H112V224H224zM112 288V416H256c35.3 0 64-28.7 64-64s-28.7-64-64-64H224 112z\"\n                />\n            </svg>\n        </button>\n        <button\n            @click=\"editor.chain().focus().toggleItalic().run()\"\n            :class=\"{\n                italic: true,\n                'is-active': editor.isActive('italic'),\n            }\"\n            :aria-pressed=\"editor.isActive('italic')\"\n            title=\"Italic\"\n            aria-label=\"Italic\"\n            type=\"button\"\n            :tabindex=\"getButtonTabIndex(1)\"\n        >\n            <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 384 512\"\n                width=\"16\"\n                height=\"16\"\n                fill=\"currentColor\"\n                aria-hidden=\"true\"\n            >\n                <path\n                    d=\"M128 64c0-17.7 14.3-32 32-32H352c17.7 0 32 14.3 32 32s-14.3 32-32 32H293.3L160 416h64c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H90.7L224 96H160c-17.7 0-32-14.3-32-32z\"\n                />\n            </svg>\n        </button>\n        <button\n            @click=\"editor.chain().focus().toggleOrderedList().run()\"\n            :class=\"{ 'is-active': editor.isActive('orderedList') }\"\n            :aria-pressed=\"editor.isActive('orderedList')\"\n            title=\"Ordered List\"\n            aria-label=\"Ordered List\"\n            type=\"button\"\n            :tabindex=\"getButtonTabIndex(2)\"\n        >\n            <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 512 512\"\n                width=\"16\"\n                height=\"16\"\n                fill=\"currentColor\"\n                aria-hidden=\"true\"\n            >\n                <path\n                    d=\"M24 56c0-13.3 10.7-24 24-24H80c13.3 0 24 10.7 24 24V176h16c13.3 0 24 10.7 24 24s-10.7 24-24 24H48c-13.3 0-24-10.7-24-24s10.7-24 24-24H64V80H48C34.7 80 24 69.3 24 56zM86.7 341.2c-6.5-7.4-18.3-6.9-24 1.2L51.5 357.9c-7.7 10.8-22.7 13.3-33.5 5.6s-13.3-22.7-5.6-33.5l11.1-15.6c23.7-33.2 72.3-35.6 99.2-4.9c21.3 24.4 20.8 60.9-1.1 84.7L86.8 432H120c13.3 0 24 10.7 24 24s-10.7 24-24 24H48c-9.5 0-18.2-5.6-22-14.4s-2.1-18.9 4.3-25.9l72-78c5.3-5.8 5.4-14.6 .3-20.5zM224 64H480c17.7 0 32 14.3 32 32s-14.3 32-32 32H224c-17.7 0-32-14.3-32-32s14.3-32 32-32zm0 160H480c17.7 0 32 14.3 32 32s-14.3 32-32 32H224c-17.7 0-32-14.3-32-32s14.3-32 32-32zm0 160H480c17.7 0 32 14.3 32 32s-14.3 32-32 32H224c-17.7 0-32-14.3-32-32s14.3-32 32-32z\"\n                />\n            </svg>\n        </button>\n        <button\n            @click=\"editor.chain().focus().toggleBulletList().run()\"\n            :class=\"{ 'is-active': editor.isActive('bulletList') }\"\n            :aria-pressed=\"editor.isActive('bulletList')\"\n            title=\"Unordered List\"\n            aria-label=\"Unordered List\"\n            type=\"button\"\n            :tabindex=\"getButtonTabIndex(3)\"\n        >\n            <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 512 512\"\n                width=\"16\"\n                height=\"16\"\n                fill=\"currentColor\"\n                aria-hidden=\"true\"\n            >\n                <path\n                    d=\"M40 48C26.7 48 16 58.7 16 72v48c0 13.3 10.7 24 24 24H88c13.3 0 24-10.7 24-24V72c0-13.3-10.7-24-24-24H40zM192 64c-17.7 0-32 14.3-32 32s14.3 32 32 32H480c17.7 0 32-14.3 32-32s-14.3-32-32-32H192zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32H480c17.7 0 32-14.3 32-32s-14.3-32-32-32H192zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32H480c17.7 0 32-14.3 32-32s-14.3-32-32-32H192zM16 232v48c0 13.3 10.7 24 24 24H88c13.3 0 24-10.7 24-24V232c0-13.3-10.7-24-24-24H40c-13.3 0-24 10.7-24 24zM40 368c-13.3 0-24 10.7-24 24v48c0 13.3 10.7 24 24 24H88c13.3 0 24-10.7 24-24V392c0-13.3-10.7-24-24-24H40z\"\n                />\n            </svg>\n        </button>\n    </div>\n</template>\n\n<style scoped>\n.g-rich-text-toolbar {\n    display: flex;\n\n    button {\n        background-color: unset;\n        padding: 0.4rem 0.5rem;\n        font-size: 0.875rem;\n        border: none;\n        cursor: pointer;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n\n        &.bold {\n            font-weight: 700;\n        }\n        &.italic {\n            font-style: italic;\n        }\n\n        &.is-active {\n            color: var(--g-accent-700);\n            background-color: var(--g-surface-150);\n        }\n\n        &:hover {\n            background-color: var(--g-primary-300);\n            color: var(--g-primary-text);\n        }\n    }\n}\n</style>\n","<script lang=\"ts\" setup>\nimport { ref, computed } from \"vue\";\nimport type { Editor } from \"@tiptap/vue-3\";\nimport { useToolbarNavigation } from \"../../composables/useToolbarNavigation.ts\";\n\ninterface Props {\n    editor: Editor | undefined;\n}\n\nconst props = defineProps<Props>();\n\nconst toolbarRef = ref<HTMLElement | null>(null);\nconst editorRef = computed(() => props.editor);\nconst { handleToolbarKeyDown, getButtonTabIndex } = useToolbarNavigation(\n    editorRef,\n    toolbarRef,\n);\n</script>\n\n<template>\n    <div\n        v-if=\"editor\"\n        class=\"g-rich-text-toolbar\"\n        role=\"toolbar\"\n        aria-label=\"Text formatting\"\n        ref=\"toolbarRef\"\n        @keydown=\"handleToolbarKeyDown\"\n        tabindex=\"-1\"\n    >\n        <button\n            @click=\"editor.chain().focus().toggleBold().run()\"\n            :class=\"{\n                bold: true,\n                'is-active': editor.isActive('bold'),\n            }\"\n            :aria-pressed=\"editor.isActive('bold')\"\n            title=\"Bold\"\n            aria-label=\"Bold\"\n            type=\"button\"\n            :tabindex=\"getButtonTabIndex(0)\"\n        >\n            <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 384 512\"\n                width=\"16\"\n                height=\"16\"\n                fill=\"currentColor\"\n                aria-hidden=\"true\"\n            >\n                <path\n                    d=\"M0 64C0 46.3 14.3 32 32 32H80 96 224c70.7 0 128 57.3 128 128c0 31.3-11.3 60.1-30 82.3c37.1 22.4 62 63.1 62 109.7c0 70.7-57.3 128-128 128H96 80 32c-17.7 0-32-14.3-32-32s14.3-32 32-32H48V256 96H32C14.3 96 0 81.7 0 64zM224 224c35.3 0 64-28.7 64-64s-28.7-64-64-64H112V224H224zM112 288V416H256c35.3 0 64-28.7 64-64s-28.7-64-64-64H224 112z\"\n                />\n            </svg>\n        </button>\n        <button\n            @click=\"editor.chain().focus().toggleItalic().run()\"\n            :class=\"{\n                italic: true,\n                'is-active': editor.isActive('italic'),\n            }\"\n            :aria-pressed=\"editor.isActive('italic')\"\n            title=\"Italic\"\n            aria-label=\"Italic\"\n            type=\"button\"\n            :tabindex=\"getButtonTabIndex(1)\"\n        >\n            <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 384 512\"\n                width=\"16\"\n                height=\"16\"\n                fill=\"currentColor\"\n                aria-hidden=\"true\"\n            >\n                <path\n                    d=\"M128 64c0-17.7 14.3-32 32-32H352c17.7 0 32 14.3 32 32s-14.3 32-32 32H293.3L160 416h64c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H90.7L224 96H160c-17.7 0-32-14.3-32-32z\"\n                />\n            </svg>\n        </button>\n        <button\n            @click=\"editor.chain().focus().toggleOrderedList().run()\"\n            :class=\"{ 'is-active': editor.isActive('orderedList') }\"\n            :aria-pressed=\"editor.isActive('orderedList')\"\n            title=\"Ordered List\"\n            aria-label=\"Ordered List\"\n            type=\"button\"\n            :tabindex=\"getButtonTabIndex(2)\"\n        >\n            <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 512 512\"\n                width=\"16\"\n                height=\"16\"\n                fill=\"currentColor\"\n                aria-hidden=\"true\"\n            >\n                <path\n                    d=\"M24 56c0-13.3 10.7-24 24-24H80c13.3 0 24 10.7 24 24V176h16c13.3 0 24 10.7 24 24s-10.7 24-24 24H48c-13.3 0-24-10.7-24-24s10.7-24 24-24H64V80H48C34.7 80 24 69.3 24 56zM86.7 341.2c-6.5-7.4-18.3-6.9-24 1.2L51.5 357.9c-7.7 10.8-22.7 13.3-33.5 5.6s-13.3-22.7-5.6-33.5l11.1-15.6c23.7-33.2 72.3-35.6 99.2-4.9c21.3 24.4 20.8 60.9-1.1 84.7L86.8 432H120c13.3 0 24 10.7 24 24s-10.7 24-24 24H48c-9.5 0-18.2-5.6-22-14.4s-2.1-18.9 4.3-25.9l72-78c5.3-5.8 5.4-14.6 .3-20.5zM224 64H480c17.7 0 32 14.3 32 32s-14.3 32-32 32H224c-17.7 0-32-14.3-32-32s14.3-32 32-32zm0 160H480c17.7 0 32 14.3 32 32s-14.3 32-32 32H224c-17.7 0-32-14.3-32-32s14.3-32 32-32zm0 160H480c17.7 0 32 14.3 32 32s-14.3 32-32 32H224c-17.7 0-32-14.3-32-32s14.3-32 32-32z\"\n                />\n            </svg>\n        </button>\n        <button\n            @click=\"editor.chain().focus().toggleBulletList().run()\"\n            :class=\"{ 'is-active': editor.isActive('bulletList') }\"\n            :aria-pressed=\"editor.isActive('bulletList')\"\n            title=\"Unordered List\"\n            aria-label=\"Unordered List\"\n            type=\"button\"\n            :tabindex=\"getButtonTabIndex(3)\"\n        >\n            <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 512 512\"\n                width=\"16\"\n                height=\"16\"\n                fill=\"currentColor\"\n                aria-hidden=\"true\"\n            >\n                <path\n                    d=\"M40 48C26.7 48 16 58.7 16 72v48c0 13.3 10.7 24 24 24H88c13.3 0 24-10.7 24-24V72c0-13.3-10.7-24-24-24H40zM192 64c-17.7 0-32 14.3-32 32s14.3 32 32 32H480c17.7 0 32-14.3 32-32s-14.3-32-32-32H192zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32H480c17.7 0 32-14.3 32-32s-14.3-32-32-32H192zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32H480c17.7 0 32-14.3 32-32s-14.3-32-32-32H192zM16 232v48c0 13.3 10.7 24 24 24H88c13.3 0 24-10.7 24-24V232c0-13.3-10.7-24-24-24H40c-13.3 0-24 10.7-24 24zM40 368c-13.3 0-24 10.7-24 24v48c0 13.3 10.7 24 24 24H88c13.3 0 24-10.7 24-24V392c0-13.3-10.7-24-24-24H40z\"\n                />\n            </svg>\n        </button>\n    </div>\n</template>\n\n<style scoped>\n.g-rich-text-toolbar {\n    display: flex;\n\n    button {\n        background-color: unset;\n        padding: 0.4rem 0.5rem;\n        font-size: 0.875rem;\n        border: none;\n        cursor: pointer;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n\n        &.bold {\n            font-weight: 700;\n        }\n        &.italic {\n            font-style: italic;\n        }\n\n        &.is-active {\n            color: var(--g-accent-700);\n            background-color: var(--g-surface-150);\n        }\n\n        &:hover {\n            background-color: var(--g-primary-300);\n            color: var(--g-primary-text);\n        }\n    }\n}\n</style>\n","<script lang=\"ts\">\n/**\n * The GChatInput component provides a rich text editing experience using Tiptap. It supports:\n *\n *  - **Bold** and *italic* text formatting\n *  - Bullet and numbered lists\n *  - Bubble menu for formatting (appears when text is selected)\n *  - Press <kbd>Enter</kbd> to send, <kbd>Shift+Enter</kbd> for new line\n *  - Undo/redo support\n *\n *  **Note**: This component is part of the `@illinois-grad/grad-vue-rte` package, which includes Tiptap dependencies.\n */\nexport default {};\n</script>\n\n<script lang=\"ts\" setup>\nimport { computed } from \"vue\";\nimport { EditorContent } from \"@tiptap/vue-3\";\nimport { BubbleMenu } from \"@tiptap/vue-3/menus\";\nimport { useRichTextEditor } from \"../composables/useRichTextEditor\";\nimport GRichTextToolbar from \"./editor/GRichTextToolbar.vue\";\n\ndefineOptions({ inheritAttrs: false });\n\ntype Props = {\n    /**\n     * Placeholder text\n     * @demo\n     */\n    placeholder?: string;\n    /**\n     * Disabled\n     * @demo\n     */\n    disabled?: boolean;\n    /**\n     * Maximum number of rows\n     * @demo\n     */\n    maxRows?: number;\n    /**\n     * Accessible label\n     * @demo\n     */\n    label?: string;\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n    placeholder: \"Type a comment\",\n    label: \"Comment input\",\n    disabled: false,\n    maxRows: 5,\n});\nconst model = defineModel<object | \"\">();\nconst emit = defineEmits<{ send: [content: object] }>();\n\nconst { editor, focusEditor } = useRichTextEditor({\n    content: model as any,\n    placeholder: computed(() => props.placeholder),\n    label: computed(() => props.label),\n    editorProps: {\n        handleKeyDown(view: any, event: any) {\n            if (editor.value && event.key === \"Enter\") {\n                if (\n                    editor.value.isActive(\"orderedList\") ||\n                    editor.value.isActive(\"bulletList\")\n                ) {\n                    return false;\n                }\n                if (!event.shiftKey) {\n                    model.value = editor.value?.getJSON();\n                    event.preventDefault();\n                    onSend(editor.value?.getJSON());\n                    return true;\n                } else {\n                    editor.value.commands.splitBlock();\n                }\n            }\n            return false;\n        },\n        attributes: {\n            \"aria-keyshortcuts\": \"Shift+Enter\",\n        },\n    },\n});\n\nfunction onSend(content: any) {\n    if (content) {\n        emit(\"send\", content);\n    }\n}\n\nfunction clickSend() {\n    onSend(editor.value?.getJSON());\n}\n\nfunction focusInput() {\n    focusEditor();\n}\n\ndefineExpose({ focusInput });\n</script>\n\n<template>\n    <div class=\"g-chat-input-wrap\">\n        <BubbleMenu :editor=\"editor\" v-if=\"editor\">\n            <GRichTextToolbar :editor=\"editor\" class=\"bubble-menu\" />\n        </BubbleMenu>\n        <EditorContent :editor=\"editor\" class=\"editor-content\" />\n        <button\n            class=\"g-chat-send-btn\"\n            :disabled=\"\n                props.disabled ||\n                !model ||\n                (model && Object.keys(model).length === 0)\n            \"\n            @click=\"clickSend\"\n            title=\"Send\"\n            aria-label=\"Send\"\n            type=\"button\"\n        >\n            <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 512 512\"\n                width=\"16\"\n                height=\"16\"\n                fill=\"currentColor\"\n                aria-hidden=\"true\"\n            >\n                <path\n                    d=\"M498.1 5.6c10.1 7 15.4 19.1 13.5 31.2l-64 416c-1.5 9.7-7.4 18.2-16 23s-18.9 5.4-28 1.6L284 427.7l-68.5 74.1c-8.9 9.7-22.9 12.9-35.2 8.1S160 493.2 160 480V396.4c0-4 1.5-7.8 4.2-10.7L331.8 202.8c5.8-6.3 5.6-16-.4-22s-15.7-6.4-22-.7L106 360.8 17.7 316.6C7.1 311.3 .3 300.7 0 288.9s5.9-22.8 16.1-28.7l448-256c10.7-6.1 23.9-5.5 34 1.4z\"\n                />\n            </svg>\n        </button>\n    </div>\n</template>\n\n<style>\n.g-chat-input-wrap {\n    .tiptap {\n        background: transparent;\n        border: none;\n        padding: 0.15em 0;\n        font-size: 15px;\n        max-height: 10em;\n        flex: 1;\n        outline: none;\n\n        p {\n            margin: 0.375em 0 0;\n        }\n\n        > :first-child {\n            margin-top: 0;\n        }\n        > :last-child {\n            margin-bottom: 0;\n        }\n\n        ul,\n        ol {\n            padding: 0 1em;\n            margin: 0.375em 1em 0 0.4em;\n\n            li p {\n                margin-top: 0;\n                margin-bottom: 0;\n            }\n        }\n        p.is-editor-empty:first-child::before {\n            color: var(--g-surface-600);\n            content: attr(data-placeholder);\n            float: left;\n            height: 0;\n            pointer-events: none;\n        }\n    }\n}\n</style>\n\n<style scoped>\n.bubble-menu {\n    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);\n    background-color: var(--g-surface-100);\n\n    :deep(button) {\n        &:first-child {\n            border-top-left-radius: 4px;\n            border-bottom-left-radius: 4px;\n        }\n        &:last-child {\n            border-top-right-radius: 4px;\n            border-bottom-right-radius: 4px;\n        }\n    }\n}\n\n.g-chat-input-wrap {\n    position: relative;\n    display: flex;\n    align-items: center;\n    background: var(--g-surface-0);\n    border: 2px solid var(--g-primary-500);\n    border-radius: 4px;\n    padding: 0.5em;\n\n    &:has(.ProseMirror-focused) {\n        outline: 2px solid var(--g-primary-500);\n        outline-offset: 2px;\n        box-shadow: 0 0 0 2px var(--g-info-200);\n        border-color: var(--g-info-200);\n    }\n}\n\n.editor-content {\n    flex: 1;\n    min-width: 0;\n}\n\n.g-chat-send-btn {\n    color: var(--g-primary-500);\n    font-size: 1em;\n    border: 2px solid transparent;\n    border-radius: 4px;\n    padding: 0.4em;\n    margin: 0;\n    align-self: flex-end;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: transparent;\n    flex-shrink: 0;\n\n    &:hover:not(:disabled) {\n        color: var(--g-accent-700);\n        background-color: var(--g-surface-100);\n    }\n\n    &:focus:not(:disabled) {\n        background-color: var(--g-info-200);\n        color: var(--g-primary-500);\n    }\n\n    &:active:not(:disabled) {\n        background-color: var(--g-primary-500);\n        color: var(--g-surface-0);\n    }\n\n    &:disabled {\n        color: var(--g-surface-300);\n        cursor: not-allowed;\n    }\n}\n</style>\n","<script lang=\"ts\">\n/**\n * The GChatInput component provides a rich text editing experience using Tiptap. It supports:\n *\n *  - **Bold** and *italic* text formatting\n *  - Bullet and numbered lists\n *  - Bubble menu for formatting (appears when text is selected)\n *  - Press <kbd>Enter</kbd> to send, <kbd>Shift+Enter</kbd> for new line\n *  - Undo/redo support\n *\n *  **Note**: This component is part of the `@illinois-grad/grad-vue-rte` package, which includes Tiptap dependencies.\n */\nexport default {};\n</script>\n\n<script lang=\"ts\" setup>\nimport { computed } from \"vue\";\nimport { EditorContent } from \"@tiptap/vue-3\";\nimport { BubbleMenu } from \"@tiptap/vue-3/menus\";\nimport { useRichTextEditor } from \"../composables/useRichTextEditor\";\nimport GRichTextToolbar from \"./editor/GRichTextToolbar.vue\";\n\ndefineOptions({ inheritAttrs: false });\n\ntype Props = {\n    /**\n     * Placeholder text\n     * @demo\n     */\n    placeholder?: string;\n    /**\n     * Disabled\n     * @demo\n     */\n    disabled?: boolean;\n    /**\n     * Maximum number of rows\n     * @demo\n     */\n    maxRows?: number;\n    /**\n     * Accessible label\n     * @demo\n     */\n    label?: string;\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n    placeholder: \"Type a comment\",\n    label: \"Comment input\",\n    disabled: false,\n    maxRows: 5,\n});\nconst model = defineModel<object | \"\">();\nconst emit = defineEmits<{ send: [content: object] }>();\n\nconst { editor, focusEditor } = useRichTextEditor({\n    content: model as any,\n    placeholder: computed(() => props.placeholder),\n    label: computed(() => props.label),\n    editorProps: {\n        handleKeyDown(view: any, event: any) {\n            if (editor.value && event.key === \"Enter\") {\n                if (\n                    editor.value.isActive(\"orderedList\") ||\n                    editor.value.isActive(\"bulletList\")\n                ) {\n                    return false;\n                }\n                if (!event.shiftKey) {\n                    model.value = editor.value?.getJSON();\n                    event.preventDefault();\n                    onSend(editor.value?.getJSON());\n                    return true;\n                } else {\n                    editor.value.commands.splitBlock();\n                }\n            }\n            return false;\n        },\n        attributes: {\n            \"aria-keyshortcuts\": \"Shift+Enter\",\n        },\n    },\n});\n\nfunction onSend(content: any) {\n    if (content) {\n        emit(\"send\", content);\n    }\n}\n\nfunction clickSend() {\n    onSend(editor.value?.getJSON());\n}\n\nfunction focusInput() {\n    focusEditor();\n}\n\ndefineExpose({ focusInput });\n</script>\n\n<template>\n    <div class=\"g-chat-input-wrap\">\n        <BubbleMenu :editor=\"editor\" v-if=\"editor\">\n            <GRichTextToolbar :editor=\"editor\" class=\"bubble-menu\" />\n        </BubbleMenu>\n        <EditorContent :editor=\"editor\" class=\"editor-content\" />\n        <button\n            class=\"g-chat-send-btn\"\n            :disabled=\"\n                props.disabled ||\n                !model ||\n                (model && Object.keys(model).length === 0)\n            \"\n            @click=\"clickSend\"\n            title=\"Send\"\n            aria-label=\"Send\"\n            type=\"button\"\n        >\n            <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 512 512\"\n                width=\"16\"\n                height=\"16\"\n                fill=\"currentColor\"\n                aria-hidden=\"true\"\n            >\n                <path\n                    d=\"M498.1 5.6c10.1 7 15.4 19.1 13.5 31.2l-64 416c-1.5 9.7-7.4 18.2-16 23s-18.9 5.4-28 1.6L284 427.7l-68.5 74.1c-8.9 9.7-22.9 12.9-35.2 8.1S160 493.2 160 480V396.4c0-4 1.5-7.8 4.2-10.7L331.8 202.8c5.8-6.3 5.6-16-.4-22s-15.7-6.4-22-.7L106 360.8 17.7 316.6C7.1 311.3 .3 300.7 0 288.9s5.9-22.8 16.1-28.7l448-256c10.7-6.1 23.9-5.5 34 1.4z\"\n                />\n            </svg>\n        </button>\n    </div>\n</template>\n\n<style>\n.g-chat-input-wrap {\n    .tiptap {\n        background: transparent;\n        border: none;\n        padding: 0.15em 0;\n        font-size: 15px;\n        max-height: 10em;\n        flex: 1;\n        outline: none;\n\n        p {\n            margin: 0.375em 0 0;\n        }\n\n        > :first-child {\n            margin-top: 0;\n        }\n        > :last-child {\n            margin-bottom: 0;\n        }\n\n        ul,\n        ol {\n            padding: 0 1em;\n            margin: 0.375em 1em 0 0.4em;\n\n            li p {\n                margin-top: 0;\n                margin-bottom: 0;\n            }\n        }\n        p.is-editor-empty:first-child::before {\n            color: var(--g-surface-600);\n            content: attr(data-placeholder);\n            float: left;\n            height: 0;\n            pointer-events: none;\n        }\n    }\n}\n</style>\n\n<style scoped>\n.bubble-menu {\n    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);\n    background-color: var(--g-surface-100);\n\n    :deep(button) {\n        &:first-child {\n            border-top-left-radius: 4px;\n            border-bottom-left-radius: 4px;\n        }\n        &:last-child {\n            border-top-right-radius: 4px;\n            border-bottom-right-radius: 4px;\n        }\n    }\n}\n\n.g-chat-input-wrap {\n    position: relative;\n    display: flex;\n    align-items: center;\n    background: var(--g-surface-0);\n    border: 2px solid var(--g-primary-500);\n    border-radius: 4px;\n    padding: 0.5em;\n\n    &:has(.ProseMirror-focused) {\n        outline: 2px solid var(--g-primary-500);\n        outline-offset: 2px;\n        box-shadow: 0 0 0 2px var(--g-info-200);\n        border-color: var(--g-info-200);\n    }\n}\n\n.editor-content {\n    flex: 1;\n    min-width: 0;\n}\n\n.g-chat-send-btn {\n    color: var(--g-primary-500);\n    font-size: 1em;\n    border: 2px solid transparent;\n    border-radius: 4px;\n    padding: 0.4em;\n    margin: 0;\n    align-self: flex-end;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: transparent;\n    flex-shrink: 0;\n\n    &:hover:not(:disabled) {\n        color: var(--g-accent-700);\n        background-color: var(--g-surface-100);\n    }\n\n    &:focus:not(:disabled) {\n        background-color: var(--g-info-200);\n        color: var(--g-primary-500);\n    }\n\n    &:active:not(:disabled) {\n        background-color: var(--g-primary-500);\n        color: var(--g-surface-0);\n    }\n\n    &:disabled {\n        color: var(--g-surface-300);\n        cursor: not-allowed;\n    }\n}\n</style>\n","<script lang=\"ts\">\n/**\n * The GNoteInput component provides a rich text editing experience using Tiptap for writing notes. It supports:\n *\n *  - **Bold** and *italic* text formatting\n *  - Bullet and numbered lists\n *  - Always visible toolbar for formatting\n *  - Undo/redo support\n *\n *  **Note**: This component is part of the `@illinois-grad/grad-vue-rte` package, which includes Tiptap dependencies.\n */\nexport default {};\n</script>\n\n<script lang=\"ts\" setup>\nimport { computed } from \"vue\";\nimport { EditorContent } from \"@tiptap/vue-3\";\nimport { useRichTextEditor } from \"../composables/useRichTextEditor\";\nimport GRichTextToolbar from \"./editor/GRichTextToolbar.vue\";\n\ndefineOptions({ inheritAttrs: false });\n\ntype Props = {\n    /**\n     * Placeholder text\n     * @demo\n     */\n    placeholder?: string;\n    /**\n     * Accessible label\n     * @demo\n     */\n    label?: string;\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n    placeholder: \"Write a note...\",\n    label: \"Note input\",\n});\nconst model = defineModel<object | \"\">();\n\nconst { editor, focusEditor } = useRichTextEditor({\n    content: model as any,\n    placeholder: computed(() => props.placeholder),\n    label: computed(() => props.label),\n});\n\nfunction focusInput() {\n    focusEditor();\n}\n\ndefineExpose({ focusInput });\n</script>\n\n<template>\n    <div class=\"g-note-input-wrap\">\n        <GRichTextToolbar :editor=\"editor\" class=\"toolbar\" />\n        <EditorContent :editor=\"editor\" class=\"editor-content\" />\n    </div>\n</template>\n\n<style>\n.g-note-input-wrap {\n    .tiptap {\n        background: transparent;\n        border: none;\n        padding: 0.5em;\n        font-size: 15px;\n        min-height: 12em;\n        flex: 1;\n        outline: none;\n\n        p {\n            margin: 0.375em 0 0;\n        }\n\n        > :first-child {\n            margin-top: 0;\n        }\n        > :last-child {\n            margin-bottom: 0;\n        }\n\n        ul,\n        ol {\n            padding: 0 1em;\n            margin: 0.375em 1em 0 0.4em;\n\n            li p {\n                margin-top: 0;\n                margin-bottom: 0;\n            }\n        }\n        p.is-editor-empty:first-child::before {\n            color: var(--g-surface-600);\n            content: attr(data-placeholder);\n            float: left;\n            height: 0;\n            pointer-events: none;\n        }\n    }\n}\n</style>\n\n<style scoped>\n.g-note-input-wrap {\n    display: flex;\n    flex-direction: column;\n    background: var(--g-surface-0);\n    border: 2px solid var(--g-primary-500);\n    border-radius: 4px;\n\n    &:has(.ProseMirror-focused) {\n        outline: 2px solid var(--g-primary-500);\n        outline-offset: 2px;\n        box-shadow: 0 0 0 2px var(--g-info-200);\n        border-color: var(--g-info-200);\n    }\n}\n\n.toolbar {\n    border-bottom: 1px solid var(--g-surface-200);\n    background-color: var(--g-surface-0);\n    padding: 0.25rem;\n\n    :deep(button) {\n        border-radius: 4px;\n\n        &:focus {\n            outline: 2px solid var(--g-primary-500);\n            outline-offset: 2px;\n        }\n    }\n}\n\n.editor-content {\n    flex: 1;\n    min-width: 0;\n}\n</style>\n","<script lang=\"ts\">\n/**\n * The GNoteInput component provides a rich text editing experience using Tiptap for writing notes. It supports:\n *\n *  - **Bold** and *italic* text formatting\n *  - Bullet and numbered lists\n *  - Always visible toolbar for formatting\n *  - Undo/redo support\n *\n *  **Note**: This component is part of the `@illinois-grad/grad-vue-rte` package, which includes Tiptap dependencies.\n */\nexport default {};\n</script>\n\n<script lang=\"ts\" setup>\nimport { computed } from \"vue\";\nimport { EditorContent } from \"@tiptap/vue-3\";\nimport { useRichTextEditor } from \"../composables/useRichTextEditor\";\nimport GRichTextToolbar from \"./editor/GRichTextToolbar.vue\";\n\ndefineOptions({ inheritAttrs: false });\n\ntype Props = {\n    /**\n     * Placeholder text\n     * @demo\n     */\n    placeholder?: string;\n    /**\n     * Accessible label\n     * @demo\n     */\n    label?: string;\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n    placeholder: \"Write a note...\",\n    label: \"Note input\",\n});\nconst model = defineModel<object | \"\">();\n\nconst { editor, focusEditor } = useRichTextEditor({\n    content: model as any,\n    placeholder: computed(() => props.placeholder),\n    label: computed(() => props.label),\n});\n\nfunction focusInput() {\n    focusEditor();\n}\n\ndefineExpose({ focusInput });\n</script>\n\n<template>\n    <div class=\"g-note-input-wrap\">\n        <GRichTextToolbar :editor=\"editor\" class=\"toolbar\" />\n        <EditorContent :editor=\"editor\" class=\"editor-content\" />\n    </div>\n</template>\n\n<style>\n.g-note-input-wrap {\n    .tiptap {\n        background: transparent;\n        border: none;\n        padding: 0.5em;\n        font-size: 15px;\n        min-height: 12em;\n        flex: 1;\n        outline: none;\n\n        p {\n            margin: 0.375em 0 0;\n        }\n\n        > :first-child {\n            margin-top: 0;\n        }\n        > :last-child {\n            margin-bottom: 0;\n        }\n\n        ul,\n        ol {\n            padding: 0 1em;\n            margin: 0.375em 1em 0 0.4em;\n\n            li p {\n                margin-top: 0;\n                margin-bottom: 0;\n            }\n        }\n        p.is-editor-empty:first-child::before {\n            color: var(--g-surface-600);\n            content: attr(data-placeholder);\n            float: left;\n            height: 0;\n            pointer-events: none;\n        }\n    }\n}\n</style>\n\n<style scoped>\n.g-note-input-wrap {\n    display: flex;\n    flex-direction: column;\n    background: var(--g-surface-0);\n    border: 2px solid var(--g-primary-500);\n    border-radius: 4px;\n\n    &:has(.ProseMirror-focused) {\n        outline: 2px solid var(--g-primary-500);\n        outline-offset: 2px;\n        box-shadow: 0 0 0 2px var(--g-info-200);\n        border-color: var(--g-info-200);\n    }\n}\n\n.toolbar {\n    border-bottom: 1px solid var(--g-surface-200);\n    background-color: var(--g-surface-0);\n    padding: 0.25rem;\n\n    :deep(button) {\n        border-radius: 4px;\n\n        &:focus {\n            outline: 2px solid var(--g-primary-500);\n            outline-offset: 2px;\n        }\n    }\n}\n\n.editor-content {\n    flex: 1;\n    min-width: 0;\n}\n</style>\n","import { computed, onMounted, ref, type Ref, toValue, watch } from \"vue\";\nimport Document from \"@tiptap/extension-document\";\nimport Paragraph from \"@tiptap/extension-paragraph\";\nimport Text from \"@tiptap/extension-text\";\nimport Bold from \"@tiptap/extension-bold\";\nimport Italic from \"@tiptap/extension-italic\";\nimport { ListKit } from \"@tiptap/extension-list\";\nimport { generateHTML } from \"@tiptap/core\";\n\nconst extensions = [Document, Paragraph, Text, Bold, Italic, ListKit];\n\n/**\n * Composable for rendering a JSON string of tiptap content to HTML.\n * Supports all extensions used by GChatInput and GNoteInput.\n *\n * @param content - A reactive ref or plain string containing JSON-encoded tiptap content\n * @returns `rendered` — rendered HTML string, empty string for empty content, or `null` when rendering fails;\n *          `hasError` — `true` when the content cannot be parsed or rendered\n */\nexport function useRichTextRenderer(content: Ref<string>) {\n    const rendered = ref<string | null>(\"\");\n\n    onMounted(() => {\n        watch(content, () => {\n            const value = toValue(content);\n            if (!value || value.trim() === \"\") {\n                return \"\";\n            }\n\n            try {\n                const parsed = JSON.parse(value);\n                let html = generateHTML(\n                    parsed,\n                    extensions\n                );\n                rendered.value = html;\n            } catch (error) {\n                console.error(\"Failed to parse content:\", value);\n                console.error(error);\n                rendered.value = null;\n            }\n        }, {immediate: true});\n    });\n\n    const hasError = computed(() => rendered.value === null);\n\n    return { rendered, hasError };\n}\n","<script lang=\"ts\">\n/**\n * Renders a JSON string of tiptap content as HTML.\n * Supports all formatting produced by GChatInput and GNoteInput:\n * bold, italic, ordered lists, and bullet lists.\n *\n * - Empty content is handled gracefully (renders nothing).\n * - Displays an error message when the content cannot be parsed or rendered.\n *\n * The rendering only happens in the client when used with Nuxt.js.\n *\n * **Security note**: rendered HTML is produced by tiptap's `generateHTML`, which only\n * serializes recognized document nodes - it does not inject raw HTML from the JSON.\n *\n * **Note**: This component is part of the `@illinois-grad/grad-vue-rte` package, which includes Tiptap dependencies.\n */\nexport default {};\n</script>\n\n<script setup lang=\"ts\">\nimport { toRef } from \"vue\";\nimport { useRichTextRenderer } from \"../composables/useRichTextRenderer\";\n\ntype Props = {\n    /**\n     * Error message when rendering fails\n     * @demo\n     */\n    error?: string;\n\n    /**\n     * JSON-encoded tiptap content string to render.\n     */\n    content: string;\n}\n\nconst props = defineProps<Props>();\n\nconst contentRef = toRef(props, \"content\");\n\nconst { rendered, hasError } = useRichTextRenderer(contentRef);\n\n</script>\n\n<template>\n    <div class=\"g-rich-text-content-wrap\">\n        <div v-if=\"hasError\" role=\"alert\" class=\"g-rich-text-content-error\">\n            {{ error || 'Failed to render content.' }}\n        </div>\n        <div v-else-if=\"rendered\" class=\"g-rich-text-content\" v-html=\"rendered\"></div>\n    </div>\n</template>\n\n<style scoped>\n.g-rich-text-content {\n    p {\n        margin: 0.375em 0;\n    }\n\n    > :first-child {\n        margin-top: 0;\n    }\n\n    > :last-child {\n        margin-bottom: 0;\n    }\n\n    ul,\n    ol {\n        padding: 0 1em;\n        margin: 0.375em 1em 0 0.4em;\n\n        li p {\n            margin-top: 0;\n            margin-bottom: 0;\n        }\n    }\n}\n\n.g-rich-text-content-error {\n    color: var(--g-danger-700);\n    font-size: 0.875em;\n}\n</style>\n","<script lang=\"ts\">\n/**\n * Renders a JSON string of tiptap content as HTML.\n * Supports all formatting produced by GChatInput and GNoteInput:\n * bold, italic, ordered lists, and bullet lists.\n *\n * - Empty content is handled gracefully (renders nothing).\n * - Displays an error message when the content cannot be parsed or rendered.\n *\n * The rendering only happens in the client when used with Nuxt.js.\n *\n * **Security note**: rendered HTML is produced by tiptap's `generateHTML`, which only\n * serializes recognized document nodes - it does not inject raw HTML from the JSON.\n *\n * **Note**: This component is part of the `@illinois-grad/grad-vue-rte` package, which includes Tiptap dependencies.\n */\nexport default {};\n</script>\n\n<script setup lang=\"ts\">\nimport { toRef } from \"vue\";\nimport { useRichTextRenderer } from \"../composables/useRichTextRenderer\";\n\ntype Props = {\n    /**\n     * Error message when rendering fails\n     * @demo\n     */\n    error?: string;\n\n    /**\n     * JSON-encoded tiptap content string to render.\n     */\n    content: string;\n}\n\nconst props = defineProps<Props>();\n\nconst contentRef = toRef(props, \"content\");\n\nconst { rendered, hasError } = useRichTextRenderer(contentRef);\n\n</script>\n\n<template>\n    <div class=\"g-rich-text-content-wrap\">\n        <div v-if=\"hasError\" role=\"alert\" class=\"g-rich-text-content-error\">\n            {{ error || 'Failed to render content.' }}\n        </div>\n        <div v-else-if=\"rendered\" class=\"g-rich-text-content\" v-html=\"rendered\"></div>\n    </div>\n</template>\n\n<style scoped>\n.g-rich-text-content {\n    p {\n        margin: 0.375em 0;\n    }\n\n    > :first-child {\n        margin-top: 0;\n    }\n\n    > :last-child {\n        margin-bottom: 0;\n    }\n\n    ul,\n    ol {\n        padding: 0 1em;\n        margin: 0.375em 1em 0 0.4em;\n\n        li p {\n            margin-top: 0;\n            margin-bottom: 0;\n        }\n    }\n}\n\n.g-rich-text-content-error {\n    color: var(--g-danger-700);\n    font-size: 0.875em;\n}\n</style>\n"],"mappings":"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"}

package/dist/grad-vue-rte.css

@@ -1 +1,2 @@
-.g-rich-text-toolbar[data-v-8c490655]{display:flex}.g-rich-text-toolbar button[data-v-8c490655]{background-color:unset;padding:.4rem .5rem;font-size:.875rem;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center}.g-rich-text-toolbar button.bold[data-v-8c490655]{font-weight:700}.g-rich-text-toolbar button.italic[data-v-8c490655]{font-style:italic}.g-rich-text-toolbar button.is-active[data-v-8c490655]{color:var(--g-accent-700);background-color:var(--g-surface-150)}.g-rich-text-toolbar button[data-v-8c490655]:hover{background-color:var(--g-primary-300);color:var(--g-primary-text)}.g-chat-input-wrap .tiptap{background:transparent;border:none;padding:.15em 0;font-size:15px;max-height:10em;flex:1;outline:none}.g-chat-input-wrap .tiptap p{margin:.375em 0 0}.g-chat-input-wrap .tiptap>:first-child{margin-top:0}.g-chat-input-wrap .tiptap>:last-child{margin-bottom:0}.g-chat-input-wrap .tiptap ul,.g-chat-input-wrap .tiptap ol{padding:0 1em;margin:.375em 1em 0 .4em}:is(.g-chat-input-wrap .tiptap ul,.g-chat-input-wrap .tiptap ol) li p{margin-top:0;margin-bottom:0}.g-chat-input-wrap .tiptap p.is-editor-empty:first-child:before{color:var(--g-surface-600);content:attr(data-placeholder);float:left;height:0;pointer-events:none}.bubble-menu[data-v-09bab62a]{box-shadow:0 1px 4px #00000080;background-color:var(--g-surface-100)}.bubble-menu [data-v-09bab62a] button:first-child{border-top-left-radius:4px;border-bottom-left-radius:4px}.bubble-menu [data-v-09bab62a] button:last-child{border-top-right-radius:4px;border-bottom-right-radius:4px}.g-chat-input-wrap[data-v-09bab62a]{position:relative;display:flex;align-items:center;background:var(--g-surface-0);border:2px solid var(--g-primary-500);border-radius:4px;padding:.5em}.g-chat-input-wrap[data-v-09bab62a]:has(.ProseMirror-focused){outline:2px solid var(--g-primary-500);outline-offset:2px;box-shadow:0 0 0 2px var(--g-info-200);border-color:var(--g-info-200)}.editor-content[data-v-09bab62a]{flex:1;min-width:0}.g-chat-send-btn[data-v-09bab62a]{color:var(--g-primary-500);font-size:1em;border:2px solid transparent;border-radius:4px;padding:.4em;margin:0;align-self:flex-end;cursor:pointer;display:flex;align-items:center;justify-content:center;background:transparent;flex-shrink:0}.g-chat-send-btn[data-v-09bab62a]:hover:not(:disabled){color:var(--g-accent-700);background-color:var(--g-surface-100)}.g-chat-send-btn[data-v-09bab62a]:focus:not(:disabled){background-color:var(--g-info-200);color:var(--g-primary-500)}.g-chat-send-btn[data-v-09bab62a]:active:not(:disabled){background-color:var(--g-primary-500);color:var(--g-surface-0)}.g-chat-send-btn[data-v-09bab62a]:disabled{color:var(--g-surface-300);cursor:not-allowed}.g-note-input-wrap .tiptap{background:transparent;border:none;padding:.5em;font-size:15px;min-height:12em;flex:1;outline:none}.g-note-input-wrap .tiptap p{margin:.375em 0 0}.g-note-input-wrap .tiptap>:first-child{margin-top:0}.g-note-input-wrap .tiptap>:last-child{margin-bottom:0}.g-note-input-wrap .tiptap ul,.g-note-input-wrap .tiptap ol{padding:0 1em;margin:.375em 1em 0 .4em}:is(.g-note-input-wrap .tiptap ul,.g-note-input-wrap .tiptap ol) li p{margin-top:0;margin-bottom:0}.g-note-input-wrap .tiptap p.is-editor-empty:first-child:before{color:var(--g-surface-600);content:attr(data-placeholder);float:left;height:0;pointer-events:none}.g-note-input-wrap[data-v-ebd8cfef]{display:flex;flex-direction:column;background:var(--g-surface-0);border:2px solid var(--g-primary-500);border-radius:4px}.g-note-input-wrap[data-v-ebd8cfef]:has(.ProseMirror-focused){outline:2px solid var(--g-primary-500);outline-offset:2px;box-shadow:0 0 0 2px var(--g-info-200);border-color:var(--g-info-200)}.toolbar[data-v-ebd8cfef]{border-bottom:1px solid var(--g-surface-200);background-color:var(--g-surface-0);padding:.25rem}.toolbar [data-v-ebd8cfef] button{border-radius:4px}.toolbar [data-v-ebd8cfef] button:focus{outline:2px solid var(--g-primary-500);outline-offset:2px}.editor-content[data-v-ebd8cfef]{flex:1;min-width:0}.g-rich-text-content p[data-v-68026e47]{margin:.375em 0}.g-rich-text-content [data-v-68026e47]>:first-child{margin-top:0}.g-rich-text-content [data-v-68026e47]>:last-child{margin-bottom:0}:is(.g-rich-text-content ul,.g-rich-text-content ol)[data-v-68026e47]{padding:0 1em;margin:.375em 1em 0 .4em}:is(.g-rich-text-content ul,.g-rich-text-content ol) li p[data-v-68026e47]{margin-top:0;margin-bottom:0}.g-rich-text-content-error[data-v-68026e47]{color:var(--g-danger-700);font-size:.875em}
+.g-rich-text-toolbar[data-v-8c490655]{display:flex}.g-rich-text-toolbar button[data-v-8c490655]{background-color:unset;cursor:pointer;border:none;justify-content:center;align-items:center;padding:.4rem .5rem;font-size:.875rem;display:flex}.g-rich-text-toolbar button.bold[data-v-8c490655]{font-weight:700}.g-rich-text-toolbar button.italic[data-v-8c490655]{font-style:italic}.g-rich-text-toolbar button.is-active[data-v-8c490655]{color:var(--g-accent-700);background-color:var(--g-surface-150)}.g-rich-text-toolbar button[data-v-8c490655]:hover{background-color:var(--g-primary-300);color:var(--g-primary-text)}.g-chat-input-wrap .tiptap{background:0 0;border:none;outline:none;flex:1;max-height:10em;padding:.15em 0;font-size:15px}.g-chat-input-wrap .tiptap p{margin:.375em 0 0}.g-chat-input-wrap .tiptap>:first-child{margin-top:0}.g-chat-input-wrap .tiptap>:last-child{margin-bottom:0}.g-chat-input-wrap .tiptap ul,.g-chat-input-wrap .tiptap ol{margin:.375em 1em 0 .4em;padding:0 1em}:is(.g-chat-input-wrap .tiptap ul,.g-chat-input-wrap .tiptap ol) li p{margin-top:0;margin-bottom:0}.g-chat-input-wrap .tiptap p.is-editor-empty:first-child:before{color:var(--g-surface-600);content:attr(data-placeholder);float:left;pointer-events:none;height:0}.bubble-menu[data-v-09bab62a]{background-color:var(--g-surface-100);box-shadow:0 1px 4px #00000080}.bubble-menu [data-v-09bab62a] button:first-child{border-top-left-radius:4px;border-bottom-left-radius:4px}.bubble-menu [data-v-09bab62a] button:last-child{border-top-right-radius:4px;border-bottom-right-radius:4px}.g-chat-input-wrap[data-v-09bab62a]{background:var(--g-surface-0);border:2px solid var(--g-primary-500);border-radius:4px;align-items:center;padding:.5em;display:flex;position:relative}.g-chat-input-wrap[data-v-09bab62a]:has(.ProseMirror-focused){outline:2px solid var(--g-primary-500);outline-offset:2px;box-shadow:0 0 0 2px var(--g-info-200);border-color:var(--g-info-200)}.editor-content[data-v-09bab62a]{flex:1;min-width:0}.g-chat-send-btn[data-v-09bab62a]{color:var(--g-primary-500);cursor:pointer;background:0 0;border:2px solid #0000;border-radius:4px;flex-shrink:0;justify-content:center;align-self:flex-end;align-items:center;margin:0;padding:.4em;font-size:1em;display:flex}.g-chat-send-btn[data-v-09bab62a]:hover:not(:disabled){color:var(--g-accent-700);background-color:var(--g-surface-100)}.g-chat-send-btn[data-v-09bab62a]:focus:not(:disabled){background-color:var(--g-info-200);color:var(--g-primary-500)}.g-chat-send-btn[data-v-09bab62a]:active:not(:disabled){background-color:var(--g-primary-500);color:var(--g-surface-0)}.g-chat-send-btn[data-v-09bab62a]:disabled{color:var(--g-surface-300);cursor:not-allowed}.g-note-input-wrap .tiptap{background:0 0;border:none;outline:none;flex:1;min-height:12em;padding:.5em;font-size:15px}.g-note-input-wrap .tiptap p{margin:.375em 0 0}.g-note-input-wrap .tiptap>:first-child{margin-top:0}.g-note-input-wrap .tiptap>:last-child{margin-bottom:0}.g-note-input-wrap .tiptap ul,.g-note-input-wrap .tiptap ol{margin:.375em 1em 0 .4em;padding:0 1em}:is(.g-note-input-wrap .tiptap ul,.g-note-input-wrap .tiptap ol) li p{margin-top:0;margin-bottom:0}.g-note-input-wrap .tiptap p.is-editor-empty:first-child:before{color:var(--g-surface-600);content:attr(data-placeholder);float:left;pointer-events:none;height:0}.g-note-input-wrap[data-v-ebd8cfef]{background:var(--g-surface-0);border:2px solid var(--g-primary-500);border-radius:4px;flex-direction:column;display:flex}.g-note-input-wrap[data-v-ebd8cfef]:has(.ProseMirror-focused){outline:2px solid var(--g-primary-500);outline-offset:2px;box-shadow:0 0 0 2px var(--g-info-200);border-color:var(--g-info-200)}.toolbar[data-v-ebd8cfef]{border-bottom:1px solid var(--g-surface-200);background-color:var(--g-surface-0);padding:.25rem}.toolbar [data-v-ebd8cfef] button{border-radius:4px}.toolbar [data-v-ebd8cfef] button:focus{outline:2px solid var(--g-primary-500);outline-offset:2px}.editor-content[data-v-ebd8cfef]{flex:1;min-width:0}.g-rich-text-content p[data-v-68026e47]{margin:.375em 0}.g-rich-text-content [data-v-68026e47]>:first-child{margin-top:0}.g-rich-text-content [data-v-68026e47]>:last-child{margin-bottom:0}:is(.g-rich-text-content ul,.g-rich-text-content ol)[data-v-68026e47]{margin:.375em 1em 0 .4em;padding:0 1em}:is(.g-rich-text-content ul,.g-rich-text-content ol) li p[data-v-68026e47]{margin-top:0;margin-bottom:0}.g-rich-text-content-error[data-v-68026e47]{color:var(--g-danger-700);font-size:.875em}
+/*$vite$:1*/

package/dist/grad-vue-rte.js

@@ -1,8 +1,2 @@
-import { G as a, a as n, b as s, u as o } from "./main-BRxFghDA.js";
-export {
-  a as GChatInput,
-  n as GNoteInput,
-  s as GRichTextContent,
-  o as useRichTextRenderer
-};
-//# sourceMappingURL=grad-vue-rte.js.map
+import { i as e, n as t, r as n, t as r } from "./grad-vue-rte-DDZoWaEh.js";
+export { e as GChatInput, n as GNoteInput, r as GRichTextContent, t as useRichTextRenderer };

package/dist/plugin.js

@@ -1,18 +1,9 @@
-import { G as o, a as n, b as p } from "./main-BRxFghDA.js";
-import "vue";
-import "@tiptap/extension-document";
-import "@tiptap/extension-paragraph";
-import "@tiptap/extension-text";
-import "@tiptap/extension-bold";
-import "@tiptap/extension-italic";
-import "@tiptap/extension-list";
-import "@tiptap/core";
-const h = {
-  install(t) {
-    t.component("GChatInput", o), t.component("GNoteInput", n), t.component("GRichTextContent", p);
-  }
-};
-export {
-  h as default
-};
-//# sourceMappingURL=plugin.js.map
+import { i as e, r as t, t as n } from "./grad-vue-rte-DDZoWaEh.js";
+//#region src/plugin.ts
+var r = { install(r) {
+	r.component("GChatInput", e), r.component("GNoteInput", t), r.component("GRichTextContent", n);
+} };
+//#endregion
+export { r as default };
+
+//# sourceMappingURL=plugin.js.map

package/dist/plugin.js.map

@@ -1 +1 @@
-{"version":3,"file":"plugin.js","sources":["../src/plugin.ts"],"sourcesContent":["import type { App } from \"vue\";\nimport {\n    GChatInput,\n    GNoteInput,\n    GRichTextContent,\n} from \"./grad-vue-rte.ts\";\n\nexport default {\n    install(app: App) {\n        app.component(\"GChatInput\", GChatInput);\n        app.component(\"GNoteInput\", GNoteInput);\n        app.component(\"GRichTextContent\", GRichTextContent);\n    },\n};\n\ndeclare module \"vue\" {\n    export interface GlobalComponents {\n        GChatInput: typeof GChatInput;\n        GNoteInput: typeof GNoteInput;\n        GRichTextContent: typeof GRichTextContent;\n    }\n}\n"],"names":["plugin","app","GChatInput","GNoteInput","GRichTextContent"],"mappings":";;;;;;;;;AAOA,MAAAA,IAAe;AAAA,EACX,QAAQC,GAAU;AACd,IAAAA,EAAI,UAAU,cAAcC,CAAU,GACtCD,EAAI,UAAU,cAAcE,CAAU,GACtCF,EAAI,UAAU,oBAAoBG,CAAgB;AAAA,EACtD;AACJ;"}
+{"version":3,"file":"plugin.js","names":[],"sources":["../src/plugin.ts"],"sourcesContent":["import type { App } from \"vue\";\nimport {\n    GChatInput,\n    GNoteInput,\n    GRichTextContent,\n} from \"./grad-vue-rte.ts\";\n\nexport default {\n    install(app: App) {\n        app.component(\"GChatInput\", GChatInput);\n        app.component(\"GNoteInput\", GNoteInput);\n        app.component(\"GRichTextContent\", GRichTextContent);\n    },\n};\n\ndeclare module \"vue\" {\n    export interface GlobalComponents {\n        GChatInput: typeof GChatInput;\n        GNoteInput: typeof GNoteInput;\n        GRichTextContent: typeof GRichTextContent;\n    }\n}\n"],"mappings":";;AAOA,IAAA,IAAe,EACX,QAAQ,GAAU;AAGd,CAFA,EAAI,UAAU,cAAc,EAAW,EACvC,EAAI,UAAU,cAAc,EAAW,EACvC,EAAI,UAAU,oBAAoB,EAAiB;GAE1D"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@illinois-grad/grad-vue-rte",
-    "version": "2.4.2",
+    "version": "2.5.1",
     "description": "Rich text editor components for Graduate College apps using Tiptap.",
     "keywords": [
         "vue",

package/dist/grad-vue-rte.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"grad-vue-rte.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/main-BRxFghDA.js

@@ -1,387 +0,0 @@
-import { watch as y, toRaw as E, ref as C, defineComponent as w, computed as v, openBlock as p, createElementBlock as b, unref as c, createElementVNode as d, normalizeClass as g, createCommentVNode as L, useModel as M, createBlock as N, withCtx as $, createVNode as x, mergeModels as k, onMounted as O, toValue as D, toRef as G, toDisplayString as J } from "vue";
-import { useEditor as K, EditorContent as V } from "@tiptap/vue-3";
-import { BubbleMenu as P } from "@tiptap/vue-3/menus";
-import I from "@tiptap/extension-document";
-import T from "@tiptap/extension-paragraph";
-import B from "@tiptap/extension-text";
-import A from "@tiptap/extension-bold";
-import _ from "@tiptap/extension-italic";
-import { ListKit as z } from "@tiptap/extension-list";
-import { UndoRedo as U, Placeholder as F } from "@tiptap/extensions";
-import { generateHTML as j } from "@tiptap/core";
-function R(e) {
-  const { content: l, placeholder: s, label: o, onUpdate: n, editorProps: r = {} } = e, a = typeof s == "string" ? s : s.value, t = typeof o == "string" ? o : o.value, i = K({
-    content: l.value || "",
-    extensions: [
-      I,
-      T,
-      B,
-      A,
-      _,
-      z,
-      U,
-      F.configure({ placeholder: a })
-    ],
-    editorProps: {
-      ...r,
-      attributes: {
-        "aria-label": t,
-        ...r.attributes
-      }
-    },
-    onUpdate({ editor: u }) {
-      l.value = u.getJSON(), n && n(u);
-    }
-  });
-  y(
-    () => typeof o == "string" ? o : o.value,
-    (u) => {
-      i.value && i.value?.setOptions({
-        editorProps: {
-          attributes: {
-            "aria-label": u
-          }
-        }
-      });
-    }
-  ), y(
-    () => l.value,
-    (u) => {
-      i.value && JSON.stringify(u) !== JSON.stringify(i.value.getJSON()) && i.value.commands.setContent(E(u) || "");
-    }
-  );
-  function f() {
-    i.value?.commands?.focus();
-  }
-  return {
-    editor: i,
-    focusEditor: f
-  };
-}
-function q(e, l) {
-  const s = C(0);
-  function o(r) {
-    const a = l.value;
-    if (!a) return;
-    const t = Array.from(
-      a.querySelectorAll("button")
-    ), i = t.findIndex(
-      (u) => u === document.activeElement
-    );
-    if (r.key === "Escape") {
-      r.preventDefault(), e.value?.commands?.focus();
-      return;
-    }
-    if (r.key === "Tab")
-      return;
-    let f = i;
-    switch (r.key) {
-      case "ArrowRight":
-      case "ArrowDown":
-        r.preventDefault(), f = i < t.length - 1 ? i + 1 : 0;
-        break;
-      case "ArrowLeft":
-      case "ArrowUp":
-        r.preventDefault(), f = i > 0 ? i - 1 : t.length - 1;
-        break;
-      case "Home":
-        r.preventDefault(), f = 0;
-        break;
-      case "End":
-        r.preventDefault(), f = t.length - 1;
-        break;
-      default:
-        return;
-    }
-    s.value = f, t[f]?.focus();
-  }
-  function n(r) {
-    return r === s.value ? 0 : -1;
-  }
-  return {
-    activeButtonIndex: s,
-    handleToolbarKeyDown: o,
-    getButtonTabIndex: n
-  };
-}
-const W = ["aria-pressed", "tabindex"], Q = ["aria-pressed", "tabindex"], X = ["aria-pressed", "tabindex"], Y = ["aria-pressed", "tabindex"], Z = /* @__PURE__ */ w({
-  __name: "GRichTextToolbar",
-  props: {
-    editor: {}
-  },
-  setup(e) {
-    const l = e, s = C(null), o = v(() => l.editor), { handleToolbarKeyDown: n, getButtonTabIndex: r } = q(
-      o,
-      s
-    );
-    return (a, t) => e.editor ? (p(), b("div", {
-      key: 0,
-      class: "g-rich-text-toolbar",
-      role: "toolbar",
-      "aria-label": "Text formatting",
-      ref_key: "toolbarRef",
-      ref: s,
-      onKeydown: t[4] || (t[4] = //@ts-ignore
-      (...i) => c(n) && c(n)(...i)),
-      tabindex: "-1"
-    }, [
-      d("button", {
-        onClick: t[0] || (t[0] = (i) => e.editor.chain().focus().toggleBold().run()),
-        class: g({
-          bold: !0,
-          "is-active": e.editor.isActive("bold")
-        }),
-        "aria-pressed": e.editor.isActive("bold"),
-        title: "Bold",
-        "aria-label": "Bold",
-        type: "button",
-        tabindex: c(r)(0)
-      }, [...t[5] || (t[5] = [
-        d("svg", {
-          xmlns: "http://www.w3.org/2000/svg",
-          viewBox: "0 0 384 512",
-          width: "16",
-          height: "16",
-          fill: "currentColor",
-          "aria-hidden": "true"
-        }, [
-          d("path", { d: "M0 64C0 46.3 14.3 32 32 32H80 96 224c70.7 0 128 57.3 128 128c0 31.3-11.3 60.1-30 82.3c37.1 22.4 62 63.1 62 109.7c0 70.7-57.3 128-128 128H96 80 32c-17.7 0-32-14.3-32-32s14.3-32 32-32H48V256 96H32C14.3 96 0 81.7 0 64zM224 224c35.3 0 64-28.7 64-64s-28.7-64-64-64H112V224H224zM112 288V416H256c35.3 0 64-28.7 64-64s-28.7-64-64-64H224 112z" })
-        ], -1)
-      ])], 10, W),
-      d("button", {
-        onClick: t[1] || (t[1] = (i) => e.editor.chain().focus().toggleItalic().run()),
-        class: g({
-          italic: !0,
-          "is-active": e.editor.isActive("italic")
-        }),
-        "aria-pressed": e.editor.isActive("italic"),
-        title: "Italic",
-        "aria-label": "Italic",
-        type: "button",
-        tabindex: c(r)(1)
-      }, [...t[6] || (t[6] = [
-        d("svg", {
-          xmlns: "http://www.w3.org/2000/svg",
-          viewBox: "0 0 384 512",
-          width: "16",
-          height: "16",
-          fill: "currentColor",
-          "aria-hidden": "true"
-        }, [
-          d("path", { d: "M128 64c0-17.7 14.3-32 32-32H352c17.7 0 32 14.3 32 32s-14.3 32-32 32H293.3L160 416h64c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H90.7L224 96H160c-17.7 0-32-14.3-32-32z" })
-        ], -1)
-      ])], 10, Q),
-      d("button", {
-        onClick: t[2] || (t[2] = (i) => e.editor.chain().focus().toggleOrderedList().run()),
-        class: g({ "is-active": e.editor.isActive("orderedList") }),
-        "aria-pressed": e.editor.isActive("orderedList"),
-        title: "Ordered List",
-        "aria-label": "Ordered List",
-        type: "button",
-        tabindex: c(r)(2)
-      }, [...t[7] || (t[7] = [
-        d("svg", {
-          xmlns: "http://www.w3.org/2000/svg",
-          viewBox: "0 0 512 512",
-          width: "16",
-          height: "16",
-          fill: "currentColor",
-          "aria-hidden": "true"
-        }, [
-          d("path", { d: "M24 56c0-13.3 10.7-24 24-24H80c13.3 0 24 10.7 24 24V176h16c13.3 0 24 10.7 24 24s-10.7 24-24 24H48c-13.3 0-24-10.7-24-24s10.7-24 24-24H64V80H48C34.7 80 24 69.3 24 56zM86.7 341.2c-6.5-7.4-18.3-6.9-24 1.2L51.5 357.9c-7.7 10.8-22.7 13.3-33.5 5.6s-13.3-22.7-5.6-33.5l11.1-15.6c23.7-33.2 72.3-35.6 99.2-4.9c21.3 24.4 20.8 60.9-1.1 84.7L86.8 432H120c13.3 0 24 10.7 24 24s-10.7 24-24 24H48c-9.5 0-18.2-5.6-22-14.4s-2.1-18.9 4.3-25.9l72-78c5.3-5.8 5.4-14.6 .3-20.5zM224 64H480c17.7 0 32 14.3 32 32s-14.3 32-32 32H224c-17.7 0-32-14.3-32-32s14.3-32 32-32zm0 160H480c17.7 0 32 14.3 32 32s-14.3 32-32 32H224c-17.7 0-32-14.3-32-32s14.3-32 32-32zm0 160H480c17.7 0 32 14.3 32 32s-14.3 32-32 32H224c-17.7 0-32-14.3-32-32s14.3-32 32-32z" })
-        ], -1)
-      ])], 10, X),
-      d("button", {
-        onClick: t[3] || (t[3] = (i) => e.editor.chain().focus().toggleBulletList().run()),
-        class: g({ "is-active": e.editor.isActive("bulletList") }),
-        "aria-pressed": e.editor.isActive("bulletList"),
-        title: "Unordered List",
-        "aria-label": "Unordered List",
-        type: "button",
-        tabindex: c(r)(3)
-      }, [...t[8] || (t[8] = [
-        d("svg", {
-          xmlns: "http://www.w3.org/2000/svg",
-          viewBox: "0 0 512 512",
-          width: "16",
-          height: "16",
-          fill: "currentColor",
-          "aria-hidden": "true"
-        }, [
-          d("path", { d: "M40 48C26.7 48 16 58.7 16 72v48c0 13.3 10.7 24 24 24H88c13.3 0 24-10.7 24-24V72c0-13.3-10.7-24-24-24H40zM192 64c-17.7 0-32 14.3-32 32s14.3 32 32 32H480c17.7 0 32-14.3 32-32s-14.3-32-32-32H192zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32H480c17.7 0 32-14.3 32-32s-14.3-32-32-32H192zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32H480c17.7 0 32-14.3 32-32s-14.3-32-32-32H192zM16 232v48c0 13.3 10.7 24 24 24H88c13.3 0 24-10.7 24-24V232c0-13.3-10.7-24-24-24H40c-13.3 0-24 10.7-24 24zM40 368c-13.3 0-24 10.7-24 24v48c0 13.3 10.7 24 24 24H88c13.3 0 24-10.7 24-24V392c0-13.3-10.7-24-24-24H40z" })
-        ], -1)
-      ])], 10, Y)
-    ], 544)) : L("", !0);
-  }
-}), H = (e, l) => {
-  const s = e.__vccOpts || e;
-  for (const [o, n] of l)
-    s[o] = n;
-  return s;
-}, S = /* @__PURE__ */ H(Z, [["__scopeId", "data-v-8c490655"]]), ee = { class: "g-chat-input-wrap" }, te = ["disabled"], oe = {}, re = /* @__PURE__ */ w({
-  ...oe,
-  inheritAttrs: !1,
-  __name: "GChatInput",
-  props: /* @__PURE__ */ k({
-    placeholder: { default: "Type a comment" },
-    disabled: { type: Boolean, default: !1 },
-    maxRows: { default: 5 },
-    label: { default: "Comment input" }
-  }, {
-    modelValue: {},
-    modelModifiers: {}
-  }),
-  emits: /* @__PURE__ */ k(["send"], ["update:modelValue"]),
-  setup(e, { expose: l, emit: s }) {
-    const o = e, n = M(e, "modelValue"), r = s, { editor: a, focusEditor: t } = R({
-      content: n,
-      placeholder: v(() => o.placeholder),
-      label: v(() => o.label),
-      editorProps: {
-        handleKeyDown(h, m) {
-          if (a.value && m.key === "Enter") {
-            if (a.value.isActive("orderedList") || a.value.isActive("bulletList"))
-              return !1;
-            if (m.shiftKey)
-              a.value.commands.splitBlock();
-            else
-              return n.value = a.value?.getJSON(), m.preventDefault(), i(a.value?.getJSON()), !0;
-          }
-          return !1;
-        },
-        attributes: {
-          "aria-keyshortcuts": "Shift+Enter"
-        }
-      }
-    });
-    function i(h) {
-      h && r("send", h);
-    }
-    function f() {
-      i(a.value?.getJSON());
-    }
-    function u() {
-      t();
-    }
-    return l({ focusInput: u }), (h, m) => (p(), b("div", ee, [
-      c(a) ? (p(), N(c(P), {
-        key: 0,
-        editor: c(a)
-      }, {
-        default: $(() => [
-          x(S, {
-            editor: c(a),
-            class: "bubble-menu"
-          }, null, 8, ["editor"])
-        ]),
-        _: 1
-      }, 8, ["editor"])) : L("", !0),
-      x(c(V), {
-        editor: c(a),
-        class: "editor-content"
-      }, null, 8, ["editor"]),
-      d("button", {
-        class: "g-chat-send-btn",
-        disabled: o.disabled || !n.value || n.value && Object.keys(n.value).length === 0,
-        onClick: f,
-        title: "Send",
-        "aria-label": "Send",
-        type: "button"
-      }, [...m[0] || (m[0] = [
-        d("svg", {
-          xmlns: "http://www.w3.org/2000/svg",
-          viewBox: "0 0 512 512",
-          width: "16",
-          height: "16",
-          fill: "currentColor",
-          "aria-hidden": "true"
-        }, [
-          d("path", { d: "M498.1 5.6c10.1 7 15.4 19.1 13.5 31.2l-64 416c-1.5 9.7-7.4 18.2-16 23s-18.9 5.4-28 1.6L284 427.7l-68.5 74.1c-8.9 9.7-22.9 12.9-35.2 8.1S160 493.2 160 480V396.4c0-4 1.5-7.8 4.2-10.7L331.8 202.8c5.8-6.3 5.6-16-.4-22s-15.7-6.4-22-.7L106 360.8 17.7 316.6C7.1 311.3 .3 300.7 0 288.9s5.9-22.8 16.1-28.7l448-256c10.7-6.1 23.9-5.5 34 1.4z" })
-        ], -1)
-      ])], 8, te)
-    ]));
-  }
-}), Le = /* @__PURE__ */ H(re, [["__scopeId", "data-v-09bab62a"]]), ne = { class: "g-note-input-wrap" }, ie = {}, se = /* @__PURE__ */ w({
-  ...ie,
-  inheritAttrs: !1,
-  __name: "GNoteInput",
-  props: /* @__PURE__ */ k({
-    placeholder: { default: "Write a note..." },
-    label: { default: "Note input" }
-  }, {
-    modelValue: {},
-    modelModifiers: {}
-  }),
-  emits: ["update:modelValue"],
-  setup(e, { expose: l }) {
-    const s = e, o = M(e, "modelValue"), { editor: n, focusEditor: r } = R({
-      content: o,
-      placeholder: v(() => s.placeholder),
-      label: v(() => s.label)
-    });
-    function a() {
-      r();
-    }
-    return l({ focusInput: a }), (t, i) => (p(), b("div", ne, [
-      x(S, {
-        editor: c(n),
-        class: "toolbar"
-      }, null, 8, ["editor"]),
-      x(c(V), {
-        editor: c(n),
-        class: "editor-content"
-      }, null, 8, ["editor"])
-    ]));
-  }
-}), Me = /* @__PURE__ */ H(se, [["__scopeId", "data-v-ebd8cfef"]]), ae = [I, T, B, A, _, z];
-function le(e) {
-  const l = C("");
-  O(() => {
-    y(e, () => {
-      const o = D(e);
-      if (!o || o.trim() === "")
-        return "";
-      try {
-        const n = JSON.parse(o);
-        let r = j(
-          n,
-          ae
-        );
-        l.value = r;
-      } catch (n) {
-        console.error("Failed to parse content:", o), console.error(n), l.value = null;
-      }
-    }, { immediate: !0 });
-  });
-  const s = v(() => l.value === null);
-  return { rendered: l, hasError: s };
-}
-const ce = { class: "g-rich-text-content-wrap" }, de = {
-  key: 0,
-  role: "alert",
-  class: "g-rich-text-content-error"
-}, ue = ["innerHTML"], fe = {}, pe = /* @__PURE__ */ w({
-  ...fe,
-  __name: "GRichTextContent",
-  props: {
-    error: {},
-    content: {}
-  },
-  setup(e) {
-    const s = G(e, "content"), { rendered: o, hasError: n } = le(s);
-    return (r, a) => (p(), b("div", ce, [
-      c(n) ? (p(), b("div", de, J(e.error || "Failed to render content."), 1)) : c(o) ? (p(), b("div", {
-        key: 1,
-        class: "g-rich-text-content",
-        innerHTML: c(o)
-      }, null, 8, ue)) : L("", !0)
-    ]));
-  }
-}), Ve = /* @__PURE__ */ H(pe, [["__scopeId", "data-v-68026e47"]]);
-export {
-  Le as G,
-  Me as a,
-  Ve as b,
-  le as u
-};
-//# sourceMappingURL=main-BRxFghDA.js.map

package/dist/main-BRxFghDA.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"main-BRxFghDA.js","sources":["../src/composables/useRichTextEditor.ts","../src/composables/useToolbarNavigation.ts","../src/components/editor/GRichTextToolbar.vue","../src/components/GChatInput.vue","../src/components/GNoteInput.vue","../src/composables/useRichTextRenderer.ts","../src/components/GRichTextContent.vue"],"sourcesContent":["import { toRaw, watch, type Ref } from \"vue\";\nimport { useEditor } from \"@tiptap/vue-3\";\nimport Document from \"@tiptap/extension-document\";\nimport Paragraph from \"@tiptap/extension-paragraph\";\nimport Text from \"@tiptap/extension-text\";\nimport Bold from \"@tiptap/extension-bold\";\nimport Italic from \"@tiptap/extension-italic\";\nimport { ListKit } from \"@tiptap/extension-list\";\nimport { UndoRedo, Placeholder } from \"@tiptap/extensions\";\n\ninterface UseRichTextEditorOptions {\n    content: Ref<object | \"\" | undefined>;\n    placeholder: Ref<string> | string;\n    label: Ref<string> | string;\n    onUpdate?: (editor: any) => void;\n    editorProps?: Record<string, any>;\n}\n\nexport function useRichTextEditor(options: UseRichTextEditorOptions) {\n    const { content, placeholder, label, onUpdate, editorProps = {} } = options;\n\n    const placeholderValue = typeof placeholder === 'string' ? placeholder : placeholder.value;\n    const labelValue = typeof label === 'string' ? label : label.value;\n\n    const editor = useEditor({\n        content: content.value || \"\",\n        extensions: [\n            Document,\n            Paragraph,\n            Text,\n            Bold,\n            Italic,\n            ListKit,\n            UndoRedo,\n            Placeholder.configure({ placeholder: placeholderValue }),\n        ],\n        editorProps: {\n            ...editorProps,\n            attributes: {\n                \"aria-label\": labelValue,\n                ...editorProps.attributes,\n            },\n        },\n        onUpdate({ editor }) {\n            content.value = editor.getJSON();\n            if (onUpdate) {\n                onUpdate(editor);\n            }\n        },\n    });\n\n    // Watch for label changes and update editor\n    watch(\n        () => typeof label === 'string' ? label : label.value,\n        (val) => {\n            if (editor.value) {\n                editor.value?.setOptions({\n                    editorProps: {\n                        attributes: {\n                            \"aria-label\": val,\n                        },\n                    },\n                });\n            }\n        },\n    );\n\n    // Watch for content changes and update editor\n    watch(\n        () => content.value,\n        (val) => {\n            if (\n                editor.value &&\n                JSON.stringify(val) !== JSON.stringify(editor.value.getJSON())\n            ) {\n                editor.value.commands.setContent(toRaw(val) || \"\");\n            }\n        },\n    );\n\n    function focusEditor() {\n        editor.value?.commands?.focus();\n    }\n\n    return {\n        editor,\n        focusEditor,\n    };\n}\n","import { ref, type Ref } from \"vue\";\nimport type { Editor } from \"@tiptap/vue-3\";\n\nexport function useToolbarNavigation(editor: Ref<Editor | undefined>, toolbarRef: Ref<HTMLElement | null>) {\n    const activeButtonIndex = ref(0);\n\n    function handleToolbarKeyDown(event: KeyboardEvent) {\n        const toolbar = toolbarRef.value;\n        if (!toolbar) return;\n\n        const buttons = Array.from(\n            toolbar.querySelectorAll(\"button\"),\n        ) as HTMLButtonElement[];\n        const currentIndex = buttons.findIndex(\n            (btn) => btn === document.activeElement,\n        );\n\n        // Handle Escape key - return focus to editor\n        if (event.key === \"Escape\") {\n            event.preventDefault();\n            editor.value?.commands?.focus();\n            return;\n        }\n\n        // Don't handle Tab - let it exit the toolbar naturally\n        if (event.key === \"Tab\") {\n            return;\n        }\n\n        let nextIndex = currentIndex;\n\n        switch (event.key) {\n            case \"ArrowRight\":\n            case \"ArrowDown\":\n                event.preventDefault();\n                nextIndex =\n                    currentIndex < buttons.length - 1 ? currentIndex + 1 : 0;\n                break;\n            case \"ArrowLeft\":\n            case \"ArrowUp\":\n                event.preventDefault();\n                nextIndex =\n                    currentIndex > 0 ? currentIndex - 1 : buttons.length - 1;\n                break;\n            case \"Home\":\n                event.preventDefault();\n                nextIndex = 0;\n                break;\n            case \"End\":\n                event.preventDefault();\n                nextIndex = buttons.length - 1;\n                break;\n            default:\n                return;\n        }\n\n        // Update active button index and focus\n        activeButtonIndex.value = nextIndex;\n        buttons[nextIndex]?.focus();\n    }\n\n    function getButtonTabIndex(index: number): number {\n        return index === activeButtonIndex.value ? 0 : -1;\n    }\n\n    return {\n        activeButtonIndex,\n        handleToolbarKeyDown,\n        getButtonTabIndex,\n    };\n}\n","<script lang=\"ts\" setup>\nimport { ref, computed } from \"vue\";\nimport type { Editor } from \"@tiptap/vue-3\";\nimport { useToolbarNavigation } from \"../../composables/useToolbarNavigation.ts\";\n\ninterface Props {\n    editor: Editor | undefined;\n}\n\nconst props = defineProps<Props>();\n\nconst toolbarRef = ref<HTMLElement | null>(null);\nconst editorRef = computed(() => props.editor);\nconst { handleToolbarKeyDown, getButtonTabIndex } = useToolbarNavigation(\n    editorRef,\n    toolbarRef,\n);\n</script>\n\n<template>\n    <div\n        v-if=\"editor\"\n        class=\"g-rich-text-toolbar\"\n        role=\"toolbar\"\n        aria-label=\"Text formatting\"\n        ref=\"toolbarRef\"\n        @keydown=\"handleToolbarKeyDown\"\n        tabindex=\"-1\"\n    >\n        <button\n            @click=\"editor.chain().focus().toggleBold().run()\"\n            :class=\"{\n                bold: true,\n                'is-active': editor.isActive('bold'),\n            }\"\n            :aria-pressed=\"editor.isActive('bold')\"\n            title=\"Bold\"\n            aria-label=\"Bold\"\n            type=\"button\"\n            :tabindex=\"getButtonTabIndex(0)\"\n        >\n            <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 384 512\"\n                width=\"16\"\n                height=\"16\"\n                fill=\"currentColor\"\n                aria-hidden=\"true\"\n            >\n                <path\n                    d=\"M0 64C0 46.3 14.3 32 32 32H80 96 224c70.7 0 128 57.3 128 128c0 31.3-11.3 60.1-30 82.3c37.1 22.4 62 63.1 62 109.7c0 70.7-57.3 128-128 128H96 80 32c-17.7 0-32-14.3-32-32s14.3-32 32-32H48V256 96H32C14.3 96 0 81.7 0 64zM224 224c35.3 0 64-28.7 64-64s-28.7-64-64-64H112V224H224zM112 288V416H256c35.3 0 64-28.7 64-64s-28.7-64-64-64H224 112z\"\n                />\n            </svg>\n        </button>\n        <button\n            @click=\"editor.chain().focus().toggleItalic().run()\"\n            :class=\"{\n                italic: true,\n                'is-active': editor.isActive('italic'),\n            }\"\n            :aria-pressed=\"editor.isActive('italic')\"\n            title=\"Italic\"\n            aria-label=\"Italic\"\n            type=\"button\"\n            :tabindex=\"getButtonTabIndex(1)\"\n        >\n            <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 384 512\"\n                width=\"16\"\n                height=\"16\"\n                fill=\"currentColor\"\n                aria-hidden=\"true\"\n            >\n                <path\n                    d=\"M128 64c0-17.7 14.3-32 32-32H352c17.7 0 32 14.3 32 32s-14.3 32-32 32H293.3L160 416h64c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H90.7L224 96H160c-17.7 0-32-14.3-32-32z\"\n                />\n            </svg>\n        </button>\n        <button\n            @click=\"editor.chain().focus().toggleOrderedList().run()\"\n            :class=\"{ 'is-active': editor.isActive('orderedList') }\"\n            :aria-pressed=\"editor.isActive('orderedList')\"\n            title=\"Ordered List\"\n            aria-label=\"Ordered List\"\n            type=\"button\"\n            :tabindex=\"getButtonTabIndex(2)\"\n        >\n            <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 512 512\"\n                width=\"16\"\n                height=\"16\"\n                fill=\"currentColor\"\n                aria-hidden=\"true\"\n            >\n                <path\n                    d=\"M24 56c0-13.3 10.7-24 24-24H80c13.3 0 24 10.7 24 24V176h16c13.3 0 24 10.7 24 24s-10.7 24-24 24H48c-13.3 0-24-10.7-24-24s10.7-24 24-24H64V80H48C34.7 80 24 69.3 24 56zM86.7 341.2c-6.5-7.4-18.3-6.9-24 1.2L51.5 357.9c-7.7 10.8-22.7 13.3-33.5 5.6s-13.3-22.7-5.6-33.5l11.1-15.6c23.7-33.2 72.3-35.6 99.2-4.9c21.3 24.4 20.8 60.9-1.1 84.7L86.8 432H120c13.3 0 24 10.7 24 24s-10.7 24-24 24H48c-9.5 0-18.2-5.6-22-14.4s-2.1-18.9 4.3-25.9l72-78c5.3-5.8 5.4-14.6 .3-20.5zM224 64H480c17.7 0 32 14.3 32 32s-14.3 32-32 32H224c-17.7 0-32-14.3-32-32s14.3-32 32-32zm0 160H480c17.7 0 32 14.3 32 32s-14.3 32-32 32H224c-17.7 0-32-14.3-32-32s14.3-32 32-32zm0 160H480c17.7 0 32 14.3 32 32s-14.3 32-32 32H224c-17.7 0-32-14.3-32-32s14.3-32 32-32z\"\n                />\n            </svg>\n        </button>\n        <button\n            @click=\"editor.chain().focus().toggleBulletList().run()\"\n            :class=\"{ 'is-active': editor.isActive('bulletList') }\"\n            :aria-pressed=\"editor.isActive('bulletList')\"\n            title=\"Unordered List\"\n            aria-label=\"Unordered List\"\n            type=\"button\"\n            :tabindex=\"getButtonTabIndex(3)\"\n        >\n            <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 512 512\"\n                width=\"16\"\n                height=\"16\"\n                fill=\"currentColor\"\n                aria-hidden=\"true\"\n            >\n                <path\n                    d=\"M40 48C26.7 48 16 58.7 16 72v48c0 13.3 10.7 24 24 24H88c13.3 0 24-10.7 24-24V72c0-13.3-10.7-24-24-24H40zM192 64c-17.7 0-32 14.3-32 32s14.3 32 32 32H480c17.7 0 32-14.3 32-32s-14.3-32-32-32H192zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32H480c17.7 0 32-14.3 32-32s-14.3-32-32-32H192zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32H480c17.7 0 32-14.3 32-32s-14.3-32-32-32H192zM16 232v48c0 13.3 10.7 24 24 24H88c13.3 0 24-10.7 24-24V232c0-13.3-10.7-24-24-24H40c-13.3 0-24 10.7-24 24zM40 368c-13.3 0-24 10.7-24 24v48c0 13.3 10.7 24 24 24H88c13.3 0 24-10.7 24-24V392c0-13.3-10.7-24-24-24H40z\"\n                />\n            </svg>\n        </button>\n    </div>\n</template>\n\n<style scoped>\n.g-rich-text-toolbar {\n    display: flex;\n\n    button {\n        background-color: unset;\n        padding: 0.4rem 0.5rem;\n        font-size: 0.875rem;\n        border: none;\n        cursor: pointer;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n\n        &.bold {\n            font-weight: 700;\n        }\n        &.italic {\n            font-style: italic;\n        }\n\n        &.is-active {\n            color: var(--g-accent-700);\n            background-color: var(--g-surface-150);\n        }\n\n        &:hover {\n            background-color: var(--g-primary-300);\n            color: var(--g-primary-text);\n        }\n    }\n}\n</style>\n","<script lang=\"ts\">\n/**\n * The GChatInput component provides a rich text editing experience using Tiptap. It supports:\n *\n *  - **Bold** and *italic* text formatting\n *  - Bullet and numbered lists\n *  - Bubble menu for formatting (appears when text is selected)\n *  - Press <kbd>Enter</kbd> to send, <kbd>Shift+Enter</kbd> for new line\n *  - Undo/redo support\n *\n *  **Note**: This component is part of the `@illinois-grad/grad-vue-rte` package, which includes Tiptap dependencies.\n */\nexport default {};\n</script>\n\n<script lang=\"ts\" setup>\nimport { computed } from \"vue\";\nimport { EditorContent } from \"@tiptap/vue-3\";\nimport { BubbleMenu } from \"@tiptap/vue-3/menus\";\nimport { useRichTextEditor } from \"../composables/useRichTextEditor\";\nimport GRichTextToolbar from \"./editor/GRichTextToolbar.vue\";\n\ndefineOptions({ inheritAttrs: false });\n\ntype Props = {\n    /**\n     * Placeholder text\n     * @demo\n     */\n    placeholder?: string;\n    /**\n     * Disabled\n     * @demo\n     */\n    disabled?: boolean;\n    /**\n     * Maximum number of rows\n     * @demo\n     */\n    maxRows?: number;\n    /**\n     * Accessible label\n     * @demo\n     */\n    label?: string;\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n    placeholder: \"Type a comment\",\n    label: \"Comment input\",\n    disabled: false,\n    maxRows: 5,\n});\nconst model = defineModel<object | \"\">();\nconst emit = defineEmits<{ send: [content: object] }>();\n\nconst { editor, focusEditor } = useRichTextEditor({\n    content: model as any,\n    placeholder: computed(() => props.placeholder),\n    label: computed(() => props.label),\n    editorProps: {\n        handleKeyDown(view: any, event: any) {\n            if (editor.value && event.key === \"Enter\") {\n                if (\n                    editor.value.isActive(\"orderedList\") ||\n                    editor.value.isActive(\"bulletList\")\n                ) {\n                    return false;\n                }\n                if (!event.shiftKey) {\n                    model.value = editor.value?.getJSON();\n                    event.preventDefault();\n                    onSend(editor.value?.getJSON());\n                    return true;\n                } else {\n                    editor.value.commands.splitBlock();\n                }\n            }\n            return false;\n        },\n        attributes: {\n            \"aria-keyshortcuts\": \"Shift+Enter\",\n        },\n    },\n});\n\nfunction onSend(content: any) {\n    if (content) {\n        emit(\"send\", content);\n    }\n}\n\nfunction clickSend() {\n    onSend(editor.value?.getJSON());\n}\n\nfunction focusInput() {\n    focusEditor();\n}\n\ndefineExpose({ focusInput });\n</script>\n\n<template>\n    <div class=\"g-chat-input-wrap\">\n        <BubbleMenu :editor=\"editor\" v-if=\"editor\">\n            <GRichTextToolbar :editor=\"editor\" class=\"bubble-menu\" />\n        </BubbleMenu>\n        <EditorContent :editor=\"editor\" class=\"editor-content\" />\n        <button\n            class=\"g-chat-send-btn\"\n            :disabled=\"\n                props.disabled ||\n                !model ||\n                (model && Object.keys(model).length === 0)\n            \"\n            @click=\"clickSend\"\n            title=\"Send\"\n            aria-label=\"Send\"\n            type=\"button\"\n        >\n            <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 512 512\"\n                width=\"16\"\n                height=\"16\"\n                fill=\"currentColor\"\n                aria-hidden=\"true\"\n            >\n                <path\n                    d=\"M498.1 5.6c10.1 7 15.4 19.1 13.5 31.2l-64 416c-1.5 9.7-7.4 18.2-16 23s-18.9 5.4-28 1.6L284 427.7l-68.5 74.1c-8.9 9.7-22.9 12.9-35.2 8.1S160 493.2 160 480V396.4c0-4 1.5-7.8 4.2-10.7L331.8 202.8c5.8-6.3 5.6-16-.4-22s-15.7-6.4-22-.7L106 360.8 17.7 316.6C7.1 311.3 .3 300.7 0 288.9s5.9-22.8 16.1-28.7l448-256c10.7-6.1 23.9-5.5 34 1.4z\"\n                />\n            </svg>\n        </button>\n    </div>\n</template>\n\n<style>\n.g-chat-input-wrap {\n    .tiptap {\n        background: transparent;\n        border: none;\n        padding: 0.15em 0;\n        font-size: 15px;\n        max-height: 10em;\n        flex: 1;\n        outline: none;\n\n        p {\n            margin: 0.375em 0 0;\n        }\n\n        > :first-child {\n            margin-top: 0;\n        }\n        > :last-child {\n            margin-bottom: 0;\n        }\n\n        ul,\n        ol {\n            padding: 0 1em;\n            margin: 0.375em 1em 0 0.4em;\n\n            li p {\n                margin-top: 0;\n                margin-bottom: 0;\n            }\n        }\n        p.is-editor-empty:first-child::before {\n            color: var(--g-surface-600);\n            content: attr(data-placeholder);\n            float: left;\n            height: 0;\n            pointer-events: none;\n        }\n    }\n}\n</style>\n\n<style scoped>\n.bubble-menu {\n    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);\n    background-color: var(--g-surface-100);\n\n    :deep(button) {\n        &:first-child {\n            border-top-left-radius: 4px;\n            border-bottom-left-radius: 4px;\n        }\n        &:last-child {\n            border-top-right-radius: 4px;\n            border-bottom-right-radius: 4px;\n        }\n    }\n}\n\n.g-chat-input-wrap {\n    position: relative;\n    display: flex;\n    align-items: center;\n    background: var(--g-surface-0);\n    border: 2px solid var(--g-primary-500);\n    border-radius: 4px;\n    padding: 0.5em;\n\n    &:has(.ProseMirror-focused) {\n        outline: 2px solid var(--g-primary-500);\n        outline-offset: 2px;\n        box-shadow: 0 0 0 2px var(--g-info-200);\n        border-color: var(--g-info-200);\n    }\n}\n\n.editor-content {\n    flex: 1;\n    min-width: 0;\n}\n\n.g-chat-send-btn {\n    color: var(--g-primary-500);\n    font-size: 1em;\n    border: 2px solid transparent;\n    border-radius: 4px;\n    padding: 0.4em;\n    margin: 0;\n    align-self: flex-end;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: transparent;\n    flex-shrink: 0;\n\n    &:hover:not(:disabled) {\n        color: var(--g-accent-700);\n        background-color: var(--g-surface-100);\n    }\n\n    &:focus:not(:disabled) {\n        background-color: var(--g-info-200);\n        color: var(--g-primary-500);\n    }\n\n    &:active:not(:disabled) {\n        background-color: var(--g-primary-500);\n        color: var(--g-surface-0);\n    }\n\n    &:disabled {\n        color: var(--g-surface-300);\n        cursor: not-allowed;\n    }\n}\n</style>\n","<script lang=\"ts\">\n/**\n * The GNoteInput component provides a rich text editing experience using Tiptap for writing notes. It supports:\n *\n *  - **Bold** and *italic* text formatting\n *  - Bullet and numbered lists\n *  - Always visible toolbar for formatting\n *  - Undo/redo support\n *\n *  **Note**: This component is part of the `@illinois-grad/grad-vue-rte` package, which includes Tiptap dependencies.\n */\nexport default {};\n</script>\n\n<script lang=\"ts\" setup>\nimport { computed } from \"vue\";\nimport { EditorContent } from \"@tiptap/vue-3\";\nimport { useRichTextEditor } from \"../composables/useRichTextEditor\";\nimport GRichTextToolbar from \"./editor/GRichTextToolbar.vue\";\n\ndefineOptions({ inheritAttrs: false });\n\ntype Props = {\n    /**\n     * Placeholder text\n     * @demo\n     */\n    placeholder?: string;\n    /**\n     * Accessible label\n     * @demo\n     */\n    label?: string;\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n    placeholder: \"Write a note...\",\n    label: \"Note input\",\n});\nconst model = defineModel<object | \"\">();\n\nconst { editor, focusEditor } = useRichTextEditor({\n    content: model as any,\n    placeholder: computed(() => props.placeholder),\n    label: computed(() => props.label),\n});\n\nfunction focusInput() {\n    focusEditor();\n}\n\ndefineExpose({ focusInput });\n</script>\n\n<template>\n    <div class=\"g-note-input-wrap\">\n        <GRichTextToolbar :editor=\"editor\" class=\"toolbar\" />\n        <EditorContent :editor=\"editor\" class=\"editor-content\" />\n    </div>\n</template>\n\n<style>\n.g-note-input-wrap {\n    .tiptap {\n        background: transparent;\n        border: none;\n        padding: 0.5em;\n        font-size: 15px;\n        min-height: 12em;\n        flex: 1;\n        outline: none;\n\n        p {\n            margin: 0.375em 0 0;\n        }\n\n        > :first-child {\n            margin-top: 0;\n        }\n        > :last-child {\n            margin-bottom: 0;\n        }\n\n        ul,\n        ol {\n            padding: 0 1em;\n            margin: 0.375em 1em 0 0.4em;\n\n            li p {\n                margin-top: 0;\n                margin-bottom: 0;\n            }\n        }\n        p.is-editor-empty:first-child::before {\n            color: var(--g-surface-600);\n            content: attr(data-placeholder);\n            float: left;\n            height: 0;\n            pointer-events: none;\n        }\n    }\n}\n</style>\n\n<style scoped>\n.g-note-input-wrap {\n    display: flex;\n    flex-direction: column;\n    background: var(--g-surface-0);\n    border: 2px solid var(--g-primary-500);\n    border-radius: 4px;\n\n    &:has(.ProseMirror-focused) {\n        outline: 2px solid var(--g-primary-500);\n        outline-offset: 2px;\n        box-shadow: 0 0 0 2px var(--g-info-200);\n        border-color: var(--g-info-200);\n    }\n}\n\n.toolbar {\n    border-bottom: 1px solid var(--g-surface-200);\n    background-color: var(--g-surface-0);\n    padding: 0.25rem;\n\n    :deep(button) {\n        border-radius: 4px;\n\n        &:focus {\n            outline: 2px solid var(--g-primary-500);\n            outline-offset: 2px;\n        }\n    }\n}\n\n.editor-content {\n    flex: 1;\n    min-width: 0;\n}\n</style>\n","import { computed, onMounted, ref, type Ref, toValue, watch } from \"vue\";\nimport Document from \"@tiptap/extension-document\";\nimport Paragraph from \"@tiptap/extension-paragraph\";\nimport Text from \"@tiptap/extension-text\";\nimport Bold from \"@tiptap/extension-bold\";\nimport Italic from \"@tiptap/extension-italic\";\nimport { ListKit } from \"@tiptap/extension-list\";\nimport { generateHTML } from \"@tiptap/core\";\n\nconst extensions = [Document, Paragraph, Text, Bold, Italic, ListKit];\n\n/**\n * Composable for rendering a JSON string of tiptap content to HTML.\n * Supports all extensions used by GChatInput and GNoteInput.\n *\n * @param content - A reactive ref or plain string containing JSON-encoded tiptap content\n * @returns `rendered` — rendered HTML string, empty string for empty content, or `null` when rendering fails;\n *          `hasError` — `true` when the content cannot be parsed or rendered\n */\nexport function useRichTextRenderer(content: Ref<string>) {\n    const rendered = ref<string | null>(\"\");\n\n    onMounted(() => {\n        watch(content, () => {\n            const value = toValue(content);\n            if (!value || value.trim() === \"\") {\n                return \"\";\n            }\n\n            try {\n                const parsed = JSON.parse(value);\n                let html = generateHTML(\n                    parsed,\n                    extensions\n                );\n                rendered.value = html;\n            } catch (error) {\n                console.error(\"Failed to parse content:\", value);\n                console.error(error);\n                rendered.value = null;\n            }\n        }, {immediate: true});\n    });\n\n    const hasError = computed(() => rendered.value === null);\n\n    return { rendered, hasError };\n}\n","<script lang=\"ts\">\n/**\n * Renders a JSON string of tiptap content as HTML.\n * Supports all formatting produced by GChatInput and GNoteInput:\n * bold, italic, ordered lists, and bullet lists.\n *\n * - Empty content is handled gracefully (renders nothing).\n * - Displays an error message when the content cannot be parsed or rendered.\n *\n * The rendering only happens in the client when used with Nuxt.js.\n *\n * **Security note**: rendered HTML is produced by tiptap's `generateHTML`, which only\n * serializes recognized document nodes - it does not inject raw HTML from the JSON.\n *\n * **Note**: This component is part of the `@illinois-grad/grad-vue-rte` package, which includes Tiptap dependencies.\n */\nexport default {};\n</script>\n\n<script setup lang=\"ts\">\nimport { toRef } from \"vue\";\nimport { useRichTextRenderer } from \"../composables/useRichTextRenderer\";\n\ntype Props = {\n    /**\n     * Error message when rendering fails\n     * @demo\n     */\n    error?: string;\n\n    /**\n     * JSON-encoded tiptap content string to render.\n     */\n    content: string;\n}\n\nconst props = defineProps<Props>();\n\nconst contentRef = toRef(props, \"content\");\n\nconst { rendered, hasError } = useRichTextRenderer(contentRef);\n\n</script>\n\n<template>\n    <div class=\"g-rich-text-content-wrap\">\n        <div v-if=\"hasError\" role=\"alert\" class=\"g-rich-text-content-error\">\n            {{ error || 'Failed to render content.' }}\n        </div>\n        <div v-else-if=\"rendered\" class=\"g-rich-text-content\" v-html=\"rendered\"></div>\n    </div>\n</template>\n\n<style scoped>\n.g-rich-text-content {\n    p {\n        margin: 0.375em 0;\n    }\n\n    > :first-child {\n        margin-top: 0;\n    }\n\n    > :last-child {\n        margin-bottom: 0;\n    }\n\n    ul,\n    ol {\n        padding: 0 1em;\n        margin: 0.375em 1em 0 0.4em;\n\n        li p {\n            margin-top: 0;\n            margin-bottom: 0;\n        }\n    }\n}\n\n.g-rich-text-content-error {\n    color: var(--g-danger-700);\n    font-size: 0.875em;\n}\n</style>\n"],"names":["useRichTextEditor","options","content","placeholder","label","onUpdate","editorProps","placeholderValue","labelValue","editor","useEditor","Document","Paragraph","Text","Bold","Italic","ListKit","UndoRedo","Placeholder","watch","val","toRaw","focusEditor","useToolbarNavigation","toolbarRef","activeButtonIndex","ref","handleToolbarKeyDown","event","toolbar","buttons","currentIndex","btn","nextIndex","getButtonTabIndex","index","props","__props","editorRef","computed","_createElementBlock","_cache","_unref","args","_createElementVNode","$event","_normalizeClass","__default__","model","_useModel","emit","__emit","view","onSend","clickSend","focusInput","__expose","_openBlock","_hoisted_1","_createBlock","BubbleMenu","_createVNode","GRichTextToolbar","EditorContent","extensions","useRichTextRenderer","rendered","onMounted","value","toValue","parsed","html","generateHTML","error","hasError","contentRef","toRef","_hoisted_2","_toDisplayString"],"mappings":"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"}