@gxp-dev/mod-ui 2.0.0 → 2.0.1

package/dist/components/compositions/elements/editor/MarkdownEditor.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"MarkdownEditor.vue2.js","sources":["../../../../../src/components/compositions/elements/editor/MarkdownEditor.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven markdown editor composition. Two-pane: editable source on\n * the left, naive markdown preview on the right. The previewer supports\n * bold, italics, headings, links, inline code, and lists — enough to be\n * useful as a draft tool. Heavier syntax (tables, footnotes, code-fence\n * highlighting) is left to a follow-up.\n *\n *   <MarkdownEditor v-model=\"body\" label=\"Body\" />\n */\nimport { computed } from \"vue\"\nimport { FieldFrame } from \"@/components/ui/field-frame\"\n\nexport interface MarkdownEditorProps {\n  modelValue?: string | null\n  id?: string\n  name?: string\n  label?: string\n  hideLabel?: boolean\n  placeholder?: string\n  required?: boolean\n  readonly?: boolean\n  disabled?: boolean\n  helpText?: string\n  errors?: string[]\n  rows?: number\n}\n\nwithDefaults(defineProps<MarkdownEditorProps>(), {\n  errors: () => [],\n  rows: 12,\n})\n\nconst model = defineModel<string | null>(\"modelValue\")\n\nconst source = computed<string>(() => model.value ?? \"\")\n\nfunction onInput(event: Event): void {\n  const target = event.target as HTMLTextAreaElement | null\n  model.value = target?.value ?? \"\"\n}\n\nconst previewHtml = computed<string>(() => renderMarkdown(source.value))\n\nfunction renderMarkdown(input: string): string {\n  if (!input) {\n    return \"\"\n  }\n  let html = escapeHtml(input)\n  // Headings (h1..h6) — must run before other line-level rules.\n  html = html.replace(/^######\\s+(.+)$/gm, \"<h6>$1</h6>\")\n  html = html.replace(/^#####\\s+(.+)$/gm, \"<h5>$1</h5>\")\n  html = html.replace(/^####\\s+(.+)$/gm, \"<h4>$1</h4>\")\n  html = html.replace(/^###\\s+(.+)$/gm, \"<h3>$1</h3>\")\n  html = html.replace(/^##\\s+(.+)$/gm, \"<h2>$1</h2>\")\n  html = html.replace(/^#\\s+(.+)$/gm, \"<h1>$1</h1>\")\n  // Bold + italic (greedy bold first, then italic).\n  html = html.replace(/\\*\\*(.+?)\\*\\*/g, \"<strong>$1</strong>\")\n  html = html.replace(/\\*(.+?)\\*/g, \"<em>$1</em>\")\n  // Inline code.\n  html = html.replace(/`([^`]+)`/g, \"<code>$1</code>\")\n  // Links [text](url).\n  html = html.replace(\n    /\\[([^\\]]+)\\]\\(([^)]+)\\)/g,\n    '<a href=\"$2\" rel=\"noopener noreferrer\" class=\"underline\">$1</a>',\n  )\n  // Unordered lists (consecutive lines starting with - or *).\n  html = html.replace(/(^|\\n)([-*])\\s+(.+)/g, \"$1<li>$3</li>\")\n  html = html.replace(/(<li>.*<\\/li>)/gs, (m) => `<ul>${m}</ul>`)\n  // Paragraph wrap remaining bare lines.\n  html = html\n    .split(/\\n{2,}/)\n    .map((block) => {\n      const trimmed = block.trim()\n      if (!trimmed) {\n        return \"\"\n      }\n      if (/^<(h[1-6]|ul|ol|li|pre|code|a|strong|em)/.test(trimmed)) {\n        return trimmed\n      }\n      return `<p>${trimmed}</p>`\n    })\n    .join(\"\\n\")\n  return html\n}\n\nfunction escapeHtml(input: string): string {\n  return input\n    .replace(/&/g, \"&amp;\")\n    .replace(/</g, \"&lt;\")\n    .replace(/>/g, \"&gt;\")\n}\n\n</script>\n\n<template>\n  <FieldFrame\n    :label=\"label\"\n    :required=\"required\"\n    :hide-label=\"hideLabel\"\n    :for=\"id\"\n    :help-text=\"helpText\"\n    :errors=\"errors\"\n    data-testid=\"markdown-editor\"\n  >\n    <div class=\"grid grid-cols-1 gap-3 lg:grid-cols-2\">\n      <textarea\n        :id=\"id\"\n        :name=\"name ?? undefined\"\n        :placeholder=\"placeholder ?? 'Write markdown here...'\"\n        :readonly=\"readonly\"\n        :disabled=\"disabled\"\n        :required=\"required\"\n        :rows=\"rows\"\n        :value=\"source\"\n        :data-element-name=\"name ?? undefined\"\n        data-testid=\"markdown-editor-source\"\n        class=\"font-mono text-sm rounded-md border border-input bg-background px-3 py-2 shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50\"\n        :class=\"errors.length ? 'border-destructive ring-destructive' : ''\"\n        @input=\"onInput\"\n      />\n      <div\n        class=\"prose prose-sm max-w-none rounded-md border bg-muted/30 px-3 py-2 dark:prose-invert\"\n        data-testid=\"markdown-editor-preview\"\n        v-html=\"previewHtml\"\n      />\n    </div>\n  </FieldFrame>\n</template>\n"],"names":["model","_useModel","__props","source","computed","onInput","event","target","previewHtml","renderMarkdown","input","html","escapeHtml","m","block","trimmed","_createBlock","_unref","FieldFrame","_createElementVNode","_hoisted_1","_normalizeClass"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAiCA,UAAMA,IAAQC,EAA0BC,GAAC,YAAY,GAE/CC,IAASC,EAAiB,MAAMJ,EAAM,SAAS,EAAE;AAEvD,aAASK,EAAQC,GAAoB;AACnC,YAAMC,IAASD,EAAM;AACrB,MAAAN,EAAM,SAAQO,KAAA,gBAAAA,EAAQ,UAAS;AAAA,IACjC;AAEA,UAAMC,IAAcJ,EAAiB,MAAMK,EAAeN,EAAO,KAAK,CAAC;AAEvE,aAASM,EAAeC,GAAuB;AAC7C,UAAI,CAACA;AACH,eAAO;AAET,UAAIC,IAAOC,EAAWF,CAAK;AAE3B,aAAAC,IAAOA,EAAK,QAAQ,qBAAqB,aAAa,GACtDA,IAAOA,EAAK,QAAQ,oBAAoB,aAAa,GACrDA,IAAOA,EAAK,QAAQ,mBAAmB,aAAa,GACpDA,IAAOA,EAAK,QAAQ,kBAAkB,aAAa,GACnDA,IAAOA,EAAK,QAAQ,iBAAiB,aAAa,GAClDA,IAAOA,EAAK,QAAQ,gBAAgB,aAAa,GAEjDA,IAAOA,EAAK,QAAQ,kBAAkB,qBAAqB,GAC3DA,IAAOA,EAAK,QAAQ,cAAc,aAAa,GAE/CA,IAAOA,EAAK,QAAQ,cAAc,iBAAiB,GAEnDA,IAAOA,EAAK;AAAA,QACV;AAAA,QACA;AAAA,MAAA,GAGFA,IAAOA,EAAK,QAAQ,wBAAwB,eAAe,GAC3DA,IAAOA,EAAK,QAAQ,oBAAoB,CAACE,MAAM,OAAOA,CAAC,OAAO,GAE9DF,IAAOA,EACJ,MAAM,QAAQ,EACd,IAAI,CAACG,MAAU;AACd,cAAMC,IAAUD,EAAM,KAAA;AACtB,eAAKC,IAGD,2CAA2C,KAAKA,CAAO,IAClDA,IAEF,MAAMA,CAAO,SALX;AAAA,MAMX,CAAC,EACA,KAAK;AAAA,CAAI,GACLJ;AAAA,IACT;AAEA,aAASC,EAAWF,GAAuB;AACzC,aAAOA,EACJ,QAAQ,MAAM,OAAO,EACrB,QAAQ,MAAM,MAAM,EACpB,QAAQ,MAAM,MAAM;AAAA,IACzB;2BAKEM,EA+BaC,EAAAC,CAAA,GAAA;AAAA,MA9BV,OAAOhB,EAAA;AAAA,MACP,UAAUA,EAAA;AAAA,MACV,cAAYA,EAAA;AAAA,MACZ,KAAKA,EAAA;AAAA,MACL,aAAWA,EAAA;AAAA,MACX,QAAQA,EAAA;AAAA,MACT,eAAY;AAAA,IAAA;iBAEZ,MAqBM;AAAA,QArBNiB,EAqBM,OArBNC,GAqBM;AAAA,UApBJD,EAcE,YAAA;AAAA,YAbC,IAAIjB,EAAA;AAAA,YACJ,MAAMA,EAAA,QAAQ;AAAA,YACd,aAAaA,EAAA,eAAW;AAAA,YACxB,UAAUA,EAAA;AAAA,YACV,UAAUA,EAAA;AAAA,YACV,UAAUA,EAAA;AAAA,YACV,MAAMA,EAAA;AAAA,YACN,OAAOC,EAAA;AAAA,YACP,qBAAmBD,EAAA,QAAQ;AAAA,YAC5B,eAAY;AAAA,YACZ,OAAKmB,EAAA,CAAC,8MACEnB,EAAA,OAAO,SAAM,wCAAA,EAAA,CAAA;AAAA,YACpB,SAAAG;AAAA,UAAA;UAEHc,EAIE,OAAA;AAAA,YAHA,OAAM;AAAA,YACN,eAAY;AAAA,YACZ,WAAQX,EAAA;AAAA,UAAA;;;;;;;"}
+{"version":3,"file":"MarkdownEditor.vue2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/compositions/elements/editor/RichTextEditor.vue.d.ts

@@ -0,0 +1,26 @@
+export interface RichTextEditorProps {
+    modelValue?: string | null;
+    id?: string;
+    name?: string;
+    label?: string;
+    hideLabel?: boolean;
+    placeholder?: string;
+    required?: boolean;
+    readonly?: boolean;
+    disabled?: boolean;
+    helpText?: string;
+    errors?: string[];
+    minHeight?: string;
+    extensions?: unknown[];
+}
+declare const _default: import('vue').DefineComponent<RichTextEditorProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    "update:modelValue": (value: string) => any;
+}, string, import('vue').PublicProps, Readonly<RichTextEditorProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {
+    errors: string[];
+    minHeight: string;
+    extensions: unknown[];
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;
+//# sourceMappingURL=RichTextEditor.vue.d.ts.map

package/dist/components/compositions/elements/editor/RichTextEditor.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RichTextEditor.vue.d.ts","sourceRoot":"","sources":["../../../../../src/components/compositions/elements/editor/RichTextEditor.vue"],"names":[],"mappings":"AAyTA,MAAM,WAAW,mBAAmB;IAClC,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC1B,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,UAAU,CAAC,EAAE,OAAO,EAAE,CAAA;CACvB;;;;;;YAHU,MAAM,EAAE;eACL,MAAM;gBACL,OAAO,EAAE;;AA2UxB,wBASG"}

package/dist/components/compositions/elements/editor/RichTextEditor.vue.js

@@ -1,5 +1,265 @@
-import f from "./RichTextEditor.vue2.js";
+import { defineComponent as B, watch as m, onBeforeUnmount as H, computed as r, openBlock as s, createBlock as u, unref as d, withCtx as b, createElementVNode as h, normalizeClass as f, createElementBlock as C, Fragment as L, renderList as q, resolveDynamicComponent as w, normalizeStyle as E, createCommentVNode as V } from "vue";
+import { useEditor as z, EditorContent as S } from "@tiptap/vue-3";
+import I from "@tiptap/starter-kit";
+import { Bold as M, Italic as R, Strikethrough as T, Code as U, Heading1 as $, Heading2 as O, Heading3 as D, List as F, ListOrdered as N, Quote as P, Minus as _, Undo as K, Redo as Q } from "lucide-vue-next";
+import "../../../ui/button/index.js";
+import j from "../../../ui/field-frame/FieldFrame.vue.js";
+import { cn as G } from "../../../../lib/utils.js";
+import J from "../../../ui/button/Button.vue.js";
+const W = ["data-element-name"], ae = /* @__PURE__ */ B({
+  __name: "RichTextEditor",
+  props: {
+    modelValue: {},
+    id: {},
+    name: {},
+    label: {},
+    hideLabel: { type: Boolean },
+    placeholder: {},
+    required: { type: Boolean },
+    readonly: { type: Boolean },
+    disabled: { type: Boolean },
+    helpText: {},
+    errors: { default: () => [] },
+    minHeight: { default: "12rem" },
+    extensions: { default: () => [] }
+  },
+  emits: ["update:modelValue"],
+  setup(a, { emit: g }) {
+    const i = a, y = g, t = z({
+      content: i.modelValue ?? "",
+      editable: !(i.disabled || i.readonly),
+      extensions: [
+        I,
+        ...i.extensions
+      ],
+      onUpdate: ({ editor: e }) => {
+        y("update:modelValue", e.getHTML());
+      }
+    });
+    m(
+      () => i.modelValue,
+      (e) => {
+        const n = t.value;
+        if (!n)
+          return;
+        const l = e ?? "";
+        l !== n.getHTML() && n.commands.setContent(l, { emitUpdate: !1 });
+      }
+    ), m(
+      () => [i.disabled, i.readonly],
+      ([e, n]) => {
+        var l;
+        (l = t.value) == null || l.setEditable(!(e || n));
+      }
+    ), H(() => {
+      var e;
+      (e = t.value) == null || e.destroy();
+    });
+    const k = r(() => i.errors.length > 0), c = r(() => !!i.disabled), p = r(() => !!i.readonly), v = r(() => c.value || p.value), x = r(() => ({
+      minHeight: i.minHeight
+    }));
+    function o(e, n) {
+      const l = t.value;
+      return l ? n ? l.isActive(e, n) : l.isActive(e) : !1;
+    }
+    const A = r(() => [
+      {
+        key: "bold",
+        label: "Bold",
+        icon: M,
+        isActive: () => o("bold"),
+        run: () => {
+          var e;
+          return (e = t.value) == null ? void 0 : e.chain().focus().toggleBold().run();
+        }
+      },
+      {
+        key: "italic",
+        label: "Italic",
+        icon: R,
+        isActive: () => o("italic"),
+        run: () => {
+          var e;
+          return (e = t.value) == null ? void 0 : e.chain().focus().toggleItalic().run();
+        }
+      },
+      {
+        key: "strike",
+        label: "Strikethrough",
+        icon: T,
+        isActive: () => o("strike"),
+        run: () => {
+          var e;
+          return (e = t.value) == null ? void 0 : e.chain().focus().toggleStrike().run();
+        }
+      },
+      {
+        key: "code",
+        label: "Inline code",
+        icon: U,
+        isActive: () => o("code"),
+        run: () => {
+          var e;
+          return (e = t.value) == null ? void 0 : e.chain().focus().toggleCode().run();
+        }
+      },
+      {
+        key: "h1",
+        label: "Heading 1",
+        icon: $,
+        isActive: () => o("heading", { level: 1 }),
+        run: () => {
+          var e;
+          return (e = t.value) == null ? void 0 : e.chain().focus().toggleHeading({ level: 1 }).run();
+        }
+      },
+      {
+        key: "h2",
+        label: "Heading 2",
+        icon: O,
+        isActive: () => o("heading", { level: 2 }),
+        run: () => {
+          var e;
+          return (e = t.value) == null ? void 0 : e.chain().focus().toggleHeading({ level: 2 }).run();
+        }
+      },
+      {
+        key: "h3",
+        label: "Heading 3",
+        icon: D,
+        isActive: () => o("heading", { level: 3 }),
+        run: () => {
+          var e;
+          return (e = t.value) == null ? void 0 : e.chain().focus().toggleHeading({ level: 3 }).run();
+        }
+      },
+      {
+        key: "bullet-list",
+        label: "Bullet list",
+        icon: F,
+        isActive: () => o("bulletList"),
+        run: () => {
+          var e;
+          return (e = t.value) == null ? void 0 : e.chain().focus().toggleBulletList().run();
+        }
+      },
+      {
+        key: "ordered-list",
+        label: "Ordered list",
+        icon: N,
+        isActive: () => o("orderedList"),
+        run: () => {
+          var e;
+          return (e = t.value) == null ? void 0 : e.chain().focus().toggleOrderedList().run();
+        }
+      },
+      {
+        key: "blockquote",
+        label: "Blockquote",
+        icon: P,
+        isActive: () => o("blockquote"),
+        run: () => {
+          var e;
+          return (e = t.value) == null ? void 0 : e.chain().focus().toggleBlockquote().run();
+        }
+      },
+      {
+        key: "horizontal-rule",
+        label: "Horizontal rule",
+        icon: _,
+        isActive: () => !1,
+        run: () => {
+          var e;
+          return (e = t.value) == null ? void 0 : e.chain().focus().setHorizontalRule().run();
+        }
+      },
+      {
+        key: "undo",
+        label: "Undo",
+        icon: K,
+        isActive: () => !1,
+        run: () => {
+          var e;
+          return (e = t.value) == null ? void 0 : e.chain().focus().undo().run();
+        },
+        disabled: () => {
+          var e;
+          return !((e = t.value) != null && e.can().chain().focus().undo().run());
+        }
+      },
+      {
+        key: "redo",
+        label: "Redo",
+        icon: Q,
+        isActive: () => !1,
+        run: () => {
+          var e;
+          return (e = t.value) == null ? void 0 : e.chain().focus().redo().run();
+        },
+        disabled: () => {
+          var e;
+          return !((e = t.value) != null && e.can().chain().focus().redo().run());
+        }
+      }
+    ]);
+    return (e, n) => (s(), u(d(j), {
+      label: a.label,
+      required: a.required,
+      "hide-label": a.hideLabel,
+      for: a.id,
+      "help-text": a.helpText,
+      errors: a.errors,
+      "data-testid": "rich-text-editor"
+    }, {
+      default: b(() => [
+        h("div", {
+          class: f(
+            d(G)(
+              "rounded-md border border-input bg-background shadow-sm overflow-hidden",
+              k.value ? "border-destructive ring-1 ring-destructive" : "",
+              c.value ? "opacity-60" : ""
+            )
+          ),
+          "data-element-name": a.name ?? void 0
+        }, [
+          h("div", {
+            class: f(["flex flex-wrap items-center gap-1 border-b bg-muted/30 px-2 py-1", v.value ? "pointer-events-none opacity-50" : ""]),
+            role: "toolbar",
+            "aria-label": "Formatting",
+            "data-testid": "rich-text-editor-toolbar"
+          }, [
+            (s(!0), C(L, null, q(A.value, (l) => (s(), u(d(J), {
+              key: l.key,
+              type: "button",
+              size: "icon-sm",
+              variant: l.isActive() ? "secondary" : "ghost",
+              disabled: v.value || (l.disabled ? l.disabled() : !1),
+              "aria-label": l.label,
+              title: l.label,
+              "data-testid": `rich-text-editor-toolbar-${l.key}`,
+              "aria-pressed": l.isActive(),
+              onClick: (X) => l.run()
+            }, {
+              default: b(() => [
+                (s(), u(w(l.icon)))
+              ]),
+              _: 2
+            }, 1032, ["variant", "disabled", "aria-label", "title", "data-testid", "aria-pressed", "onClick"]))), 128))
+          ], 2),
+          d(t) ? (s(), u(d(S), {
+            key: 0,
+            editor: d(t),
+            style: E(x.value),
+            class: "prose prose-sm max-w-none px-3 py-2 focus-within:outline-none dark:prose-invert [&_.ProseMirror]:min-h-full [&_.ProseMirror]:outline-none",
+            "data-testid": "rich-text-editor-content"
+          }, null, 8, ["editor", "style"])) : V("", !0)
+        ], 10, W)
+      ]),
+      _: 1
+    }, 8, ["label", "required", "hide-label", "for", "help-text", "errors"]));
+  }
+});
 export {
-  f as default
+  ae as default
 };
 //# sourceMappingURL=RichTextEditor.vue.js.map

package/dist/components/compositions/elements/editor/RichTextEditor.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"RichTextEditor.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"RichTextEditor.vue.js","sources":["../../../../../src/components/compositions/elements/editor/RichTextEditor.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven rich-text editor composition. Wraps Tiptap (`@tiptap/vue-3`\n * + StarterKit) inside a FieldFrame, exposing the standard input chrome:\n * label / required / helpText / errors / hideLabel.\n *\n * The model is HTML — emits `update:modelValue` with `editor.getHTML()` on\n * every internal change.\n *\n *   <RichTextEditor v-model=\"body\" label=\"Body\" />\n */\nimport { computed, onBeforeUnmount, watch } from \"vue\"\nimport { EditorContent, useEditor } from \"@tiptap/vue-3\"\nimport type { AnyExtension } from \"@tiptap/vue-3\"\nimport StarterKit from \"@tiptap/starter-kit\"\nimport {\n  Bold,\n  Code,\n  Heading1,\n  Heading2,\n  Heading3,\n  Italic,\n  List,\n  ListOrdered,\n  Minus,\n  Quote,\n  Redo,\n  Strikethrough,\n  Undo,\n} from \"lucide-vue-next\"\nimport { Button } from \"@/components/ui/button\"\nimport { FieldFrame } from \"@/components/ui/field-frame\"\nimport { cn } from \"@/lib/utils\"\n\nexport interface RichTextEditorProps {\n  modelValue?: string | null\n  id?: string\n  name?: string\n  label?: string\n  hideLabel?: boolean\n  placeholder?: string\n  required?: boolean\n  readonly?: boolean\n  disabled?: boolean\n  helpText?: string\n  errors?: string[]\n  minHeight?: string\n  extensions?: unknown[]\n}\n\nconst props = withDefaults(defineProps<RichTextEditorProps>(), {\n  errors: () => [],\n  minHeight: \"12rem\",\n  extensions: () => [],\n})\n\nconst emit = defineEmits<{\n  (e: \"update:modelValue\", value: string): void\n}>()\n\nconst editor = useEditor({\n  content: props.modelValue ?? \"\",\n  editable: !(props.disabled || props.readonly),\n  extensions: [\n    StarterKit,\n    ...(props.extensions as AnyExtension[]),\n  ],\n  onUpdate: ({ editor }) => {\n    emit(\"update:modelValue\", editor.getHTML())\n  },\n})\n\nwatch(\n  () => props.modelValue,\n  (value) => {\n    const instance = editor.value\n    if (!instance) {\n      return\n    }\n    const next = value ?? \"\"\n    if (next === instance.getHTML()) {\n      return\n    }\n    instance.commands.setContent(next, { emitUpdate: false })\n  },\n)\n\nwatch(\n  () => [props.disabled, props.readonly] as const,\n  ([disabled, readonly]) => {\n    editor.value?.setEditable(!(disabled || readonly))\n  },\n)\n\nonBeforeUnmount(() => {\n  editor.value?.destroy()\n})\n\nconst hasErrors = computed<boolean>(() => props.errors.length > 0)\nconst isDisabled = computed<boolean>(() => Boolean(props.disabled))\nconst isReadonly = computed<boolean>(() => Boolean(props.readonly))\nconst isInert = computed<boolean>(() => isDisabled.value || isReadonly.value)\n\nconst contentStyle = computed<Record<string, string>>(() => ({\n  minHeight: props.minHeight,\n}))\n\ninterface ToolbarAction {\n  key: string\n  label: string\n  icon: typeof Bold\n  isActive: () => boolean\n  run: () => void\n  disabled?: () => boolean\n}\n\nfunction active(name: string, attrs?: Record<string, unknown>): boolean {\n  const instance = editor.value\n  if (!instance) {\n    return false\n  }\n  return attrs ? instance.isActive(name, attrs) : instance.isActive(name)\n}\n\nconst toolbarActions = computed<ToolbarAction[]>(() => [\n  {\n    key: \"bold\",\n    label: \"Bold\",\n    icon: Bold,\n    isActive: () => active(\"bold\"),\n    run: () => editor.value?.chain().focus().toggleBold().run(),\n  },\n  {\n    key: \"italic\",\n    label: \"Italic\",\n    icon: Italic,\n    isActive: () => active(\"italic\"),\n    run: () => editor.value?.chain().focus().toggleItalic().run(),\n  },\n  {\n    key: \"strike\",\n    label: \"Strikethrough\",\n    icon: Strikethrough,\n    isActive: () => active(\"strike\"),\n    run: () => editor.value?.chain().focus().toggleStrike().run(),\n  },\n  {\n    key: \"code\",\n    label: \"Inline code\",\n    icon: Code,\n    isActive: () => active(\"code\"),\n    run: () => editor.value?.chain().focus().toggleCode().run(),\n  },\n  {\n    key: \"h1\",\n    label: \"Heading 1\",\n    icon: Heading1,\n    isActive: () => active(\"heading\", { level: 1 }),\n    run: () =>\n      editor.value?.chain().focus().toggleHeading({ level: 1 }).run(),\n  },\n  {\n    key: \"h2\",\n    label: \"Heading 2\",\n    icon: Heading2,\n    isActive: () => active(\"heading\", { level: 2 }),\n    run: () =>\n      editor.value?.chain().focus().toggleHeading({ level: 2 }).run(),\n  },\n  {\n    key: \"h3\",\n    label: \"Heading 3\",\n    icon: Heading3,\n    isActive: () => active(\"heading\", { level: 3 }),\n    run: () =>\n      editor.value?.chain().focus().toggleHeading({ level: 3 }).run(),\n  },\n  {\n    key: \"bullet-list\",\n    label: \"Bullet list\",\n    icon: List,\n    isActive: () => active(\"bulletList\"),\n    run: () => editor.value?.chain().focus().toggleBulletList().run(),\n  },\n  {\n    key: \"ordered-list\",\n    label: \"Ordered list\",\n    icon: ListOrdered,\n    isActive: () => active(\"orderedList\"),\n    run: () => editor.value?.chain().focus().toggleOrderedList().run(),\n  },\n  {\n    key: \"blockquote\",\n    label: \"Blockquote\",\n    icon: Quote,\n    isActive: () => active(\"blockquote\"),\n    run: () => editor.value?.chain().focus().toggleBlockquote().run(),\n  },\n  {\n    key: \"horizontal-rule\",\n    label: \"Horizontal rule\",\n    icon: Minus,\n    isActive: () => false,\n    run: () => editor.value?.chain().focus().setHorizontalRule().run(),\n  },\n  {\n    key: \"undo\",\n    label: \"Undo\",\n    icon: Undo,\n    isActive: () => false,\n    run: () => editor.value?.chain().focus().undo().run(),\n    disabled: () => !editor.value?.can().chain().focus().undo().run(),\n  },\n  {\n    key: \"redo\",\n    label: \"Redo\",\n    icon: Redo,\n    isActive: () => false,\n    run: () => editor.value?.chain().focus().redo().run(),\n    disabled: () => !editor.value?.can().chain().focus().redo().run(),\n  },\n])\n</script>\n\n<template>\n  <FieldFrame\n    :label=\"label\"\n    :required=\"required\"\n    :hide-label=\"hideLabel\"\n    :for=\"id\"\n    :help-text=\"helpText\"\n    :errors=\"errors\"\n    data-testid=\"rich-text-editor\"\n  >\n    <div\n      :class=\"\n        cn(\n          'rounded-md border border-input bg-background shadow-sm overflow-hidden',\n          hasErrors ? 'border-destructive ring-1 ring-destructive' : '',\n          isDisabled ? 'opacity-60' : '',\n        )\n      \"\n      :data-element-name=\"name ?? undefined\"\n    >\n      <div\n        class=\"flex flex-wrap items-center gap-1 border-b bg-muted/30 px-2 py-1\"\n        :class=\"isInert ? 'pointer-events-none opacity-50' : ''\"\n        role=\"toolbar\"\n        aria-label=\"Formatting\"\n        data-testid=\"rich-text-editor-toolbar\"\n      >\n        <Button\n          v-for=\"action in toolbarActions\"\n          :key=\"action.key\"\n          type=\"button\"\n          size=\"icon-sm\"\n          :variant=\"action.isActive() ? 'secondary' : 'ghost'\"\n          :disabled=\"isInert || (action.disabled ? action.disabled() : false)\"\n          :aria-label=\"action.label\"\n          :title=\"action.label\"\n          :data-testid=\"`rich-text-editor-toolbar-${action.key}`\"\n          :aria-pressed=\"action.isActive()\"\n          @click=\"action.run()\"\n        >\n          <component :is=\"action.icon\" />\n        </Button>\n      </div>\n\n      <EditorContent\n        v-if=\"editor\"\n        :editor=\"editor\"\n        :style=\"contentStyle\"\n        class=\"prose prose-sm max-w-none px-3 py-2 focus-within:outline-none dark:prose-invert [&_.ProseMirror]:min-h-full [&_.ProseMirror]:outline-none\"\n        data-testid=\"rich-text-editor-content\"\n      />\n    </div>\n  </FieldFrame>\n</template>\n"],"names":["props","__props","emit","__emit","editor","useEditor","StarterKit","watch","value","instance","next","disabled","readonly","_a","onBeforeUnmount","hasErrors","computed","isDisabled","isReadonly","isInert","contentStyle","active","name","attrs","toolbarActions","Bold","Italic","Strikethrough","Code","Heading1","Heading2","Heading3","List","ListOrdered","Quote","Minus","Undo","Redo","_createBlock","_unref","FieldFrame","_createElementVNode","_normalizeClass","cn","_createElementBlock","_Fragment","_renderList","action","Button","$event","_resolveDynamicComponent","EditorContent"],"mappings":"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"}

