@airalogy/aimd-editor 1.7.1

package/src/vue/AimdWysiwygEditor.vue

@@ -0,0 +1,569 @@
+<script setup lang="ts">
+import { ref, shallowRef, computed, watch, nextTick, defineComponent, h, toRef, onBeforeUnmount } from 'vue'
+import type { Editor } from '@milkdown/kit/core'
+import { MilkdownProvider, Milkdown, useEditor, useInstance } from '@milkdown/vue'
+import { defaultValueCtx, Editor as MilkdownEditor, rootCtx, editorViewOptionsCtx, editorViewCtx } from '@milkdown/kit/core'
+import type { Ctx, MilkdownPlugin } from '@milkdown/kit/ctx'
+import { createTable } from '@milkdown/kit/preset/gfm'
+import { commonmark, paragraphSchema, headingSchema, blockquoteSchema, bulletListSchema, orderedListSchema, codeBlockSchema, hrSchema, listItemSchema } from '@milkdown/kit/preset/commonmark'
+import { commandsCtx } from '@milkdown/kit/core'
+import { setBlockTypeCommand, wrapInBlockTypeCommand, addBlockTypeCommand, clearTextInCurrentBlockCommand } from '@milkdown/kit/preset/commonmark'
+import { gfm } from '@milkdown/kit/preset/gfm'
+import { history } from '@milkdown/kit/plugin/history'
+import { listener, listenerCtx } from '@milkdown/kit/plugin/listener'
+import { clipboard } from '@milkdown/kit/plugin/clipboard'
+import { indent } from '@milkdown/kit/plugin/indent'
+import { trailing } from '@milkdown/kit/plugin/trailing'
+import { block, BlockProvider } from '@milkdown/kit/plugin/block'
+import { replaceAll, $prose } from '@milkdown/kit/utils'
+import { tableBlock, tableBlockConfig } from '@milkdown/kit/component/table-block'
+import { Plugin, PluginKey, TextSelection } from '@milkdown/kit/prose/state'
+import { Decoration, DecorationSet } from '@milkdown/kit/prose/view'
+import { findParent } from '@milkdown/kit/prose'
+import { protectAimdInlineTemplates } from '@airalogy/aimd-core'
+
+import '@milkdown/theme-nord/style.css'
+import '@milkdown/kit/prose/tables/style/tables.css'
+
+import { aimdMilkdownPlugins } from './milkdown-aimd-plugin'
+import { createProgrammaticMarkdownSyncGuard } from './programmaticMarkdownSyncGuard'
+import { normalizeComparableAimdMarkdown } from './comparableAimdMarkdown'
+import type { AimdFieldType } from './types'
+import type { AimdEditorMessages } from './locales'
+
+const props = withDefaults(defineProps<{
+  content: string
+  minHeight: number
+  enableBlockHandle: boolean
+  active?: boolean
+  readonly?: boolean
+  resolvedMessages: AimdEditorMessages
+  localizedFieldTypes: AimdFieldType[]
+  milkdownPlugins?: MilkdownPlugin[]
+}>(), {
+  active: true,
+  readonly: false,
+  milkdownPlugins: undefined,
+})
+
+const emit = defineEmits<{
+  (e: 'markdown-updated', ctx: any, markdown: string, prev: string): void
+  (e: 'ready', editor: Editor): void
+  (e: 'open-aimd-dialog', type: string): void
+}>()
+
+function toMilkdownMarkdown(markdown: string): string {
+  return protectAimdInlineTemplates(markdown).content
+}
+
+function createEditorViewOptions(readonly: boolean) {
+  return {
+    attributes: {
+      class: readonly ? 'milkdown-editor-content milkdown-editor-content--readonly' : 'milkdown-editor-content',
+      spellcheck: 'false',
+    },
+    editable: () => !readonly,
+  }
+}
+
+// --- Block add menu ---
+const showBlockMenu = ref(false)
+const blockMenuPos = ref({ x: 0, y: 0 })
+const blockProviderRef = shallowRef<BlockProvider | null>(null)
+
+interface BlockMenuItem {
+  label: string
+  icon: string
+  onRun: (ctx: Ctx) => void
+}
+
+interface BlockMenuGroup {
+  label: string
+  items: BlockMenuItem[]
+}
+
+// Block menu SVG icon helper (14x14)
+const _bsi = (d: string) => `<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">${d}</svg>`
+
+const blockMenuGroups = computed<BlockMenuGroup[]>(() => ([
+  {
+    label: props.resolvedMessages.blockMenu.groups.text,
+    items: [
+      {
+        label: props.resolvedMessages.blockMenu.items.text, icon: 'T',
+        onRun: (ctx: Ctx) => {
+          const commands = ctx.get(commandsCtx)
+          commands.call(clearTextInCurrentBlockCommand.key)
+          commands.call(setBlockTypeCommand.key, { nodeType: paragraphSchema.type(ctx) })
+        },
+      },
+      {
+        label: props.resolvedMessages.blockMenu.items.heading1, icon: 'H1',
+        onRun: (ctx: Ctx) => {
+          const commands = ctx.get(commandsCtx)
+          commands.call(clearTextInCurrentBlockCommand.key)
+          commands.call(setBlockTypeCommand.key, { nodeType: headingSchema.type(ctx), attrs: { level: 1 } })
+        },
+      },
+      {
+        label: props.resolvedMessages.blockMenu.items.heading2, icon: 'H2',
+        onRun: (ctx: Ctx) => {
+          const commands = ctx.get(commandsCtx)
+          commands.call(clearTextInCurrentBlockCommand.key)
+          commands.call(setBlockTypeCommand.key, { nodeType: headingSchema.type(ctx), attrs: { level: 2 } })
+        },
+      },
+      {
+        label: props.resolvedMessages.blockMenu.items.heading3, icon: 'H3',
+        onRun: (ctx: Ctx) => {
+          const commands = ctx.get(commandsCtx)
+          commands.call(clearTextInCurrentBlockCommand.key)
+          commands.call(setBlockTypeCommand.key, { nodeType: headingSchema.type(ctx), attrs: { level: 3 } })
+        },
+      },
+      {
+        label: props.resolvedMessages.blockMenu.items.quote,
+        icon: _bsi('<path d="M3 21c3 0 7-1 7-8V5c0-1.25-.756-2.017-2-2H4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2 1 0 1 0 1 1v1c0 1-1 2-2 2s-1 .008-1 1.031V20c0 1 0 1 1 1z"/><path d="M15 21c3 0 7-1 7-8V5c0-1.25-.757-2.017-2-2h-4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2h.75c0 2.25.25 4-2.75 4v3c0 1 0 1 1 1z"/>'),
+        onRun: (ctx: Ctx) => {
+          const commands = ctx.get(commandsCtx)
+          commands.call(clearTextInCurrentBlockCommand.key)
+          commands.call(wrapInBlockTypeCommand.key, { nodeType: blockquoteSchema.type(ctx) })
+        },
+      },
+      {
+        label: props.resolvedMessages.blockMenu.items.divider,
+        icon: _bsi('<line x1="2" y1="12" x2="22" y2="12" stroke-width="2.5"/>'),
+        onRun: (ctx: Ctx) => {
+          const commands = ctx.get(commandsCtx)
+          commands.call(clearTextInCurrentBlockCommand.key)
+          commands.call(addBlockTypeCommand.key, { nodeType: hrSchema.type(ctx) })
+        },
+      },
+    ],
+  },
+  {
+    label: props.resolvedMessages.blockMenu.groups.list,
+    items: [
+      {
+        label: props.resolvedMessages.blockMenu.items.bulletList,
+        icon: _bsi('<line x1="9" y1="6" x2="20" y2="6"/><line x1="9" y1="12" x2="20" y2="12"/><line x1="9" y1="18" x2="20" y2="18"/><circle cx="5" cy="6" r="1" fill="currentColor"/><circle cx="5" cy="12" r="1" fill="currentColor"/><circle cx="5" cy="18" r="1" fill="currentColor"/>'),
+        onRun: (ctx: Ctx) => {
+          const commands = ctx.get(commandsCtx)
+          commands.call(clearTextInCurrentBlockCommand.key)
+          commands.call(wrapInBlockTypeCommand.key, { nodeType: bulletListSchema.type(ctx) })
+        },
+      },
+      {
+        label: props.resolvedMessages.blockMenu.items.orderedList,
+        icon: _bsi('<line x1="10" y1="6" x2="21" y2="6"/><line x1="10" y1="12" x2="21" y2="12"/><line x1="10" y1="18" x2="21" y2="18"/><text x="3" y="7.5" font-size="6" fill="currentColor" stroke="none" font-weight="600">1</text><text x="3" y="13.5" font-size="6" fill="currentColor" stroke="none" font-weight="600">2</text><text x="3" y="19.5" font-size="6" fill="currentColor" stroke="none" font-weight="600">3</text>'),
+        onRun: (ctx: Ctx) => {
+          const commands = ctx.get(commandsCtx)
+          commands.call(clearTextInCurrentBlockCommand.key)
+          commands.call(wrapInBlockTypeCommand.key, { nodeType: orderedListSchema.type(ctx) })
+        },
+      },
+    ],
+  },
+  {
+    label: props.resolvedMessages.blockMenu.groups.advanced,
+    items: [
+      {
+        label: props.resolvedMessages.blockMenu.items.codeBlock,
+        icon: _bsi('<polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/>'),
+        onRun: (ctx: Ctx) => {
+          const commands = ctx.get(commandsCtx)
+          commands.call(clearTextInCurrentBlockCommand.key)
+          commands.call(setBlockTypeCommand.key, { nodeType: codeBlockSchema.type(ctx) })
+        },
+      },
+      {
+        label: props.resolvedMessages.blockMenu.items.table,
+        icon: _bsi('<rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18M3 15h18M9 3v18M15 3v18"/>'),
+        onRun: (ctx: Ctx) => {
+          const commands = ctx.get(commandsCtx)
+          commands.call(clearTextInCurrentBlockCommand.key)
+          commands.call(addBlockTypeCommand.key, { nodeType: createTable(ctx, 3, 3) })
+        },
+      },
+    ],
+  },
+  {
+    label: props.resolvedMessages.blockMenu.groups.aimd,
+    items: props.localizedFieldTypes.map(ft => ({
+      label: ft.label,
+      icon: ft.svgIcon,
+      onRun: (_ctx: any) => {
+        emit('open-aimd-dialog', ft.type)
+      },
+    })),
+  },
+]).filter(group => group.items.length > 0))
+
+function onBlockMenuClick(item: BlockMenuItem) {
+  showBlockMenu.value = false
+  const editor = milkdownEditorRef.value
+  if (!editor) return
+
+  try {
+    editor.action((ctx) => {
+      item.onRun(ctx)
+      nextTick(() => {
+        try {
+          const view = ctx.get(editorViewCtx)
+          view.focus()
+        } catch {}
+      })
+    })
+  } catch {}
+}
+
+function closeBlockMenu(e: MouseEvent) {
+  const menu = document.querySelector('.aimd-block-add-menu')
+  const btn = document.querySelector('.aimd-block-handle-btn')
+  if (menu && !menu.contains(e.target as Node) && !(btn && btn.contains(e.target as Node))) {
+    showBlockMenu.value = false
+  }
+}
+
+let blockMenuListenerTimer: ReturnType<typeof setTimeout> | null = null
+
+watch(showBlockMenu, (val) => {
+  if (val) {
+    blockMenuListenerTimer = setTimeout(() => {
+      blockMenuListenerTimer = null
+      document.addEventListener('click', closeBlockMenu)
+    }, 0)
+  } else {
+    if (blockMenuListenerTimer !== null) {
+      clearTimeout(blockMenuListenerTimer)
+      blockMenuListenerTimer = null
+    }
+    document.removeEventListener('click', closeBlockMenu)
+  }
+})
+
+// --- Placeholder plugin ---
+const placeholderPlugin = $prose(() => {
+  return new Plugin({
+    key: new PluginKey('AIMD_PLACEHOLDER'),
+    props: {
+      decorations: (state) => {
+        const { selection } = state
+        if (!selection.empty) return null
+
+        const $pos = selection.$anchor
+        const node = $pos.parent
+        if (node.content.size > 0) return null
+
+        const inTable = findParent((n) => n.type.name === 'table')($pos)
+        if (inTable) return null
+
+        const before = $pos.before()
+        const deco = Decoration.node(before, before + node.nodeSize, {
+          class: 'aimd-placeholder',
+          'data-placeholder': props.resolvedMessages.blockMenu.placeholder,
+        })
+        return DecorationSet.create(state.doc, [deco])
+      },
+    },
+  })
+})
+
+// --- Table block icon SVGs ---
+const tableIcons = {
+  plus: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g clip-path="url(#clip0_971_7676)"><path d="M18 13H13V18C13 18.55 12.55 19 12 19C11.45 19 11 18.55 11 18V13H6C5.45 13 5 12.55 5 12C5 11.45 5.45 11 6 11H11V6C11 5.45 11.45 5 12 5C12.55 5 13 5.45 13 6V11H18C18.55 11 19 11.45 19 12C19 12.55 18.55 13 18 13Z"/></g><defs><clipPath id="clip0_971_7676"><rect width="24" height="24"/></clipPath></defs></svg>`,
+  remove: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M7.30775 20.4997C6.81058 20.4997 6.385 20.3227 6.031 19.9687C5.677 19.6147 5.5 19.1892 5.5 18.692V5.99973H5.25C5.0375 5.99973 4.85942 5.92782 4.71575 5.78398C4.57192 5.64015 4.5 5.46198 4.5 5.24948C4.5 5.03682 4.57192 4.85873 4.71575 4.71523C4.85942 4.57157 5.0375 4.49973 5.25 4.49973H9C9 4.2549 9.08625 4.04624 9.25875 3.87374C9.43108 3.7014 9.63967 3.61523 9.8845 3.61523H14.1155C14.3603 3.61523 14.5689 3.7014 14.7413 3.87374C14.9138 4.04624 15 4.2549 15 4.49973H18.75C18.9625 4.49973 19.1406 4.57165 19.2843 4.71548C19.4281 4.85932 19.5 5.03748 19.5 5.24998C19.5 5.46265 19.4281 5.64073 19.2843 5.78423C19.1406 5.9279 18.9625 5.99973 18.75 5.99973H18.5V18.692C18.5 19.1892 18.323 19.6147 17.969 19.9687C17.615 20.3227 17.1894 20.4997 16.6923 20.4997H7.30775ZM17 5.99973H7V18.692C7 18.7818 7.02883 18.8556 7.0865 18.9132C7.14417 18.9709 7.21792 18.9997 7.30775 18.9997H16.6923C16.7821 18.9997 16.8558 18.9709 16.9135 18.9132C16.9712 18.8556 17 18.7818 17 18.692V5.99973ZM10.1543 16.9997C10.3668 16.9997 10.5448 16.9279 10.6885 16.7842C10.832 16.6404 10.9037 16.4622 10.9037 16.2497V8.74973C10.9037 8.53723 10.8318 8.35907 10.688 8.21523C10.5443 8.07157 10.3662 7.99973 10.1535 7.99973C9.941 7.99973 9.76292 8.07157 9.61925 8.21523C9.47575 8.35907 9.404 8.53723 9.404 8.74973V16.2497C9.404 16.4622 9.47583 16.6404 9.6195 16.7842C9.76333 16.9279 9.94158 16.9997 10.1543 16.9997ZM13.8465 16.9997C14.059 16.9997 14.2371 16.9279 14.3807 16.7842C14.5243 16.6404 14.596 16.4622 14.596 16.2497V8.74973C14.596 8.53723 14.5242 8.35907 14.3805 8.21523C14.2367 8.07157 14.0584 7.99973 13.8458 7.99973C13.6333 7.99973 13.4552 8.07157 13.3115 8.21523C13.168 8.35907 13.0962 8.53723 13.0962 8.74973V16.2497C13.0962 16.4622 13.1682 16.6404 13.312 16.7842C13.4557 16.9279 13.6338 16.9997 13.8465 16.9997Z"/></svg>`,
+  alignLeft: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M4.25 20.5C4.0375 20.5 3.85942 20.4281 3.71575 20.2843C3.57192 20.1404 3.5 19.9622 3.5 19.7498C3.5 19.5371 3.57192 19.359 3.71575 19.2155C3.85942 19.0718 4.0375 19 4.25 19H19.75C19.9625 19 20.1406 19.0719 20.2843 19.2158C20.4281 19.3596 20.5 19.5378 20.5 19.7502C20.5 19.9629 20.4281 20.141 20.2843 20.2845C20.1406 20.4282 19.9625 20.5 19.75 20.5H4.25ZM4.25 16.625C4.0375 16.625 3.85942 16.5531 3.71575 16.4093C3.57192 16.2654 3.5 16.0872 3.5 15.8748C3.5 15.6621 3.57192 15.484 3.71575 15.3405C3.85942 15.1968 4.0375 15.125 4.25 15.125H13.75C13.9625 15.125 14.1406 15.1969 14.2843 15.3408C14.4281 15.4846 14.5 15.6628 14.5 15.8753C14.5 16.0879 14.4281 16.266 14.2843 16.4095C14.1406 16.5532 13.9625 16.625 13.75 16.625H4.25ZM4.25 12.75C4.0375 12.75 3.85942 12.6781 3.71575 12.5343C3.57192 12.3904 3.5 12.2122 3.5 11.9998C3.5 11.7871 3.57192 11.609 3.71575 11.4655C3.85942 11.3218 4.0375 11.25 4.25 11.25H19.75C19.9625 11.25 20.1406 11.3219 20.2843 11.4658C20.4281 11.6096 20.5 11.7878 20.5 12.0003C20.5 12.2129 20.4281 12.391 20.2843 12.5345C20.1406 12.6782 19.9625 12.75 19.75 12.75H4.25ZM4.25 8.875C4.0375 8.875 3.85942 8.80308 3.71575 8.65925C3.57192 8.51542 3.5 8.33725 3.5 8.12475C3.5 7.91208 3.57192 7.734 3.71575 7.5905C3.85942 7.44683 4.0375 7.375 4.25 7.375H13.75C13.9625 7.375 14.1406 7.44692 14.2843 7.59075C14.4281 7.73458 14.5 7.91275 14.5 8.12525C14.5 8.33792 14.4281 8.516 14.2843 8.6595C14.1406 8.80317 13.9625 8.875 13.75 8.875H4.25ZM4.25 5C4.0375 5 3.85942 4.92808 3.71575 4.78425C3.57192 4.64042 3.5 4.46225 3.5 4.24975C3.5 4.03708 3.57192 3.859 3.71575 3.7155C3.85942 3.57183 4.0375 3.5 4.25 3.5H19.75C19.9625 3.5 20.1406 3.57192 20.2843 3.71575C20.4281 3.85958 20.5 4.03775 20.5 4.25025C20.5 4.46292 20.4281 4.641 20.2843 4.7845C20.1406 4.92817 19.9625 5 19.75 5H4.25Z"/></svg>`,
+  alignCenter: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M4.25 20.5C4.0375 20.5 3.85942 20.4281 3.71575 20.2843C3.57192 20.1404 3.5 19.9622 3.5 19.7498C3.5 19.5371 3.57192 19.359 3.71575 19.2155C3.85942 19.0718 4.0375 19 4.25 19H19.75C19.9625 19 20.1406 19.0719 20.2843 19.2158C20.4281 19.3596 20.5 19.5378 20.5 19.7502C20.5 19.9629 20.4281 20.141 20.2843 20.2845C20.1406 20.4282 19.9625 20.5 19.75 20.5H4.25ZM8.25 16.625C8.0375 16.625 7.85942 16.5531 7.71575 16.4093C7.57192 16.2654 7.5 16.0872 7.5 15.8748C7.5 15.6621 7.57192 15.484 7.71575 15.3405C7.85942 15.1968 8.0375 15.125 8.25 15.125H15.75C15.9625 15.125 16.1406 15.1969 16.2843 15.3408C16.4281 15.4846 16.5 15.6628 16.5 15.8753C16.5 16.0879 16.4281 16.266 16.2843 16.4095C16.1406 16.5532 15.9625 16.625 15.75 16.625H8.25ZM4.25 12.75C4.0375 12.75 3.85942 12.6781 3.71575 12.5343C3.57192 12.3904 3.5 12.2122 3.5 11.9998C3.5 11.7871 3.57192 11.609 3.71575 11.4655C3.85942 11.3218 4.0375 11.25 4.25 11.25H19.75C19.9625 11.25 20.1406 11.3219 20.2843 11.4658C20.4281 11.6096 20.5 11.7878 20.5 12.0003C20.5 12.2129 20.4281 12.391 20.2843 12.5345C20.1406 12.6782 19.9625 12.75 19.75 12.75H4.25ZM8.25 8.875C8.0375 8.875 7.85942 8.80308 7.71575 8.65925C7.57192 8.51542 7.5 8.33725 7.5 8.12475C7.5 7.91208 7.57192 7.734 7.71575 7.5905C7.85942 7.44683 8.0375 7.375 8.25 7.375H15.75C15.9625 7.375 16.1406 7.44692 16.2843 7.59075C16.4281 7.73458 16.5 7.91275 16.5 8.12525C16.5 8.33792 16.4281 8.516 16.2843 8.6595C16.1406 8.80317 15.9625 8.875 15.75 8.875H8.25ZM4.25 5C4.0375 5 3.85942 4.92808 3.71575 4.78425C3.57192 4.64042 3.5 4.46225 3.5 4.24975C3.5 4.03708 3.57192 3.859 3.71575 3.7155C3.85942 3.57183 4.0375 3.5 4.25 3.5H19.75C19.9625 3.5 20.1406 3.57192 20.2843 3.71575C20.4281 3.85958 20.5 4.03775 20.5 4.25025C20.5 4.46292 20.4281 4.641 20.2843 4.7845C20.1406 4.92817 19.9625 5 19.75 5H4.25Z"/></svg>`,
+  alignRight: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M4.25 5C4.0375 5 3.85942 4.92808 3.71575 4.78425C3.57192 4.64042 3.5 4.46225 3.5 4.24975C3.5 4.03708 3.57192 3.859 3.71575 3.7155C3.85942 3.57183 4.0375 3.5 4.25 3.5H19.75C19.9625 3.5 20.1406 3.57192 20.2843 3.71575C20.4281 3.85958 20.5 4.03775 20.5 4.25025C20.5 4.46292 20.4281 4.641 20.2843 4.7845C20.1406 4.92817 19.9625 5 19.75 5H4.25ZM10.25 8.875C10.0375 8.875 9.85942 8.80308 9.71575 8.65925C9.57192 8.51542 9.5 8.33725 9.5 8.12475C9.5 7.91208 9.57192 7.734 9.71575 7.5905C9.85942 7.44683 10.0375 7.375 10.25 7.375H19.75C19.9625 7.375 20.1406 7.44692 20.2843 7.59075C20.4281 7.73458 20.5 7.91275 20.5 8.12525C20.5 8.33792 20.4281 8.516 20.2843 8.6595C20.1406 8.80317 19.9625 8.875 19.75 8.875H10.25ZM4.25 12.75C4.0375 12.75 3.85942 12.6781 3.71575 12.5343C3.57192 12.3904 3.5 12.2122 3.5 11.9998C3.5 11.7871 3.57192 11.609 3.71575 11.4655C3.85942 11.3218 4.0375 11.25 4.25 11.25H19.75C19.9625 11.25 20.1406 11.3219 20.2843 11.4658C20.4281 11.6096 20.5 11.7878 20.5 12.0003C20.5 12.2129 20.4281 12.391 20.2843 12.5345C20.1406 12.6782 19.9625 12.75 19.75 12.75H4.25ZM10.25 16.625C10.0375 16.625 9.85942 16.5531 9.71575 16.4093C9.57192 16.2654 9.5 16.0872 9.5 15.8748C9.5 15.6621 9.57192 15.484 9.71575 15.3405C9.85942 15.1968 10.0375 15.125 10.25 15.125H19.75C19.9625 15.125 20.1406 15.1969 20.2843 15.3408C20.4281 15.4846 20.5 15.6628 20.5 15.8753C20.5 16.0879 20.4281 16.266 20.2843 16.4095C20.1406 16.5532 19.9625 16.625 19.75 16.625H10.25ZM4.25 20.5C4.0375 20.5 3.85942 20.4281 3.71575 20.2843C3.57192 20.1404 3.5 19.9622 3.5 19.7498C3.5 19.5371 3.57192 19.359 3.71575 19.2155C3.85942 19.0718 4.0375 19 4.25 19H19.75C19.9625 19 20.1406 19.0719 20.2843 19.2158C20.4281 19.3596 20.5 19.5378 20.5 19.7502C20.5 19.9629 20.4281 20.141 20.2843 20.2845C20.1406 20.4282 19.9625 20.5 19.75 20.5H4.25Z"/></svg>`,
+  dragHandle: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path d="M3.5 9.83366C3.35833 9.83366 3.23961 9.78571 3.14383 9.68983C3.04794 9.59394 3 9.47516 3 9.33349C3 9.19171 3.04794 9.07299 3.14383 8.97733C3.23961 8.88155 3.35833 8.83366 3.5 8.83366H12.5C12.6417 8.83366 12.7604 8.8816 12.8562 8.97749C12.9521 9.07338 13 9.19216 13 9.33383C13 9.4756 12.9521 9.59433 12.8562 9.68999C12.7604 9.78577 12.6417 9.83366 12.5 9.83366H3.5ZM3.5 7.16699C3.35833 7.16699 3.23961 7.11905 3.14383 7.02316C3.04794 6.92727 3 6.80849 3 6.66683C3 6.52505 3.04794 6.40633 3.14383 6.31066C3.23961 6.21488 3.35833 6.16699 3.5 6.16699H12.5C12.6417 6.16699 12.7604 6.21494 12.8562 6.31083C12.9521 6.40671 13 6.52549 13 6.66716C13 6.80894 12.9521 6.92766 12.8562 7.02333C12.7604 7.1191 12.6417 7.16699 12.5 7.16699H3.5Z"/></svg>`,
+}
+
+const milkdownEditorRef = shallowRef<Editor | null>(null)
+let isSyncingContent = false
+let lastKnownMarkdown = normalizeComparableAimdMarkdown(props.content)
+const programmaticMarkdownSyncGuard = createProgrammaticMarkdownSyncGuard()
+const PROGRAMMATIC_MARKDOWN_SUPPRESSION_MS = 420
+let suppressProgrammaticMarkdownUpdatedUntil = 0
+
+// --- Milkdown inner component ---
+const MilkdownEditorInner = defineComponent({
+  name: 'MilkdownEditorInner',
+  props: {
+    defaultValue: { type: String, default: '' },
+    enableBlockHandle: { type: Boolean, default: true },
+    readonly: { type: Boolean, default: false },
+    milkdownPlugins: { type: Array as () => MilkdownPlugin[] | undefined, default: undefined },
+  },
+  emits: ['ready', 'markdown-updated'],
+  setup(innerProps, { emit: innerEmit }) {
+    const defaultVal = toRef(innerProps, 'defaultValue')
+
+    useEditor((root) => {
+      const editor = MilkdownEditor.make()
+        .config((ctx) => {
+          ctx.set(rootCtx, root)
+          ctx.set(defaultValueCtx, toMilkdownMarkdown(defaultVal.value))
+          ctx.set(editorViewOptionsCtx, createEditorViewOptions(innerProps.readonly))
+          ctx.get(listenerCtx)
+            .markdownUpdated((_ctx, markdown, prev) => {
+              if (markdown !== prev) {
+                innerEmit('markdown-updated', _ctx, markdown, prev)
+              }
+            })
+        })
+        .use(commonmark)
+        .use(gfm)
+        .use(history)
+        .use(listener)
+        .use(clipboard)
+        .use(indent)
+        .use(trailing)
+        .use(innerProps.milkdownPlugins ?? aimdMilkdownPlugins)
+        .use(tableBlock)
+        .use(placeholderPlugin)
+        .config((ctx) => {
+          ctx.update(tableBlockConfig.key, (defaultConfig) => ({
+            ...defaultConfig,
+            renderButton: (renderType: string) => {
+              switch (renderType) {
+                case 'add_row': return tableIcons.plus
+                case 'add_col': return tableIcons.plus
+                case 'delete_row': return tableIcons.remove
+                case 'delete_col': return tableIcons.remove
+                case 'align_col_left': return tableIcons.alignLeft
+                case 'align_col_center': return tableIcons.alignCenter
+                case 'align_col_right': return tableIcons.alignRight
+                case 'col_drag_handle': return tableIcons.dragHandle
+                case 'row_drag_handle': return tableIcons.dragHandle
+                default: return ''
+              }
+            },
+          }))
+        })
+
+      if (innerProps.enableBlockHandle) {
+        editor.use(block)
+      }
+
+      return editor
+    })
+
+    const [loadingState, getInstance] = useInstance()
+
+    watch(loadingState, (isLoading) => {
+      if (!isLoading) {
+        const editorInstance = getInstance()
+        if (editorInstance) {
+          innerEmit('ready', editorInstance)
+
+          if (innerProps.enableBlockHandle) {
+            nextTick(() => {
+              try {
+                editorInstance.action((ctx) => {
+                  const blockContent = document.createElement('div')
+                  blockContent.className = 'aimd-block-handle'
+
+                  const btn = document.createElement('div')
+                  btn.className = 'aimd-block-handle-btn'
+                  btn.title = props.resolvedMessages.blockMenu.addBlockTitle
+                  btn.innerHTML = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>`
+
+                  btn.addEventListener('mousedown', (e) => {
+                    e.preventDefault()
+                    e.stopPropagation()
+                  })
+                  blockContent.appendChild(btn)
+
+                  // eslint-disable-next-line prefer-const
+                  let providerRef: any = null
+
+                  btn.addEventListener('click', (e) => {
+                    e.preventDefault()
+                    e.stopPropagation()
+
+                    const rect = btn.getBoundingClientRect()
+
+                    const view = ctx.get(editorViewCtx)
+                    if (!view.hasFocus()) view.focus()
+
+                    const active = providerRef?.active
+                    if (!active) return
+
+                    const { state, dispatch } = view
+                    const pos = active.$pos.pos + active.node.nodeSize
+                    let tr = state.tr.insert(pos, paragraphSchema.type(ctx).create())
+                    tr = tr.setSelection(TextSelection.near(tr.doc.resolve(pos)))
+                    dispatch(tr.scrollIntoView())
+
+                    providerRef?.hide()
+
+                    blockMenuPos.value = { x: rect.right + 8, y: rect.top }
+                    showBlockMenu.value = true
+
+                    nextTick(() => {
+                      const menuEl = document.querySelector('.aimd-block-add-menu') as HTMLElement
+                      if (menuEl) {
+                        const menuRect = menuEl.getBoundingClientRect()
+                        const viewportHeight = window.innerHeight
+                        if (menuRect.bottom > viewportHeight) {
+                          const newTop = rect.top - menuRect.height
+                          blockMenuPos.value = { x: rect.right + 8, y: Math.max(4, newTop) }
+                        }
+                      }
+                    })
+                  })
+
+                  const provider = new BlockProvider({
+                    ctx,
+                    content: blockContent,
+                    getOffset: () => ({ mainAxis: 16, crossAxis: 0 }),
+                    getPlacement: () => 'left',
+                  })
+                  provider.update()
+                  blockContent.draggable = false
+                  providerRef = provider
+                  blockProviderRef.value = provider
+                })
+              } catch (e) {
+                console.warn('BlockProvider init failed:', e)
+              }
+            })
+          }
+        }
+      }
+    }, { immediate: true })
+
+    return () => h(Milkdown)
+  },
+})
+
+function onInnerReady(editor: Editor) {
+  milkdownEditorRef.value = editor
+  lastKnownMarkdown = normalizeComparableAimdMarkdown(props.content)
+  emit('ready', editor)
+}
+
+function onInnerMarkdownUpdated(ctx: any, markdown: string, prev: string) {
+  const isWithinProgrammaticSuppressionWindow = Date.now() < suppressProgrammaticMarkdownUpdatedUntil
+  const comparableMarkdown = normalizeComparableAimdMarkdown(markdown)
+  if (
+    isSyncingContent
+    || isWithinProgrammaticSuppressionWindow
+    || programmaticMarkdownSyncGuard.consume(comparableMarkdown)
+  ) {
+    lastKnownMarkdown = isWithinProgrammaticSuppressionWindow
+      ? normalizeComparableAimdMarkdown(props.content)
+      : comparableMarkdown
+    return
+  }
+
+  lastKnownMarkdown = comparableMarkdown
+  emit('markdown-updated', ctx, markdown, prev)
+}
+
+function syncMilkdownContent(content: string): boolean {
+  if (!milkdownEditorRef.value) {
+    return false
+  }
+
+  isSyncingContent = true
+  try {
+    const comparableContent = normalizeComparableAimdMarkdown(content)
+    suppressProgrammaticMarkdownUpdatedUntil = Date.now() + PROGRAMMATIC_MARKDOWN_SUPPRESSION_MS
+    programmaticMarkdownSyncGuard.track(comparableContent)
+    milkdownEditorRef.value.action(replaceAll(toMilkdownMarkdown(content)))
+    lastKnownMarkdown = comparableContent
+  } catch {
+    isSyncingContent = false
+    return false
+  }
+  isSyncingContent = false
+  return true
+}
+
+watch(() => props.content, (content) => {
+  const comparableContent = normalizeComparableAimdMarkdown(content)
+  if (!props.active || !milkdownEditorRef.value || comparableContent === lastKnownMarkdown) {
+    return
+  }
+
+  syncMilkdownContent(content)
+})
+
+watch(() => props.readonly, (readonly) => {
+  if (!milkdownEditorRef.value) {
+    return
+  }
+
+  try {
+    milkdownEditorRef.value.action((ctx) => {
+      ctx.get(editorViewCtx).setProps(createEditorViewOptions(!!readonly))
+    })
+  } catch {}
+}, { immediate: true })
+
+watch(() => props.active, async (active) => {
+  if (
+    !active
+    || !milkdownEditorRef.value
+    || normalizeComparableAimdMarkdown(props.content) === lastKnownMarkdown
+  ) {
+    return
+  }
+
+  await nextTick()
+  syncMilkdownContent(props.content)
+})
+
+onBeforeUnmount(() => {
+  programmaticMarkdownSyncGuard.clear()
+  blockProviderRef.value?.destroy()
+  if (blockMenuListenerTimer !== null) {
+    clearTimeout(blockMenuListenerTimer)
+    blockMenuListenerTimer = null
+  }
+  document.removeEventListener('click', closeBlockMenu)
+})
+
+// Expose editor ref for parent
+function getEditor() { return milkdownEditorRef.value }
+
+defineExpose({
+  getEditor,
+})
+</script>
+
+<template>
+  <div class="aimd-editor-wysiwyg-mode" :style="{ height: minHeight + 'px', overflowY: 'auto' }">
+    <MilkdownProvider>
+      <MilkdownEditorInner
+        :default-value="content"
+        :enable-block-handle="enableBlockHandle"
+        :readonly="!!readonly"
+        :milkdown-plugins="milkdownPlugins"
+        @ready="onInnerReady"
+        @markdown-updated="onInnerMarkdownUpdated"
+      />
+    </MilkdownProvider>
+  </div>
+
+  <!-- Block add menu (teleported to body for correct positioning) -->
+  <Teleport to="body">
+    <div v-if="showBlockMenu" class="aimd-block-add-menu" :style="{ top: blockMenuPos.y + 'px', left: blockMenuPos.x + 'px' }">
+      <template v-for="(group, gi) in blockMenuGroups" :key="group.label">
+        <div v-if="gi > 0" class="aimd-block-add-menu-divider" />
+        <div class="aimd-block-add-menu-group-label">{{ group.label }}</div>
+        <button
+          v-for="item in group.items"
+          :key="item.label"
+          class="aimd-block-add-menu-item"
+          @click="onBlockMenuClick(item)"
+        >
+          <span class="aimd-block-add-menu-icon" v-html="item.icon" />
+          <span>{{ item.label }}</span>
+        </button>
+      </template>
+    </div>
+  </Teleport>
+</template>

