adtec-core-package 2.9.8 → 3.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "adtec-core-package",
-  "version": "2.9.8",
+  "version": "3.0.0",
   "private": false,
   "type": "module",
   "scripts": {
@@ -16,6 +16,7 @@
     "@element-plus/icons-vue": "^2.3.1",
     "@onlyoffice/document-editor-vue": "1.4.0",
     "@types/echarts": "^5.0.0",
+    "@umoteam/editor": "^10.2.1",
     "@vueuse/components": "^13.0.0",
     "@vueuse/core": "^13.0.0",
     "@vxe-ui/plugin-export-pdf": "4.2.4",
@@ -67,5 +68,54 @@
   },
   "description": "This template should help get you started developing with Vue 3 in Vite.",
   "author": "",
-  "license": "ISC"
+  "license": "ISC",
+  "pnpm": {
+    "peerDependencyRules": {
+      "allowedVersions": {
+        "@tiptap/core": "2 || 3",
+        "@tiptap/pm": "2 || 3",
+        "@tiptap/extensions": "3",
+        "@tiptap/extension-list": "3"
+      }
+    },
+    "packageExtensions": {
+      "@tiptap/extension-collaboration@3.20.0": {
+        "peerDependencies": {
+          "@tiptap/core": "3.26.0",
+          "@tiptap/pm": "3.26.0"
+        }
+      },
+      "@tiptap/extension-drag-handle@3.16.0": {
+        "peerDependencies": {
+          "@tiptap/core": "3.26.0",
+          "@tiptap/pm": "3.26.0"
+        }
+      },
+      "@tiptap/vue-3@3.26.0": {
+        "peerDependencies": {
+          "@tiptap/core": "3.26.0",
+          "@tiptap/pm": "3.26.0"
+        }
+      }
+    },
+    "overrides": {
+      "@umoteam/editor>@tiptap/core": "3.26.0",
+      "@umoteam/editor>@tiptap/pm": "3.26.0",
+      "@umoteam/editor>@tiptap/vue-3": "3.26.0",
+      "@umoteam/editor>@tiptap/starter-kit": "3.26.0",
+      "@umoteam/editor>@tiptap/extensions": "3.26.0",
+      "@umoteam/editor>@tiptap/extension-list": "3.26.0",
+      "@umoteam/editor>@tiptap/extension-collaboration": "3.26.0",
+      "@umoteam/editor>@tiptap/extension-drag-handle": "3.26.0",
+      "@umoteam/editor>@tiptap/extension-drag-handle-vue-3": "3.26.0",
+      "@umoteam/editor>@tiptap/extension-node-range": "3.26.0",
+      "@tiptap/extension-collaboration@3.20.0": "3.26.0",
+      "@tiptap/extension-drag-handle@3.16.0": "3.26.0",
+      "@tiptap/extension-drag-handle-vue-3@3.16.0": "3.26.0",
+      "@tiptap/vue-3>@tiptap/core": "3.26.0",
+      "@tiptap/vue-3>@tiptap/pm": "3.26.0",
+      "aieditor>@tiptap/core": "2.26.1",
+      "aieditor>@tiptap/pm": "2.26.1"
+    }
+  }
 }

package/src/components/RichTextEditor/UmoRichTextEditor.vue

