improve the highlight extension, add pasteRule and inputRule

docs/src/demos/Extensions/Highlight/index.vue

@@ -69,7 +69,8 @@ export default {
       content: `
           <p>This isn’t highlighted.</s></p>
           <p><mark>But that one is.</mark></p>
-          <p><mark style="background-color: #ffa8a8;">And this is highlighted too, but in a different color.</mark></p>
+          <p><mark style="background-color: red;">And this is highlighted too, but in a different color.</mark></p>
+          <p><mark data-color="#ffa8a8">And this one has a data attribute.</mark></p>
         `,
     })
   },

packages/core/src/utils/markHasAttributes.ts

@@ -13,7 +13,7 @@ export default function markHasAttributes(state: EditorState, type: MarkType, at
   // @ts-ignore
   return Object.keys(attrs).filter((key: string) => {
     // @ts-ignore
-    console.log(attrs[key], originalAttrs[key], attrs[key] === originalAttrs[key])
+    // console.log(attrs[key], originalAttrs[key], attrs[key] === originalAttrs[key])
     return attrs[key] === originalAttrs[key]
   }).length
 }

packages/extension-highlight/index.ts

@@ -1,11 +1,14 @@
 import {
-  Command, createMark,
+  Command, createMark, markInputRule, markPasteRule,
 } from '@tiptap/core'
 
 export interface HighlightOptions {
   color: string,
 }
 
+export const inputRegex = /(?:^|\s)((?:==)((?:[^~]+))(?:==))$/gm
+export const pasteRegex = /(?:^|\s)((?:==)((?:[^~]+))(?:==))/gm
+
 const Highlight = createMark({
   name: 'highlight',
 
@@ -14,8 +17,11 @@ const Highlight = createMark({
       color: {
         default: null,
         parseHTML: element => {
+          console.log(element.getAttribute('data-color'))
           return {
-            color: element.style.backgroundColor,
+            color:
+              element.getAttribute('data-color')
+              || element.style.backgroundColor,
           }
         },
         renderHTML: attributes => {
@@ -24,6 +30,7 @@ const Highlight = createMark({
           }
 
           return {
+            'data-color': attributes.color,
             style: `background-color: ${attributes.color}`,
           }
         },
@@ -36,6 +43,14 @@ const Highlight = createMark({
       {
         tag: 'mark',
       },
+      {
+        style: 'background-color',
+        // getAttrs: value => {
+        //   return {
+        //     color: value,
+        //   }
+        // },
+      },
     ]
   },
 
@@ -56,6 +71,18 @@ const Highlight = createMark({
       'Mod-e': () => this.editor.highlight(),
     }
   },
+
+  addInputRules() {
+    return [
+      markInputRule(inputRegex, this.type),
+    ]
+  },
+
+  addPasteRules() {
+    return [
+      markPasteRule(inputRegex, this.type),
+    ]
+  },
 })
 
 export default Highlight