package/src/vue/aimdInlineMarkdownNormalization.ts

@@ -0,0 +1,10 @@
+const AIMD_INLINE_TEMPLATE_PATTERN = /\{\{(var_table|var|step|check|ref_step|ref_var|ref_fig|cite)\s*\|[^}]+?\}\}/g
+const MARKDOWN_ESCAPABLE_PATTERN = /\\([\\!"#$%&'()*+,./:;<=>?@[\\\]^_`{|}~-])/g
+
+function normalizeSingleAimdInlineTemplate(template: string): string {
+  return template.replace(MARKDOWN_ESCAPABLE_PATTERN, '$1')
+}
+
+export function normalizeAimdInlineTemplateMarkdownEscapes(content: string): string {
+  return content.replace(AIMD_INLINE_TEMPLATE_PATTERN, normalizeSingleAimdInlineTemplate)
+}

package/src/vue/comparableAimdMarkdown.ts

@@ -0,0 +1,6 @@
+import { restoreAimdInlineTemplates } from '@airalogy/aimd-core'
+import { normalizeAimdInlineTemplateMarkdownEscapes } from './aimdInlineMarkdownNormalization'
+
+export function normalizeComparableAimdMarkdown(markdown: string): string {
+  return normalizeAimdInlineTemplateMarkdownEscapes(restoreAimdInlineTemplates(markdown))
+}

package/src/vue/env.d.ts

@@ -0,0 +1,7 @@
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}
+
+declare module '*.css' {}

package/src/vue/index.ts

@@ -0,0 +1,45 @@
+export { default as AimdEditor } from './AimdEditor.vue'
+export { default as AimdEditorToolbar } from './AimdEditorToolbar.vue'
+export { default as AimdEditorTopBar } from './AimdEditorTopBar.vue'
+export { default as AimdSourceEditor } from './AimdSourceEditor.vue'
+export { default as AimdWysiwygEditor } from './AimdWysiwygEditor.vue'
+export { default as AimdFieldDialog } from './AimdFieldDialog.vue'
+export { useEditorContent } from './useEditorContent'
+export {
+  createAimdEditorMessages,
+  DEFAULT_AIMD_EDITOR_LOCALE,
+  resolveAimdEditorLocale,
+} from './locales'
+export {
+  AIMD_FIELD_TYPE_DEFINITIONS,
+  AIMD_FIELD_TYPES,
+  MD_TOOLBAR_ITEM_DEFINITIONS,
+  MD_TOOLBAR_ITEMS,
+  createAimdFieldTypes,
+  createAimdVarTypePresets,
+  createMdToolbarItems,
+  getDefaultAimdFields,
+  buildAimdSyntax,
+  getQuickAimdSyntax,
+} from './types'
+export type {
+  AimdFieldTypeDefinition,
+  AimdFieldType,
+  AimdVarTypePresetOption,
+  MdToolbarItemDefinition,
+  MdToolbarItem,
+  AimdEditorProps,
+  AimdEditorEmits,
+} from './types'
+export type {
+  AimdEditorLocale,
+  AimdEditorMessages,
+  AimdEditorMessagesInput,
+} from './locales'
+export {
+  aimdMilkdownPlugins,
+  aimdRemarkPlugin,
+  aimdFieldNode,
+  aimdFieldView,
+  aimdFieldInputRule,
+} from './milkdown-aimd-plugin'