feat: 🎸 粘贴事件处理heading生成id、设置高亮块转换

bons-space · Sep 22, 2022 · 8ca3bba · 8ca3bba
1 parent d6d3d18
commit 8ca3bba
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 35 deletions.
diff --git a/src/extensions/custom-block.ts b/src/extensions/custom-block.ts
@@ -1,25 +1,25 @@
 import {
-  Editor, Node, mergeAttributes,
+  Editor, Node, mergeAttributes, nodeInputRule,
 } from '@tiptap/core';
 import { VueNodeViewRenderer } from '@tiptap/vue-3';
 import CommandButton from '@/components/menuCommands/CommandButton.vue';
 import CustomBlockView from '@/components/extensionViews/CustomBlockView.vue';
 
 export interface CustomBlockOptions {
-    HTMLAttributes: Record<string, any>,
-    types: string[],
+  HTMLAttributes: Record<string, any>,
+  types: string[],
 }
 
 export type Type = 'tips' | 'info' | 'warning' | 'success' | 'color1' | 'color2' | 'color3' | 'color4' | 'color5'
 
 declare module '@tiptap/core' {
-    interface Commands<ReturnType> {
-        customBlock: {
-            setCustomBlock: (attributes: { type: Type }) => ReturnType,
-            toggleCustomBlock: (attributes: { type: Type }) => ReturnType,
-            unsetCustomBlock: () => ReturnType,
-        }
+  interface Commands<ReturnType> {
+    customBlock: {
+      setCustomBlock: (attributes: { type: Type }) => ReturnType,
+      toggleCustomBlock: (attributes?: { type: Type }) => ReturnType,
+      unsetCustomBlock: () => ReturnType,
     }
+  }
 }
 
 export const inputRegex = /(?:^|\s)((?:[^:]+))(?::)$/
@@ -37,9 +37,13 @@ const CustomBlock = Node.create<CustomBlockOptions>({
           component: CommandButton,
           componentProps: {
             command: () => {
-              editor.commands.toggleCustomBlock({ type: 'tips' });
+              if (editor.isActive('custom-block')) {
+                editor.commands.unsetCustomBlock()
+              } else {
+                editor.commands.toggleCustomBlock();
+              }
             },
-            isActive: editor.isActive('customBlock'),
+            isActive: editor.isActive('custom-block'),
             icon: 'custom-block',
             tooltip: '高亮块',
           },
@@ -50,7 +54,6 @@ const CustomBlock = Node.create<CustomBlockOptions>({
   group: 'block',
   content: 'block+',
   defining: true,
-  isolating: true,
   addAttributes() {
     return {
       type: {
@@ -71,12 +74,7 @@ const CustomBlock = Node.create<CustomBlockOptions>({
         }
         return commands.wrapIn(this.name, attributes)
       },
-      toggleCustomBlock: (attributes) => ({ commands }) => {
-        if (!this.options.types.includes(attributes.type)) {
-          return false
-        }
-        return commands.toggleWrap(this.name, attributes)
-      },
+      toggleCustomBlock: (attributes) => ({ commands }) => commands.toggleWrap(this.name, attributes),
       unsetCustomBlock: () => ({ commands }) => commands.lift(this.name),
     }
   },
@@ -91,23 +89,14 @@ const CustomBlock = Node.create<CustomBlockOptions>({
   renderHTML({ HTMLAttributes }) {
     return ['custom-block', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0]
   },
-  // addInputRules() {
-  //   return [
-  //     nodeInputRule({
-  //       find: inputRegex,
-  //       type: this.type,
-  //     }),
-  //   ]
-  // },
-  //
-  // addPasteRules() {
-  //   return [
-  //     nodePasteRule({
-  //       find: pasteRegex,
-  //       type: this.type,
-  //     }),
-  //   ]
-  // },
+  addInputRules() {
+    return [
+      nodeInputRule({
+        find: inputRegex,
+        type: this.type,
+      }),
+    ]
+  },
 })
 
 export default CustomBlock;
diff --git a/src/extensions/paste-handler.ts b/src/extensions/paste-handler.ts
@@ -1,6 +1,7 @@
 import { Extension } from '@tiptap/core';
 import { Plugin, PluginKey } from 'prosemirror-state';
 import { Node, Slice } from 'prosemirror-model';
+import { genNonDuplicateID } from '@/utils/common';
 
 const LINE_HEIGHT_DEAL_LIST = [
   'paragraph',
@@ -26,6 +27,9 @@ const PasteHandler = Extension.create({
                 if (nodeJson.attrs && nodeJson.attrs.lineHeight) {
                   nodeJson.attrs.lineHeight = null
                 }
+                if (nodeType.name === 'heading' && nodeJson.attrs && !nodeJson.attrs.id) {
+                  nodeJson.attrs.id = genNonDuplicateID()
+                }
                 slice.content.replaceChild(index, Node.fromJSON(nodeType.schema, nodeJson))
               }
               if (nodeType.name === 'image') {