adtec-core-package 3.0.0 → 3.0.1

package/src/components/RichTextEditor/RichTextEditor.vue

@@ -1,475 +1,643 @@
-<!--创建人 xux-->
-<!--说明: RichTextEditor  https://www.wangeditor.com/-->
-<!--创建时间: 2025/1/3 下午1:43-->
-<!--修改时间: 2025/1/3 下午1:43-->
+<!-- RichTextEditor：基于预编译 Umo Editor（prebuilt/umo-editor），对外 API 与原 AiEditor 封装保持一致 -->
 <template>
-  <el-flex>
-    <div
-      ref="divRef"
-      :style="{
-        height: '100%',
-        width: '100%',
-        fontSize: '14px',
-      }"
+  <div ref="rootRef" class="umo-rich-text-editor-root">
+    <UmoEditor
+      v-if="umoMountOptions"
+      :key="umoRuntimeKey"
+      ref="editorRef"
+      class="umo-rich-text-editor"
+      v-bind="umoMountOptions"
+      @created="onEditorCreated"
+      @changed="onEditorChanged"
+      @blur="onEditorBlur"
     />
-  </el-flex>
+  </div>
 </template>
+
 <script setup lang="ts">
-import { AiEditor } from 'aieditor'
-import 'aieditor/dist/style.css'
-import { onActivated, type WatchStopHandle } from 'vue'
-import { onMounted, onUnmounted, ref, watch } from 'vue'
+import { UmoEditor } from '../../../prebuilt/umo-editor/umo-editor.js'
+import '../../../prebuilt/umo-editor/umo-editor.css'
 import { ElMessage } from 'element-plus'
+import { computed, getCurrentInstance, nextTick, onBeforeUnmount, onMounted, onUnmounted, ref, shallowRef, watch, type App } from 'vue'
+import { v4 as uuidv4 } from 'uuid'
+import {
+  finalizeHtml,
+  initHtml,
+  installUmoDocumentStorageShim,
+  purgeUmoDocumentLocalStorage,
+  releaseUmoDocumentStorageShim,
+} from './richTextHtmlUtils'
+import { installUmoEditorApp } from './installUmoEditorApp'
 
