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

…ditor (#209)

* [example-studio] Add example on how to wrap and customize the block editor

* [example-studio] Fix errors in FunkyEditor

* [example-studio] Fix localizedSlug schema bug

* [example-studio] Make a cleaner example of FunkyEditor

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

@@ -0,0 +1,42 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import {BlockEditor} from 'part:@sanity/form-builder'
+
+function extractTextFromBlocks(blocks) {
+  return blocks
+    .filter(val => val._type === 'block')
+    .map(block => {
+      return block.children
+        .filter(child => child._type === 'span')
+        .map(span => span.text)
+        .join('')
+    }).join('')
+}
+
+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
+  };
+
+  render() {
+    const {type, value = [], level, onChange} = this.props
+    return (
+      <div>
+        <BlockEditor
+          type={type}
+          level={level}
+          value={value}
+          onChange={onChange}
+        />
+        <p>
+          Your funkyness is <strong>{extractTextFromBlocks(value).length}</strong> characters long
+        </p>
+      </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": {

packages/example-studio/schemas/localeSlug.js

@@ -16,7 +16,7 @@ export default {
     title: lang.title,
     fieldset: lang.default ? null : 'translations',
     options: {
-      source: document => document.title[lang.id],
+      source: document => ((document && document.title) ? document.title[lang.id] : ''),
       maxLength: 96,
       auto: true,
     },