merge attributes

packages/core/src/types.ts

@@ -38,3 +38,7 @@ export type Diff<T extends keyof any, U extends keyof any> =
   ({ [P in T]: P } & { [P in U]: never } & { [x: string]: never })[T]
 
 export type Overwrite<T, U> = Pick<T, Diff<keyof T, keyof U>> & U;
+
+export type AnyObject = {
+  [key: string]: any
+}

packages/core/src/utils/getRenderedAttributes.ts

@@ -1,5 +1,6 @@
 import { Node, Mark } from 'prosemirror-model'
 import { ExtensionAttribute } from '../types'
+import mergeAttributes from './mergeAttributes'
 
 export default function getRenderedAttributes(nodeOrMark: Node | Mark, extensionAttributes: ExtensionAttribute[]): { [key: string]: any } {
   return extensionAttributes
@@ -9,10 +10,6 @@ export default function getRenderedAttributes(nodeOrMark: Node | Mark, extension
       return item.attribute.renderHTML(nodeOrMark.attrs)
     })
     .reduce((attributes, attribute) => {
-      // TODO: add support for "class" and "style" merge
-      return {
-        ...attributes,
-        ...attribute,
-      }
+      return mergeAttributes(attributes, attribute)
     }, {})
 }

packages/core/src/utils/mergeAttributes.ts

@@ -0,0 +1,23 @@
+import { AnyObject } from '../types'
+
+export default function mergeAttributes(attributes1: AnyObject, attributes2: AnyObject) {
+  const mergedAttributes = { ...attributes1 }
+
+  Object.entries(attributes2).forEach(([key, value]) => {
+    if (!mergedAttributes[key]) {
+      mergedAttributes[key] = value
+      return
+    }
+
+    if (key === 'class') {
+      mergedAttributes[key] = [mergedAttributes[key], value].join(' ')
+      return
+    }
+
+    if (key === 'style') {
+      mergedAttributes[key] = [mergedAttributes[key], value].join('; ')
+    }
+  })
+
+  return mergedAttributes
+}