@@ -0,0 +1,257 @@
+<!-- Umo Editor 封装：与 RichTextEditor 保持相同对外 API，供结题验收等模块试点 -->
+<template>
+  <el-flex ref="rootRef" class="umo-rich-text-editor-root" :style="{ height: '100%', width: '100%' }">
+    <UmoEditor
+      ref="editorRef"
+      class="umo-rich-text-editor"
+      v-bind="umoOptions"
+      @created="onEditorCreated"
+      @changed="onEditorChanged"
+      @blur="onEditorBlur"
+    />
+  </el-flex>
+</template>
+
+<script setup lang="ts">
+import { UmoEditor } from '@umoteam/editor'
+import '@umoteam/editor/style'
+import { ElMessage } from 'element-plus'
+import { computed, nextTick, onUnmounted, ref, watch } from 'vue'
+import { v4 as uuidv4 } from 'uuid'
+import { finalizeHtml, initHtml } from './richTextHtmlUtils'
+
+export type RichTextEditorConfig = {
+  placeholder?: string
+  editable?: boolean
+  [key: string]: unknown
+}
+
+const emit = defineEmits<{
+  onBlur: [payload: { html: string; text: string }]
+  onChange: [payload: { html: string; text: string }]
+}>()
+
+const props = withDefaults(
+  defineProps<{
+    showToolbar?: boolean
+    borderWidth?: string
+    editorConfig?: RichTextEditorConfig
+    isEdit?: boolean
+  }>(),
+  {
+    showToolbar: true,
+    borderWidth: '1px',
+    editorConfig: () => ({}),
+    isEdit: true,
+  },
+)
+
+const model = defineModel<string | null | undefined>({
+  required: false,
+  default: null,
+})
+const text = defineModel<string>('text', {
+  required: false,
+})
+
+const editorRef = ref<InstanceType<typeof UmoEditor> | null>(null)
+const rootRef = ref<HTMLElement | null>(null)
+const editorKey = `umo-${uuidv4()}`
+const ready = ref(false)
+const syncingContent = ref(false)
+
+const placeholderText = computed(() => {
+  const raw = props.editorConfig?.placeholder
+  if (typeof raw === 'string' && raw.trim()) return raw
+  return '请输入内容...'
+})
+
+const editable = computed(() => {
+  if (!props.isEdit) return false
+  if (props.editorConfig?.editable === false) return false
+  return true
+})
+
+const umoOptions = computed(() => ({
+  editorKey,
+  locale: 'zh-CN',
+  theme: 'light',
+  height: '100%',
+  toolbar: {
+    showSaveLabel: false,
+    defaultMode: 'classic',
+    menus: props.showToolbar ? ['base', 'insert', 'table', 'tools'] : ['base'],
+  },
+  page: {
+    layouts: ['web'],
+  },
+  document: {
+    title: '',
+    content: initHtml(model.value ?? ''),
+    placeholder: {
+      zh_CN: placeholderText.value,
+    },
+    readOnly: !editable.value,
+    enableMarkdown: false,
+    enableSpellcheck: false,
+    autoSave: {
+      enabled: false,
+    },
+  },
+  shareUrl: typeof location !== 'undefined' ? location.href : '',
+  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,
+    }
+  },
+}))
+
+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)
+  })
+}
+
+function getEditorInstance() {
+  return editorRef.value as unknown as {
+    getHTML?: () => string
+    getText?: () => string
+    setContent?: (content: string, options?: Record<string, unknown>) => void
+    setReadOnly?: (value: boolean) => void
+    setToolbar?: (payload: { mode?: string; show?: boolean }) => void
+    setLayout?: (layout: 'page' | 'web') => void
+  } | null
+}
+
+function getRawHtml() {
+  const editor = getEditorInstance()
+  return editor?.getHTML?.() ?? ''
+}
+
+function getPlainText() {
+  const editor = getEditorInstance()
+  return editor?.getText?.() ?? ''
+}
+
+function applyEditorHtml(html: string, focus = false) {
+  const editor = getEditorInstance()
+  editor?.setContent?.(initHtml(html), {
+    emitUpdate: false,
+    focusPosition: focus ? 'end' : false,
+  })
+}
+
+function syncEditorPresentation() {
+  const editor = getEditorInstance()
+  if (!editor) return
+  editor.setLayout?.('web')
+  editor.setReadOnly?.(!editable.value)
+  editor.setToolbar?.({
+    mode: 'classic',
+    show: props.showToolbar && editable.value,
+  })
+}
+
+function publishModelFromEditor(finalize = false) {
+  const editor = getEditorInstance()
+  if (!editor) return
+  let html = getRawHtml()
+  if (finalize) {
+    html = finalizeHtml(html, rootRef.value)
+  }
+  syncingContent.value = true
+  model.value = html
+  text.value = getPlainText()
+  syncingContent.value = false
+  emit('onChange', { html, text: getPlainText() })
+}
+
+function onEditorCreated() {
+  ready.value = true
+  syncEditorPresentation()
+  applyEditorHtml(model.value ?? '', false)
+}
+
+function onEditorChanged() {
+  if (!ready.value || syncingContent.value) return
+  publishModelFromEditor(false)
+}
+
+function onEditorBlur() {
+  publishModelFromEditor(true)
+  emit('onBlur', { html: model.value ?? '', text: getPlainText() })
+}
+
+watch(
+  () => model.value,
+  (value) => {
+    if (!ready.value || syncingContent.value) return
+    const current = getRawHtml()
+    if ((value ?? '') === current) return
+    applyEditorHtml(value ?? '', false)
+  },
+)
+
+watch(
+  () => [editable.value, props.showToolbar] as const,
+  async () => {
+    if (!ready.value) return
+    await nextTick()
+    syncEditorPresentation()
+  },
+)
+
+watch(placeholderText, () => {
+  if (!ready.value) return
+  getEditorInstance()?.setContent?.(getRawHtml(), { emitUpdate: false })
+})
+
+defineExpose({
+  getHtml: () => {
+    if (!ready.value) return model.value ?? ''
+    return finalizeHtml(getRawHtml(), rootRef.value)
+  },
+  getText: () => {
+    if (!ready.value) return text.value ?? ''
+    return getPlainText()
+  },
+  setContent: (html: string, focus = false) => {
+    model.value = html
+    if (ready.value) {
+      applyEditorHtml(html, focus)
+    }
+  },
+})
+
+onUnmounted(() => {
+  ready.value = false
+})
+</script>
+
+<style scoped lang="scss">
+.umo-rich-text-editor-root {
+  min-height: 280px;
+}
+
+: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;
+}
+</style>

