Added missing marks

README.md

@@ -236,3 +236,5 @@ The `markRenderers` prop should be one of the following `MARKS` properties as de
 - `ITALIC`
 - `UNDERLINE`
 - `CODE`
+- `SUBSCRIPT`
+- `SUPERSCRIPT`

package.json

@@ -37,7 +37,7 @@
   "devDependencies": {
     "@babel/core": "^7.12.10",
     "@babel/preset-env": "^7.12.11",
-    "@contentful/rich-text-types": "^15.12.1",
+    "@contentful/rich-text-types": "^16.0.2",
     "@rollup/plugin-alias": "^3.1.9",
     "@rollup/plugin-babel": "^5.3.1",
     "@rollup/plugin-commonjs": "^22.0.0",

src/index.js

@@ -22,6 +22,8 @@ const defaultMarkRenderers = {
   [MARKS.ITALIC]: (children, key) => h("em", { key }, children),
   [MARKS.UNDERLINE]: (children, key) => h("u", { key }, children),
   [MARKS.CODE]: (children, key) => h("code", { key }, children),
+  [MARKS.SUPERSCRIPT]: (children, key) => h("sup", { key }, children),
+  [MARKS.SUBSCRIPT]: (children, key) => h("sub", { key }, children),
 };
 
 const defaultNodeRenderers = {
@@ -64,6 +66,25 @@ const defaultNodeRenderers = {
     defaultInline(INLINES.ENTRY_HYPERLINK, node, key),
   [INLINES.EMBEDDED_ENTRY]: (node, key) =>
     defaultInline(INLINES.EMBEDDED_ENTRY, node, key),
+  [BLOCKS.EMBEDDED_ASSET]: (node, key, next) => {
+    const attrs = {
+      title: node.data.target.fields.title,
+      description: node.data.target.fields.description,
+      url: node.data.target.fields.file.url,
+      fileName: node.data.target.fields.file.fileName,
+      contentType: node.data.target.fields.file.contentType,
+    };
+
+    if (attrs.contentType.startsWith("image/")) {
+      return h("img", {
+        key,
+        src: attrs.url,
+        alt: attrs.title,
+        title: attrs.title,
+        name: attrs.fileName
+      }, next(node.content, key, next));
+    }
+  },
   [INLINES.HYPERLINK]: (node, key, next) => {
     return h(
       "a",

src/index.test.js

@@ -39,14 +39,24 @@ describe("RichText", () => {
               value: "Greetings!",
               marks: [{ type: MARKS.UNDERLINE }],
             },
+            {
+              nodeType: "text",
+              value: "Superb!",
+              marks: [{ type: MARKS.SUPERSCRIPT }],
+            },
+            {
+              nodeType: "text",
+              value: "Subpar",
+              marks: [{ type: MARKS.SUBSCRIPT }],
+            },
           ],
         },
       ]);
       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></p>'
+          '<p><strong>Hello</strong><em> world!</em><code>console.log("yo");</code><u>Greetings!</u><sup>Superb!</sup><sub>Subpar</sub></p>'
         );
       });
     });
@@ -60,13 +70,24 @@ describe("RichText", () => {
             { type: MARKS.BOLD },
             { type: MARKS.ITALIC },
             { type: MARKS.UNDERLINE },
+            { type: MARKS.SUPERSCRIPT },
+          ],
+        },
+        {
+          nodeType: "text",
+          value: "World",
+          marks: [
+            { type: MARKS.BOLD },
+            { type: MARKS.ITALIC },
+            { type: MARKS.UNDERLINE },
+            { type: MARKS.SUBSCRIPT },
           ],
         },
       ]);
       const rendered = mount(RichText, { props: { document } });
 
       it("renders all overlapping marks in order", () => {
-        expect(rendered.html()).toBe("<strong><em><u>Hello</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>");
       });
     });
   });