Merge pull request #61 from ben-basten/feat/missing-renderers

feat: support strikethrough mark

Author: tolgap

README.md

@@ -223,6 +223,9 @@ The `nodeRenderers` prop should be one of the following `BLOCKS` and `INLINES` p
   - `EMBEDDED_ENTRY`
   - `EMBEDDED_ASSET`
   - `TABLE`
+  - `TABLE_ROW`
+  - `TABLE_CELL`
+  - `TABLE_HEADER_CELL`
 
 - `INLINES`
   - `EMBEDDED_ENTRY` (this is different from the `BLOCKS.EMBEDDED_ENTRY`)
@@ -238,3 +241,4 @@ The `markRenderers` prop should be one of the following `MARKS` properties as de
 - `CODE`
 - `SUBSCRIPT`
 - `SUPERSCRIPT`
+- `STRIKETHROUGH`

package-lock.json

@@ -30,7 +30,7 @@
     "vue"
   ],
   "peerDependencies": {
-    "@contentful/rich-text-types": "^15.14.1"
+    "@contentful/rich-text-types": "^16.5.0 || ^17.0.0"
   },
   "peerDependenciesMeta": {
     "@contentful/rich-text-types": {
@@ -42,7 +42,7 @@
   "devDependencies": {
     "@babel/core": "^7.12.10",
     "@babel/preset-env": "^7.12.11",
-    "@contentful/rich-text-types": "^15.14.1",
+    "@contentful/rich-text-types": "^17.0.1",
     "@rollup/plugin-alias": "^3.1.9",
     "@rollup/plugin-babel": "^5.3.1",
     "@rollup/plugin-commonjs": "^22.0.0",

package.json

@@ -24,6 +24,7 @@ const defaultMarkRenderers = {
   [MARKS.CODE]: (children, key) => h("code", { key }, children),
   [MARKS.SUPERSCRIPT]: (children, key) => h("sup", { key }, children),
   [MARKS.SUBSCRIPT]: (children, key) => h("sub", { key }, children),
+  [MARKS.STRIKETHROUGH]: (children, key) => h("s", { key }, children),
 };
 
 const defaultNodeRenderers = {

src/index.js

@@ -49,14 +49,19 @@ describe("RichText", () => {
               value: "Subpar",
               marks: [{ type: MARKS.SUBSCRIPT }],
             },
+            {
+              nodeType: "text",
+              value: "Irrelevant",
+              marks: [{ type: MARKS.STRIKETHROUGH }],
+            },
           ],
         },
       ]);
       const rendered = mount(RichText, { props: { document } });
 
       it("renders them all in a single paragraph", () => {
         expect(rendered.html()).toBe(
-          '<p><strong>Hello</strong><em> world!</em><code>console.log("yo");</code><u>Greetings!</u><sup>Superb!</sup><sub>Subpar</sub></p>'
+          '<p><strong>Hello</strong><em> world!</em><code>console.log("yo");</code><u>Greetings!</u><sup>Superb!</sup><sub>Subpar</sub><s>Irrelevant</s></p>'
         );
       });
     });
@@ -83,11 +88,23 @@ describe("RichText", () => {
             { type: MARKS.SUBSCRIPT },
           ],
         },
+        {
+          nodeType: "text",
+          value: "!",
+          marks: [
+            { type: MARKS.UNDERLINE },
+            { type: MARKS.ITALIC },
+            { type: MARKS.BOLD },
+            { type: MARKS.STRIKETHROUGH },
+          ],
+        },
       ]);
       const rendered = mount(RichText, { props: { document } });
 
       it("renders all overlapping marks in order", () => {
-        expect(rendered.html()).toBe("<strong><em><u><sup>Hello</sup></u></em></strong>\n<strong><em><u><sub>World</sub></u></em></strong>");
+        expect(rendered.html()).toBe(
+          "<strong><em><u><sup>Hello</sup></u></em></strong>\n<strong><em><u><sub>World</sub></u></em></strong>\n<u><em><strong><s>!</s></strong></em></u>"
+        );
       });
     });
   });