feat(rich-text-editor): tiny-tiptap and some extension (#1764)

* feat(rich-text-editor): tiny-tiptap and some extension

* fix(rich-text-editor): remove spread in reduce

Author: zzzp9527

packages/tiny-tiptap/README.md

@@ -0,0 +1,60 @@
+# 使用文档
+
+## 引入
+
+```js
+import TinyTiptap from '@opentiny/tiny-tiptap'
+```
+
+## 初始化实例
+
+```js
+new TinyTiptap(editorClass, options, viewMap, viewRender)
+```
+
+## 参数配置
+
+### TinyTiptap
+
+| 名称         | 类型   | 默认值 | 说明                                                                |
+| ------------ | ------ | ------ | ------------------------------------------------------------------- |
+| editorClass  | Editor | Editor | 根据使用环境传递的 Editor 类，默认值为 Tiptap 的 core 包中的 Editor |
+| options      | Object | {}     | 参见 Tiptap 扩展说明                                                |
+| viewOptions  | Object | {}     | viewMap 与 menuMap                                                  |
+| otherOptions | Object | {}     | 包括其他的一些配置比如 placeholder 待后续补充                       |
+
+#### viewMap
+
+Map 类型，主要包括 key(扩展名) -> view(视图) 的映射
+
+#### menuMap
+
+| 名称      | 类型   | 默认值 | 说明                         |
+| --------- | ------ | ------ | ---------------------------- |
+| renderer  | Object | -      | 根据使用环境传递的视图渲染器 |
+| slashView | View   | {}     | 定制化的斜杠菜单视图         |
+
+## 使用示例
+
+```js
+import { VueNodeViewRenderer, VueRenderer } from '@tiptap/vue'
+import ImageView from './components/image-view.vue'
+
+// 设置扩展到视图的映射
+const viewMap = new Map([['image', VueNodeViewRenderer(ImageView)]])
+const menuMap = {
+  renderer: VueRenderer,
+  slashView
+}
+
+const viewOptions = {
+  viewMap,
+  menuMap
+}
+
+const otherOptions = {
+  placeholder: '自定义占位符'
+}
+
+const editorInstance = new TinyTiptap(Editor, options, viewOptions, otherOptions)
+```

packages/tiny-tiptap/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@opentiny/tiny-tiptap",
+  "private": true,
+  "version": "1.0.0",
+  "main": "src/index.ts",
+  "license": "MIT",
+  "sideEffects": false,
+  "type": "module",
+  "dependencies": {
+    "@tiptap/core": "~2.1.16",
+    "@tiptap/extension-blockquote": "~2.1.16",
+    "@tiptap/extension-bold": "~2.1.16",
+    "@tiptap/extension-bullet-list": "~2.1.16",
+    "@tiptap/extension-code": "~2.1.16",
+    "@tiptap/extension-code-block-lowlight": "~2.1.16",
+    "@tiptap/extension-collaboration": "~2.1.16",
+    "@tiptap/extension-color": "~2.1.16",
+    "@tiptap/extension-document": "~2.1.16",
+    "@tiptap/extension-heading": "~2.1.16",
+    "@tiptap/extension-highlight": "~2.1.16",
+    "@tiptap/extension-history": "~2.1.16",
+    "@tiptap/extension-image": "~2.1.16",
+    "@tiptap/extension-italic": "~2.1.16",
+    "@tiptap/extension-link": "~2.1.16",
+    "@tiptap/extension-list-item": "~2.1.16",
+    "@tiptap/extension-ordered-list": "~2.1.16",
+    "@tiptap/extension-paragraph": "~2.1.16",
+    "@tiptap/extension-placeholder": "~2.1.16",
+    "@tiptap/extension-strike": "~2.1.16",
+    "@tiptap/extension-subscript": "~2.1.16",
+    "@tiptap/extension-superscript": "~2.1.16",
+    "@tiptap/extension-table": "~2.1.16",
+    "@tiptap/extension-table-cell": "~2.1.16",
+    "@tiptap/extension-table-header": "~2.1.16",
+    "@tiptap/extension-table-row": "~2.1.16",
+    "@tiptap/extension-task-item": "~2.1.16",
+    "@tiptap/extension-task-list": "~2.1.16",
+    "@tiptap/extension-text": "~2.1.16",
+    "@tiptap/extension-text-align": "~2.1.16",
+    "@tiptap/extension-text-style": "~2.1.16",
+    "@tiptap/extension-underline": "~2.1.16",
+    "@tiptap/pm": "~2.1.16",
+    "@tiptap/starter-kit": "~2.1.16",
+    "@tiptap/suggestion": "~2.1.16",
+    "highlight.js": "^11.8.0",
+    "lowlight": "^2.9.0",
+    "tippy.js": "^6.3.7"
+  },
+  "scripts": {
+    "build": "pnpm -w build:ui $npm_package_name",
+    "//postversion": "pnpm build"
+  }
+}

