fix(richtext): rendering custom attributes (#344)

Fixes WDX-176
Fixes #343

Author: maoberlehner

packages/richtext/src/richtext.test.ts

@@ -1585,20 +1585,25 @@ describe('richTextResolver', () => {
       expect(html).toBe('<h1 key="h1-0">Hello, world!</h1>');
     });
 
-    it('should render a link with text and keys', () => {
+    it('should render a link with text, keys, and custom attrs', () => {
       const link = {
         type: 'paragraph',
         content: [{
           type: 'text',
           text: 'Click me',
           marks: [{
             type: 'link',
-            attrs: { href: 'https://example.com' },
+            attrs: {
+              href: 'https://example.com',
+              custom: {
+                'data-custom': 'foo',
+              },
+            },
           }],
         }],
       };
       const html = richTextResolver<string>({ keyedResolvers: true }).render(link as unknown as StoryblokRichTextNode<string>);
-      expect(html).toBe('<p key="p-0"><a href="https://example.com" key="a-0">Click me</a></p>');
+      expect(html).toBe('<p key="p-0"><a href="https://example.com" key="a-0" data-custom="foo">Click me</a></p>');
     });
 
     it('should render text with multiple marks and keys', () => {

packages/richtext/src/utils/index.ts

@@ -1,3 +1,5 @@
+import type { BlockAttributes } from '../types';
+
 export const SELF_CLOSING_TAGS = [
   'area',
   'base',
@@ -76,9 +78,13 @@ export const BLOCK_LEVEL_TAGS = [
  * ```
  *
  */
-export const attrsToString = (attrs: Record<string, string> = {}) => Object.keys(attrs)
-  .map(key => `${key}="${attrs[key]}"`)
-  .join(' ');
+export const attrsToString = (attrs: BlockAttributes = {}) => {
+  const { custom, ...attrsWithoutCustom } = attrs;
+  const normalizedAttrs = { ...attrsWithoutCustom, ...custom };
+  return Object.keys(normalizedAttrs)
+    .map(key => `${key}="${normalizedAttrs[key]}"`)
+    .join(' ');
+};
 
 /**
  * Converts an object of attributes to a CSS style string.