feat: Invert custom element override hierarchy

BREAKING CHANGE: Overrides for custom elements are now indexed the other way round: nodeType -> contentType/mimeType instead of contentType/mimeType -> nodeType fix #1
connor-baer · Feb 6, 2019 · f5cff6e · f5cff6e
1 parent af7081b
commit f5cff6e
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 15 deletions.
diff --git a/src/__snapshots__/rich-text-to-jsx.spec.js.snap b/src/__snapshots__/rich-text-to-jsx.spec.js.snap
@@ -1,5 +1,51 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Rich text to JSX customNodeToJsx should render an asset hyperlink 1`] = `
+<Override
+  file={
+    Object {
+      "contentType": "image/jpg",
+      "details": Object {
+        "image": Object {
+          "height": 500,
+          "width": 800,
+        },
+        "size": 240963,
+      },
+      "fileName": "random-unsplash.jpg",
+      "url": "https://source.unsplash.com/random/800x500",
+    }
+  }
+  id="4fgGUXCJXWOQUAEQqCS8MW"
+  title="Random photo from Unsplash.com"
+  updatedAt="2019-01-14T04:57:27.049Z"
+>
+  ham hock
+</Override>
+`;
+
+exports[`Rich text to JSX customNodeToJsx should render an embedded asset 1`] = `
+<Override
+  file={
+    Object {
+      "contentType": "image/jpg",
+      "details": Object {
+        "image": Object {
+          "height": 500,
+          "width": 800,
+        },
+        "size": 240963,
+      },
+      "fileName": "random-unsplash.jpg",
+      "url": "https://source.unsplash.com/random/800x500",
+    }
+  }
+  id="4fgGUXCJXWOQUAEQqCS8MW"
+  title="Random photo from Unsplash.com"
+  updatedAt="2019-01-14T04:57:27.049Z"
+/>
+`;
+
 exports[`Rich text to JSX customNodeToJsx should render an embedded entry block 1`] = `
 <Override
   contentType="page"

diff --git a/src/rich-text-to-jsx.js b/src/rich-text-to-jsx.js
@@ -110,16 +110,18 @@ export function customNodeToJsx(node, options, key) {
   const { data, content, nodeType } = node;
   const { overrides, createElement } = options;
 
-  const contentType = get(data, 'target.contentType');
+  const contentType =
+    get(data, 'target.contentType') ||
+    get(data, 'target.file.contentType', '').split('/')[0];
 
   if (!contentType) {
     return unknownNodeToJsx(node, options, key);
   }
 
-  const elementOverrides = overrides[contentType];
+  const elementOverrides = overrides[nodeType];
 
   const DefaultElement = helpers.isBlock(node) ? BlockElement : InlineElement;
-  const element = getElement(nodeType, elementOverrides) || DefaultElement;
+  const element = getElement(contentType, elementOverrides) || DefaultElement;
 
   const props = getProps(nodeType, elementOverrides, {
     ...data.target,

diff --git a/src/rich-text-to-jsx.spec.js b/src/rich-text-to-jsx.spec.js
@@ -71,24 +71,19 @@ describe('Rich text to JSX', () => {
   });
 
   describe('customNodeToJsx', () => {
-    // FIXME: Figure out how to handle assets.
-    // They don't have a content type, only a mime-type.
-    it.skip('should render an embedded asset', () => {
+    it('should render an embedded asset', () => {
       const overrides = {
-        'image/jpg': { [BLOCKS.EMBEDDED_ASSET]: Override }
+        [BLOCKS.EMBEDDED_ASSET]: { image: Override }
       };
       const actual = RichTextService.customNodeToJsx(embeddedAsset, {
         ...options,
         overrides
       });
       expect(actual).toMatchSnapshot();
     });
-
-    // FIXME: Figure out how to handle assets.
-    // They don't have a content type, only a mime-type.
-    it.skip('should render an asset hyperlink', () => {
+    it('should render an asset hyperlink', () => {
       const overrides = {
-        route: { [INLINES.ASSET_HYPERLINK]: Override }
+        [INLINES.ASSET_HYPERLINK]: { image: Override }
       };
       const actual = RichTextService.customNodeToJsx(assetHyperlink, {
         ...options,
@@ -99,7 +94,7 @@ describe('Rich text to JSX', () => {
 
     it('should render an embedded entry block', () => {
       const overrides = {
-        page: { [BLOCKS.EMBEDDED_ENTRY]: Override }
+        [BLOCKS.EMBEDDED_ENTRY]: { page: Override }
       };
       const actual = RichTextService.customNodeToJsx(embeddedEntryBlock, {
         ...options,
@@ -110,7 +105,7 @@ describe('Rich text to JSX', () => {
 
     it('should render an embedded entry inline', () => {
       const overrides = {
-        page: { [INLINES.EMBEDDED_ENTRY]: Override }
+        [INLINES.EMBEDDED_ENTRY]: { page: Override }
       };
       const actual = RichTextService.customNodeToJsx(embeddedEntryInline, {
         ...options,
@@ -121,7 +116,7 @@ describe('Rich text to JSX', () => {
 
     it('should render an entry hyperlink', () => {
       const overrides = {
-        route: { [INLINES.ENTRY_HYPERLINK]: Override }
+        [INLINES.ENTRY_HYPERLINK]: { route: Override }
       };
       const actual = RichTextService.customNodeToJsx(entryHyperlink, {
         ...options,