add deep merge

packages/core/src/Extension.ts

@@ -1,6 +1,7 @@
 import { Plugin, Transaction } from 'prosemirror-state'
 import { InputRule } from 'prosemirror-inputrules'
 import { Editor } from './Editor'
+import mergeDeep from './utilities/mergeDeep'
 import { GlobalAttributes } from './types'
 
 export interface ExtensionConfig<Options = any, Commands = {}> {
@@ -178,10 +179,7 @@ export class Extension<Options = any, Commands = any> {
   }
 
   #configure = (options: Partial<Options>) => {
-    this.options = {
+    this.options = mergeDeep(this.config.defaultOptions, options) as Options
-      ...this.config.defaultOptions,
-      ...options,
-    }
 
     return this
   }

packages/core/src/Mark.ts

@@ -7,6 +7,7 @@ import {
 import { Plugin, Transaction } from 'prosemirror-state'
 import { InputRule } from 'prosemirror-inputrules'
 import { ExtensionConfig } from './Extension'
+import mergeDeep from './utilities/mergeDeep'
 import { Attributes, Overwrite } from './types'
 import { Editor } from './Editor'
 
@@ -238,10 +239,7 @@ export class Mark<Options = any, Commands = {}> {
   }
 
   #configure = (options: Partial<Options>) => {
-    this.options = {
+    this.options = mergeDeep(this.config.defaultOptions, options) as Options
-      ...this.config.defaultOptions,
-      ...options,
-    }
 
     return this
   }

packages/core/src/Node.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import {
   DOMOutputSpec,
   NodeSpec,
@@ -7,6 +8,7 @@ import {
 import { Plugin, Transaction } from 'prosemirror-state'
 import { InputRule } from 'prosemirror-inputrules'
 import { ExtensionConfig } from './Extension'
+import mergeDeep from './utilities/mergeDeep'
 import { Attributes, NodeViewRenderer, Overwrite } from './types'
 import { Editor } from './Editor'
 
@@ -305,10 +307,7 @@ export class Node<Options = any, Commands = {}> {
   }
 
   #configure = (options: Partial<Options>) => {
-    this.options = {
+    this.options = mergeDeep(this.config.defaultOptions, options) as Options
-      ...this.config.defaultOptions,
-      ...options,
-    }
 
     return this
   }

packages/core/src/utilities/isObject.ts

@@ -0,0 +1,3 @@
+export default function isObject(item: any): boolean {
+  return (item && typeof item === 'object' && !Array.isArray(item))
+}

packages/core/src/utilities/mergeDeep.ts

@@ -0,0 +1,22 @@
+import { AnyObject } from '../types'
+import isObject from './isObject'
+
+export default function mergeDeep(target: AnyObject, source: AnyObject) {
+  const output = { ...target }
+
+  if (isObject(target) && isObject(source)) {
+    Object.keys(source).forEach(key => {
+      if (isObject(source[key])) {
+        if (!(key in target)) {
+          Object.assign(output, { [key]: source[key] })
+        } else {
+          output[key] = mergeDeep(target[key], source[key])
+        }
+      } else {
+        Object.assign(output, { [key]: source[key] })
+      }
+    })
+  }
+
+  return output
+}

tests/cypress/integration/core/mergeDeep.spec.ts

@@ -0,0 +1,68 @@
+/// <reference types="cypress" />
+
+import mergeDeep from '@tiptap/core/src/utilities/mergeDeep'
+
+describe('mergeDeep', () => {
+  it('should merge', () => {
+    const one = {
+      a: 1,
+    }
+    const two = {
+      b: 1,
+    }
+    const result = {
+      a: 1,
+      b: 1,
+    }
+    const merged = mergeDeep(one, two)
+
+    expect(merged).to.deep.eq(result)
+  })
+
+  it('should not merge array', () => {
+    const one = {
+      a: [1],
+    }
+    const two = {
+      a: [2],
+    }
+    const result = {
+      a: [2],
+    }
+    const merged = mergeDeep(one, two)
+
+    expect(merged).to.deep.eq(result)
+  })
+
+  it('should merge deep', () => {
+    const one = {
+      a: 1,
+      b: {
+        c: true,
+      },
+      d: {
+        e: true,
+        f: [1],
+      },
+    }
+    const two = {
+      b: 1,
+      d: {
+        f: [2],
+        g: 1,
+      },
+    }
+    const result = {
+      a: 1,
+      b: 1,
+      d: {
+        e: true,
+        f: [2],
+        g: 1,
+      },
+    }
+    const merged = mergeDeep(one, two)
+
+    expect(merged).to.deep.eq(result)
+  })
+})