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

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'
-        },
+        }
       ]
     }
   ]

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)
       }
     },

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)
       }
     },

internals/cli/src/commands/build/build-ui.ts

@@ -200,6 +200,10 @@ export const getBaseConfig = ({ vueVersion, dtsInclude, dts, buildTarget, isRunt
       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'
       }
     },

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模式

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"
   }
 }

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,