From 82c9e82d416d5af30fc9c53b5e67ba37f8b47035 Mon Sep 17 00:00:00 2001
From: Bryan Haakman <bryanhaakman@gmail.com>
Date: Wed, 3 Jul 2019 22:05:10 +0200
Subject: [PATCH] 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   | 19 +++++++++++++++++++
 examples/search-highlighting/value.json | 11 ++++++++++-
 2 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/examples/search-highlighting/index.js b/examples/search-highlighting/index.js
index d340cd44a..1152c02db 100644
--- a/examples/search-highlighting/index.js
+++ b/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.
    *
diff --git a/examples/search-highlighting/value.json b/examples/search-highlighting/value.json
index 592901654..bc46adf95 100644
--- a/examples/search-highlighting/value.json
+++ b/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."
           }
         ]
       },