add color support

2020-10-02 21:39:16 +02:00
parent 1fc7a6b37e
commit b5359a305f
2 changed files with 15 additions and 1 deletions
--- a/packages/extension-highlight/index.ts
+++ b/packages/extension-highlight/index.ts
@@ -13,12 +13,25 @@ declare module '@tiptap/core/src/Editor' {
 export default new Mark()
  .name('highlight')
  .schema(() => ({
+    attrs: {
+      color: {
+        default: null,
+      },
+    },
    parseDOM: [
      {
        tag: 'mark',
+        getAttrs: node => {
+          return {
+            color: (node as HTMLElement).style.backgroundColor,
+          }
+        },
      },
    ],
-    toDOM: () => ['mark', 0],
+    toDOM: node => ['mark', {
+      ...node.attrs,
+      style: node.attrs.color && `background-color: ${node.attrs.color};`,
+    }, 0],
  }))
  .commands(({ name }) => ({
    highlight: () => ({ commands }) => {