feat(rich-text-editor): add vue2 support (#483)

* feat(rich-text-editor): add version compatibility * feat(rich-text-editor): update resolve path * feat(rich-text-editor): update resolve path
2023-09-21 13:49:06 +08:00 · 2023-09-21 13:49:06 +08:00 · efbe7a6fbf
parent 4bee278c6a
commit efbe7a6fbf
7 changed files with 116 additions and 108 deletions
--- a/examples/sites/demos/app/rich-text-editor/webdoc/rich-text-editor.js
+++ b/examples/sites/demos/app/rich-text-editor/webdoc/rich-text-editor.js
@ -63,7 +63,7 @@ export default {
            'en-US': 'See tiptap extension notes to overwrite the useEditor configuration item'
          },
          demoId: 'basic-usage'
-        },
+        }
      ],
      'events': [
        {
@ -145,7 +145,7 @@ export default {
            'en-US': 'The editor is being destroyed.'
          },
          'demoId': 'base'
-        },
+        }
      ],
      'methods': [],
      'slots': [
@ -155,7 +155,7 @@ export default {
          'defaultValue': '',
          'desc': { 'zh-CN': 'toolBar添加按钮,会传出editor实例，详情见tiptap', 'en-US': 'toolBar Add Button' },
          'demoId': 'custom-search-types'
-        },
+        }
      ]
    }
  ]
--- a/examples/vue2/vite.config.ts
+++ b/examples/vue2/vite.config.ts
@ -71,6 +71,7 @@ export default defineConfig((config) => {
        '@vue/babel-helper-vue-jsx-merge-props': path.resolve(
          'node_modules/@vue/babel-helper-vue-jsx-merge-props/dist/helper.js'
        ),
+        '@tiptap/vue': '@tiptap/vue-2',
        ...getAlias(2, env.VITE_TINY_THEME)
      }
    },