packages/tiny-tiptap/src/TiptapEditor.ts

@@ -0,0 +1,92 @@
+import type { Content, Editor, Extension, Node, NodeViewRenderer } from '@tiptap/core'
+import { extensions } from './extension'
+
+import { generateSlashMenuExtension } from './components/slash'
+
+export default class TiptapEditor {
+  options: any
+  editor: Editor
+  extensions: any[]
+  /**
+   * @param editorClass Editor 的构造类
+   * @param options Editor 的配置项
+   * @param viewOptions
+   * @param viewOptions.viewMap 需要进行视图映射的扩展组件 由 key 和 view 组成
+   * @param viewOptions.menuMap 包括映射方法以及菜单等组件
+   * @param otherOptions
+   */
+  constructor(editorClass, options = {}, viewOptions, otherOptions) {
+    this.extensions = extensions
+    const { viewMap, menuMap } = viewOptions
+
+    this.initExtensionViews(viewMap)
+
+    this.initMenuViews(menuMap)
+
+    this.initOtherOptions(otherOptions)
+
+    // TODO 合并用户传入的 options
+    this.options = {
+      ...options,
+      ...{
+        extensions: this.extensions
+      }
+    }
+
+    this.editor = this.createEditor(editorClass, this.options)
+  }
+
+  createEditor(editorClass, options) {
+    return new editorClass(options)
+  }
+
+  getContent() {
+    return this.editor.getHTML()
+  }
+
+  setContent(content: Content) {
+    this.editor.commands.setContent(content)
+  }
+
+  destroy() {
+    this.editor.destroy()
+  }
+
+  private initExtensionViews(viewMap: Map<string, any>) {
+    // 根据传入的视图构建 重新继承扩展并重新 configure
+    viewMap.forEach((view, key) => {
+      const extensionIndex = this.extensions.findIndex((extension) => extension.name === key)
+      const extension = this.extensions.at(extensionIndex)
+      if (extension) {
+        const originOption = extension.options
+        const newExtension = extension
+          .extend({
+            addNodeView() {
+              return view
+              // return () => ({ dom: view })
+            }
+          })
+          .configure({ ...originOption })
+        this.extensions[extensionIndex] = newExtension
+      }
+    })
+  }
+
+  private initMenuViews(menuMap) {
+    const { renderer: Renderer, slashView } = menuMap
+
+    const slashMenu = generateSlashMenuExtension(Renderer, slashView)
+    this.extensions.push(slashMenu)
+  }
+
+  private initOtherOptions(otherOptions) {
+    const { placeholder } = otherOptions
+    const placeholderIndex = this.extensions.findIndex((extension) => extension.name === 'placeholder')
+    const placeholderExtension = this.extensions[placeholderIndex]
+    if (placeholderExtension) {
+      this.extensions[placeholderIndex] = placeholderExtension.configure({
+        placeholder
+      })
+    }
+  }
+}

packages/tiny-tiptap/src/components/slash/index.ts