package/src/components/RichTextEditor/richTextHtmlUtils.ts

@@ -0,0 +1,166 @@
+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) {
+  const tempDiv = document.createElement('div')
+  tempDiv.innerHTML = html
+  tempDiv.querySelectorAll('p').forEach((p) => {
+    if (!p.style.fontSize) {
+      p.style.fontSize = '14px'
+    }
+  })
+  return tempDiv.innerHTML
+}
+
+export 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
+  })
+}
+
+export 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`
+    }
+    return match
+  })
+}
+
+function normalizeStyleString(style: string): string {
+  style = style.trim()
+  if (!style) return ''
+  if (style.charAt(style.length - 1) !== ';') {
+    style += ';'
+  }
+  return style
+}
+
+export 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')
+      }
+    }
+
+    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))
+  }
+
+  Array.from(tempDiv.children).forEach((child) => processElement(child))
+  return tempDiv.innerHTML
+}
+
+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
+    }
+
+    const endIndex = str.indexOf(endMarker, startIndex + startMarker.length)
+    if (endIndex === -1) {
+      result += str.slice(currentIndex)
+      break
+    }
+
+    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
+  }
+
+  return result
+}
+
+export function calcImagesHeight(html: string, root?: HTMLElement | null) {
+  if (!root) return html
+  const map = new Map<string, number>()
+  const imageElements = root.querySelectorAll('img')
+  imageElements.forEach((imageElement) => {
+    const width = imageElement.offsetWidth
+    const height = imageElement.offsetHeight
+    if (width > 1 && height > 1) {
+      const src =
+        imageElement.src.length > 100 ? imageElement.src.substring(0, 100) : imageElement.src
+      map.set(src, height)
+    }
+  })
+  for (const [key, value] of map) {
+    html = customStringReplacement(html, `${key}`, '>', 'height="auto"', `height="${value}"`)
+  }
+  return html
+}
+
+export function initHtml(html: string) {
+  if (!html) return ''
+  html = customStringReplacement(html, '<img', '>', 'height="[0-9]+"', 'height="auto"')
+  return convertPtToPx(html)
+}
+
+export function finalizeHtml(html: string, root?: HTMLElement | null) {
+  let result = html || ''
+  result = calcImagesHeight(result, root)
+  return convertPxToPt(result)
+}

package/src/types/umoteam-editor.d.ts

@@ -0,0 +1,8 @@
+declare module '@umoteam/editor' {
+  import type { DefineComponent } from 'vue'
+
+  export const UmoEditor: DefineComponent<Record<string, unknown>, Record<string, unknown>, any>
+  export function useUmoEditor(options?: Record<string, unknown>): void
+}
+
+declare module '@umoteam/editor/style'