@gxp-dev/mod-ui 2.0.8 → 2.0.12

package/dist/components/compositions/elements/editor/HtmlEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HtmlEditor.js","names":[],"sources":["../../../../../src/components/compositions/elements/editor/HtmlEditor.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from \"vue\"\nimport { EditorContent, Extension, Node, useEditor } from \"@tiptap/vue-3\"\nimport StarterKit from \"@tiptap/starter-kit\"\nimport Underline from \"@tiptap/extension-underline\"\nimport TextAlign from \"@tiptap/extension-text-align\"\nimport { BackgroundColor, Color, FontFamily, TextStyle } from \"@tiptap/extension-text-style\"\nimport Link from \"@tiptap/extension-link\"\nimport Image from \"@tiptap/extension-image\"\nimport { Table, TableRow, TableCell, TableHeader } from \"@tiptap/extension-table\"\nimport {\n  AlignCenter,\n  AlignLeft,\n  AlignRight,\n  ArrowDown,\n  ArrowLeft,\n  ArrowRight,\n  ArrowUp,\n  Bold,\n  Code,\n  Combine,\n  Heading,\n  Heading1,\n  Heading2,\n  Heading3,\n  Heading4,\n  Heading5,\n  Heading6,\n  Highlighter,\n  ImageIcon,\n  Italic,\n  Link2,\n  List,\n  ListOrdered,\n  Minus,\n  Palette,\n  Quote,\n  Redo,\n  Scissors,\n  Strikethrough,\n  Table2,\n  Trash2,\n  Type,\n  Underline as UnderlineIcon,\n  Undo,\n  X,\n} from \"@lucide/vue\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { Popover, PopoverContent, PopoverTrigger } from \"@/components/ui/popover\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n} from \"@/components/ui/dialog\"\nimport { Button } from \"@/components/ui/button\"\nimport { Input } from \"@/components/ui/input\"\nimport { Label } from \"@/components/ui/label\"\nimport { Checkbox } from \"@/components/ui/checkbox\"\nimport { FieldFrame } from \"@/components/ui/field-frame\"\nimport { cn } from \"@/lib/utils\"\n\nexport interface HtmlEditorProps {\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}\n\nconst props = withDefaults(defineProps<HtmlEditorProps>(), {\n  errors: () => [],\n  minHeight: \"14rem\",\n})\n\nconst emit = defineEmits<{\n  (e: \"update:modelValue\", value: string): void\n}>()\n\n// ---------------------------------------------------------------------------\n// Custom node: preserve <video> tags\n// ---------------------------------------------------------------------------\n\nconst VideoNode = Node.create({\n  name: \"video\",\n  group: \"block\",\n  content: \"block*\",\n  addAttributes() {\n    return {\n      src: { default: null },\n      width: { default: \"320\" },\n      height: { default: \"240\" },\n      controls: {\n        default: true,\n        parseHTML: (el: HTMLElement) => el.hasAttribute(\"controls\"),\n        renderHTML: (a: Record<string, unknown>) => (a.controls ? { controls: \"\" } : {}),\n      },\n    }\n  },\n  parseHTML() {\n    return [{ tag: \"video\" }]\n  },\n  renderHTML({ HTMLAttributes }: { HTMLAttributes: Record<string, unknown> }) {\n    return [\"video\", HTMLAttributes, 0]\n  },\n})\n\n// Extended Image to pass through style attribute\nconst ExtendedImage = Image.extend({\n  addAttributes() {\n    return {\n      src: { default: \"\" },\n      alt: { default: undefined },\n      title: { default: undefined },\n      style: { default: undefined },\n    }\n  },\n})\n\n// ---------------------------------------------------------------------------\n// Font families\n// ---------------------------------------------------------------------------\n\nconst FONTS: { label: string; value: string }[] = [\n  { label: \"Arial\", value: \"Arial, sans-serif\" },\n  { label: \"Verdana\", value: \"Verdana, sans-serif\" },\n  { label: \"Tahoma\", value: \"Tahoma, sans-serif\" },\n  { label: \"Times New Roman\", value: \"'Times New Roman', serif\" },\n  { label: \"Georgia\", value: \"Georgia, serif\" },\n  { label: \"Courier New\", value: \"'Courier New', monospace\" },\n]\n\n// ---------------------------------------------------------------------------\n// Editor\n// ---------------------------------------------------------------------------\n\nconst isInert = computed(() => Boolean(props.disabled || props.readonly))\n\nconst editor = useEditor({\n  content: props.modelValue ?? \"\",\n  editable: !isInert.value,\n  extensions: [\n    StarterKit,\n    Underline,\n    TextAlign.configure({ types: [\"heading\", \"paragraph\"] }),\n    TextStyle,\n    Color,\n    BackgroundColor,\n    FontFamily.configure({ types: [\"textStyle\"] }),\n    Link.configure({ openOnClick: false }),\n    ExtendedImage.configure({ inline: false, allowBase64: true }),\n    Table.configure({ resizable: true }),\n    TableRow,\n    TableHeader,\n    TableCell,\n    VideoNode,\n    // Suppress unused Extension import warning — it's used by BackgroundColor above\n    Extension.create({ name: \"_noop\" }),\n  ].filter((e) => e.name !== \"_noop\"),\n  editorProps: {\n    attributes: { class: \"focus:outline-none\" },\n  },\n  onUpdate: () => {\n    if (editor.value) emit(\"update:modelValue\", editor.value.getHTML())\n  },\n  onSelectionUpdate: () => {\n    syncFormattingState()\n  },\n})\n\nwatch(\n  () => props.modelValue,\n  (value) => {\n    const e = editor.value\n    if (!e) return\n    const next = value ?? \"\"\n    if (next === e.getHTML()) return\n    e.commands.setContent(next, { emitUpdate: false })\n  },\n)\n\nwatch(isInert, (v) => {\n  editor.value?.setEditable(!v)\n})\n\nonBeforeUnmount(() => {\n  editor.value?.destroy()\n})\n\nonMounted(() => {\n  nextTick(() => {\n    const e = editor.value\n    if (e && props.modelValue && e.isEmpty) {\n      e.commands.setContent(props.modelValue, { emitUpdate: false })\n    }\n  })\n})\n\n// ---------------------------------------------------------------------------\n// Formatting state tracking\n// ---------------------------------------------------------------------------\n\nconst currentHeading = ref<number | null>(null)\nconst currentAlign = ref<\"left\" | \"center\" | \"right\">(\"left\")\nconst currentFont = ref<string | null>(null)\nconst currentTextColor = ref<string>(\"\")\nconst currentBgColor = ref<string>(\"\")\n\nfunction syncFormattingState(): void {\n  const e = editor.value\n  if (!e) return\n\n  currentHeading.value = null\n  for (let i = 1; i <= 6; i++) {\n    if (e.isActive(\"heading\", { level: i })) {\n      currentHeading.value = i\n      break\n    }\n  }\n\n  if (e.isActive({ textAlign: \"center\" })) currentAlign.value = \"center\"\n  else if (e.isActive({ textAlign: \"right\" })) currentAlign.value = \"right\"\n  else currentAlign.value = \"left\"\n\n  currentFont.value = FONTS.find((f) => e.isActive(\"textStyle\", { fontFamily: f.value }))?.value ?? null\n\n  const attrs = e.getAttributes(\"textStyle\") as Record<string, unknown>\n  currentTextColor.value = typeof attrs.color === \"string\" ? attrs.color : \"\"\n  currentBgColor.value = typeof attrs.backgroundColor === \"string\" ? attrs.backgroundColor : \"\"\n}\n\n// ---------------------------------------------------------------------------\n// Toolbar helpers\n// ---------------------------------------------------------------------------\n\nfunction isActive(name: string, attrs?: Record<string, unknown>): boolean {\n  const e = editor.value\n  if (!e) return false\n  return attrs ? e.isActive(name, attrs) : e.isActive(name)\n}\n\nfunction setHeading(level: 1 | 2 | 3 | 4 | 5 | 6): void {\n  editor.value?.chain().focus().setHeading({ level }).run()\n  currentHeading.value = level\n}\n\nfunction clearHeading(): void {\n  editor.value?.chain().focus().setParagraph().run()\n  currentHeading.value = null\n}\n\nconst headingIcon = computed(() => {\n  switch (currentHeading.value) {\n    case 1: return Heading1\n    case 2: return Heading2\n    case 3: return Heading3\n    case 4: return Heading4\n    case 5: return Heading5\n    case 6: return Heading6\n    default: return Heading\n  }\n})\n\nconst alignIcon = computed(() => {\n  if (currentAlign.value === \"center\") return AlignCenter\n  if (currentAlign.value === \"right\") return AlignRight\n  return AlignLeft\n})\n\nfunction setAlign(align: \"left\" | \"center\" | \"right\"): void {\n  editor.value?.chain().focus().setTextAlign(align).run()\n  currentAlign.value = align\n}\n\nfunction setFont(value: string): void {\n  editor.value?.chain().focus().unsetFontFamily().setFontFamily(value).run()\n  currentFont.value = value\n}\n\nfunction clearFont(): void {\n  editor.value?.chain().focus().unsetFontFamily().run()\n  currentFont.value = null\n}\n\n// Color commands are added by BackgroundColor/Color extensions — cast via unknown\nfunction applyTextColor(color: string): void {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  ;(editor.value?.chain().focus() as any)?.unsetColor()?.setColor(color)?.run()\n  currentTextColor.value = color\n}\n\nfunction clearTextColor(): void {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  ;(editor.value?.chain().focus() as any)?.unsetColor()?.run()\n  currentTextColor.value = \"\"\n}\n\nfunction applyBgColor(color: string): void {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  ;(editor.value?.chain().focus() as any)?.unsetBackgroundColor()?.setBackgroundColor(color)?.run()\n  currentBgColor.value = color\n}\n\nfunction clearBgColor(): void {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  ;(editor.value?.chain().focus() as any)?.unsetBackgroundColor()?.run()\n  currentBgColor.value = \"\"\n}\n\nfunction toggleList(type: \"bullet\" | \"ordered\"): void {\n  if (type === \"bullet\") editor.value?.chain().focus().toggleBulletList().run()\n  else editor.value?.chain().focus().toggleOrderedList().run()\n}\n\n// ---------------------------------------------------------------------------\n// Table\n// ---------------------------------------------------------------------------\n\nconst tableHoverRows = ref(2)\nconst tableHoverCols = ref(2)\n\n/** Flat list for the 4×6 table creation grid */\nconst tableGridCells = computed(() => {\n  const cells: { r: number; c: number }[] = []\n  for (let r = 1; r <= 4; r++) {\n    for (let c = 1; c <= 6; c++) {\n      cells.push({ r, c })\n    }\n  }\n  return cells\n})\n\nfunction insertTable(): void {\n  editor.value\n    ?.chain()\n    .focus()\n    .insertTable({ rows: tableHoverRows.value, cols: tableHoverCols.value, withHeaderRow: true })\n    .run()\n}\n\n// ---------------------------------------------------------------------------\n// Link dialog\n// ---------------------------------------------------------------------------\n\nconst linkDialogOpen = ref(false)\nconst linkUrl = ref(\"\")\nconst linkText = ref(\"\")\nconst linkTargetBlank = ref(true)\nconst isEditingLink = ref(false)\n\nfunction openLinkDialog(): void {\n  const e = editor.value\n  if (!e) return\n  isEditingLink.value = e.isActive(\"link\")\n  if (isEditingLink.value) {\n    e.chain().focus().extendMarkRange(\"link\").run()\n    const attrs = e.getAttributes(\"link\") as Record<string, unknown>\n    linkUrl.value = typeof attrs.href === \"string\" ? attrs.href : \"\"\n    linkTargetBlank.value = attrs.target === \"_blank\"\n    const { from, to } = e.state.selection\n    linkText.value = e.state.doc.textBetween(from, to, \" \")\n  } else {\n    const { from, to } = e.state.selection\n    linkText.value = e.state.doc.textBetween(from, to, \" \")\n    linkUrl.value = \"https://\"\n    linkTargetBlank.value = true\n  }\n  if (!linkText.value) linkText.value = \"Link\"\n  linkDialogOpen.value = true\n}\n\nfunction applyLink(): void {\n  const e = editor.value\n  if (!e || !linkUrl.value) return\n  if (e.isActive(\"link\")) e.chain().focus().unsetLink().run()\n  const target = linkTargetBlank.value ? \"_blank\" : \"_self\"\n  const { from, to } = e.state.selection\n  if (from === to) {\n    e.chain().focus().insertContent(`<a href=\"${linkUrl.value}\" target=\"${target}\">${linkText.value}</a>`).run()\n  } else {\n    e.chain().focus().extendMarkRange(\"link\").setLink({ href: linkUrl.value, target }).run()\n  }\n  linkDialogOpen.value = false\n}\n\nfunction removeLink(): void {\n  editor.value?.chain().focus().extendMarkRange(\"link\").unsetLink().run()\n  linkDialogOpen.value = false\n}\n\n// ---------------------------------------------------------------------------\n// Image dialog\n// ---------------------------------------------------------------------------\n\nconst imageDialogOpen = ref(false)\nconst imageUrl = ref(\"\")\nconst imageAlt = ref(\"\")\nconst imageStyle = ref(\"\")\nconst isEditingImage = ref(false)\n\nfunction openImageDialog(): void {\n  const e = editor.value\n  if (!e) return\n  isEditingImage.value = e.isActive(\"image\")\n  if (isEditingImage.value) {\n    const attrs = e.getAttributes(\"image\") as Record<string, unknown>\n    imageUrl.value = typeof attrs.src === \"string\" ? attrs.src : \"\"\n    imageAlt.value = typeof attrs.alt === \"string\" ? attrs.alt : \"\"\n    imageStyle.value = typeof attrs.style === \"string\" ? attrs.style : \"\"\n  } else {\n    imageUrl.value = \"\"\n    imageAlt.value = \"\"\n    imageStyle.value = \"width: auto; height: auto; max-width: 100%;\"\n  }\n  imageDialogOpen.value = true\n}\n\nfunction applyImage(): void {\n  const e = editor.value\n  if (!e || !imageUrl.value) return\n  const attrs = {\n    src: imageUrl.value,\n    alt: imageAlt.value || undefined,\n    style: imageStyle.value || undefined,\n  }\n  if (isEditingImage.value) {\n    e.chain().focus().updateAttributes(\"image\", attrs).run()\n  } else {\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    ;(e.chain().focus() as any).setImage(attrs).run()\n  }\n  imageDialogOpen.value = false\n}\n\n// ---------------------------------------------------------------------------\n// HTML source dialog\n// ---------------------------------------------------------------------------\n\nconst sourceDialogOpen = ref(false)\nconst sourceHtml = ref(\"\")\n\nfunction openSourceDialog(): void {\n  if (!editor.value) return\n  sourceHtml.value = editor.value.getHTML()\n  sourceDialogOpen.value = true\n}\n\nfunction applySource(): void {\n  if (!editor.value) return\n  editor.value.commands.setContent(sourceHtml.value)\n  emit(\"update:modelValue\", sourceHtml.value)\n  sourceDialogOpen.value = false\n}\n\n// ---------------------------------------------------------------------------\n// Misc\n// ---------------------------------------------------------------------------\n\nconst hasErrors = computed(() => props.errors.length > 0)\nconst contentStyle = computed(() => ({ minHeight: props.minHeight }))\n\nfunction btnClass(active: boolean): string {\n  return cn(\"h-7 w-7 p-0 shrink-0\", active ? \"bg-muted text-foreground\" : \"text-muted-foreground\")\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=\"html-editor\"\n  >\n    <div\n      :class=\"cn(\n        'rounded-md border border-input bg-background shadow-sm overflow-hidden',\n        hasErrors ? 'border-destructive ring-1 ring-destructive' : '',\n        isInert ? 'opacity-60' : '',\n      )\"\n      :data-element-name=\"name ?? undefined\"\n    >\n      <!-- ----------------------------------------------------------------- -->\n      <!-- Toolbar                                                            -->\n      <!-- ----------------------------------------------------------------- -->\n      <div\n        class=\"flex flex-col border-b bg-muted/30\"\n        :class=\"isInert ? 'pointer-events-none' : ''\"\n        role=\"toolbar\"\n        aria-label=\"HTML formatting\"\n        data-testid=\"html-editor-toolbar\"\n      >\n        <!-- Row 1: headings · inline formatting · blockquote/hr · undo/redo · source -->\n        <div class=\"flex flex-wrap items-center gap-0.5 border-b border-border/40 px-1.5 py-1\">\n          <!-- Heading -->\n          <DropdownMenu>\n            <DropdownMenuTrigger as-child>\n              <Button type=\"button\" variant=\"ghost\" :class=\"btnClass(currentHeading !== null)\" title=\"Heading\">\n                <component :is=\"headingIcon\" class=\"h-4 w-4\" />\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"start\" class=\"w-44\">\n              <DropdownMenuLabel class=\"text-xs uppercase text-muted-foreground\">Heading</DropdownMenuLabel>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem :class=\"currentHeading === 1 ? 'bg-muted' : ''\" @click=\"setHeading(1)\">\n                <Heading1 class=\"mr-2 h-4 w-4\" />Heading 1\n              </DropdownMenuItem>\n              <DropdownMenuItem :class=\"currentHeading === 2 ? 'bg-muted' : ''\" @click=\"setHeading(2)\">\n                <Heading2 class=\"mr-2 h-4 w-4\" />Heading 2\n              </DropdownMenuItem>\n              <DropdownMenuItem :class=\"currentHeading === 3 ? 'bg-muted' : ''\" @click=\"setHeading(3)\">\n                <Heading3 class=\"mr-2 h-4 w-4\" />Heading 3\n              </DropdownMenuItem>\n              <DropdownMenuItem :class=\"currentHeading === 4 ? 'bg-muted' : ''\" @click=\"setHeading(4)\">\n                <Heading4 class=\"mr-2 h-4 w-4\" />Heading 4\n              </DropdownMenuItem>\n              <DropdownMenuItem :class=\"currentHeading === 5 ? 'bg-muted' : ''\" @click=\"setHeading(5)\">\n                <Heading5 class=\"mr-2 h-4 w-4\" />Heading 5\n              </DropdownMenuItem>\n              <DropdownMenuItem :class=\"currentHeading === 6 ? 'bg-muted' : ''\" @click=\"setHeading(6)\">\n                <Heading6 class=\"mr-2 h-4 w-4\" />Heading 6\n              </DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem @click=\"clearHeading\">\n                <X class=\"mr-2 h-4 w-4\" />Clear heading\n              </DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n\n          <div class=\"mx-0.5 h-5 w-px bg-border/60 shrink-0\" />\n\n          <Button type=\"button\" variant=\"ghost\" :class=\"btnClass(isActive('bold'))\" title=\"Bold\"\n            @click=\"editor?.chain().focus().toggleBold().run()\"><Bold class=\"h-4 w-4\" /></Button>\n          <Button type=\"button\" variant=\"ghost\" :class=\"btnClass(isActive('italic'))\" title=\"Italic\"\n            @click=\"editor?.chain().focus().toggleItalic().run()\"><Italic class=\"h-4 w-4\" /></Button>\n          <Button type=\"button\" variant=\"ghost\" :class=\"btnClass(isActive('underline'))\" title=\"Underline\"\n            @click=\"editor?.chain().focus().toggleUnderline().run()\"><UnderlineIcon class=\"h-4 w-4\" /></Button>\n          <Button type=\"button\" variant=\"ghost\" :class=\"btnClass(isActive('strike'))\" title=\"Strikethrough\"\n            @click=\"editor?.chain().focus().toggleStrike().run()\"><Strikethrough class=\"h-4 w-4\" /></Button>\n\n          <div class=\"mx-0.5 h-5 w-px bg-border/60 shrink-0\" />\n\n          <Button type=\"button\" variant=\"ghost\" :class=\"btnClass(isActive('blockquote'))\" title=\"Blockquote\"\n            @click=\"editor?.chain().focus().toggleBlockquote().run()\"><Quote class=\"h-4 w-4\" /></Button>\n          <Button type=\"button\" variant=\"ghost\" :class=\"btnClass(false)\" title=\"Horizontal rule\"\n            @click=\"editor?.chain().focus().setHorizontalRule().run()\"><Minus class=\"h-4 w-4\" /></Button>\n\n          <div class=\"flex-1\" />\n\n          <Button type=\"button\" variant=\"ghost\" :class=\"btnClass(false)\" title=\"Undo\"\n            :disabled=\"!editor?.can().chain().focus().undo().run()\"\n            @click=\"editor?.chain().focus().undo().run()\"><Undo class=\"h-4 w-4\" /></Button>\n          <Button type=\"button\" variant=\"ghost\" :class=\"btnClass(false)\" title=\"Redo\"\n            :disabled=\"!editor?.can().chain().focus().redo().run()\"\n            @click=\"editor?.chain().focus().redo().run()\"><Redo class=\"h-4 w-4\" /></Button>\n\n          <div class=\"mx-0.5 h-5 w-px bg-border/60 shrink-0\" />\n\n          <Button type=\"button\" variant=\"ghost\" :class=\"btnClass(false)\" title=\"Edit HTML source\"\n            @click=\"openSourceDialog\"><Code class=\"h-4 w-4\" /></Button>\n        </div>\n\n        <!-- Row 2: align · font · colors · link/image · lists · table -->\n        <div class=\"flex flex-wrap items-center gap-0.5 px-1.5 py-1\">\n          <!-- Align -->\n          <DropdownMenu>\n            <DropdownMenuTrigger as-child>\n              <Button type=\"button\" variant=\"ghost\" :class=\"btnClass(currentAlign !== 'left')\" title=\"Text alignment\">\n                <component :is=\"alignIcon\" class=\"h-4 w-4\" />\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"start\" class=\"w-36\">\n              <DropdownMenuItem :class=\"currentAlign === 'left' ? 'bg-muted' : ''\" @click=\"setAlign('left')\">\n                <AlignLeft class=\"mr-2 h-4 w-4\" />Left\n              </DropdownMenuItem>\n              <DropdownMenuItem :class=\"currentAlign === 'center' ? 'bg-muted' : ''\" @click=\"setAlign('center')\">\n                <AlignCenter class=\"mr-2 h-4 w-4\" />Center\n              </DropdownMenuItem>\n              <DropdownMenuItem :class=\"currentAlign === 'right' ? 'bg-muted' : ''\" @click=\"setAlign('right')\">\n                <AlignRight class=\"mr-2 h-4 w-4\" />Right\n              </DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n\n          <div class=\"mx-0.5 h-5 w-px bg-border/60 shrink-0\" />\n\n          <!-- Font family -->\n          <DropdownMenu>\n            <DropdownMenuTrigger as-child>\n              <Button type=\"button\" variant=\"ghost\" :class=\"btnClass(currentFont !== null)\" title=\"Font family\">\n                <Type class=\"h-4 w-4\" />\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"start\" class=\"w-52\">\n              <DropdownMenuLabel class=\"text-xs uppercase text-muted-foreground\">Font family</DropdownMenuLabel>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem\n                v-for=\"font in FONTS\"\n                :key=\"font.value\"\n                :class=\"currentFont === font.value ? 'bg-muted' : ''\"\n                :style=\"`font-family: ${font.value}`\"\n                @click=\"setFont(font.value)\"\n              >\n                {{ font.label }}\n              </DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem @click=\"clearFont\">\n                <X class=\"mr-2 h-4 w-4\" />Use default\n              </DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n\n          <!-- Text color -->\n          <Popover>\n            <PopoverTrigger as-child>\n              <Button type=\"button\" variant=\"ghost\" :class=\"btnClass(!!currentTextColor)\" title=\"Text color\">\n                <Palette class=\"h-4 w-4\" :style=\"currentTextColor ? { color: currentTextColor } : {}\" />\n              </Button>\n            </PopoverTrigger>\n            <PopoverContent class=\"w-52 p-3\" align=\"start\">\n              <p class=\"mb-2 text-xs font-medium text-muted-foreground\">Text color</p>\n              <div class=\"flex items-center gap-2\">\n                <input\n                  type=\"color\"\n                  :value=\"currentTextColor || '#000000'\"\n                  class=\"h-8 w-8 cursor-pointer rounded border border-input p-0.5\"\n                  @input=\"applyTextColor(($event.target as HTMLInputElement).value)\"\n                />\n                <Input\n                  :model-value=\"currentTextColor\"\n                  placeholder=\"#000000\"\n                  class=\"h-7 font-mono text-xs\"\n                  maxlength=\"7\"\n                  @blur=\"applyTextColor(($event.target as HTMLInputElement).value)\"\n                />\n              </div>\n              <Button type=\"button\" variant=\"ghost\" size=\"sm\" class=\"mt-2 w-full text-xs\" @click=\"clearTextColor\">\n                <X class=\"mr-1 h-3 w-3\" />Clear color\n              </Button>\n            </PopoverContent>\n          </Popover>\n\n          <!-- Highlight / background color -->\n          <Popover>\n            <PopoverTrigger as-child>\n              <Button type=\"button\" variant=\"ghost\" :class=\"btnClass(!!currentBgColor)\" title=\"Highlight color\">\n                <Highlighter class=\"h-4 w-4\" :style=\"currentBgColor ? { color: currentBgColor } : {}\" />\n              </Button>\n            </PopoverTrigger>\n            <PopoverContent class=\"w-52 p-3\" align=\"start\">\n              <p class=\"mb-2 text-xs font-medium text-muted-foreground\">Highlight color</p>\n              <div class=\"flex items-center gap-2\">\n                <input\n                  type=\"color\"\n                  :value=\"currentBgColor || '#ffff00'\"\n                  class=\"h-8 w-8 cursor-pointer rounded border border-input p-0.5\"\n                  @input=\"applyBgColor(($event.target as HTMLInputElement).value)\"\n                />\n                <Input\n                  :model-value=\"currentBgColor\"\n                  placeholder=\"#ffff00\"\n                  class=\"h-7 font-mono text-xs\"\n                  maxlength=\"7\"\n                  @blur=\"applyBgColor(($event.target as HTMLInputElement).value)\"\n                />\n              </div>\n              <Button type=\"button\" variant=\"ghost\" size=\"sm\" class=\"mt-2 w-full text-xs\" @click=\"clearBgColor\">\n                <X class=\"mr-1 h-3 w-3\" />Clear highlight\n              </Button>\n            </PopoverContent>\n          </Popover>\n\n          <div class=\"mx-0.5 h-5 w-px bg-border/60 shrink-0\" />\n\n          <!-- Link -->\n          <Button type=\"button\" variant=\"ghost\" :class=\"btnClass(isActive('link'))\" title=\"Insert / edit link\"\n            @click=\"openLinkDialog\"><Link2 class=\"h-4 w-4\" /></Button>\n\n          <!-- Image -->\n          <Button type=\"button\" variant=\"ghost\" :class=\"btnClass(isActive('image'))\" title=\"Insert / edit image\"\n            @click=\"openImageDialog\"><ImageIcon class=\"h-4 w-4\" /></Button>\n\n          <div class=\"mx-0.5 h-5 w-px bg-border/60 shrink-0\" />\n\n          <!-- Lists -->\n          <DropdownMenu>\n            <DropdownMenuTrigger as-child>\n              <Button type=\"button\" variant=\"ghost\" :class=\"btnClass(isActive('bulletList') || isActive('orderedList'))\" title=\"Lists\">\n                <component :is=\"isActive('orderedList') ? ListOrdered : List\" class=\"h-4 w-4\" />\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"start\" class=\"w-40\">\n              <DropdownMenuItem :class=\"isActive('bulletList') ? 'bg-muted' : ''\" @click=\"toggleList('bullet')\">\n                <List class=\"mr-2 h-4 w-4\" />Bullet list\n              </DropdownMenuItem>\n              <DropdownMenuItem :class=\"isActive('orderedList') ? 'bg-muted' : ''\" @click=\"toggleList('ordered')\">\n                <ListOrdered class=\"mr-2 h-4 w-4\" />Ordered list\n              </DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n\n          <div class=\"mx-0.5 h-5 w-px bg-border/60 shrink-0\" />\n\n          <!-- Table -->\n          <DropdownMenu>\n            <DropdownMenuTrigger as-child>\n              <Button type=\"button\" variant=\"ghost\" :class=\"btnClass(isActive('table'))\" title=\"Table\">\n                <Table2 class=\"h-4 w-4\" />\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"start\" class=\"w-52\">\n              <!-- Create-table grid (only when not inside a table) -->\n              <template v-if=\"!isActive('table')\">\n                <DropdownMenuLabel class=\"text-xs uppercase text-muted-foreground\">\n                  Insert {{ tableHoverRows }}×{{ tableHoverCols }} table\n                </DropdownMenuLabel>\n                <div class=\"px-2 pb-2\">\n                  <div class=\"grid gap-0.5\" style=\"grid-template-columns: repeat(6, 1.25rem)\">\n                    <button\n                      v-for=\"cell in tableGridCells\"\n                      :key=\"`${cell.r}-${cell.c}`\"\n                      type=\"button\"\n                      class=\"h-5 w-5 rounded-sm border transition-colors\"\n                      :class=\"cell.r <= tableHoverRows && cell.c <= tableHoverCols\n                        ? 'bg-primary border-primary'\n                        : 'bg-muted/50 border-border hover:bg-muted'\"\n                      @mouseover=\"tableHoverRows = cell.r; tableHoverCols = cell.c\"\n                      @click=\"insertTable\"\n                    />\n                  </div>\n                </div>\n                <DropdownMenuSeparator />\n              </template>\n\n              <DropdownMenuLabel class=\"text-xs uppercase text-muted-foreground\">Column</DropdownMenuLabel>\n              <DropdownMenuItem :disabled=\"!isActive('table')\" @click=\"editor?.chain().focus().addColumnBefore().run()\">\n                <ArrowLeft class=\"mr-2 h-4 w-4\" />Add before\n              </DropdownMenuItem>\n              <DropdownMenuItem :disabled=\"!isActive('table')\" @click=\"editor?.chain().focus().addColumnAfter().run()\">\n                <ArrowRight class=\"mr-2 h-4 w-4\" />Add after\n              </DropdownMenuItem>\n              <DropdownMenuItem :disabled=\"!isActive('table')\" @click=\"editor?.chain().focus().deleteColumn().run()\">\n                <Trash2 class=\"mr-2 h-4 w-4\" />Delete column\n              </DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuLabel class=\"text-xs uppercase text-muted-foreground\">Row</DropdownMenuLabel>\n              <DropdownMenuItem :disabled=\"!isActive('table')\" @click=\"editor?.chain().focus().addRowBefore().run()\">\n                <ArrowUp class=\"mr-2 h-4 w-4\" />Add before\n              </DropdownMenuItem>\n              <DropdownMenuItem :disabled=\"!isActive('table')\" @click=\"editor?.chain().focus().addRowAfter().run()\">\n                <ArrowDown class=\"mr-2 h-4 w-4\" />Add after\n              </DropdownMenuItem>\n              <DropdownMenuItem :disabled=\"!isActive('table')\" @click=\"editor?.chain().focus().deleteRow().run()\">\n                <Trash2 class=\"mr-2 h-4 w-4\" />Delete row\n              </DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuLabel class=\"text-xs uppercase text-muted-foreground\">Cell</DropdownMenuLabel>\n              <DropdownMenuItem :disabled=\"!isActive('table')\" @click=\"editor?.chain().focus().mergeCells().run()\">\n                <Combine class=\"mr-2 h-4 w-4\" />Merge cells\n              </DropdownMenuItem>\n              <DropdownMenuItem :disabled=\"!isActive('table')\" @click=\"editor?.chain().focus().splitCell().run()\">\n                <Scissors class=\"mr-2 h-4 w-4\" />Split cell\n              </DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem\n                :disabled=\"!isActive('table')\"\n                class=\"text-destructive focus:text-destructive\"\n                @click=\"editor?.chain().focus().deleteTable().run()\"\n              >\n                <Trash2 class=\"mr-2 h-4 w-4\" />Delete table\n              </DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </div>\n      </div>\n\n      <!-- ----------------------------------------------------------------- -->\n      <!-- Editor content area                                                -->\n      <!-- ----------------------------------------------------------------- -->\n      <EditorContent\n        v-if=\"editor\"\n        :editor=\"editor\"\n        :style=\"contentStyle\"\n        class=\"html-editor-content prose prose-sm max-w-none px-3 py-2 dark:prose-invert\n               [&_.ProseMirror]:min-h-full [&_.ProseMirror]:outline-none\"\n        data-testid=\"html-editor-content\"\n        @click=\"editor?.chain().focus().run()\"\n      />\n    </div>\n\n    <!-- ------------------------------------------------------------------- -->\n    <!-- Link dialog                                                          -->\n    <!-- ------------------------------------------------------------------- -->\n    <Dialog v-model:open=\"linkDialogOpen\">\n      <DialogContent class=\"max-w-md\">\n        <DialogHeader>\n          <DialogTitle>{{ isEditingLink ? 'Edit link' : 'Insert link' }}</DialogTitle>\n        </DialogHeader>\n        <div class=\"grid gap-4 py-2\">\n          <div class=\"grid gap-1.5\">\n            <Label for=\"html-editor-link-url\">URL</Label>\n            <Input id=\"html-editor-link-url\" v-model=\"linkUrl\" placeholder=\"https://example.com\" />\n          </div>\n          <div class=\"grid gap-1.5\">\n            <Label for=\"html-editor-link-text\">Link text</Label>\n            <Input id=\"html-editor-link-text\" v-model=\"linkText\" placeholder=\"Link text\" />\n          </div>\n          <div class=\"flex items-center gap-2\">\n            <Checkbox\n              id=\"html-editor-link-target\"\n              :checked=\"linkTargetBlank\"\n              @update:checked=\"linkTargetBlank = !!$event\"\n            />\n            <Label for=\"html-editor-link-target\" class=\"cursor-pointer font-normal\">Open in new tab</Label>\n          </div>\n        </div>\n        <DialogFooter class=\"flex-row items-center justify-between gap-2\">\n          <Button v-if=\"isEditingLink\" type=\"button\" variant=\"destructive\" size=\"sm\" @click=\"removeLink\">\n            <Trash2 class=\"mr-1.5 h-3.5 w-3.5\" />Remove link\n          </Button>\n          <div class=\"flex gap-2\">\n            <Button type=\"button\" variant=\"outline\" size=\"sm\" @click=\"linkDialogOpen = false\">Cancel</Button>\n            <Button type=\"button\" size=\"sm\" @click=\"applyLink\">Apply</Button>\n          </div>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n\n    <!-- ------------------------------------------------------------------- -->\n    <!-- Image dialog                                                         -->\n    <!-- ------------------------------------------------------------------- -->\n    <Dialog v-model:open=\"imageDialogOpen\">\n      <DialogContent class=\"max-w-md\">\n        <DialogHeader>\n          <DialogTitle>{{ isEditingImage ? 'Edit image' : 'Insert image' }}</DialogTitle>\n        </DialogHeader>\n        <div class=\"grid gap-4 py-2\">\n          <div class=\"grid gap-1.5\">\n            <Label for=\"html-editor-img-url\">Image URL</Label>\n            <Input id=\"html-editor-img-url\" v-model=\"imageUrl\" placeholder=\"https://example.com/image.jpg\" />\n          </div>\n          <div class=\"grid gap-1.5\">\n            <Label for=\"html-editor-img-alt\">Alt text</Label>\n            <Input id=\"html-editor-img-alt\" v-model=\"imageAlt\" placeholder=\"Describe the image\" />\n          </div>\n          <div class=\"grid gap-1.5\">\n            <Label for=\"html-editor-img-style\">\n              Style <span class=\"ml-1 text-xs font-normal text-muted-foreground\">(optional)</span>\n            </Label>\n            <Input id=\"html-editor-img-style\" v-model=\"imageStyle\" placeholder=\"width: 100%; height: auto;\" />\n          </div>\n        </div>\n        <DialogFooter>\n          <Button type=\"button\" variant=\"outline\" size=\"sm\" @click=\"imageDialogOpen = false\">Cancel</Button>\n          <Button type=\"button\" size=\"sm\" @click=\"applyImage\">\n            {{ isEditingImage ? 'Update' : 'Insert' }}\n          </Button>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n\n    <!-- ------------------------------------------------------------------- -->\n    <!-- HTML source dialog                                                   -->\n    <!-- ------------------------------------------------------------------- -->\n    <Dialog v-model:open=\"sourceDialogOpen\">\n      <DialogContent class=\"max-w-3xl\">\n        <DialogHeader>\n          <DialogTitle>Edit HTML source</DialogTitle>\n        </DialogHeader>\n        <textarea\n          v-model=\"sourceHtml\"\n          class=\"h-96 w-full resize-y rounded-md border border-input bg-background p-3 font-mono text-xs\n                 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n          spellcheck=\"false\"\n          data-testid=\"html-editor-source\"\n        />\n        <DialogFooter>\n          <Button type=\"button\" variant=\"outline\" size=\"sm\" @click=\"sourceDialogOpen = false\">Cancel</Button>\n          <Button type=\"button\" size=\"sm\" @click=\"applySource\">Apply changes</Button>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  </FieldFrame>\n</template>\n\n<style scoped>\n/* Table chrome */\n:deep(.html-editor-content table) {\n  border-collapse: collapse;\n  margin: 0.5rem 0;\n  overflow: hidden;\n  table-layout: fixed;\n  width: 100%;\n}\n\n:deep(.html-editor-content table td),\n:deep(.html-editor-content table th) {\n  border: 2px solid var(--border);\n  box-sizing: border-box;\n  min-width: 1em;\n  padding: 0.375rem 0.5rem;\n  position: relative;\n  vertical-align: top;\n}\n\n:deep(.html-editor-content table th) {\n  background-color: var(--muted);\n  font-weight: 600;\n  text-align: left;\n}\n\n:deep(.html-editor-content table .selectedCell::after) {\n  background: color-mix(in oklch, var(--primary) 15%, transparent);\n  content: \"\";\n  inset: 0;\n  pointer-events: none;\n  position: absolute;\n  z-index: 2;\n}\n\n:deep(.html-editor-content .tableWrapper) {\n  overflow-x: auto;\n}\n\n:deep(.html-editor-content .column-resize-handle) {\n  background-color: var(--primary);\n  bottom: -2px;\n  pointer-events: none;\n  position: absolute;\n  right: -2px;\n  top: 0;\n  width: 4px;\n}\n\n:deep(.html-editor-content .resize-cursor) {\n  cursor: col-resize;\n}\n\n/* Content styling */\n:deep(.html-editor-content a) {\n  color: var(--primary);\n  text-decoration: underline;\n}\n\n:deep(.html-editor-content img) {\n  display: block;\n  margin: 0.75rem 0;\n}\n\n:deep(.html-editor-content img.ProseMirror-selectednode) {\n  outline: 2px solid var(--primary);\n  outline-offset: 2px;\n}\n\n:deep(.html-editor-content blockquote) {\n  border-left: 3px solid var(--border);\n  color: var(--muted-foreground);\n  font-style: italic;\n  margin-left: 0;\n  padding-left: 1rem;\n}\n\n:deep(.html-editor-content .ProseMirror-focused) {\n  outline: none;\n}\n</style>\n"],"mappings":""}