@alfakit/vue 0.1.1 → 0.1.6

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"RichEditorInput.vue.d.ts","sourceRoot":"","sources":["../../../src/components/fields/RichEditorInput.vue"],"names":[],"mappings":"AA2mBA,OAAO,KAAK,EAAE,0BAA0B,EAAmB,gBAAgB,EAAE,MAAM,eAAe,CAAA;AA8GlG,KAAK,WAAW,GAAG;IAAE,SAAS,EAAE,gBAAgB,CAAC;IAAC,OAAO,EAAE,0BAA0B,CAAA;CAAE,CAAC;;AA2wBxF,wBAMG"}
+{"version":3,"file":"RichEditorInput.vue.d.ts","sourceRoot":"","sources":["../../../src/components/fields/RichEditorInput.vue"],"names":[],"mappings":"AA8mBA,OAAO,KAAK,EAAE,0BAA0B,EAAmB,gBAAgB,EAAE,MAAM,eAAe,CAAA;AA+GlG,KAAK,WAAW,GAAG;IAAE,SAAS,EAAE,gBAAgB,CAAC;IAAC,OAAO,EAAE,0BAA0B,CAAA;CAAE,CAAC;;AA6wBxF,wBAMG"}