From ecadf7ea0a7f8f39a8496a60edf0ac8f379e6eb3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Fri, 23 Oct 2020 15:02:52 +0200
Subject: [PATCH] merge attributes

---
 packages/core/src/types.ts                    |  4 ++++
 .../core/src/utils/getRenderedAttributes.ts   |  7 ++----
 packages/core/src/utils/mergeAttributes.ts    | 23 +++++++++++++++++++
 packages/extension-paragraph/index.ts         |  6 ++---
 4 files changed, 32 insertions(+), 8 deletions(-)
 create mode 100644 packages/core/src/utils/mergeAttributes.ts

diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts
index 343326f5..f816baf8 100644
--- a/packages/core/src/types.ts
+++ b/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
+}
diff --git a/packages/core/src/utils/getRenderedAttributes.ts b/packages/core/src/utils/getRenderedAttributes.ts
index 6c76c5ca..8f859a2c 100644
--- a/packages/core/src/utils/getRenderedAttributes.ts
+++ b/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)
     }, {})
 }
diff --git a/packages/core/src/utils/mergeAttributes.ts b/packages/core/src/utils/mergeAttributes.ts
new file mode 100644
index 00000000..d19fe8ab
--- /dev/null
+++ b/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
+}
diff --git a/packages/extension-paragraph/index.ts b/packages/extension-paragraph/index.ts
index 20b56d36..51a24d50 100644
--- a/packages/extension-paragraph/index.ts
+++ b/packages/extension-paragraph/index.ts
@@ -16,7 +16,7 @@ const Paragraph = createNode({
   //         align: {
   //           default: 'right',
   //           renderHTML: attributes => ({
-  //             class: 'global',
+  //             class: 'foo',
   //             style: `text-align: ${attributes.align}`,
   //           }),
   //         },
@@ -31,8 +31,8 @@ const Paragraph = createNode({
   //       default: '123',
   //       rendered: true,
   //       renderHTML: attributes => ({
-  //         class: `foo-${attributes.id}`,
-  //         id: 'foo',
+  //         class: 'bar',
+  //         style: 'color: red',
   //       }),
   //     },
   //   }