@illinois-grad/grad-vue-rte 2.3.5 → 2.4.1

package/dist/components/GChatInput.vue.d.ts

@@ -1,40 +1,73 @@
-interface Props {
+/**
+ * The GChatInput component provides a rich text editing experience using Tiptap. It supports:
+ *
+ *  - **Bold** and *italic* text formatting
+ *  - Bullet and numbered lists
+ *  - Bubble menu for formatting (appears when text is selected)
+ *  - Press <kbd>Enter</kbd> to send, <kbd>Shift+Enter</kbd> for new line
+ *  - Undo/redo support
+ *
+ *  **Note**: This component is part of the `@illinois-grad/grad-vue-rte` package, which includes Tiptap dependencies.
+ */
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{
     /**
      * Placeholder text
+     * @demo
      */
     placeholder?: string;
     /**
      * Disabled
+     * @demo
      */
     disabled?: boolean;
     /**
      * Maximum number of rows
+     * @demo
      */
     maxRows?: number;
     /**
      * Accessible label
+     * @demo
      */
     label?: string;
-}
-type __VLS_Props = Props;
-declare function focusInput(): void;
-type __VLS_ModelProps = {
+} & {
     modelValue?: object | "";
-};
-type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
-    focusInput: typeof focusInput;
+}, {
+    focusInput: () => void;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    send: (content: object) => any;
     "update:modelValue": (value: object | "" | undefined) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    onSend?: ((content: object) => any) | undefined;
+    send: (content: object) => any;
+}, string, import("vue").PublicProps, Readonly<{
+    /**
+     * Placeholder text
+     * @demo
+     */
+    placeholder?: string;
+    /**
+     * Disabled
+     * @demo
+     */
+    disabled?: boolean;
+    /**
+     * Maximum number of rows
+     * @demo
+     */
+    maxRows?: number;
+    /**
+     * Accessible label
+     * @demo
+     */
+    label?: string;
+} & {
+    modelValue?: object | "";
+}> & Readonly<{
     "onUpdate:modelValue"?: ((value: object | "" | undefined) => any) | undefined;
+    onSend?: ((content: object) => any) | undefined;
 }>, {
     placeholder: string;
     label: string;
     disabled: boolean;
     maxRows: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;

package/dist/components/GNoteInput.vue.d.ts

@@ -1,28 +1,48 @@
-interface Props {
+/**
+ * The GNoteInput component provides a rich text editing experience using Tiptap for writing notes. It supports:
+ *
+ *  - **Bold** and *italic* text formatting
+ *  - Bullet and numbered lists
+ *  - Always visible toolbar for formatting
+ *  - Undo/redo support
+ *
+ *  **Note**: This component is part of the `@illinois-grad/grad-vue-rte` package, which includes Tiptap dependencies.
+ */
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{
     /**
      * Placeholder text
+     * @demo
      */
     placeholder?: string;
     /**
      * Accessible label
+     * @demo
      */
     label?: string;
-}
-type __VLS_Props = Props;
-declare function focusInput(): void;
-type __VLS_ModelProps = {
+} & {
     modelValue?: object | "";
-};
-type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
-    focusInput: typeof focusInput;
+}, {
+    focusInput: () => void;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: object | "" | undefined) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<{
+    /**
+     * Placeholder text
+     * @demo
+     */
+    placeholder?: string;
+    /**
+     * Accessible label
+     * @demo
+     */
+    label?: string;
+} & {
+    modelValue?: object | "";
+}> & Readonly<{
     "onUpdate:modelValue"?: ((value: object | "" | undefined) => any) | undefined;
 }>, {
     placeholder: string;
     label: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;

package/dist/components/GRichTextContent.vue.d.ts

@@ -1,10 +1,38 @@
-interface Props {
+/**
+ * Renders a JSON string of tiptap content as HTML.
+ * Supports all formatting produced by GChatInput and GNoteInput:
+ * bold, italic, ordered lists, and bullet lists.
+ *
+ * - Empty content is handled gracefully (renders nothing).
+ * - Displays an error message when the content cannot be parsed or rendered.
+ *
+ * The rendering only happens in the client when used with Nuxt.js.
+ *
+ * **Security note**: rendered HTML is produced by tiptap's `generateHTML`, which only
+ * serializes recognized document nodes - it does not inject raw HTML from the JSON.
+ *
+ * **Note**: This component is part of the `@illinois-grad/grad-vue-rte` package, which includes Tiptap dependencies.
+ */
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{
     /**
      * Error message when rendering fails
+     * @demo
      */
     error?: string;
+    /**
+     * JSON-encoded tiptap content string to render.
+     */
     content: string;
-}
-declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    /**
+     * Error message when rendering fails
+     * @demo
+     */
+    error?: string;
+    /**
+     * JSON-encoded tiptap content string to render.
+     */
+    content: string;
+}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/grad-vue-rte.css

@@ -1 +1 @@
-.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-45a4a5f2]{box-shadow:0 1px 4px #00000080;background-color:var(--g-surface-100)}.bubble-menu [data-v-45a4a5f2] button:first-child{border-top-left-radius:4px;border-bottom-left-radius:4px}.bubble-menu [data-v-45a4a5f2] button:last-child{border-top-right-radius:4px;border-bottom-right-radius:4px}.g-chat-input-wrap[data-v-45a4a5f2]{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-45a4a5f2]: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-45a4a5f2]{flex:1;min-width:0}.g-chat-send-btn[data-v-45a4a5f2]{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-45a4a5f2]:hover:not(:disabled){color:var(--g-accent-700);background-color:var(--g-surface-100)}.g-chat-send-btn[data-v-45a4a5f2]:focus:not(:disabled){background-color:var(--g-info-200);color:var(--g-primary-500)}.g-chat-send-btn[data-v-45a4a5f2]:active:not(:disabled){background-color:var(--g-primary-500);color:var(--g-surface-0)}.g-chat-send-btn[data-v-45a4a5f2]: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-c2d30b96]{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-c2d30b96]: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-c2d30b96]{border-bottom:1px solid var(--g-surface-200);background-color:var(--g-surface-0);padding:.25rem}.toolbar [data-v-c2d30b96] button{border-radius:4px}.toolbar [data-v-c2d30b96] button:focus{outline:2px solid var(--g-primary-500);outline-offset:2px}.editor-content[data-v-c2d30b96]{flex:1;min-width:0}.g-rich-text-content p[data-v-923b2b7c]{margin:.375em 0}.g-rich-text-content [data-v-923b2b7c]>:first-child{margin-top:0}.g-rich-text-content [data-v-923b2b7c]>:last-child{margin-bottom:0}:is(.g-rich-text-content ul,.g-rich-text-content ol)[data-v-923b2b7c]{padding:0 1em;margin:.375em 1em 0 .4em}:is(.g-rich-text-content ul,.g-rich-text-content ol) li p[data-v-923b2b7c]{margin-top:0;margin-bottom:0}.g-rich-text-content-error[data-v-923b2b7c]{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;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}

package/dist/grad-vue-rte.js

@@ -1,4 +1,4 @@
-import { G as a, a as n, b as s, u as o } from "./main-Bh1IF4ob.js";
+import { G as a, a as n, b as s, u as o } from "./main-BRxFghDA.js";
 export {
   a as GChatInput,
   n as GNoteInput,

package/dist/{main-Bh1IF4ob.js → main-BRxFghDA.js}

@@ -1,25 +1,25 @@
-import { watch as y, toRaw as N, 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 O, withCtx as $, createVNode as x, mergeModels as k, onMounted as D, toValue as G, toRef as J, toDisplayString as K } from "vue";
-import { useEditor as P, EditorContent as V } from "@tiptap/vue-3";
-import { BubbleMenu as U } from "@tiptap/vue-3/menus";
+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 z from "@tiptap/extension-italic";
-import { ListKit as R } from "@tiptap/extension-list";
-import { UndoRedo as _, Placeholder as F } from "@tiptap/extensions";
+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 S(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 = P({
+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,
-      R,
       _,
+      z,
+      U,
       F.configure({ placeholder: a })
     ],
     editorProps: {
@@ -47,7 +47,7 @@ function S(e) {
   ), y(
     () => l.value,
     (u) => {
-      i.value && JSON.stringify(u) !== JSON.stringify(i.value.getJSON()) && i.value.commands.setContent(N(u) || "");
+      i.value && JSON.stringify(u) !== JSON.stringify(i.value.getJSON()) && i.value.commands.setContent(E(u) || "");
     }
   );
   function f() {
@@ -218,7 +218,8 @@ const W = ["aria-pressed", "tabindex"], Q = ["aria-pressed", "tabindex"], X = ["
   for (const [o, n] of l)
     s[o] = n;
   return s;
-}, E = /* @__PURE__ */ H(Z, [["__scopeId", "data-v-8c490655"]]), ee = { class: "g-chat-input-wrap" }, te = ["disabled"], oe = /* @__PURE__ */ w({
+}, 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({
@@ -232,7 +233,7 @@ const W = ["aria-pressed", "tabindex"], Q = ["aria-pressed", "tabindex"], X = ["
   }),
   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 } = 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),
@@ -263,12 +264,12 @@ const W = ["aria-pressed", "tabindex"], Q = ["aria-pressed", "tabindex"], X = ["
       t();
     }
     return l({ focusInput: u }), (h, m) => (p(), b("div", ee, [
-      c(a) ? (p(), O(c(U), {
+      c(a) ? (p(), N(c(P), {
         key: 0,
         editor: c(a)
       }, {
         default: $(() => [
-          x(E, {
+          x(S, {
             editor: c(a),
             class: "bubble-menu"
           }, null, 8, ["editor"])
@@ -300,7 +301,8 @@ const W = ["aria-pressed", "tabindex"], Q = ["aria-pressed", "tabindex"], X = ["
       ])], 8, te)
     ]));
   }
-}), ye = /* @__PURE__ */ H(oe, [["__scopeId", "data-v-45a4a5f2"]]), re = { class: "g-note-input-wrap" }, ne = /* @__PURE__ */ w({
+}), 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({
@@ -312,7 +314,7 @@ const W = ["aria-pressed", "tabindex"], Q = ["aria-pressed", "tabindex"], X = ["
   }),
   emits: ["update:modelValue"],
   setup(e, { expose: l }) {
-    const s = e, o = M(e, "modelValue"), { editor: n, focusEditor: r } = S({
+    const s = e, o = M(e, "modelValue"), { editor: n, focusEditor: r } = R({
       content: o,
       placeholder: v(() => s.placeholder),
       label: v(() => s.label)
@@ -320,8 +322,8 @@ const W = ["aria-pressed", "tabindex"], Q = ["aria-pressed", "tabindex"], X = ["
     function a() {
       r();
     }
-    return l({ focusInput: a }), (t, i) => (p(), b("div", re, [
-      x(E, {
+    return l({ focusInput: a }), (t, i) => (p(), b("div", ne, [
+      x(S, {
         editor: c(n),
         class: "toolbar"
       }, null, 8, ["editor"]),
@@ -331,19 +333,19 @@ const W = ["aria-pressed", "tabindex"], Q = ["aria-pressed", "tabindex"], X = ["
       }, null, 8, ["editor"])
     ]));
   }
-}), ke = /* @__PURE__ */ H(ne, [["__scopeId", "data-v-c2d30b96"]]), ie = [I, T, B, A, z, R];
-function se(e) {
+}), Me = /* @__PURE__ */ H(se, [["__scopeId", "data-v-ebd8cfef"]]), ae = [I, T, B, A, _, z];
+function le(e) {
   const l = C("");
-  D(() => {
+  O(() => {
     y(e, () => {
-      const o = G(e);
+      const o = D(e);
       if (!o || o.trim() === "")
         return "";
       try {
         const n = JSON.parse(o);
         let r = j(
           n,
-          ie
+          ae
         );
         l.value = r;
       } catch (n) {
@@ -354,31 +356,32 @@ function se(e) {
   const s = v(() => l.value === null);
   return { rendered: l, hasError: s };
 }
-const ae = { class: "g-rich-text-content-wrap" }, le = {
+const ce = { class: "g-rich-text-content-wrap" }, de = {
   key: 0,
   role: "alert",
   class: "g-rich-text-content-error"
-}, ce = ["innerHTML"], de = /* @__PURE__ */ w({
+}, ue = ["innerHTML"], fe = {}, pe = /* @__PURE__ */ w({
+  ...fe,
   __name: "GRichTextContent",
   props: {
     error: {},
     content: {}
   },
   setup(e) {
-    const s = J(e, "content"), { rendered: o, hasError: n } = se(s);
-    return (r, a) => (p(), b("div", ae, [
-      c(n) ? (p(), b("div", le, K(e.error || "Failed to render content."), 1)) : c(o) ? (p(), b("div", {
+    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, ce)) : L("", !0)
+      }, null, 8, ue)) : L("", !0)
     ]));
   }
-}), Ce = /* @__PURE__ */ H(de, [["__scopeId", "data-v-923b2b7c"]]);
+}), Ve = /* @__PURE__ */ H(pe, [["__scopeId", "data-v-68026e47"]]);
 export {
-  ye as G,
-  ke as a,
-  Ce as b,
-  se as u
+  Le as G,
+  Me as a,
+  Ve as b,
+  le as u
 };
-//# sourceMappingURL=main-Bh1IF4ob.js.map
+//# sourceMappingURL=main-BRxFghDA.js.map

package/dist/main-BRxFghDA.js.map

@@ -0,0 +1 @@
+{"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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"}

package/dist/plugin.js

@@ -1,4 +1,4 @@
-import { G as o, a as n, b as p } from "./main-Bh1IF4ob.js";
+import { G as o, a as n, b as p } from "./main-BRxFghDA.js";
 import "vue";
 import "@tiptap/extension-document";
 import "@tiptap/extension-paragraph";

package/package.json

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

package/dist/main-Bh1IF4ob.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"main-Bh1IF4ob.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\" setup>\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 */\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\ninterface Props {\n    /**\n     * Placeholder text\n     */\n    placeholder?: string;\n    /**\n     * Disabled\n     */\n    disabled?: boolean;\n    /**\n     * Maximum number of rows\n     */\n    maxRows?: number;\n    /**\n     * Accessible label\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\" setup>\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 */\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\ninterface Props {\n    /**\n     * Placeholder text\n     */\n    placeholder?: string;\n    /**\n     * Accessible label\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 setup 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 */\nimport { toRef } from \"vue\";\nimport { useRichTextRenderer } from \"../composables/useRichTextRenderer\";\n\ninterface Props {\n    /**\n     * Error message when rendering fails\n     */\n    error?: string;\n\n    // JSON-encoded tiptap content string to render.\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","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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"}