fix: deconstruct class and id from style attributes on marks

storyblok · Oct 28, 2024 · ee65a01 · ee65a01
1 parent ab7f47a
commit ee65a01
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 2 deletions.
diff --git a/playground/vanilla/src/style.css b/playground/vanilla/src/style.css
@@ -62,6 +62,11 @@ h1 {
   color: #888;
 }
 
+.custom-penguin {
+  color: teal;
+  font-weight: 700;
+}
+
 button {
   border-radius: 8px;
   border: 1px solid transparent;

diff --git a/src/richtext.ts b/src/richtext.ts
@@ -124,11 +124,18 @@ export function richTextResolver<T>(options: StoryblokRichTextOptions<T> = {}) {
 
   // Mark resolver for text formatting
   const markResolver = (tag: string, styled = false): StoryblokRichTextNodeResolver<T> => ({ text, attrs }): T => {
-    const attributes = styled ? { style: attrsToStyle(attrs) } : attrs || {};
+    const { class: className, id: idName, ...styleAttrs } = attrs || {};
+    const attributes = styled
+      ? {
+          class: className,
+          id: idName,
+          style: attrsToStyle(styleAttrs) || undefined,
+        }
+      : attrs || {};
     if (keyedResolvers) {
       attributes.key = `${tag}-${currentKey}`;
     }
-    return renderFn(tag, attributes, text as any) as T;
+    return renderFn(tag, cleanObject(attributes), text as any) as T;
   };
 
   const renderToT = (node: any): T => {