package/dist/components/compositions/elements/editor/RichTextEditor.vue2.js

@@ -1,265 +1,5 @@
-import { defineComponent as B, watch as m, onBeforeUnmount as H, computed as r, openBlock as s, createBlock as u, unref as d, withCtx as b, createElementVNode as h, normalizeClass as f, createElementBlock as C, Fragment as L, renderList as q, resolveDynamicComponent as w, normalizeStyle as E, createCommentVNode as V } from "vue";
-import { useEditor as z, EditorContent as S } from "@tiptap/vue-3";
-import I from "@tiptap/starter-kit";
-import { Bold as M, Italic as R, Strikethrough as T, Code as U, Heading1 as $, Heading2 as O, Heading3 as D, List as F, ListOrdered as N, Quote as P, Minus as _, Undo as K, Redo as Q } from "lucide-vue-next";
-import "../../../ui/button/index.js";
-import j from "../../../ui/field-frame/FieldFrame.vue.js";
-import { cn as G } from "../../../../lib/utils.js";
-import J from "../../../ui/button/Button.vue.js";
-const W = ["data-element-name"], ae = /* @__PURE__ */ B({
-  __name: "RichTextEditor",
-  props: {
-    modelValue: {},
-    id: {},
-    name: {},
-    label: {},
-    hideLabel: { type: Boolean },
-    placeholder: {},
-    required: { type: Boolean },
-    readonly: { type: Boolean },
-    disabled: { type: Boolean },
-    helpText: {},
-    errors: { default: () => [] },
-    minHeight: { default: "12rem" },
-    extensions: { default: () => [] }
-  },
-  emits: ["update:modelValue"],
-  setup(a, { emit: g }) {
-    const i = a, y = g, t = z({
-      content: i.modelValue ?? "",
-      editable: !(i.disabled || i.readonly),
-      extensions: [
-        I,
-        ...i.extensions
-      ],
-      onUpdate: ({ editor: e }) => {
-        y("update:modelValue", e.getHTML());
-      }
-    });
-    m(
-      () => i.modelValue,
-      (e) => {
-        const n = t.value;
-        if (!n)
-          return;
-        const l = e ?? "";
-        l !== n.getHTML() && n.commands.setContent(l, { emitUpdate: !1 });
-      }
-    ), m(
-      () => [i.disabled, i.readonly],
-      ([e, n]) => {
-        var l;
-        (l = t.value) == null || l.setEditable(!(e || n));
-      }
-    ), H(() => {
-      var e;
-      (e = t.value) == null || e.destroy();
-    });
-    const k = r(() => i.errors.length > 0), c = r(() => !!i.disabled), p = r(() => !!i.readonly), v = r(() => c.value || p.value), x = r(() => ({
-      minHeight: i.minHeight
-    }));
-    function o(e, n) {
-      const l = t.value;
-      return l ? n ? l.isActive(e, n) : l.isActive(e) : !1;
-    }
-    const A = r(() => [
-      {
-        key: "bold",
-        label: "Bold",
-        icon: M,
-        isActive: () => o("bold"),
-        run: () => {
-          var e;
-          return (e = t.value) == null ? void 0 : e.chain().focus().toggleBold().run();
-        }
-      },
-      {
-        key: "italic",
-        label: "Italic",
-        icon: R,
-        isActive: () => o("italic"),
-        run: () => {
-          var e;
-          return (e = t.value) == null ? void 0 : e.chain().focus().toggleItalic().run();
-        }
-      },
-      {
-        key: "strike",
-        label: "Strikethrough",
-        icon: T,
-        isActive: () => o("strike"),
-        run: () => {
-          var e;
-          return (e = t.value) == null ? void 0 : e.chain().focus().toggleStrike().run();
-        }
-      },
-      {
-        key: "code",
-        label: "Inline code",
-        icon: U,
-        isActive: () => o("code"),
-        run: () => {
-          var e;
-          return (e = t.value) == null ? void 0 : e.chain().focus().toggleCode().run();
-        }
-      },
-      {
-        key: "h1",
-        label: "Heading 1",
-        icon: $,
-        isActive: () => o("heading", { level: 1 }),
-        run: () => {
-          var e;
-          return (e = t.value) == null ? void 0 : e.chain().focus().toggleHeading({ level: 1 }).run();
-        }
-      },
-      {
-        key: "h2",
-        label: "Heading 2",
-        icon: O,
-        isActive: () => o("heading", { level: 2 }),
-        run: () => {
-          var e;
-          return (e = t.value) == null ? void 0 : e.chain().focus().toggleHeading({ level: 2 }).run();
-        }
-      },
-      {
-        key: "h3",
-        label: "Heading 3",
-        icon: D,
-        isActive: () => o("heading", { level: 3 }),
-        run: () => {
-          var e;
-          return (e = t.value) == null ? void 0 : e.chain().focus().toggleHeading({ level: 3 }).run();
-        }
-      },
-      {
-        key: "bullet-list",
-        label: "Bullet list",
-        icon: F,
-        isActive: () => o("bulletList"),
-        run: () => {
-          var e;
-          return (e = t.value) == null ? void 0 : e.chain().focus().toggleBulletList().run();
-        }
-      },
-      {
-        key: "ordered-list",
-        label: "Ordered list",
-        icon: N,
-        isActive: () => o("orderedList"),
-        run: () => {
-          var e;
-          return (e = t.value) == null ? void 0 : e.chain().focus().toggleOrderedList().run();
-        }
-      },
-      {
-        key: "blockquote",
-        label: "Blockquote",
-        icon: P,
-        isActive: () => o("blockquote"),
-        run: () => {
-          var e;
-          return (e = t.value) == null ? void 0 : e.chain().focus().toggleBlockquote().run();
-        }
-      },
-      {
-        key: "horizontal-rule",
-        label: "Horizontal rule",
-        icon: _,
-        isActive: () => !1,
-        run: () => {
-          var e;
-          return (e = t.value) == null ? void 0 : e.chain().focus().setHorizontalRule().run();
-        }
-      },
-      {
-        key: "undo",
-        label: "Undo",
-        icon: K,
-        isActive: () => !1,
-        run: () => {
-          var e;
-          return (e = t.value) == null ? void 0 : e.chain().focus().undo().run();
-        },
-        disabled: () => {
-          var e;
-          return !((e = t.value) != null && e.can().chain().focus().undo().run());
-        }
-      },
-      {
-        key: "redo",
-        label: "Redo",
-        icon: Q,
-        isActive: () => !1,
-        run: () => {
-          var e;
-          return (e = t.value) == null ? void 0 : e.chain().focus().redo().run();
-        },
-        disabled: () => {
-          var e;
-          return !((e = t.value) != null && e.can().chain().focus().redo().run());
-        }
-      }
-    ]);
-    return (e, n) => (s(), u(d(j), {
-      label: a.label,
-      required: a.required,
-      "hide-label": a.hideLabel,
-      for: a.id,
-      "help-text": a.helpText,
-      errors: a.errors,
-      "data-testid": "rich-text-editor"
-    }, {
-      default: b(() => [
-        h("div", {
-          class: f(
-            d(G)(
-              "rounded-md border border-input bg-background shadow-sm overflow-hidden",
-              k.value ? "border-destructive ring-1 ring-destructive" : "",
-              c.value ? "opacity-60" : ""
-            )
-          ),
-          "data-element-name": a.name ?? void 0
-        }, [
-          h("div", {
-            class: f(["flex flex-wrap items-center gap-1 border-b bg-muted/30 px-2 py-1", v.value ? "pointer-events-none opacity-50" : ""]),
-            role: "toolbar",
-            "aria-label": "Formatting",
-            "data-testid": "rich-text-editor-toolbar"
-          }, [
-            (s(!0), C(L, null, q(A.value, (l) => (s(), u(d(J), {
-              key: l.key,
-              type: "button",
-              size: "icon-sm",
-              variant: l.isActive() ? "secondary" : "ghost",
-              disabled: v.value || (l.disabled ? l.disabled() : !1),
-              "aria-label": l.label,
-              title: l.label,
-              "data-testid": `rich-text-editor-toolbar-${l.key}`,
-              "aria-pressed": l.isActive(),
-              onClick: (X) => l.run()
-            }, {
-              default: b(() => [
-                (s(), u(w(l.icon)))
-              ]),
-              _: 2
-            }, 1032, ["variant", "disabled", "aria-label", "title", "data-testid", "aria-pressed", "onClick"]))), 128))
-          ], 2),
-          d(t) ? (s(), u(d(S), {
-            key: 0,
-            editor: d(t),
-            style: E(x.value),
-            class: "prose prose-sm max-w-none px-3 py-2 focus-within:outline-none dark:prose-invert [&_.ProseMirror]:min-h-full [&_.ProseMirror]:outline-none",
-            "data-testid": "rich-text-editor-content"
-          }, null, 8, ["editor", "style"])) : V("", !0)
-        ], 10, W)
-      ]),
-      _: 1
-    }, 8, ["label", "required", "hide-label", "for", "help-text", "errors"]));
-  }
-});
+import f from "./RichTextEditor.vue.js";
 export {
-  ae as default
+  f as default
 };
 //# sourceMappingURL=RichTextEditor.vue2.js.map

