feat: add super/sub script types

packages/contentful-slatejs-adapter/src/contentful-to-slatejs-adapter.ts

@@ -26,17 +26,15 @@ export default function toSlatejsDocument({
   // We allow adding data to the root document node, but Slate >v0.5.0
   // has no concept of a root document node. We should determine whether
   // this will be a compatibility problem for existing users.
-  return flatmap(document.content, (node) => convertNode(node, fromJSON(schema)));
+  return flatmap(document.content, node => convertNode(node, fromJSON(schema)));
 }
 
 function convertNode(node: ContentfulNode, schema: Schema): SlateNode {
   if (node.nodeType === 'text') {
     return convertTextNode(node as Contentful.Text);
   } else {
     const contentfulNode = node as ContentfulElementNode;
-    const childNodes = flatmap(contentfulNode.content, (childNode) =>
-      convertNode(childNode, schema),
-    );
+    const childNodes = flatmap(contentfulNode.content, childNode => convertNode(childNode, schema));
     const slateNode = convertElementNode(contentfulNode, childNodes, schema);
     return slateNode;
   }

packages/contentful-slatejs-adapter/src/slatejs-to-contentful-adapter.ts

@@ -30,7 +30,7 @@ export default function toContentfulDocument({
     data: {},
     content: flatMap(
       document,
-      (node) => convertNode(node, fromJSON(schema)) as Contentful.TopLevelBlock[],
+      node => convertNode(node, fromJSON(schema)) as Contentful.TopLevelBlock[],
     ),
   };
 }
@@ -44,7 +44,7 @@ function convertNode(node: SlateNode, schema: Schema): ContentfulNode[] {
       content: [],
     };
     if (!schema.isVoid(contentfulElement)) {
-      contentfulElement.content = flatMap(node.children, (childNode) =>
+      contentfulElement.content = flatMap(node.children, childNode =>
         convertNode(childNode, schema),
       );
     }

packages/rich-text-html-renderer/README.md

@@ -172,3 +172,5 @@ The `renderMark` keys should be one of the following `MARKS` properties as defin
 - `ITALIC`
 - `UNDERLINE`
 - `CODE`
+- `SUPERSCRIPT`
+- `SUBSCRIPT`

packages/rich-text-html-renderer/src/__test__/index.test.ts

@@ -68,6 +68,14 @@ describe('documentToHtmlString', () => {
         doc: marksDoc(MARKS.CODE),
         expected: '<p><code>hello world</code></p>',
       },
+      {
+        doc: marksDoc(MARKS.SUPERSCRIPT),
+        expected: '<p><sup>hello world</sup></p>',
+      },
+      {
+        doc: marksDoc(MARKS.SUBSCRIPT),
+        expected: '<p><sub>hello world</sub></p>',
+      },
     ];
 
     docs.forEach(({ doc, expected }) => {

packages/rich-text-html-renderer/src/index.ts

@@ -45,6 +45,8 @@ const defaultMarkRenderers: RenderMark = {
   [MARKS.ITALIC]: (text) => `<i>${text}</i>`,
   [MARKS.UNDERLINE]: (text) => `<u>${text}</u>`,
   [MARKS.CODE]: (text) => `<code>${text}</code>`,
+  [MARKS.SUPERSCRIPT]: (text) => `<sup>${text}</sup>`,
+  [MARKS.SUBSCRIPT]: (text) => `<sub>${text}</sub>`,
 };
 
 const defaultInline = (type: string, node: Inline) =>

packages/rich-text-react-renderer/src/__test__/__snapshots__/index.test.tsx.snap

@@ -144,6 +144,26 @@ Array [
 ]
 `;
 
+exports[`documentToReactComponents renders marks with default mark renderer 5`] = `
+Array [
+  <p>
+    <sup>
+      hello world
+    </sup>
+  </p>,
+]
+`;
+
+exports[`documentToReactComponents renders marks with default mark renderer 6`] = `
+Array [
+  <p>
+    <sub>
+      hello world
+    </sub>
+  </p>,
+]
+`;
+
 exports[`documentToReactComponents renders marks with the passed custom mark renderer 1`] = `
 Array [
   <p>

packages/rich-text-react-renderer/src/__test__/index.test.tsx

@@ -62,6 +62,8 @@ describe('documentToReactComponents', () => {
       marksDoc(MARKS.BOLD),
       marksDoc(MARKS.UNDERLINE),
       marksDoc(MARKS.CODE),
+      marksDoc(MARKS.SUPERSCRIPT),
+      marksDoc(MARKS.SUBSCRIPT),
     ];
 
     docs.forEach((doc) => {

packages/rich-text-react-renderer/src/index.tsx

@@ -36,6 +36,8 @@ const defaultMarkRenderers: RenderMark = {
   [MARKS.ITALIC]: (text) => <i>{text}</i>,
   [MARKS.UNDERLINE]: (text) => <u>{text}</u>,
   [MARKS.CODE]: (text) => <code>{text}</code>,
+  [MARKS.SUPERSCRIPT]: (text) => <sup>{text}</sup>,
+  [MARKS.SUBSCRIPT]: (text) => <sub>{text}</sub>,
 };
 
 function defaultInline(type: string, node: Inline): ReactNode {

packages/rich-text-types/src/marks.ts

@@ -6,6 +6,8 @@ enum MARKS {
   ITALIC = 'italic',
   UNDERLINE = 'underline',
   CODE = 'code',
+  SUPERSCRIPT = 'superscript',
+  SUBSCRIPT = 'subscript',
 }
 
 export default MARKS;