feat: add textStyle and highlight marks support

Signed-off-by: Edvinas Jurele <[email protected]>
NordSecurity · Aug 30, 2023 · 6b68afa · 6b68afa
1 parent a716a99
commit 6b68afa
Show file tree

Hide file tree

Showing 5 changed files with 140 additions and 6 deletions.
diff --git a/README.md b/README.md
@@ -178,8 +178,8 @@ schema={{
     subscript: () => ({ ... }),
     code: () => ({ ... }),
     anchor: ({ attrs }) => ({ ... }),
-    textStyle: ({ attrs }) => ({ ... }), // NOT SUPPORTED YET!
-    highlight: ({ attrs }) => ({ ... }), // NOT SUPPORTED YET!
+    textStyle: ({ attrs }) => ({ ... }),
+    highlight: ({ attrs }) => ({ ... }),
   };
 }}
 ```

diff --git a/demo/src/pages/index.astro b/demo/src/pages/index.astro
@@ -207,6 +207,38 @@ const richTextFromStoryblok: RichTextType = {
             },
           ],
         },
+        {
+          text: ", ",
+          type: "text",
+        },
+        {
+          text: "textStyle",
+          type: "text",
+          marks: [
+            {
+              type: "textStyle",
+              attrs: {
+                color: "#ddA03A",
+              },
+            },
+          ],
+        },
+        {
+          text: ", ",
+          type: "text",
+        },
+        {
+          text: "highlight",
+          type: "text",
+          marks: [
+            {
+              type: "highlight",
+              attrs: {
+                color: "#9CFFA4",
+              },
+            },
+          ],
+        },
         {
           text: ".",
           type: "text",

diff --git a/lib/src/types.ts b/lib/src/types.ts
@@ -37,9 +37,8 @@ export type Schema = {
     subscript?: ResponseSchemaFn;
     code?: ResponseSchemaFn;
     anchor?: ResponseSchemaAttrsFn;
-    // TODO: add support. The following are known, though not supported yet
-    // textStyle?: ResponseSchemaAttrsFn;
-    // highlight?: ResponseSchemaAttrsFn;
+    textStyle?: ResponseSchemaAttrsFn;
+    highlight?: ResponseSchemaAttrsFn;
   };
 };
 
@@ -71,6 +70,12 @@ export type Mark =
         class: string;
       };
     }
+  | {
+      type: "textStyle" | "highlight";
+      attrs: {
+        color: string;
+      };
+    }
   | {
       type: "link";
       attrs: {
@@ -191,7 +196,6 @@ type RichTextContent =
 
 export type SchemaNode = RichTextContent | Text | ListItem | Image | Emoji;
 
-// TODO: expand with full marks support
 export type RichTextType = {
   type: "doc";
   content: Array<RichTextContent>;

diff --git a/lib/src/utils/resolveRichTextToNodes.spec.ts b/lib/src/utils/resolveRichTextToNodes.spec.ts
@@ -826,6 +826,20 @@ describe("resolveMark", () => {
           id,
         },
       }),
+      textStyle: ({ attrs: { color } }) => ({
+        component: "span",
+        props: {
+          class: "text-style",
+          style: { color },
+        },
+      }),
+      highlight: ({ attrs: { color } }) => ({
+        component: "span",
+        props: {
+          class: "highlight",
+          style: { backgroundColor: color },
+        },
+      }),
     },
   };
 
@@ -1087,6 +1101,62 @@ describe("resolveMark", () => {
       },
     });
   });
+
+  it("textStyle", () => {
+    const mark: Mark = {
+      type: "textStyle",
+      attrs: {
+        color: "#9CFFA4",
+      },
+    };
+
+    // default
+    expect(resolveMark(content, mark)).toStrictEqual({
+      component: "span",
+      content,
+      props: {
+        style: { color: "#9CFFA4" },
+      },
+    });
+
+    // with schema override
+    expect(resolveMark(content, mark, sharedSchema)).toStrictEqual({
+      component: "span",
+      content,
+      props: {
+        class: "text-style",
+        style: { color: "#9CFFA4" },
+      },
+    });
+  });
+
+  it("highlight", () => {
+    const mark: Mark = {
+      type: "highlight",
+      attrs: {
+        color: "#9CFFA4",
+      },
+    };
+
+    // default
+    expect(resolveMark(content, mark)).toStrictEqual({
+      component: "span",
+      content,
+      props: {
+        style: { backgroundColor: "#9CFFA4" },
+      },
+    });
+
+    // with schema override
+    expect(resolveMark(content, mark, sharedSchema)).toStrictEqual({
+      component: "span",
+      content,
+      props: {
+        class: "highlight",
+        style: { backgroundColor: "#9CFFA4" },
+      },
+    });
+  });
 });
 
 describe("resolveRichTextToNodes", () => {

diff --git a/lib/src/utils/resolveRichTextToNodes.ts b/lib/src/utils/resolveRichTextToNodes.ts
@@ -129,6 +129,34 @@ export const resolveMark = (
       ...resolverFn?.({ attrs }),
     };
   }
+
+  if (mark.type === "textStyle") {
+    const resolverFn = schema?.marks?.[mark.type];
+    const { attrs } = mark;
+
+    return {
+      component: "span",
+      content,
+      props: {
+        style: { color: attrs.color },
+      },
+      ...resolverFn?.({ attrs }),
+    };
+  }
+
+  if (mark.type === "highlight") {
+    const resolverFn = schema?.marks?.[mark.type];
+    const { attrs } = mark;
+
+    return {
+      component: "span",
+      content,
+      props: {
+        style: { backgroundColor: attrs.color },
+      },
+      ...resolverFn?.({ attrs }),
+    };
+  }
 };
 
 // all available nodes: https://github.com/storyblok/storyblok-js-client/blob/main/src/schema.ts#L21