Merge pull request #223 from contentful/SHE-10/update-slatejs-adapter

feat: [] update slate.js adapter

Author: Chris Sloop

packages/contentful-slatejs-adapter/package-lock.json

@@ -88,15 +88,17 @@
     "tslint": "^5.8.0",
     "tslint-config-prettier": "^1.1.0",
     "tslint-config-standard": "^7.0.0",
-    "typescript": "^2.6.2"
+    "typescript": "^4.2.4"
   },
   "publishConfig": {
     "access": "restricted"
   },
   "dependencies": {
     "@contentful/rich-text-types": "^5.0.0",
+    "jest": "^26.6.3",
     "lodash.flatmap": "^4.5.0",
     "lodash.get": "^4.4.2",
-    "lodash.omit": "^4.5.0"
+    "lodash.omit": "^4.5.0",
+    "typescript": "^4.2.4"
   }
 }

packages/contentful-slatejs-adapter/package.json

@@ -1,9 +1,17 @@
 import flatmap from 'lodash.flatmap';
 
+import { getDataOrDefault } from './helpers';
+
+import { fromJSON, 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,
+  SlateMarks,
+} from './types';
 
 export interface ToSlatejsDocumentProperties {
   document: Contentful.Document;
@@ -13,93 +21,50 @@ 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}'`);
+function convertTextMarks(node: Contentful.Text): SlateMarks {
+  const marks: SlateMarks = {};
+  for (const mark of node.marks) {
+    marks[mark.type as keyof SlateMarks] = true;
   }
+  return marks;
 }

packages/contentful-slatejs-adapter/src/__test__/contentful-to-slatejs-adapter.test.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 || {};

packages/contentful-slatejs-adapter/src/__test__/slate-helpers.ts

@@ -1,6 +1,6 @@
 import get from 'lodash.get';
 import * as Contentful from '@contentful/rich-text-types';
-import { ContentfulNonTextNodes } from './types';
+import { ContentfulElementNode } from './types';
 
 const defaultSchema: SchemaJSON = {};
 
