diff --git a/packages/core/src/utils/mergeAttributes.ts b/packages/core/src/utils/mergeAttributes.ts index 136e3c5b..733c8cb9 100644 --- a/packages/core/src/utils/mergeAttributes.ts +++ b/packages/core/src/utils/mergeAttributes.ts @@ -5,18 +5,19 @@ export default function mergeAttributes(...object: AnyObject[]) { const mergedAttributes = { ...items } Object.entries(item).forEach(([key, value]) => { - if (!mergedAttributes[key]) { + const exists = mergedAttributes[key] + + if (!exists) { mergedAttributes[key] = value return } if (key === 'class') { mergedAttributes[key] = [mergedAttributes[key], value].join(' ') - return - } - - if (key === 'style') { + } else if (key === 'style') { mergedAttributes[key] = [mergedAttributes[key], value].join('; ') + } else { + mergedAttributes[key] = value } }) diff --git a/tests/cypress/integration/core/mergeAttributes.spec.ts b/tests/cypress/integration/core/mergeAttributes.spec.ts new file mode 100644 index 00000000..5a6a24e0 --- /dev/null +++ b/tests/cypress/integration/core/mergeAttributes.spec.ts @@ -0,0 +1,60 @@ +/// + +import mergeAttributes from '@tiptap/core/src/utils/mergeAttributes' + +describe('mergeAttributes', () => { + it('should merge two objects', () => { + const value = mergeAttributes({ id: 1 }, { class: 'foo' }) + + expect(value).to.deep.eq({ + id: 1, + class: 'foo', + }) + }) + + it('should merge multiple objects', () => { + const value = mergeAttributes({ id: 1 }, { class: 'foo' }, { title: 'bar' }) + + expect(value).to.deep.eq({ + id: 1, + class: 'foo', + title: 'bar', + }) + }) + + it('should overwrite values', () => { + const value = mergeAttributes({ id: 1 }, { id: 2 }) + + expect(value).to.deep.eq({ + id: 2, + }) + }) + + it('should merge classes', () => { + const value = mergeAttributes({ class: 'foo' }, { class: 'bar' }) + + expect(value).to.deep.eq({ + class: 'foo bar', + }) + }) + + it('should merge styles', () => { + const value = mergeAttributes({ style: 'color: red' }, { style: 'background: green' }) + + expect(value).to.deep.eq({ + style: 'color: red; background: green', + }) + }) + + it('should merge classes and styles', () => { + const value = mergeAttributes( + { class: 'foo', style: 'color: red' }, + { class: 'bar', style: 'background: green' }, + ) + + expect(value).to.deep.eq({ + class: 'foo bar', + style: 'color: red; background: green', + }) + }) +})