cleanup, update code highlighting example

examples/code-highlighting/index.js

@@ -5,13 +5,13 @@ import React from 'react'
 import initialState from './state.json'
 
 /**
- * Define a set of node renderers.
+ * Define a code block component.
  *
- * @type {Object}
+ * @param {Object} props
+ * @return {Element}
  */
 
-const NODES = {
-  code: (props) => {
+function CodeBlock(props) {
   const { attributes, children, editor, node } = props
   const language = node.data.get('language')
 
@@ -46,15 +46,18 @@ const NODES = {
     </div>
   )
 }
-}
 
 /**
- * Define a set of mark renderers.
+ * Define a schema.
  *
  * @type {Object}
  */
 
-const MARKS = {
+const schema = {
+  nodes: {
+    code: CodeBlock
+  },
+  marks: {
     'highlight-comment': {
       opacity: '0.33'
     },
@@ -65,6 +68,7 @@ const MARKS = {
       opacity: '0.75'
     }
   }
+}
 
 /**
  * The code highlighting example.
@@ -125,9 +129,8 @@ class CodeHighlighting extends React.Component {
     return (
       <div className="editor">
         <Editor
+          schema={schema}
           state={this.state.state}
-          renderNode={this.renderNode}
-          renderMark={this.renderMark}
           renderDecorations={this.renderDecorations}
           onKeyDown={this.onKeyDown}
           onChange={this.onChange}
@@ -136,28 +139,6 @@ class CodeHighlighting extends React.Component {
     )
   }
 
-  /**
-   * Return a node renderer for a Slate `node`.
-   *
-   * @param {Node} node
-   * @return {Component or Void}
-   */
-
-  renderNode = (node) => {
-    return NODES[node.type]
-  }
-
-  /**
-   * Return a mark renderer for a Slate `mark`.
-   *
-   * @param {Mark} mark
-   * @return {Object or Void}
-   */
-
-  renderMark = (mark) => {
-    return MARKS[mark.type] || {}
-  }
-
   /**
    * Render decorations on `text` nodes inside code blocks.
    *

lib/components/editor.js

@@ -291,34 +291,6 @@ class Editor extends React.Component {
     return text.characters
   }
 
-  /**
-   * Render a `mark`, cascading through the plugins.
-   *
-   * @param {Mark} mark
-   * @param {Set} marks
-   * @return {Component or Object or String}
-   */
-
-  renderMark = (mark, marks) => {
-    for (const plugin of this.state.plugins) {
-      if (!plugin.renderMark) continue
-      let ret = plugin.renderMark(mark, marks, this.state.state, this)
-
-      // Handle React components that aren't stateless functions.
-      if (isReactComponent(ret)) return ret
-
-      // Handle all other types...
-      switch (typeOf(ret)) {
-        case 'function':
-          return ret
-        case 'object':
-          return props => <span style={ret}>{props.children}</span>
-        case 'string':
-          return props => <span className={ret}>{props.children}</span>
-      }
-    }
-  }
-
   /**
    * Resolve the editor's current plugins from `props` when they change.
    *