chore: 使用wangeditor-next 替换wangeditor

build/vite/optimize.ts

@@ -25,8 +25,8 @@ const include = [
   'echarts/components',
   'echarts/renderers',
   'echarts-wordcloud',
-  '@wangeditor/editor',
+  '@wangeditor-next/editor',
-  '@wangeditor/editor-for-vue',
+  '@wangeditor-next/editor-for-vue',
   '@microsoft/fetch-event-source',
   'markdown-it',
   'markmap-view',

package.json

@@ -32,9 +32,9 @@
     "@microsoft/fetch-event-source": "^2.0.1",
     "@videojs-player/vue": "^1.0.0",
     "@vueuse/core": "^10.9.0",
-    "@wangeditor/editor": "^5.1.23",
+    "@wangeditor-next/editor": "^5.6.46",
-    "@wangeditor/editor-for-vue": "^5.1.10",
+    "@wangeditor-next/editor-for-vue": "^5.1.14",
-    "@wangeditor/plugin-mention": "^1.0.0",
+    "@wangeditor-next/plugin-mention": "^1.0.16",
     "@zxcvbn-ts/core": "^3.0.4",
     "animate.css": "^4.1.1",
     "axios": "1.9.0",

src/components/Editor/index.ts

@@ -1,5 +1,5 @@
 import Editor from './src/Editor.vue'
-import { IDomEditor } from '@wangeditor/editor'
+import { IDomEditor } from '@wangeditor-next/editor'
 
 export interface EditorExpose {
   getEditorRef: () => Promise<IDomEditor>

src/components/Editor/src/Editor.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { PropType } from 'vue'
-import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
+import { Editor, Toolbar } from '@wangeditor-next/editor-for-vue'
-import { i18nChangeLanguage, IDomEditor, IEditorConfig } from '@wangeditor/editor'
+import { i18nChangeLanguage, IDomEditor, IEditorConfig } from '@wangeditor-next/editor'
 import { propTypes } from '@/utils/propTypes'
 import { isNumber } from '@/utils/is'
 import { ElMessage } from 'element-plus'
@@ -259,4 +259,4 @@ defineExpose({
   </div>
 </template>
 
-<style src="@wangeditor/editor/dist/css/style.css"></style>
+<style src="@wangeditor-next/editor/dist/css/style.css"></style>

src/views/bpm/model/form/PrintTemplate/Index.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
+import { Editor, Toolbar } from '@wangeditor-next/editor-for-vue'
-import { IDomEditor } from '@wangeditor/editor'
+import { IDomEditor } from '@wangeditor-next/editor'
 import MentionModal from './MentionModal.vue'
 
 const emit = defineEmits(['confirm'])
@@ -86,7 +86,7 @@ onBeforeUnmount(() => {
       />
     </div>
     <!-- TODO @unocss 简化 style -->
-    <div style="border: 1px solid #ccc; margin: 10px">
+    <div style=" margin: 10px;border: 1px solid #ccc">
       <Toolbar
         style="border-bottom: 1px solid #ccc"
         :editor="editorRef"
@@ -106,11 +106,11 @@ onBeforeUnmount(() => {
         @insert-mention="insertMention"
       />
     </div>
-    <div style="margin-right: 10px; float: right">
+    <div style=" float: right;margin-right: 10px">
       <el-button @click="dialogVisible = false">取 消</el-button>
       <el-button type="primary" @click="handleConfirm">确 定</el-button>
     </div>
   </el-dialog>
 </template>
 
-<style src="@wangeditor/editor/dist/css/style.css"></style>
+<style src="@wangeditor-next/editor/dist/css/style.css"></style>

src/views/bpm/model/form/PrintTemplate/index.ts

@@ -1,6 +1,6 @@
-import { Boot } from '@wangeditor/editor'
+import { Boot } from '@wangeditor-next/editor'
 import processRecordModule from './module'
-import mentionModule from '@wangeditor/plugin-mention'
+import mentionModule from '@wangeditor-next/plugin-mention'
 
 // 注册：要在创建编辑器之前注册，且只能注册一次，不可重复注册
 export const setupWangEditorPlugin = () => {

src/views/bpm/model/form/PrintTemplate/module/elem-to-html.ts

@@ -1,4 +1,4 @@
-import { SlateElement } from '@wangeditor/editor'
+import { SlateElement } from '@wangeditor-next/editor'
 
 function processRecordToHtml(_elem: SlateElement, _childrenHtml: string): string {
   return `<span data-w-e-type="process-record" data-w-e-is-void data-w-e-is-inline>流程记录</span>`

src/views/bpm/model/form/PrintTemplate/module/index.ts

@@ -1,4 +1,4 @@
-import { IModuleConf } from '@wangeditor/editor'
+import { IModuleConf } from '@wangeditor-next/editor'
 import withProcessRecord from './plugin'
 import renderElemConf from './render-elem'
 import elemToHtmlConf from './elem-to-html'

src/views/bpm/model/form/PrintTemplate/module/menu/ProcessRecordMenu.ts

@@ -1,4 +1,4 @@
-import { IButtonMenu, IDomEditor } from '@wangeditor/editor'
+import { IButtonMenu, IDomEditor } from '@wangeditor-next/editor'
 
 class ProcessRecordMenu implements IButtonMenu {
   readonly tag: string

src/views/bpm/model/form/PrintTemplate/module/parse-elem-html.ts

@@ -1,16 +1,28 @@
 import { DOMElement } from './utils/dom'
-import { IDomEditor, SlateDescendant, SlateElement } from '@wangeditor/editor'
+import { IDomEditor, SlateDescendant, SlateElement } from '@wangeditor-next/editor'
 
+/**
+ * 解析 HTML 字符串，生成“附件”元素
+ * @param domElem HTML 对应的 DOM Element
+ * @param children 子节点
+ * @param editor editor 实例
+ * @returns “附件”元素，如上文的 myResume
+ */
 function parseHtml(
-  _elem: DOMElement,
+  _domElem: DOMElement,
   _children: SlateDescendant[],
   _editor: IDomEditor
 ): SlateElement {
-  return {
+  // TS 语法
-    // TODO @lesan：这里有个红色告警，可以去掉哇？
+
+
+  // 生成“流程记录”元素（按照此前约定的数据结构）
+  const processRecord = {
     type: 'process-record',
-    children: [{ text: '' }]
+    children: [{ text: '' }], // void node 必须有 children ，其中有一个空字符串，重要！！！
   }
+
+  return processRecord
 }
 
 const parseHtmlConf = {

src/views/bpm/model/form/PrintTemplate/module/plugin.ts

@@ -1,4 +1,4 @@
-import { DomEditor, IDomEditor } from '@wangeditor/editor'
+import { DomEditor, IDomEditor } from '@wangeditor-next/editor'
 
 function withProcessRecord<T extends IDomEditor>(editor: T) {
   const { isInline, isVoid } = editor

src/views/bpm/model/form/PrintTemplate/module/render-elem.ts

@@ -1,5 +1,5 @@
 import { h, VNode } from 'snabbdom'
-import { DomEditor, IDomEditor, SlateElement } from '@wangeditor/editor'
+import { DomEditor, IDomEditor, SlateElement } from '@wangeditor-next/editor'
 
 function renderProcessRecord(
   elem: SlateElement,

src/views/mp/draft/editor-config.ts

@@ -1,4 +1,4 @@
-import { IEditorConfig } from '@wangeditor/editor'
+import { IEditorConfig } from '@wangeditor-next/editor'
 import { getAccessToken, getTenantId } from '@/utils/auth'
 
 const message = useMessage()

types/custom-types.d.ts

@@ -1,4 +1,4 @@
-import { SlateDescendant } from '@wangeditor/editor'
+import { SlateDescendant } from '@wangeditor-next/editor'
 
 declare module 'slate' {
   interface CustomTypes {