--- a/examples/vue3/vite.config.ts
+++ b/examples/vue3/vite.config.ts
@ -27,8 +27,8 @@ export default defineConfig((config) => {
    },
    devServer: {
      proxy: {
-        ws: false,
-      },
+        ws: false
+      }
    },
    plugins: [
      virtualTemplatePlugin({ include: ['**/packages/vue/**/src/index.ts'], env }),
@ -76,6 +76,7 @@ export default defineConfig((config) => {
        'vue': path.resolve('node_modules/vue/dist/vue.esm-bundler.js'),
        'vue-i18n': 'vue-i18n/dist/vue-i18n.cjs.js',
        '@': pathFromWorkspaceRoot('examples/docs/newsrc'),
+        '@tiptap/vue': '@tiptap/vue-3',
        ...getAlias(3, env.VITE_TINY_THEME)
      }
    },
--- a/internals/cli/src/commands/build/build-ui.ts
+++ b/internals/cli/src/commands/build/build-ui.ts
@ -98,108 +98,112 @@ export const getBaseConfig = ({ vueVersion, dtsInclude, dts, buildTarget, isRunt
      virtualTemplatePlugin({ include: ['**/packages/vue/**/src/index.ts', '**/packages/vue/**/src/index.vue'] }),
      ...getVuePlugins(vueVersion),
      dts &&
-        dtsPlugin({
-          root: pathFromWorkspaceRoot(),
-          tsconfigPath: `tsconfig.vue${vueVersion}.json`,
-          aliasesExclude: [/@opentiny\/vue.+/],
-          compilerOptions: {
-            paths: {
-              ...compilerOptions.paths,
-              // 一定要映射到 packages/vue 下对应的 vue 版本和 @vue/composition-api 才能正确生成 dts
-              'vue': [`packages/vue/node_modules/vue${vueVersion}`],
-              '@vue/runtime-core': ['packages/vue/node_modules/@vue/runtime-core'],
-              '@vue/runtime-dom': ['packages/vue/node_modules/@vue/runtime-dom'],
-              '@vue/composition-api': ['packages/vue/node_modules/@vue/composition-api']
-            }
-          },
-          include: [...dtsInclude, 'packages/vue/*.d.ts'],
-          beforeWriteFile: (filePath, content) => {
-            return {
-              // "vue/src/alert/index.d.ts" ==> "alert/index.d.ts"
-              filePath: filePath.replace('/vue/src', '').replace('\\vue\\src', ''),
-              content: content
-                // vue 2.7 还不能正常识别 vue-common
-                .replace(/import\('[./]+vue-common.+'\)/, 'import("vue")')
-                .replace(/\("vue[1-9\.]+/g, '("vue')
-            }
+      dtsPlugin({
+        root: pathFromWorkspaceRoot(),
+        tsconfigPath: `tsconfig.vue${vueVersion}.json`,
+        aliasesExclude: [/@opentiny\/vue.+/],
+        compilerOptions: {
+          paths: {
+            ...compilerOptions.paths,
+            // 一定要映射到 packages/vue 下对应的 vue 版本和 @vue/composition-api 才能正确生成 dts
+            'vue': [`packages/vue/node_modules/vue${vueVersion}`],
+            '@vue/runtime-core': ['packages/vue/node_modules/@vue/runtime-core'],
+            '@vue/runtime-dom': ['packages/vue/node_modules/@vue/runtime-dom'],
+            '@vue/composition-api': ['packages/vue/node_modules/@vue/composition-api']
          }
-        }),
+        },
+        include: [...dtsInclude, 'packages/vue/*.d.ts'],
+        beforeWriteFile: (filePath, content) => {
+          return {
+            // "vue/src/alert/index.d.ts" ==> "alert/index.d.ts"
+            filePath: filePath.replace('/vue/src', '').replace('\\vue\\src', ''),
+            content: content
+              // vue 2.7 还不能正常识别 vue-common
+              .replace(/import\('[./]+vue-common.+'\)/, 'import("vue")')
+              .replace(/\("vue[1-9\.]+/g, '("vue')
+          }
+        }
+      }),
      !isRuntime && inlineChunksPlugin({ deleteInlinedFiles: true }),
      !isRuntime &&
-        generatePackageJsonPlugin({
-          beforeWriteFile: (filePath, content) => {
-            const versionTarget = isValidVersion(buildTarget) ? buildTarget : `${ns(vueVersion)}.${buildTarget}`
-            const themeAndRenderlessVersion = isValidVersion(buildTarget) ? buildTarget : `3.${buildTarget}`
-            const isThemeOrRenderless = (key) =>
-              key.includes('@opentiny/vue-theme') || key.includes('@opentiny/vue-renderless')
+      generatePackageJsonPlugin({
+        beforeWriteFile: (filePath, content) => {
+          const versionTarget = isValidVersion(buildTarget) ? buildTarget : `${ns(vueVersion)}.${buildTarget}`
+          const themeAndRenderlessVersion = isValidVersion(buildTarget) ? buildTarget : `3.${buildTarget}`
+          const isThemeOrRenderless = (key) =>
+            key.includes('@opentiny/vue-theme') || key.includes('@opentiny/vue-renderless')

-            const dependencies = {}
+          const dependencies = {}

-            Object.entries(content.dependencies).forEach(([key, value]) => {
-              // dependencies里的@opentiny,统一使用：~x.x.0
-              if (isThemeOrRenderless(key)) {
-                dependencies[key] = getMinorVersion(themeAndRenderlessVersion)
-              } else if ((value as string).includes('workspace:~')) {
-                dependencies[key] = getMinorVersion(versionTarget)
-              } else {
-                dependencies[key] = value
-              }
-            })
-
-            if (filePath.includes('vue-common') && vueVersion === '2') {
-              dependencies['@vue/composition-api'] = '~1.2.2'
-            }
-
-            // 如果是主入口或者svg图标则直接指向相同路径
-            if (
-              filePath === 'vue-icon' ||
-              filePath === 'vue-icon-saas' ||
-              filePath === 'vue' ||
-              filePath === 'design/smb' ||
-              filePath === 'design/aurora'
-            ) {
-              content.main = './index.js'
-              content.module = './index.js'
+          Object.entries(content.dependencies).forEach(([key, value]) => {
+            // dependencies里的@opentiny,统一使用：~x.x.0
+            if (isThemeOrRenderless(key)) {
+              dependencies[key] = getMinorVersion(themeAndRenderlessVersion)
+            } else if ((value as string).includes('workspace:~')) {
+              dependencies[key] = getMinorVersion(versionTarget)
            } else {
-              content.main = './lib/index.js'
-              content.module = './lib/index.js'
+              dependencies[key] = value
            }
+          })

-            // 为主入口包添加readme和LICENSE
-            if (filePath === 'vue') {
-              ;['README.md', 'README.zh-CN.md', 'LICENSE'].forEach((item) => {
-                fs.copySync(
-                  pathFromWorkspaceRoot(item),
-                  path.resolve(pathFromPackages(''), `dist${vueVersion}/@opentiny/vue/${item}`)
-                )
-              })
-            }
-
-            content.types = 'index.d.ts'
-
-            if (filePath.includes('vue-common') || filePath.includes('vue-locale')) {
-              content.types = './src/index.d.ts'
-            }
-
-            content.version = versionTarget
-            content.dependencies = dependencies
-
-            delete content.devDependencies
-            delete content.private
-            delete content.exports
-
-            return {
-              filePath: filePath.replace(/[\\/]lib$/, ''),
-              content
-            }
+          if (filePath.includes('vue-common') && vueVersion === '2') {
+            dependencies['@vue/composition-api'] = '~1.2.2'
          }
-        }),
+
+          // 如果是主入口或者svg图标则直接指向相同路径
+          if (
+            filePath === 'vue-icon' ||
+            filePath === 'vue-icon-saas' ||
+            filePath === 'vue' ||
+            filePath === 'design/smb' ||
+            filePath === 'design/aurora'
+          ) {
+            content.main = './index.js'
+            content.module = './index.js'
+          } else {
+            content.main = './lib/index.js'
+            content.module = './lib/index.js'
+          }
+
+          // 为主入口包添加readme和LICENSE
+          if (filePath === 'vue') {
+            ;['README.md', 'README.zh-CN.md', 'LICENSE'].forEach((item) => {
+              fs.copySync(
+                pathFromWorkspaceRoot(item),
+                path.resolve(pathFromPackages(''), `dist${vueVersion}/@opentiny/vue/${item}`)
+              )
+            })
+          }
+
+          content.types = 'index.d.ts'
+
+          if (filePath.includes('vue-common') || filePath.includes('vue-locale')) {
+            content.types = './src/index.d.ts'
+          }
+
+          content.version = versionTarget
+          content.dependencies = dependencies
+
+          delete content.devDependencies
+          delete content.private
+          delete content.exports
+
+          return {
+            filePath: filePath.replace(/[\\/]lib$/, ''),
+            content
+          }
+        }
+      }),
      !isRuntime && replaceModuleNamePlugin(`${ns(vueVersion)}.${buildTarget}`)
    ],
    resolve: {
      extensions: ['.js', '.ts', '.tsx', '.vue'],
      alias: {
        ...getAlias(vueVersion),
+        '@tiptap/vue': `${vueVersion === '2'
+          ? path.join(__dirname, '../../../../../packages/vue/src/rich-text-editor/node_modules/@tiptap/vue-2')
+          : path.join(__dirname, '../../../../../packages/vue/src/rich-text-editor/node_modules/@tiptap/vue-3')
+          }`,
        '@vue/babel-helper-vue-jsx-merge-props': 'node_modules/@vue/babel-helper-vue-jsx-merge-props/dist/helper.js'
      }
    },
--- a/packages/renderless/src/rich-text-edtior/vue.ts
+++ b/packages/renderless/src/rich-text-edtior/vue.ts
@ -34,7 +34,7 @@ export const renderless = (
  { computed, onMounted, onBeforeUnmount, reactive, ref },
  { vm, emit, parent },
  {
-    useEditor,
+    Editor,
    Collaboration,
    Y,
    WebrtcProvider,
@ -137,7 +137,7 @@ export const renderless = (
      }
    }
  })
-  const editor = useEditor({
+  const editor = new Editor({
    extensions: [
      StarterKit?.configure({
        // 开启多人协作功能要关闭默认的history模式
--- a/packages/vue/src/rich-text-editor/package.json
+++ b/packages/vue/src/rich-text-editor/package.json
@ -9,36 +9,38 @@
  "author": "",
  "license": "ISC",
  "dependencies": {
+    "@opentiny/vue-common": "workspace:~",
+    "@opentiny/vue-renderless": "workspace:~",
+    "@opentiny/vue-rich-text-editor": "link:",
+    "@opentiny/vue-theme": "workspace:~",
    "@tiptap/core": "^2.1.6",
+    "@tiptap/extension-code-block-lowlight": "^2.0.4",
    "@tiptap/extension-collaboration": "^2.0.4",
    "@tiptap/extension-color": "^2.0.4",
    "@tiptap/extension-highlight": "^2.0.3",
    "@tiptap/extension-image": "^2.0.4",
    "@tiptap/extension-link": "^2.0.3",
+    "@tiptap/extension-paragraph": "^2.1.6",
+    "@tiptap/extension-placeholder": "^2.1.7",
    "@tiptap/extension-subscript": "^2.0.4",
    "@tiptap/extension-superscript": "^2.0.4",
    "@tiptap/extension-table": "^2.0.4",
    "@tiptap/extension-table-cell": "^2.0.4",
    "@tiptap/extension-table-header": "^2.0.4",
    "@tiptap/extension-table-row": "^2.0.4",
-    "@tiptap/extension-text-style": "^2.0.4",
-    "@tiptap/extension-underline": "^2.0.4",
    "@tiptap/extension-task-item": "^2.0.4",
    "@tiptap/extension-task-list": "^2.0.4",
    "@tiptap/extension-text-align": "^2.0.4",
-    "@tiptap/extension-paragraph": "^2.1.6",
+    "@tiptap/extension-text-style": "^2.0.4",
+    "@tiptap/extension-underline": "^2.0.4",
    "@tiptap/pm": "^2.0.4",
    "@tiptap/starter-kit": "^2.0.4",
+    "@tiptap/vue-2": "^2.1.10",
    "@tiptap/vue-3": "^2.0.4",
-    "y-prosemirror": "^1.2.1",
-    "y-webrtc": "^10.2.5",
-    "yjs": "^13.6.7",
-    "@tiptap/extension-code-block-lowlight": "^2.0.4",
    "highlight.js": "^11.8.0",
    "lowlight": "^2.9.0",
-    "@tiptap/extension-placeholder": "^2.1.7",
-    "@opentiny/vue-common": "workspace:~",
-    "@opentiny/vue-renderless": "workspace:~",
-    "@opentiny/vue-theme": "workspace:~"
+    "y-prosemirror": "^1.2.1",
+    "y-webrtc": "^10.2.5",
+    "yjs": "^13.6.7"
  }
 }
--- a/packages/vue/src/rich-text-editor/src/pc.vue
+++ b/packages/vue/src/rich-text-editor/src/pc.vue
@ -195,14 +195,14 @@ import {
  iconRichTextUndo
 } from '@opentiny/vue-icon'
 import {
-  useEditor,
+  Editor,
  EditorContent,
  BubbleMenu,
  VueNodeViewRenderer,
  NodeViewContent,
  nodeViewProps,
  NodeViewWrapper
-} from '@tiptap/vue-3'
+} from '@tiptap/vue'
 import StarterKit from '@tiptap/starter-kit'
 // 段落包
 import Paragraph from '@tiptap/extension-paragraph'
@ -312,7 +312,7 @@ export default defineComponent({
      renderless,
      api,
      extendOptions: {
-        useEditor,
+        Editor,
        Collaboration,
        StarterKit,
        Y,