@@ -0,0 +1,96 @@
+import { AnyExtension, Editor, Extension, Range } from '@tiptap/core'
+import Suggestion from '@tiptap/suggestion'
+import { SlashMenuItem } from '@/types'
+import type { Instance } from 'tippy.js'
+import tippy from 'tippy.js'
+
+export const generateSlashMenuExtension = (Renderer, view) => {
+  return Extension.create({
+    name: 'slashMenu',
+
+    addProseMirrorPlugins() {
+      const slashMenuItems = getSlashMenuItemsFromExtensions(this.editor)
+
+      return [
+        Suggestion({
+          editor: this.editor,
+          char: '/',
+          command: ({ editor, range, props }: { editor: Editor; range: Range; props: SlashMenuItem }) => {
+            props.command({ editor, range })
+          },
+          items: ({ query }: { query: string }) => {
+            return slashMenuItems.filter((item) =>
+              [...item.keywords, item.title].some((keyword) => keyword.includes(query.toLocaleLowerCase()))
+            )
+          },
+          render: () => {
+            let popup: Instance[]
+            let viewComponent
+
+            return {
+              onStart: (props: Record<string, any>) => {
+                viewComponent = new Renderer(view, {
+                  props,
+                  editor: props.editor
+                })
+
+                if (!props.clientRect) return
+
+                popup = tippy('body', {
+                  getReferenceClientRect: props.clientRect,
+                  appendTo: () => document.body,
+                  content: viewComponent.element,
+                  showOnCreate: true,
+                  interactive: true,
+                  trigger: 'manual',
+                  placement: 'bottom-start'
+                })
+              },
+
+              onUpdate: (props: Record<string, any>) => {
+                viewComponent.updateProps(props)
+
+                if (!props.clientRect) return
+
+                popup[0].setProps({
+                  getReferenceClientRect: props.clientRect
+                })
+              },
+
+              onKeyDown: (props: Record<string, any>) => {
+                if (props.event.key === 'Escape') {
+                  popup[0].hide()
+
+                  return true
+                }
+
+                return viewComponent.ref?.onKeyDown(props)
+              },
+
+              onExit() {
+                popup[0].destroy()
+                viewComponent.destroy()
+              }
+            }
+          }
+        })
+      ]
+    }
+  })
+}
+
+function getSlashMenuItemsFromExtensions(editor: Editor) {
+  const extensionManager = editor.extensionManager
+  return (extensionManager?.extensions ?? [])
+    .reduce((prev: SlashMenuItem[], curr: AnyExtension) => {
+      const { getSlashMenus } = curr.options
+
+      if (!getSlashMenus) return prev
+
+      const menus = getSlashMenus()
+
+      prev.push(...menus)
+      return prev
+    }, [])
+    .sort((a, b) => a.priority - b.priority)
+}

packages/tiny-tiptap/src/extension/blockquote/index.ts

@@ -0,0 +1,28 @@
+import type { ExtensionOptions } from '@/types'
+import { Editor, Range } from '@tiptap/core'
+import type { BlockquoteOptions } from '@tiptap/extension-blockquote'
+import TiptapBlockquote from '@tiptap/extension-blockquote'
+import { iconRichTextQuoteText } from '@opentiny/vue-icon'
+
+const Blockquote = TiptapBlockquote.extend<ExtensionOptions & BlockquoteOptions>({
+  addOptions() {
+    return {
+      ...this.parent?.(),
+      getSlashMenus() {
+        return [
+          {
+            priority: 50,
+            icon: iconRichTextQuoteText(),
+            title: '内容引用',
+            keywords: ['quote', 'neirongyinyong'],
+            command: ({ editor, range }: { editor: Editor; range: Range }) => {
+              editor.chain().focus().deleteRange(range).toggleBlockquote().run()
+            }
+          }
+        ]
+      }
+    }
+  }
+})
+
+export default Blockquote

packages/tiny-tiptap/src/extension/bold/index.ts

@@ -0,0 +1,13 @@
+import type { ExtensionOptions } from '@/types'
+import type { BoldOptions } from '@tiptap/extension-bold'
+import TiptapBold from '@tiptap/extension-bold'
+
+const Bold = TiptapBold.extend<ExtensionOptions & BoldOptions>({
+  addOptions() {
+    return {
+      ...this.parent?.()
+    }
+  }
+})
+
+export default Bold

packages/tiny-tiptap/src/extension/bullet-list/index.ts

@@ -0,0 +1,32 @@
+import type { ExtensionOptions } from '@/types'
+import type { Editor, Range } from '@tiptap/core'
+import type { BulletListOptions } from '@tiptap/extension-bullet-list'
+import TiptapBulletList from '@tiptap/extension-bullet-list'
+import ListItem from '@tiptap/extension-list-item'
+import { iconRichTextListUnordered } from '@opentiny/vue-icon'
+
+const BulletList = TiptapBulletList.extend<ExtensionOptions & BulletListOptions>({
+  addOptions() {
+    return {
+      ...this.parent?.(),
+      getSlashMenus() {
+        return [
+          {
+            priority: 20,
+            icon: iconRichTextListUnordered(),
+            title: '无序列表',
+            keywords: ['bulletlist', 'wuxuliebiao'],
+            command: ({ editor, range }: { editor: Editor; range: Range }) => {
+              editor.chain().focus().deleteRange(range).toggleBulletList().run()
+            }
+          }
+        ]
+      }
+    }
+  },
+  addExtensions() {
+    return [ListItem]
+  }
+})
+
+export default BulletList