-enum WatchType {
-  initWatch = 'initWatch',
+export type RichTextEditorConfig = {
+  placeholder?: string
+  editable?: boolean
+  [key: string]: unknown
 }
 
-const watchHandlers = ref<Partial<Record<WatchType, WatchStopHandle>>>({})
-const emit = defineEmits(['onBlur', 'onChange'])
-const divRef = ref()
-let aiEditor: AiEditor | null
+/** 始终保留 BlockImage NodeView；只读由 document.readOnly + node-view 静态分支控制 */
+const DISABLED_EXTENSIONS = ['mermaid', 'diagrams'] as const
+
+const OFFICIAL_TOOLBAR_MENUS = ['base', 'insert', 'table', 'tools', 'page', 'view', 'export'] as const
+
+const emit = defineEmits<{
+  onBlur: [payload: { html: string; text: string }]
+  onChange: [payload: { html: string; text: string }]
+}>()
+
 const props = withDefaults(
   defineProps<{
-    /**
-     * html 内容
-     */
-    // modelValue: string
-    /**
-     * 工具栏显示
-     */
     showToolbar?: boolean
-    /**
-     * 边框宽度
-     */
     borderWidth?: string
-    /**
-     * 编辑器配置 IEditorConfig
-     */
-    editorConfig?: any
-    /**
-     * 是否编辑状态，一直生效（config中edit只用在初始化时生效）
-     */
+    editorConfig?: RichTextEditorConfig
     isEdit?: boolean
   }>(),
   {
-    // modelValue: '',
     showToolbar: true,
     borderWidth: '1px',
-    editorConfig: {},
+    editorConfig: () => ({}),
     isEdit: true,
   },
 )
-const model = defineModel({
-  type: [String, null, undefined],
+
+const model = defineModel<string | null | undefined>({
   required: false,
   default: null,
 })
-const text = defineModel('text', {
-  type: String,
+const text = defineModel<string>('text', {
   required: false,
 })
-//字体对照表
-const fontSizes = [
-  { name: '八号', pt: 5, px: 5 },
-  { name: '七号', pt: 5.5, px: 6 },
-  { name: '小六', pt: 6.5, px: 8 },
-  { name: '六号', pt: 7.5, px: 9 },
-  { name: '小五', pt: 9, px: 11 },
-  { name: '五号', pt: 10.5, px: 12 },
-  { name: '小四', pt: 12, px: 14 },
-  { name: '四号', pt: 14, px: 16 },
-  { name: '小三', pt: 15, px: 18 },
-  { name: '三号', pt: 16, px: 19 },
-  { name: '小二', pt: 18, px: 21 },
-  { name: '二号', pt: 22, px: 26 },
-  { name: '小一', pt: 24, px: 28 },
-  { name: '一号', pt: 26, px: 30 },
-  { name: '小初', pt: 36, px: 42 },
-  { name: '初号', pt: 42, px: 49 },
-]
-
-function setDefaultPx(html: string) {
-  // 创建临时div用于解析HTML
-  const tempDiv = document.createElement('div')
-  tempDiv.innerHTML = html
-  // 获取所有p元素
-  const pElements = tempDiv.querySelectorAll('p')
-
-  pElements.forEach((p) => {
-    // 检查是否有内联样式设置了fontSize
-    const hasInlineFontSize = !!p.style.fontSize
-    // 只有当没有设置字体大小时才添加
-    if (!hasInlineFontSize) {
-      p.style.fontSize = '14px'
+
+const editorRef = ref<InstanceType<typeof UmoEditor> | null>(null)
+const rootRef = ref<HTMLElement | null>(null)
+/** setup 同步捕获；async/Observer 内 getCurrentInstance() 为 null */
+const hostApp = getCurrentInstance()?.appContext?.app as App | undefined
+const editorKey = `umo-${uuidv4()}`
+/** 编辑/只读扩展集不同，切换时需 remount；key 变化强制重建 UmoEditor */
+const umoRuntimeKey = ref(editorKey)
+const lastMountEditable = ref<boolean | null>(null)
+const ready = ref(false)
+const syncingContent = ref(false)
+/** 挂载快照，避免 computed props 变更触发 Umo 内部反复 patch 导致 emitsOptions null */
+const umoMountOptions = shallowRef<Record<string, unknown> | null>(null)
+
+let remounting = false
+let blockImageRepairAttempts = 0
+
+let visibilityResizeObserver: ResizeObserver | null = null
+let ancestorVisibilityObserver: MutationObserver | null = null
+let rootWasHidden = false
+
+function isPanelVisible() {
+  const el = rootRef.value
+  if (!el || typeof document === 'undefined') return false
+  let node: HTMLElement | null = el
+  while (node && node !== document.documentElement) {
+    const style = getComputedStyle(node)
+    if (style.display === 'none') return false
+    node = node.parentElement
+  }
+  return true
+}
+
+function handlePanelShown() {
+  if (!isPanelVisible() || !umoMountOptions.value) {
+    rootWasHidden = true
+    return
+  }
+  if (!rootWasHidden) return
+  rootWasHidden = false
+  if (!ready.value) return
+  void applyEditableStateWithRetry()
+  if (editable.value) {
+    void ensureBlockImageNodeView()
+  }
+}
+
+function observeAncestorsVisibility() {
+  const el = rootRef.value
+  if (!el || typeof MutationObserver === 'undefined' || ancestorVisibilityObserver) return
+
+  const targets = new Set<HTMLElement>()
+  let node: HTMLElement | null = el
+  while (node) {
+    if (
+      node.hasAttribute('aria-hidden') ||
+      node.classList.contains('el-tab-pane') ||
+      node.classList.contains('el-collapse-item') ||
+      node.getAttribute('role') === 'tabpanel'
+    ) {
+      targets.add(node)
     }
+    node = node.parentElement
+  }
+  if (targets.size === 0) return
+
+  ancestorVisibilityObserver = new MutationObserver(() => {
+    handlePanelShown()
   })
-  return tempDiv.innerHTML
+  for (const target of targets) {
+    ancestorVisibilityObserver.observe(target, {
+      attributes: true,
+      attributeFilter: ['aria-hidden', 'class', 'style'],
+    })
+  }
 }
 
-function convertPxToPt(html: string) {
-  html = setDefaultPx(html)
-  const regex = /font-size: (\d+)px/g
-  return html.replace(regex, (match, pxValue) => {
-    const px = parseInt(pxValue, 10)
-    const entry = fontSizes.find((item) => item.px === px)
-    if (entry) {
-      return `font-size: ${entry.pt}pt`
-    }
-    return match
+function observePanelVisibility() {
+  const el = rootRef.value
+  if (!el) return
+  observeAncestorsVisibility()
+  if (typeof ResizeObserver !== 'undefined' && !visibilityResizeObserver) {
+    visibilityResizeObserver = new ResizeObserver(() => {
+      handlePanelShown()
+    })
+    visibilityResizeObserver.observe(el)
+  }
+}
+
+purgeUmoDocumentLocalStorage()
+installUmoDocumentStorageShim()
+
+function clearVisibilityObserver() {
+  visibilityResizeObserver?.disconnect()
+  visibilityResizeObserver = null
+  ancestorVisibilityObserver?.disconnect()
+  ancestorVisibilityObserver = null
+}
+
+function initUmoMountOptions(content?: string) {
+  seedUmoLayoutStorage()
+  umoMountOptions.value = buildUmoMountOptions(initHtml(content ?? model.value ?? ''))
+  lastMountEditable.value = editable.value
+}
+
+async function remountEditor() {
+  if (remounting || !umoMountOptions.value) return
+  remounting = true
+  try {
+    const html = ready.value
+      ? finalizeHtml(getRawHtml(), getRootElement())
+      : initHtml(model.value ?? '')
+    ready.value = false
+    editorRef.value = null
+    umoMountOptions.value = null
+    umoRuntimeKey.value = `${editorKey}-${Date.now()}`
+    await nextTick()
+    ensureUmoGlobals()
+    initUmoMountOptions(html)
+  } finally {
+    remounting = false
+  }
+}
+
+function ensureUmoGlobals() {
+  return installUmoEditorApp(hostApp ?? getCurrentInstance()?.appContext?.app)
+}
+
+const editable = computed(() => {
+  if (!props.isEdit) return false
+  if (props.editorConfig?.editable === false) return false
+  return true
+})
+
+function seedUmoLayoutStorage() {
+  if (typeof localStorage === 'undefined') return
+  const showToolbar = props.showToolbar && editable.value
+  try {
+    localStorage.setItem(`umo-editor:${umoRuntimeKey.value}:layout`, JSON.stringify('web'))
+    localStorage.setItem(
+      `umo-editor:${umoRuntimeKey.value}:toolbar`,
+      JSON.stringify({ mode: 'ribbon', show: showToolbar }),
+    )
+  } catch {
+    // ignore quota / private mode
+  }
+}
+
+function waitEditorPaintFrames() {
+  return new Promise<void>((resolve) => {
+    requestAnimationFrame(() => requestAnimationFrame(() => resolve()))
   })
 }
 
-function convertPtToPx(html: string) {
-  const regex = /font-size: (\d+)pt/g
-  return html.replace(regex, (match, ptValue) => {
-    const pt = parseFloat(ptValue)
-    const entry = fontSizes.find((item) => item.pt === pt)
-    if (entry) {
-      return `font-size: ${entry.px}px`
+function usesPlainImageDom(root: HTMLElement | null): boolean {
+  const prose = root?.querySelector('.ProseMirror')
+  if (!prose) return false
+  if (prose.querySelector('.umo-node-view')) return false
+  return prose.querySelector(':scope > img') !== null
+}
+
+/** contentComponent 就绪前写入的图片会渲染为裸 img；重灌 HTML 可触发 BlockImage NodeView */
+async function ensureBlockImageNodeView() {
+  if (!editable.value || !umoMountOptions.value) return
+  await nextTick()
+  await waitEditorPaintFrames()
+  await nextTick()
+  await waitEditorPaintFrames()
+  if (!usesPlainImageDom(rootRef.value)) {
+    blockImageRepairAttempts = 0
+    return
+  }
+  if (blockImageRepairAttempts >= 3) return
+  blockImageRepairAttempts += 1
+
+  const editor = getEditorInstance()
+  if (editor?.setContent && ready.value) {
+    const html = initHtml(getRawHtml() || (model.value ?? ''))
+    editor.setContent(html, { emitUpdate: false })
+    await nextTick()
+    await waitEditorPaintFrames()
+    if (!usesPlainImageDom(rootRef.value)) {
+      blockImageRepairAttempts = 0
+      return
     }
-    return match
-  })
+  }
+
+  if (ready.value) {
+    publishModelFromEditor(true)
+  }
+  await remountEditor()
+  await nextTick()
+  await applyEditableStateWithRetry()
 }
 
-//默认的配置
-const defaultConfig = {
-  placeholder: '请输入内容...',
-  draggable: false, // 禁止拖拽
-  toolbarExcludeKeys: [
-    'eraser',
-    'link',
-    'code',
-    'attachment',
-    'code-block',
-    'video',
-    'ai',
-    'quote',
-    'emoji',
-  ],
-  textSelectionBubbleMenu: {
-    enable: true,
-    items: ['Bold', 'Italic', 'Underline', 'Strike', 'code', 'comment'],
-  },
-  image: {
-    uploaderEvent: {
-      onUploadBefore: (file, uploadUrl, headers) => {
-        if (file.size > 2 * 1024 * 1024) {
-          ElMessage.warning('图片大小不能超过2M')
-          return false
-        }
+function buildUmoMountOptions(content: string) {
+  const placeholder =
+    typeof props.editorConfig?.placeholder === 'string' && props.editorConfig.placeholder.trim()
+      ? props.editorConfig.placeholder
+      : '请输入内容...'
+  const editableNow = editable.value
+
+  return {
+    editorKey: umoRuntimeKey.value,
+    locale: 'zh-CN',
+    theme: 'light',
+    height: '100%',
+    fullscreenZIndex: 2500,
+    toolbar: {
+      showSaveLabel: false,
+      defaultMode: 'ribbon',
+      menus:
+        props.showToolbar && editableNow
+          ? [...OFFICIAL_TOOLBAR_MENUS]
+          : (['base'] as unknown as string[]),
+    },
+    page: {
+      layouts: ['page', 'web'],
+    },
+    document: {
+      title: '',
+      content,
+      placeholder: {
+        zh_CN: placeholder,
+      },
+      readOnly: !editableNow,
+      autofocus: editableNow,
+      enableMarkdown: false,
+      enableSpellcheck: false,
+      autoSave: {
+        enabled: false,
       },
-      // onSuccess: (file, response) => {
-      //   console.log('onSuccess', file, response)
-      // }
     },
-  },
-  htmlPasteConfig: {
-    pasteProcessor: (html) => {
-      // return html;
-      // console.log('html:', html, 'xxxxxx', removeAllFontFamilyStyles(html))
-      return removeAllFontFamilyStyles(html)
+    shareUrl: typeof location !== 'undefined' ? location.href : '',
+    disableExtensions: [...DISABLED_EXTENSIONS],
+    extensions: [],
+    async onFileUpload(file: File) {
+      if (file.type.startsWith('image/') && file.size > 2 * 1024 * 1024) {
+        ElMessage.warning('图片大小不能超过2M')
+        throw new Error('image too large')
+      }
+      const url = await readFileAsDataUrl(file)
+      return {
+        id: uuidv4(),
+        url,
+      }
     },
-  },
-  fontSize: {
-    defaultValue: ' ',
-    values: [
-      { name: '小四', value: 14 },
-      { name: '初号', value: 49 },
-      { name: '小初', value: 42 },
-      { name: '一号', value: 30 },
-      { name: '小一', value: 28 },
-      { name: '二号', value: 26 },
-      { name: '小二', value: 21 },
-      { name: '三号', value: 19 },
-      { name: '小三', value: 18 },
-      { name: '四号', value: 16 },
-      { name: '小四', value: 14 },
-      { name: '五号', value: 12 },
-      { name: '小五', value: 11 },
-      { name: '六号', value: 9 },
-      { name: '小六', value: 8 },
-      { name: '七号', value: 6 },
-      { name: '八号', value: 5 },
-    ],
-  },
-  onChange: (editor: AiEditor) => {
-    emit('onChange', { html: editor.getHtml(), text: editor.getText() })
-    setFooter()
-    model.value = editor.getHtml()
-    text.value = editor.getText()
-    setTimeout(() => {
-      setContent()
-    }, 200)
-  },
-  onBlur: (editor: AiEditor) => {
-    emit('onBlur', { html: editor.getHtml(), text: editor.getText() })
-  },
+    /** 图片以 base64 写入 HTML，无独立服务端文件；覆盖 Umo 默认 console.error */
+    onFileDelete(_id: string, _url: string, _type?: string) {
+      // no-op
+    },
+  }
 }
 
-/**
- * 修改样式
- */
-function setContent() {
-  let html = aiEditor!.getHtml()
-  html = calcImagesHeight(html)
-  model.value = convertPxToPt(html)
-}
-
-/**
- * 移除html字体相关设置
- * @param html
- */
-function removeAllFontFamilyStyles(html: string): string {
-  const tempDiv = document.createElement('div')
-  tempDiv.innerHTML = html
-
-  function processElement(element: Element) {
-    if (element.hasAttribute('style')) {
-      let style = element.getAttribute('style') || ''
-      // 规范化样式字符串：确保每个属性以分号结尾
-      style = normalizeStyleString(style)
-
-      // 使用简化的正则表达式移除字体相关属性（现在可以安全地假设每个属性后都有分号）
-      style = style.replace(
-        /(?:font-family|mso-(?:ascii|hansi|bidi|fareast|east-asian|font)-font-family)\s*:\s*[^;]+;/gi,
-        '',
-      )
-      // 清理空样式
-      style = style.trim()
-      if (style) {
-        element.setAttribute('style', style)
-      } else {
-        element.removeAttribute('style')
-      }
-    }
+function readFileAsDataUrl(file: File) {
+  return new Promise<string>((resolve, reject) => {
+    const reader = new FileReader()
+    reader.onload = () => resolve(String(reader.result ?? ''))
+    reader.onerror = () => reject(reader.error)
+    reader.readAsDataURL(file)
+  })
+}
 
-    // 移除标签上的字体家族相关属性
-    const fontFamilyAttrs = [
-      'font-family',
-      'face',
-      'mso-hansi-font-family',
-      'mso-bidi-font-family',
-      'mso-ascii-font-family',
-      'mso-fareast-font-family',
-      'mso-east-asian-font-family',
-      'mso-font-font-family',
-    ]
-    fontFamilyAttrs.forEach((attr) => element.removeAttribute(attr))
-
-    // 递归处理子元素
-    Array.from(element.children).forEach((child) => processElement(child))
-  }
+function getRootElement(): HTMLElement | null {
+  return rootRef.value
+}
 
-  // 规范化样式字符串：确保每个属性以分号结尾
-  function normalizeStyleString(style: string): string {
-    // 移除首尾空格
-    style = style.trim()
+function getEditorInstance() {
+  return editorRef.value as unknown as {
+    getHTML?: () => string
+    getText?: () => string
+    setContent?: (content: string, options?: Record<string, unknown>) => void
+    setReadOnly?: (value: boolean) => void
+    setDocument?: (payload: Record<string, unknown>) => void
+    setToolbar?: (payload: { mode?: string; show?: boolean }) => void
+    setLayout?: (layout: 'page' | 'web') => void
+    focus?: (position?: string, options?: Record<string, unknown>) => void
+    getEditor?: () => { value?: { setEditable?: (value: boolean) => void; isEditable?: boolean } }
+  } | null
+}
 
-    // 如果样式为空，直接返回
-    if (!style) return ''
+function ensureTipTapEditable(canEdit: boolean) {
+  const tipTap = getEditorInstance()?.getEditor?.()?.value
+  if (tipTap && typeof tipTap.setEditable === 'function') {
+    tipTap.setEditable(canEdit)
+  }
+}
 
-    // 如果最后一个字符不是分号，添加分号
-    if (style.charAt(style.length - 1) !== ';') {
-      style += ';'
-    }
+/** 强制同步 Umo/TipTap 可编辑态（readOnly 与 isEditable 可能脱节，如预览模式或隐藏 Tab 挂载） */
+async function applyEditableState() {
+  const editor = getEditorInstance()
+  if (!editor) return false
+  const canEdit = editable.value
+  editor.setDocument?.({ readOnly: !canEdit })
+  editor.setReadOnly?.(!canEdit)
+  ensureTipTapEditable(canEdit)
+  editor.setToolbar?.({
+    mode: 'ribbon',
+    show: props.showToolbar && canEdit,
+  })
+  const tipTap = editor.getEditor?.()?.value
+  if (!tipTap) return false
+  if (canEdit && !tipTap.isEditable) {
+    tipTap.setEditable(true)
+  }
+  return canEdit ? tipTap.isEditable : !tipTap.isEditable
+}
 
-    return style
+async function applyEditableStateWithRetry(maxAttempts = 6) {
+  for (let i = 0; i < maxAttempts; i += 1) {
+    if (await applyEditableState()) return true
+    await nextTick()
+    await waitEditorPaintFrames()
   }
+  return false
+}
 
-  Array.from(tempDiv.children).forEach((child) => processElement(child))
-  return tempDiv.innerHTML
-}
-
-/**
- * 计算富文本框中图片的高度并赋值
- */
-function calcImagesHeight(html: string) {
-  const map = new Map()
-  const imageElements = divRef.value.querySelectorAll('img.resize-obj')
-  if (imageElements.length > 0) {
-    imageElements.forEach((imageElement: any) => {
-      const width = imageElement.offsetWidth
-      const height = imageElement.offsetHeight
-      if (width > 1 && height > 1) {
-        map.set(
-          imageElement.src.length > 100 ? imageElement.src.substring(0, 100) : imageElement.src,
-          height,
-        )
-      }
-    })
-    for (const [key, value] of map) {
-      html = customStringReplacement(html, `${key}`, '>', `height="auto"`, `height="${value}"`)
-    }
+function syncEditorPresentation() {
+  const editor = getEditorInstance()
+  if (!editor) return
+  editor.setLayout?.('web')
+  void applyEditableState()
+}
+
+function getRawHtml() {
+  const editor = getEditorInstance()
+  return editor?.getHTML?.() ?? ''
+}
+
+function getPlainText() {
+  const editor = getEditorInstance()
+  return editor?.getText?.() ?? ''
+}
+
+function applyEditorHtml(html: string, focus = false) {
+  if (!ready.value) return
+  const editor = getEditorInstance()
+  editor?.setContent?.(initHtml(html), {
+    emitUpdate: false,
+    focusPosition: focus ? 'end' : false,
+  })
+}
+
+function publishModelFromEditor(finalize = false) {
+  const editor = getEditorInstance()
+  if (!editor) return
+  let html = getRawHtml()
+  if (finalize) {
+    html = finalizeHtml(html, getRootElement())
   }
-  return html
-}
-
-function customStringReplacement(
-  str: string,
-  startMarker: string,
-  endMarker: string,
-  target: string,
-  replacement: string,
-): string {
-  let result = ''
-  let currentIndex = 0
-
-  while (true) {
-    const startIndex = str.indexOf(startMarker, currentIndex)
-    if (startIndex === -1) {
-      result += str.slice(currentIndex)
-      break
-    }
+  syncingContent.value = true
+  model.value = html
+  text.value = getPlainText()
+  syncingContent.value = false
+  emit('onChange', { html, text: getPlainText() })
+}
 
-    const endIndex = str.indexOf(endMarker, startIndex + startMarker.length)
-    if (endIndex === -1) {
-      result += str.slice(currentIndex)
-      break
-    }
+async function bootstrapEditor() {
+  if (ready.value) return
+  const editor = getEditorInstance()
+  if (!editor?.getHTML) return
 
-    result += str.slice(currentIndex, startIndex + startMarker.length)
-    const middle = str.slice(startIndex + startMarker.length, endIndex)
-    const newMiddle = middle.replace(new RegExp(target, 'g'), replacement)
-    result += newMiddle
-    result += endMarker
-    currentIndex = endIndex + 1
+  await nextTick()
+  await waitEditorPaintFrames()
+  await waitEditorPaintFrames()
+  ready.value = true
+  await nextTick()
+  await applyEditableStateWithRetry()
+  syncEditorPresentation()
+  if (editable.value) {
+    editor.focus?.('start', { scrollIntoView: false })
+    await applyEditableStateWithRetry()
+    await ensureBlockImageNodeView()
   }
+  syncingContent.value = true
+  model.value = getRawHtml()
+  text.value = getPlainText()
+  syncingContent.value = false
+}
 
-  return result
+async function onEditorCreated() {
+  await bootstrapEditor()
 }
 
-function initHtml(html: string) {
-  html = customStringReplacement(html, '<img', '>', 'height="[0-9]+"', 'height="auto"')
-  return convertPtToPx(html)
+function onEditorChanged() {
+  if (!ready.value || syncingContent.value) return
+  publishModelFromEditor(false)
 }
 
-const stopWatchByType = (type: WatchType) => {
-  const stopHandle = watchHandlers.value[type]
-  if (stopHandle) {
-    stopHandle()
-    delete watchHandlers.value[type]
-  }
+function onEditorBlur() {
+  publishModelFromEditor(true)
+  emit('onBlur', { html: model.value ?? '', text: getPlainText() })
 }
+
 onMounted(() => {
-  const config = {
-    element: divRef.value as Element,
-    content: initHtml(model.value ?? ''),
-    ...defaultConfig,
-    ...props.editorConfig,
-    fontFamily: {
-      values: [
-        { name: '宋体', value: 'SimSun' },
-        { name: '仿宋', value: 'FangSong' },
-        { name: '黑体', value: 'SimHei' },
-        { name: '楷体', value: 'KaiTi' },
-        { name: '微软雅黑', value: 'Microsoft YaHei' },
-        { name: '方正仿宋简体_GBK', value: 'FangSong_GB2312' },
-        { name: 'Arial', value: 'Arial' },
-        { name: 'Times New Roman', value: 'Times New Roman' },
-      ],
-    },
-    onCreated: (editor: AiEditor) => {
-      setFooter()
-      stopWatchByType(WatchType.initWatch)
-      watchHandlers.value[WatchType.initWatch] = watch(
-        () => props.isEdit,
-        (val) => {
-          if (aiEditor) {
-            aiEditor.setEditable(val)
-            //头尾显隐
-            // const footer = divRef.value?.querySelector('aie-footer') as HTMLElement
-            // if (footer) {
-            //   footer.style.display = val ? '' : 'none'
-            // }
-            const header = divRef.value?.querySelector('aie-header') as HTMLElement
-            if (header) {
-              const div = header.querySelector('div') as HTMLElement
-              div.style.justifyContent = val ? '' : 'end'
-              const menuItems = header.querySelectorAll('.aie-menu-item:not(:last-child)')
-              if (menuItems.length) {
-                menuItems.forEach((item) => {
-                  item.style.display = val ? '' : 'none'
-                })
-              }
-            }
-          }
-        },
-        { immediate: true },
-      )
-    },
-  }
-  // 隐藏工具栏
-  if (!props.showToolbar) {
-    config.toolbarKeys = []
-  }
-  setTimeout(() => {
-    aiEditor = new AiEditor(config)
-  }, 100)
+  ensureUmoGlobals()
+  rootWasHidden = !isPanelVisible()
+  observePanelVisibility()
 })
-onActivated(() => {
-  const header = divRef.value?.querySelector('aie-header') as HTMLElement
-  if (header) {
-    const div = header.querySelector('div') as HTMLElement
-    div.style.justifyContent = props.isEdit ? '' : 'end'
-    const menuItems = header.querySelectorAll('.aie-menu-item:not(:last-child)')
-    if (menuItems.length) {
-      menuItems.forEach((item) => {
-        item.style.display = props.isEdit ? '' : 'none'
-      })
-    }
+
+// editable 就绪后同步初始化，避免 onBeforeMount 时序问题
+ensureUmoGlobals()
+initUmoMountOptions()
+
+onBeforeUnmount(() => {
+  clearVisibilityObserver()
+  ready.value = false
+})
+
+watch(
+  () => model.value,
+  (value) => {
+    if (!ready.value || syncingContent.value) return
+    const incoming = initHtml(value ?? '')
+    const current = getRawHtml()
+    if (incoming === current || (value ?? '') === current) return
+    applyEditorHtml(value ?? '', false)
+  },
+)
+
+watch(editable, async (now, prev) => {
+  if (prev === undefined) return
+  if (lastMountEditable.value === now) return
+  if (!umoMountOptions.value) return
+  if (ready.value) {
+    publishModelFromEditor(true)
   }
+  await remountEditor()
 })
-const setFooter = () => {
-  const footer = divRef.value?.querySelector('aie-footer') as HTMLElement
-  if (footer) {
-    const footerSpan = footer.querySelector('span') as HTMLElement
-    if (footerSpan && footerSpan.textContent) {
-      footerSpan.textContent = footerSpan.textContent.replace(
-        'Powered by AiEditor, Characters',
-        '字数',
-      )
+
+watch(
+  () => props.isEdit,
+  async (now, prev) => {
+    if (prev === undefined) return
+    if (now === prev) return
+    if (!umoMountOptions.value) return
+    if (ready.value) {
+      publishModelFromEditor(true)
     }
-  }
-}
+    await remountEditor()
+  },
+)
 
-onUnmounted(() => {
-  aiEditor && aiEditor.destroy()
-})
+watch(
+  () => props.showToolbar,
+  async () => {
+    if (!ready.value) return
+    await nextTick()
+    syncEditorPresentation()
+  },
+)
+
+watch(
+  () => editorRef.value,
+  () => {
+    void bootstrapEditor()
+  },
+  { flush: 'post' },
+)
 
 defineExpose({
   getHtml: () => {
-    if (aiEditor) {
-      return aiEditor.getHtml()
-    } else {
-      return ''
-    }
+    if (!ready.value) return model.value ?? ''
+    return finalizeHtml(getRawHtml(), getRootElement())
   },
   getText: () => {
-    if (aiEditor) {
-      return aiEditor.getText()
-    } else {
-      return ''
-    }
+    if (!ready.value) return text.value ?? ''
+    return getPlainText()
   },
-  setContent: (html: string, focus: boolean = false) => {
-    if (aiEditor) {
-      aiEditor.setContent(initHtml(html), focus)
+  setContent: (html: string, focus = false) => {
+    syncingContent.value = true
+    model.value = html
+    syncingContent.value = false
+    if (ready.value) {
+      applyEditorHtml(html, focus)
     }
   },
 })
+
+onUnmounted(() => {
+  ready.value = false
+  umoMountOptions.value = null
+  clearVisibilityObserver()
+  releaseUmoDocumentStorageShim()
+})
 </script>
+
 <style scoped lang="scss">
-:deep {
-  .aie-container {
-    border-width: v-bind(borderWidth);
-    border-color: #dcdfe6;
-  }
+.umo-rich-text-editor-root {
+  /* 父级 el-flex align="center" 会把子项压成内容宽度，导致工具栏/状态栏竖排 */
+  align-self: stretch;
+  flex: 1 1 auto;
+  height: 100%;
+  width: 100%;
+  min-width: 0;
+  min-height: 280px;
+  box-sizing: border-box;
+}
 
-  .aie-content {
-    p {
-      margin: 6px 0;
-    }
-  }
+:deep(.umo-rich-text-editor) {
+  width: 100%;
+  height: 100%;
+  border-width: v-bind(borderWidth);
+  border-style: solid;
+  border-color: #dcdfe6;
+  box-sizing: border-box;
+}
+
+:deep(.umo-editor-container) {
+  min-height: 240px;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+:deep(.umo-editor-container .umo-toolbar) {
+  flex-shrink: 0;
+  width: 100%;
+}
+
+:deep(.umo-editor-container .umo-footer) {
+  flex-shrink: 0;
+  width: 100%;
+}
+
+:deep(.umo-toolbar-container),
+:deep(.umo-scrollable-container) {
+  width: 100%;
+  min-width: 0;
+}
+
+:deep(.umo-classic-menu),
+:deep(.umo-virtual-group) {
+  flex-wrap: nowrap;
+  white-space: nowrap;
+}
+
+:deep(.umo-button__text),
+:deep(.umo-menu-button .umo-button__text) {
+  writing-mode: horizontal-tb !important;
+  white-space: nowrap;
+}
+
+:deep(.umo-status-bar) {
+  width: 100%;
+  flex-wrap: nowrap;
+}
+
+:deep(.umo-editor-container .umo-main) {
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+}
+
+:deep(.umo-back-top) {
+  display: none !important;
+}
+
+/* 嵌入场景：隐藏快捷键抽屉（TDesign classPrefix=umo → .umo-drawer） */
+:deep(.umo-status-bar-shortcut-btn) {
+  display: none !important;
+}
+
+:deep(.umo-editor-container .umo-drawer) {
+  display: none !important;
+}
+
+:deep(.umo-editor-content .ProseMirror) {
+  pointer-events: auto;
+  cursor: text;
+  min-height: 120px;
 }
 </style>