@@ -15,7 +15,7 @@ export interface SchemaJSON {
   inlines?: Record<string, SchemaValue>;
 }
 export interface Schema extends SchemaJSON {
-  isVoid(node: ContentfulNonTextNodes): boolean;
+  isVoid(node: ContentfulElementNode): boolean;
 }
 
 export interface SchemaValue {
@@ -36,10 +36,10 @@ export function fromJSON(schema: SchemaJSON = defaultSchema): Schema {
     /**
      * Check if a `node` is void based on the schema rules.
      *
-     * @param {ContentfulNonTextNodes} node
+     * @param {ContentfulElementNode} node
      * @returns
      */
-    isVoid(node: ContentfulNonTextNodes) {
+    isVoid(node: ContentfulElementNode) {
       const root = Object.values(Contentful.BLOCKS).includes(node.nodeType) ? 'blocks' : 'inlines';
       return get(schema, [root, node.nodeType as string, 'isVoid'], false);
     },

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

@@ -1,70 +1,80 @@
 import flatMap from 'lodash.flatmap';
-import * as Contentful from '@contentful/rich-text-types';
-import { ContentfulNode, SlateNode } from './types';
-import { getDataOfDefault } from './helpers';
+import { getDataOrDefault } from './helpers';
 import { SchemaJSON, Schema, fromJSON } from './schema';
 
+import * as Contentful from '@contentful/rich-text-types';
+import {
+  ContentfulNode,
+  ContentfulElementNode,
+  SlateNode,
+  SlateElement,
+  SlateText,
+  SlateMarks,
+} from './types';
+
 export interface ToContentfulDocumentProperties {
-  document: Slate.Document;
+  document: SlateNode[];
   schema?: SchemaJSON;
 }
 
 export default function toContentfulDocument({
   document,
   schema,
 }: ToContentfulDocumentProperties): Contentful.Document {
+  // 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 {
     nodeType: Contentful.BLOCKS.DOCUMENT,
-    data: getDataOfDefault(document.data),
+    data: {},
     content: flatMap(
-      document.nodes,
+      document,
       node => convertNode(node, fromJSON(schema)) as Contentful.Block[],
     ),
   };
 }
 
-function convertNode(node: SlateNode, schema: Schema): ContentfulNode[] {
+function convertNode(
+  node: SlateNode,
+  schema: Schema
+): ContentfulNode[] {
   const nodes: ContentfulNode[] = [];
-  switch (node.object) {
-    case 'block':
-    case 'inline':
-      const slateNode = node as Slate.Block;
-      const content = flatMap(slateNode.nodes, childNode => convertNode(childNode, schema));
-      if (!slateNode.type) {
-        throw new Error(`Unexpected slate node ${JSON.stringify(slateNode)}`);
-      }
-
-      const contentfulBlock: Contentful.Block = {
-        nodeType: slateNode.type,
-        content: [],
-        data: getDataOfDefault(slateNode.data),
-      };
-
-      if (!schema.isVoid(contentfulBlock)) {
-        contentfulBlock.content = content;
-      }
-      nodes.push(contentfulBlock);
-      break;
-    case 'text':
-      convertText(node as Slate.Text).forEach(childNode => nodes.push(childNode));
-      break;
-    default:
-      assertUnreachable(node);
-      break;
+  if (isSlateElement(node)) {
+    const contentfulElement: ContentfulElementNode = {
+      nodeType: node.type,
+      data: getDataOrDefault(node.data),
+      content: [],
+    };
+    if (!schema.isVoid(contentfulElement)) {
+      contentfulElement.content = flatMap(node.children, childNode => convertNode(childNode, schema));
+    }
+    nodes.push(contentfulElement);
+  } else {
+    const contentfulText = convertText(node);
+    nodes.push(contentfulText);
   }
-
   return nodes;
 }
 
-function convertText(node: Slate.Text): Contentful.Text[] {
-  return node.leaves.map<Contentful.Text>(leaf => ({
+function convertText(node: SlateText): Contentful.Text {
+  const { text, data, ...marks } = node;
+  return {
     nodeType: 'text',
-    value: leaf.text,
-    marks: leaf.marks ? leaf.marks.map(mark => ({ type: mark.type })) : [],
-    data: getDataOfDefault(node.data),
-  }));
+    value: node.text,
+    marks: getMarkList(marks),
+    data: getDataOrDefault(node.data),
+  };
+}
+
+function getMarkList(marks: SlateMarks): Contentful.Mark[] {
+  const contentfulMarks: Contentful.Mark[] = [];
+  for (const mark of Object.keys(marks)) {
+    contentfulMarks.push({ type: mark });
+  }
+  return contentfulMarks;
 }
 
-function assertUnreachable(object: never): never {
-  throw new Error(`Unexpected slate object ${object}`);
+function isSlateElement(node: SlateNode): node is SlateElement {
+  return 'type' in node;
 }

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

@@ -1,5 +1,34 @@
 import * as Contentful from '@contentful/rich-text-types';
 
-export type ContentfulNode = Contentful.Block | Contentful.Inline | Contentful.Text;
-export type SlateNode = Slate.Block | Slate.Inline | Slate.Text;
-export type ContentfulNonTextNodes = Contentful.Block | Contentful.Inline;
+export type SlateMarks = {
+  // 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;
+};
+
+export type SlateText = SlateMarks & {
+  text: string;
+  data: object;
+};
+
+export type SlateElement = {
+  type: string;
+  data: object;
+  isVoid: boolean;
+  children: SlateNode[];
+};
+
+export type ContentfulElementNode = Contentful.Block | Contentful.Inline;
+export type ContentfulNode = ContentfulElementNode | Contentful.Text;
+export type SlateNode = SlateElement | SlateText;