feat: update contentful-to-slatejs-adapter

Chris Sloop · Chris Sloop · commit 89a32f494e43 · 2021-04-30T11:31:02.000+02:00
diff --git a/packages/contentful-slatejs-adapter/src/__test__/contentful-to-slatejs-adapter.test.ts b/packages/contentful-slatejs-adapter/src/__test__/contentful-to-slatejs-adapter.test.ts
@@ -42,10 +42,15 @@ describe('adapters', () => {
       [
         {
           type: Contentful.BLOCKS.PARAGRAPH,
+          data: {},
+          isVoid: false,
           children: [
-            { text: '' }
-          ]
-        }
+            {
+              text: '',
+              data: {},
+            },
+          ],
+        },
       ],
     );
 
@@ -60,8 +65,15 @@ describe('adapters', () => {
       [
         {
           type: Contentful.BLOCKS.PARAGRAPH,
+          data: {},
+          isVoid: false,
           children: [
-            { type: Contentful.INLINES.HYPERLINK }
+            {
+              type: Contentful.INLINES.HYPERLINK,
+              data: {},
+              isVoid: false,
+              children: [],
+            }
           ]
         }
       ],
@@ -73,8 +85,10 @@ describe('adapters', () => {
       [
         {
           type: Contentful.BLOCKS.PARAGRAPH,
+          data: {},
+          isVoid: false,
           children: [
-            { text: 'hi' }
+            { text: 'hi', data: {} }
           ]
         }
       ],
@@ -92,9 +106,11 @@ describe('adapters', () => {
       [
         {
           type: Contentful.BLOCKS.PARAGRAPH,
+          data: {},
+          isVoid: false,
           children: [
-            { text: 'this' },
-            { text: 'is', bold: true },
+            { text: 'this', data: {} },
+            { text: 'is', data: {}, bold: true },
           ],
         },
       ],
@@ -104,8 +120,10 @@ describe('adapters', () => {
       const slateDoc = [
         {
           type: Contentful.BLOCKS.PARAGRAPH,
+          data: {},
+          isVoid: false,
           children: [
-            { text: 'Hi' }
+            { text: 'Hi', data: {} }
           ]
         }
       ];
@@ -137,10 +155,12 @@ describe('adapters', () => {
       [
         {
           type: Contentful.BLOCKS.PARAGRAPH,
+          data: {},
+          isVoid: false,
           children: [
-            { text: 'this' },
-            { text: 'is', bold: true },
-            { text: 'huge', bold: true, italic: true },
+            { text: 'this', data: {} },
+            { text: 'is', data: {}, bold: true },
+            { text: 'huge', data: {}, bold: true, italic: true },
           ],
         },
       ],
@@ -162,15 +182,19 @@ describe('adapters', () => {
       [
         {
           type: Contentful.BLOCKS.PARAGRAPH,
+          data: {},
+          isVoid: false,
           children: [
-            { text: 'this is a test', bold: true },
-            { type: 'paragraph', underline: true },
+            { text: 'this is a test', data: {}, bold: true },
+            { text: 'paragraph', data: {}, underline: true },
           ],
         },
         {
           type: Contentful.BLOCKS.PARAGRAPH,
+          data: {},
+          isVoid: false,
           children: [
-            { text: 'this is it' },
+            { text: 'this is it', data: {} },
           ],
         },
       ],
@@ -195,6 +219,8 @@ describe('adapters', () => {
         {
           type: Contentful.BLOCKS.PARAGRAPH,
           data: { a: 1 },
+          isVoid: false,
+          children: [],
         },
       ],
     );
@@ -222,10 +248,13 @@ describe('adapters', () => {
         {
           type: Contentful.BLOCKS.PARAGRAPH,
           data: { a: 1 },
+          isVoid: false,
           children: [
             {
               type: Contentful.INLINES.HYPERLINK,
               data: { a: 2 },
+              isVoid: false,
+              children: [],
             },
           ],
         },
@@ -261,10 +290,12 @@ describe('adapters', () => {
         {
           type: Contentful.BLOCKS.PARAGRAPH,
           data: { a: 1 },
+          isVoid: false,
           children: [
             {
               type: Contentful.INLINES.HYPERLINK,
               data: { a: 2 },
+              isVoid: false,
               children: [
                 {
                   text: 'YO',
@@ -297,6 +328,7 @@ describe('adapters', () => {
           type: Contentful.BLOCKS.EMBEDDED_ENTRY,
           data: { a: 1 },
           isVoid: true,
+          children: [],
         },
       ],
     );
@@ -320,7 +352,7 @@ describe('adapters', () => {
           data: { a: 1 },
           isVoid: true,
           children: [
-            { text: '' },
+            { text: '', data: {} },
           ]
         },
       ];
diff --git a/packages/contentful-slatejs-adapter/src/contentful-to-slatejs-adapter.ts b/packages/contentful-slatejs-adapter/src/contentful-to-slatejs-adapter.ts
@@ -1,9 +1,17 @@
 import flatmap from 'lodash.flatmap';
 
+import { fromJSON } from './schema';
+import { getDataOrDefault } from './helpers';
+
+import type { Schema, SchemaJSON } from './schema';
 import * as Contentful from '@contentful/rich-text-types';
-import { ContentfulNode, SlateNode, ContentfulNonTextNodes } from './types';
-import { getDataOfDefault } from './helpers';
-import { SchemaJSON, fromJSON, Schema } from './schema';
+import {
+  ContentfulNode,
+  ContentfulElementNode,
+  SlateNode,
+  SlateElement,
+  SlateText,
+} from './types';
 
 export interface ToSlatejsDocumentProperties {
   document: Contentful.Document;
@@ -13,93 +21,51 @@ export interface ToSlatejsDocumentProperties {
 export default function toSlatejsDocument({
   document,
   schema,
-}: ToSlatejsDocumentProperties): Slate.Document {
-  return {
-    object: 'document',
-    data: getDataOfDefault(document.data),
-    nodes: flatmap(document.content, node => convertNode(node, fromJSON(schema))) as Slate.Block[],
-  };
+}: ToSlatejsDocumentProperties): SlateNode[] {
+  // TODO:
+  // 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)))
 }
 
-function convertNode(node: ContentfulNode, schema: Schema): SlateNode[] {
-  const nodes: SlateNode[] = [];
-
+function convertNode(node: ContentfulNode, schema: Schema): SlateNode {
   if (node.nodeType === 'text') {
-    const slateText = convertTextNode(node);
-
-    nodes.push(slateText);
+    return convertTextNode(node as Contentful.Text);
   } else {
-    const contentfulNode = node as ContentfulNonTextNodes;
+    const contentfulNode = node as ContentfulElementNode;
     const childNodes = flatmap(contentfulNode.content, childNode => convertNode(childNode, schema));
-
-    const object = getSlateNodeObjectValue(contentfulNode.nodeType);
-    let slateNode: SlateNode;
-    if (object === 'inline') {
-      slateNode = createInlineNode(contentfulNode, childNodes, schema);
-    } else if (object === 'block') {
-      slateNode = createBlockNode(contentfulNode, childNodes, schema);
-    } else {
-      throw new Error(`Unexpected slate object '${object}'`);
-    }
-    nodes.push(slateNode);
+    const slateNode = convertElementNode(contentfulNode, childNodes, schema);
+    return slateNode;
   }
-  return nodes;
 }
 
-function createBlockNode(
-  contentfulBlock: ContentfulNonTextNodes,
-  childNodes: SlateNode[],
+function convertElementNode(
+  contentfulBlock: ContentfulElementNode,
+  children: SlateNode[],
   schema: Schema,
-): Slate.Block {
+): SlateElement {
   return {
-    object: 'block',
     type: contentfulBlock.nodeType,
-    nodes: childNodes,
+    children,
     isVoid: schema.isVoid(contentfulBlock),
-    data: getDataOfDefault(contentfulBlock.data),
-  } as Slate.Block;
+    data: getDataOrDefault(contentfulBlock.data),
+  };
 }
 
-function createInlineNode(
-  contentfulBlock: ContentfulNonTextNodes,
-  childNodes: SlateNode[],
-  schema: Schema,
-): Slate.Inline {
+function convertTextNode(node: Contentful.Text): SlateText {
   return {
-    object: 'inline',
-    type: contentfulBlock.nodeType,
-    nodes: childNodes,
-    isVoid: schema.isVoid(contentfulBlock),
-    data: getDataOfDefault(contentfulBlock.data),
-  } as Slate.Inline;
-}
-
-function convertTextNode(node: ContentfulNode): Slate.Text {
-  const { marks = [], value, data } = node as Contentful.Text;
-  const slateText: Slate.Text = {
-    object: 'text',
-    leaves: [
-      {
-        object: 'leaf',
-        text: value,
-        marks: marks.map(mark => ({
-          ...mark,
-          data: {},
-          object: 'mark',
-        })),
-      } as Slate.TextLeaf,
-    ],
-    data: getDataOfDefault(data),
+    text: node.value,
+    data: getDataOrDefault(node.data),
+    ...convertTextMarks(node)
   };
-  return slateText;
 }
 
-function getSlateNodeObjectValue(nodeType: string): 'inline' | 'block' {
-  if (Object.values(Contentful.BLOCKS).includes(nodeType)) {
-    return 'block';
-  } else if (Object.values(Contentful.INLINES).includes(nodeType)) {
-    return 'inline';
-  } else {
-    throw new Error(`Unexpected contentful nodeType '${nodeType}'`);
+type SlateMarks = { [mark: string]: true };
+function convertTextMarks(node: Contentful.Text): SlateMarks {
+  const marks: SlateMarks = {};
+  for (const mark of node.marks) {
+    marks[mark.type] = true;
   }
+  return marks;
 }
diff --git a/packages/contentful-slatejs-adapter/src/helpers.ts b/packages/contentful-slatejs-adapter/src/helpers.ts
@@ -1,4 +1,4 @@
 /**
  * Ensures that data defaults to an empty object.
  */
-export const getDataOfDefault = (value?: Record<string, any>) => value || {};
+export const getDataOrDefault = (value?: Record<string, any>) => value || {};
diff --git a/packages/contentful-slatejs-adapter/src/types/index.ts b/packages/contentful-slatejs-adapter/src/types/index.ts
@@ -1,18 +1,30 @@
 import * as Contentful from '@contentful/rich-text-types';
-import type { BaseText } from 'slate';
 
-type SlateText = BaseText & {
+export type SlateText = {
+  text: string;
+  data: object;
+  // This is a workaround for TypeScript's limitations around
+  // index property exclusion. Ideally we'd join the above properties
+  // with something like
+  //
+  // & { [mark: string]: string }
+  //
+  // but TypeScript doesn't allow us to create such objects, only
+  // work around inconsistencies in existing JavaScript.
+  //
+  // In reality Slate's node marks are arbitrary, but for this library
+  // denoting marks used by the tests as optional should be okay.
   bold?: boolean;
   italic?: boolean;
   underline?: boolean;
 };
-type SlateElement = {
+export type SlateElement = {
   type: string;
-  children?: SlateNode[];
-  data?: object;
-  isVoid?: boolean;
+  data: object;
+  isVoid: boolean;
+  children: SlateNode[];
 };
 
-export type ContentfulNode = Contentful.Block | Contentful.Inline | Contentful.Text;
+export type ContentfulElementNode = Contentful.Block | Contentful.Inline;
+export type ContentfulNode = ContentfulElementNode | Contentful.Text;
 export type SlateNode = SlateElement | SlateText;
-export type ContentfulNonTextNodes = Contentful.Block | Contentful.Inline;
