Add a mark in the search highlight example (#2905)

* Demonstrate that decorations and marks don't work together well

* Update value.json

examples/search-highlighting/index.js

@@ -117,6 +117,7 @@ class SearchHighlighting extends React.Component {
           defaultValue={initialValue}
           schema={this.schema}
           renderAnnotation={this.renderAnnotation}
+          renderMark={this.renderMark}
           spellCheck
         />
       </div>
@@ -145,6 +146,24 @@ class SearchHighlighting extends React.Component {
     }
   }
 
+  /**
+   * Render a Slate mark.
+   *
+   * @param {Object} props
+   * @return {Element}
+   */
+
+  renderMark = (props, editor, next) => {
+    const { children, mark, attributes } = props
+
+    switch (mark.type) {
+      case 'bold':
+        return <strong {...attributes}>{children}</strong>
+      default:
+        return next()
+    }
+  }
+
   /**
    * On input change, update the annotations.
    *

examples/search-highlighting/value.json

@@ -10,7 +10,16 @@
           {
             "object": "text",
             "text":
-              "This is editable text that you can search. As you search, it looks for matching strings of text, and adds \"annotation\" marks to them in realtime."
+              "This is editable text that you can search. As you search, it looks for matching strings of text, and adds "
+          },
+          {
+            "object": "text",
+            "text": "annotation",
+            "marks": [{ "object": "mark", "type": "bold" }]
+          },
+          {
+            "object": "text",
+            "text": " marks to them in realtime."
           }
         ]
       },