feat: add strikethrough support

contentful · May 24, 2024 · 5266126 · 5266126
1 parent 3cf9a90
commit 5266126
Show file tree

Hide file tree

Showing 7 changed files with 19 additions and 0 deletions.
diff --git a/packages/rich-text-html-renderer/README.md b/packages/rich-text-html-renderer/README.md
@@ -177,6 +177,7 @@ The `renderMark` keys should be one of the following `MARKS` properties as defin
 - `CODE`
 - `SUPERSCRIPT`
 - `SUBSCRIPT`
+- `STRIKETHROUGH`
 
 #### Preserving Whitespace
 

diff --git a/packages/rich-text-html-renderer/src/__test__/index.test.ts b/packages/rich-text-html-renderer/src/__test__/index.test.ts
@@ -93,6 +93,10 @@ describe('documentToHtmlString', () => {
         doc: marksDoc(MARKS.SUBSCRIPT),
         expected: '<p><sub>hello world</sub></p>',
       },
+      {
+        doc: marksDoc(MARKS.STRIKETHROUGH),
+        expected: '<p><s>hello world</s></p>',
+      },
     ];
 
     docs.forEach(({ doc, expected }) => {

diff --git a/packages/rich-text-html-renderer/src/index.ts b/packages/rich-text-html-renderer/src/index.ts
@@ -52,6 +52,7 @@ const defaultMarkRenderers: RenderMark = {
   [MARKS.CODE]: (text) => `<code>${text}</code>`,
   [MARKS.SUPERSCRIPT]: (text) => `<sup>${text}</sup>`,
   [MARKS.SUBSCRIPT]: (text) => `<sub>${text}</sub>`,
+  [MARKS.STRIKETHROUGH]: (text) => `<s>${text}</s>`,
 };
 
 const defaultInline = (type: string, node: Inline) =>

diff --git a/packages/rich-text-react-renderer/src/__test__/__snapshots__/index.test.tsx.snap b/packages/rich-text-react-renderer/src/__test__/__snapshots__/index.test.tsx.snap
@@ -185,6 +185,16 @@ exports[`documentToReactComponents renders marks with default mark renderer 6`]
 ]
 `;
 
+exports[`documentToReactComponents renders marks with default mark renderer 7`] = `
+[
+  <p>
+    <s>
+      hello world
+    </s>
+  </p>,
+]
+`;
+
 exports[`documentToReactComponents renders marks with the passed custom mark renderer 1`] = `
 [
   <p>

diff --git a/packages/rich-text-react-renderer/src/__test__/index.test.tsx b/packages/rich-text-react-renderer/src/__test__/index.test.tsx
@@ -69,6 +69,7 @@ describe('documentToReactComponents', () => {
       marksDoc(MARKS.CODE),
       marksDoc(MARKS.SUPERSCRIPT),
       marksDoc(MARKS.SUBSCRIPT),
+      marksDoc(MARKS.STRIKETHROUGH),
     ];
 
     docs.forEach((doc) => {

diff --git a/packages/rich-text-react-renderer/src/index.tsx b/packages/rich-text-react-renderer/src/index.tsx
@@ -43,6 +43,7 @@ const defaultMarkRenderers: RenderMark = {
   [MARKS.CODE]: (text) => <code>{text}</code>,
   [MARKS.SUPERSCRIPT]: (text) => <sup>{text}</sup>,
   [MARKS.SUBSCRIPT]: (text) => <sub>{text}</sub>,
+  [MARKS.STRIKETHROUGH]: (text) => <s>{text}</s>,
 };
 
 function defaultInline(type: string, node: Inline): ReactNode {

diff --git a/packages/rich-text-types/src/marks.ts b/packages/rich-text-types/src/marks.ts
@@ -8,4 +8,5 @@ export enum MARKS {
   CODE = 'code',
   SUPERSCRIPT = 'superscript',
   SUBSCRIPT = 'subscript',
+  STRIKETHROUGH = 'strikethrough',
 }
-Original file line number
+Diff line change
@@ Expand Up @@
     ]
     `;
+    exports[`documentToReactComponents renders marks with default mark renderer 7`] = `
+    [
+      <p>
+        <s>
+          hello world
+        </s>
+      </p>,
+    ]
+    `;
     exports[`documentToReactComponents renders marks with the passed custom mark renderer 1`] = `
     [
       <p>
@@ Expand Down @@