[example-studio] Add example on how to wrap and customize the block e…

…ditor

packages/example-studio/components/FunkyEditor/FunkyEditor.js

@@ -0,0 +1,32 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import SlateEditor from '@sanity/form-builder/lib/inputs/BlockEditor-slate'
+export default class FunkyEditor extends React.Component {
+  static propTypes = {
+    type: PropTypes.shape({
+      title: PropTypes.string
+    }).isRequired,
+    level: PropTypes.number,
+    value: PropTypes.array,
+    onChange: PropTypes.func.isRequired
+  };
+
+  handleChange = event => {
+    this.props.onChange(event)
+  }
+
+  render() {
+    const {type, value, level} = this.props
+    return (
+      <div>
+        <h3>Take me to Funky Town</h3>
+        <SlateEditor
+          type={type}
+          level={level}
+          value={value === undefined ? '' : value}
+          onChange={this.handleChange}
+        />
+      </div>
+    )
+  }
+}

packages/example-studio/components/FunkyEditor/index.js

@@ -0,0 +1 @@
+export {default} from './FunkyEditor'

packages/example-studio/parts/inputResolver.js

@@ -1,3 +1,4 @@
+import FunkyEditor from '../components/FunkyEditor/FunkyEditor'
 import Slider from '../components/Slider/Slider'
 import {get} from 'lodash'
 
@@ -6,5 +7,9 @@ export default function resolveInput(type) {
     return Slider
   }
 
+  if (type.name === 'array' && type.of.find(ofType => ofType.name === 'block')) {
+    return FunkyEditor
+  }
+
   return false
 }

packages/example-studio/sanity.json

@@ -26,6 +26,10 @@
     {
       "implements": "part:@sanity/base/brand-logo",
       "path": "components/BrandLogo.js"
+    },
+    {
+      "implements": "part:@sanity/form-builder/input-resolver",
+      "path": "./parts/inputResolver.js"
     }
   ],
   "env": {