package/dist/components/compositions/elements/editor/RichTextEditor.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"RichTextEditor.vue2.js","sources":["../../../../../src/components/compositions/elements/editor/RichTextEditor.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven rich-text editor composition. Wraps Tiptap (`@tiptap/vue-3`\n * + StarterKit) inside a FieldFrame, exposing the standard input chrome:\n * label / required / helpText / errors / hideLabel.\n *\n * The model is HTML — emits `update:modelValue` with `editor.getHTML()` on\n * every internal change.\n *\n *   <RichTextEditor v-model=\"body\" label=\"Body\" />\n */\nimport { computed, onBeforeUnmount, watch } from \"vue\"\nimport { EditorContent, useEditor } from \"@tiptap/vue-3\"\nimport type { AnyExtension } from \"@tiptap/vue-3\"\nimport StarterKit from \"@tiptap/starter-kit\"\nimport {\n  Bold,\n  Code,\n  Heading1,\n  Heading2,\n  Heading3,\n  Italic,\n  List,\n  ListOrdered,\n  Minus,\n  Quote,\n  Redo,\n  Strikethrough,\n  Undo,\n} from \"lucide-vue-next\"\nimport { Button } from \"@/components/ui/button\"\nimport { FieldFrame } from \"@/components/ui/field-frame\"\nimport { cn } from \"@/lib/utils\"\n\nexport interface RichTextEditorProps {\n  modelValue?: string | null\n  id?: string\n  name?: string\n  label?: string\n  hideLabel?: boolean\n  placeholder?: string\n  required?: boolean\n  readonly?: boolean\n  disabled?: boolean\n  helpText?: string\n  errors?: string[]\n  minHeight?: string\n  extensions?: unknown[]\n}\n\nconst props = withDefaults(defineProps<RichTextEditorProps>(), {\n  errors: () => [],\n  minHeight: \"12rem\",\n  extensions: () => [],\n})\n\nconst emit = defineEmits<{\n  (e: \"update:modelValue\", value: string): void\n}>()\n\nconst editor = useEditor({\n  content: props.modelValue ?? \"\",\n  editable: !(props.disabled || props.readonly),\n  extensions: [\n    StarterKit,\n    ...(props.extensions as AnyExtension[]),\n  ],\n  onUpdate: ({ editor }) => {\n    emit(\"update:modelValue\", editor.getHTML())\n  },\n})\n\nwatch(\n  () => props.modelValue,\n  (value) => {\n    const instance = editor.value\n    if (!instance) {\n      return\n    }\n    const next = value ?? \"\"\n    if (next === instance.getHTML()) {\n      return\n    }\n    instance.commands.setContent(next, { emitUpdate: false })\n  },\n)\n\nwatch(\n  () => [props.disabled, props.readonly] as const,\n  ([disabled, readonly]) => {\n    editor.value?.setEditable(!(disabled || readonly))\n  },\n)\n\nonBeforeUnmount(() => {\n  editor.value?.destroy()\n})\n\nconst hasErrors = computed<boolean>(() => props.errors.length > 0)\nconst isDisabled = computed<boolean>(() => Boolean(props.disabled))\nconst isReadonly = computed<boolean>(() => Boolean(props.readonly))\nconst isInert = computed<boolean>(() => isDisabled.value || isReadonly.value)\n\nconst contentStyle = computed<Record<string, string>>(() => ({\n  minHeight: props.minHeight,\n}))\n\ninterface ToolbarAction {\n  key: string\n  label: string\n  icon: typeof Bold\n  isActive: () => boolean\n  run: () => void\n  disabled?: () => boolean\n}\n\nfunction active(name: string, attrs?: Record<string, unknown>): boolean {\n  const instance = editor.value\n  if (!instance) {\n    return false\n  }\n  return attrs ? instance.isActive(name, attrs) : instance.isActive(name)\n}\n\nconst toolbarActions = computed<ToolbarAction[]>(() => [\n  {\n    key: \"bold\",\n    label: \"Bold\",\n    icon: Bold,\n    isActive: () => active(\"bold\"),\n    run: () => editor.value?.chain().focus().toggleBold().run(),\n  },\n  {\n    key: \"italic\",\n    label: \"Italic\",\n    icon: Italic,\n    isActive: () => active(\"italic\"),\n    run: () => editor.value?.chain().focus().toggleItalic().run(),\n  },\n  {\n    key: \"strike\",\n    label: \"Strikethrough\",\n    icon: Strikethrough,\n    isActive: () => active(\"strike\"),\n    run: () => editor.value?.chain().focus().toggleStrike().run(),\n  },\n  {\n    key: \"code\",\n    label: \"Inline code\",\n    icon: Code,\n    isActive: () => active(\"code\"),\n    run: () => editor.value?.chain().focus().toggleCode().run(),\n  },\n  {\n    key: \"h1\",\n    label: \"Heading 1\",\n    icon: Heading1,\n    isActive: () => active(\"heading\", { level: 1 }),\n    run: () =>\n      editor.value?.chain().focus().toggleHeading({ level: 1 }).run(),\n  },\n  {\n    key: \"h2\",\n    label: \"Heading 2\",\n    icon: Heading2,\n    isActive: () => active(\"heading\", { level: 2 }),\n    run: () =>\n      editor.value?.chain().focus().toggleHeading({ level: 2 }).run(),\n  },\n  {\n    key: \"h3\",\n    label: \"Heading 3\",\n    icon: Heading3,\n    isActive: () => active(\"heading\", { level: 3 }),\n    run: () =>\n      editor.value?.chain().focus().toggleHeading({ level: 3 }).run(),\n  },\n  {\n    key: \"bullet-list\",\n    label: \"Bullet list\",\n    icon: List,\n    isActive: () => active(\"bulletList\"),\n    run: () => editor.value?.chain().focus().toggleBulletList().run(),\n  },\n  {\n    key: \"ordered-list\",\n    label: \"Ordered list\",\n    icon: ListOrdered,\n    isActive: () => active(\"orderedList\"),\n    run: () => editor.value?.chain().focus().toggleOrderedList().run(),\n  },\n  {\n    key: \"blockquote\",\n    label: \"Blockquote\",\n    icon: Quote,\n    isActive: () => active(\"blockquote\"),\n    run: () => editor.value?.chain().focus().toggleBlockquote().run(),\n  },\n  {\n    key: \"horizontal-rule\",\n    label: \"Horizontal rule\",\n    icon: Minus,\n    isActive: () => false,\n    run: () => editor.value?.chain().focus().setHorizontalRule().run(),\n  },\n  {\n    key: \"undo\",\n    label: \"Undo\",\n    icon: Undo,\n    isActive: () => false,\n    run: () => editor.value?.chain().focus().undo().run(),\n    disabled: () => !editor.value?.can().chain().focus().undo().run(),\n  },\n  {\n    key: \"redo\",\n    label: \"Redo\",\n    icon: Redo,\n    isActive: () => false,\n    run: () => editor.value?.chain().focus().redo().run(),\n    disabled: () => !editor.value?.can().chain().focus().redo().run(),\n  },\n])\n</script>\n\n<template>\n  <FieldFrame\n    :label=\"label\"\n    :required=\"required\"\n    :hide-label=\"hideLabel\"\n    :for=\"id\"\n    :help-text=\"helpText\"\n    :errors=\"errors\"\n    data-testid=\"rich-text-editor\"\n  >\n    <div\n      :class=\"\n        cn(\n          'rounded-md border border-input bg-background shadow-sm overflow-hidden',\n          hasErrors ? 'border-destructive ring-1 ring-destructive' : '',\n          isDisabled ? 'opacity-60' : '',\n        )\n      \"\n      :data-element-name=\"name ?? undefined\"\n    >\n      <div\n        class=\"flex flex-wrap items-center gap-1 border-b bg-muted/30 px-2 py-1\"\n        :class=\"isInert ? 'pointer-events-none opacity-50' : ''\"\n        role=\"toolbar\"\n        aria-label=\"Formatting\"\n        data-testid=\"rich-text-editor-toolbar\"\n      >\n        <Button\n          v-for=\"action in toolbarActions\"\n          :key=\"action.key\"\n          type=\"button\"\n          size=\"icon-sm\"\n          :variant=\"action.isActive() ? 'secondary' : 'ghost'\"\n          :disabled=\"isInert || (action.disabled ? action.disabled() : false)\"\n          :aria-label=\"action.label\"\n          :title=\"action.label\"\n          :data-testid=\"`rich-text-editor-toolbar-${action.key}`\"\n          :aria-pressed=\"action.isActive()\"\n          @click=\"action.run()\"\n        >\n          <component :is=\"action.icon\" />\n        </Button>\n      </div>\n\n      <EditorContent\n        v-if=\"editor\"\n        :editor=\"editor\"\n        :style=\"contentStyle\"\n        class=\"prose prose-sm max-w-none px-3 py-2 focus-within:outline-none dark:prose-invert [&_.ProseMirror]:min-h-full [&_.ProseMirror]:outline-none\"\n        data-testid=\"rich-text-editor-content\"\n      />\n    </div>\n  </FieldFrame>\n</template>\n"],"names":["props","__props","emit","__emit","editor","useEditor","StarterKit","watch","value","instance","next","disabled","readonly","_a","onBeforeUnmount","hasErrors","computed","isDisabled","isReadonly","isInert","contentStyle","active","name","attrs","toolbarActions","Bold","Italic","Strikethrough","Code","Heading1","Heading2","Heading3","List","ListOrdered","Quote","Minus","Undo","Redo","_createBlock","_unref","FieldFrame","_createElementVNode","_normalizeClass","cn","_createElementBlock","_Fragment","_renderList","action","Button","$event","_resolveDynamicComponent","EditorContent"],"mappings":"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"}
+{"version":3,"file":"RichTextEditor.vue2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}