Allow more complex mark handlers to be defined outside of span handler

package.json

@@ -2,7 +2,7 @@
   "name": "@sanity/block-content-to-react",
   "description":
     "React component for transforming Sanity block content to React components",
-  "version": "0.2.3-next",
+  "version": "0.2.4",
   "main": "lib/index.js",
   "umd": "umd/index.min.js",
   "scripts": {
@@ -24,7 +24,7 @@
   "author": "Sanity <hello@sanity.io>",
   "license": "MIT",
   "dependencies": {
-    "@sanity/block-content-to-tree": "0.2.0-next",
+    "@sanity/block-content-to-tree": "^0.3.0",
     "in-publish": "^2.0.0",
     "object-assign": "^4.1.1"
   },

src/typeHandlers.js

@@ -49,23 +49,38 @@ function getListItems(items, listHandlers, typeHandlers) {
 }
 
 function mapMark(mark, marksMapping) {
-  if (marksMapping && typeof marksMapping[mark] !== 'undefined') {
-    return marksMapping[mark]
+  const markName = mark._type || mark
+  if (marksMapping && typeof marksMapping[markName] !== 'undefined') {
+    return marksMapping[markName]
   }
 
-  return mark
+  return markName
 }
 
-module.exports = function(blockTypeHandlers = {}, customBlockHandler) {
-  const defaultHandlers = {
-    normal: node => h('p', {key: node.nodeKey}, node.children)
+const defaultMarkHandlers = {
+  link: props => {
+    return h('a', {key: props.nodeKey, href: props.href}, props.children)
   }
+}
+
+const defaultHandlers = {
+  normal: node => h('p', {key: node.nodeKey}, node.children)
+}
+
+module.exports = function(blockTypeHandlers = {}, customBlockHandler) {
   const blockHandlers = objectAssign(
+    {},
     defaultHandlers,
     blockTypeHandlers.textBlock || {},
     blockTypeHandlers.customBlock || {}
   )
 
+  blockHandlers.marks = objectAssign(
+    {},
+    defaultMarkHandlers,
+    blockTypeHandlers.marks
+  )
+
   const listHandlers = objectAssign(
     {
       number: node => h('ol', {key: node.nodeKey}, node.children),
@@ -109,10 +124,13 @@ module.exports = function(blockTypeHandlers = {}, customBlockHandler) {
     },
 
     span: node => {
-      let wrap = input => input
-      if (typeof node.mark === 'string') {
-        const mark = mapMark(node.mark, blockTypeHandlers.marks)
-        wrap = mark ? input => h(mark, {key: node.nodeKey}, input) : wrap
+      let wrap = children => children
+      if (node.mark) {
+        const mark = mapMark(node.mark, blockHandlers.marks)
+        wrap = mark
+          ? children =>
+              h(mark, objectAssign({key: node.nodeKey}, node.mark), children)
+          : wrap
       }
 
       node.children = getChildren(node.children, typeHandlers, node)
@@ -121,13 +139,6 @@ module.exports = function(blockTypeHandlers = {}, customBlockHandler) {
         return wrap(blockTypeHandlers.span(node))
       }
 
-      if (node.mark && node.mark._type === 'link') {
-        // Deal with the default block editor setup 'link' attribute
-        return wrap(
-          h('a', {href: node.mark.href, key: node.nodeKey}, node.children)
-        )
-      }
-
       return wrap(node.children)
     }
   }

test/BlockContentToReact.test.js

@@ -8,7 +8,11 @@ const h = React.createElement
 const render = props => ReactDOM.renderToStaticMarkup(h(BlockContent, props))
 
 const blockTypeHandlers = {
-  marks: {em: null},
+  marks: {
+    em: null,
+    author: props => h('div', null, props.name),
+    link: props => h('a', {className: 'foo', href: props.href}, props.children)
+  },
   listBlock: {
     number: node =>
       h('ol', {key: node.nodeKey, className: 'foo'}, node.children),
@@ -28,23 +32,6 @@ const blockTypeHandlers = {
         {key: node.nodeKey, className: 'big-heading', id: node.extra},
         node.children
       )
-  },
-  span: node => {
-    if (node.mark && node.mark._type === 'author') {
-      return h('div', null, node.mark.name)
-    }
-
-    if (node.mark && node.mark._type === 'link') {
-      return h(
-        'a',
-        {key: node.nodeKey, className: 'foo', href: node.mark.href},
-        node.children
-      )
-    }
-
-    return node.children && node.children.length === 1
-      ? node.children[0]
-      : h('span', null, node.children)
   }
 }
 
@@ -59,7 +46,6 @@ const renderCustom = props => {
         return h(
           'div',
           {className: 'grid', key: node.nodeKey},
-          node.content,
           defaultBlock(node)
         )
       }