add focus-blur example

examples/focus-blur/Readme.md

@@ -0,0 +1,8 @@
+
+# Links Example
+
+![](../../docs/images/links-example.png)
+
+This example shows you how you can wrap text in "inline" nodes to associate metadata, like an `href`, with a piece of text. This is how you'd add links to Slate, but it's also how you might add hashtags, at-mentions, and many more inline features!
+
+Check out the [Examples readme](..) to see how to run it!

examples/focus-blur/index.js

@@ -0,0 +1,145 @@
+
+import { Editor, Mark, Raw } from '../..'
+import React from 'react'
+import ReactDOM from 'react-dom'
+import initialState from './state.json'
+import isUrl from 'is-url'
+import { Map } from 'immutable'
+
+/**
+ * Define a schema.
+ *
+ * @type {Object}
+ */
+
+const schema = {
+  nodes: {
+    paragraph: props => <p>{props.children}</p>
+  }
+}
+
+/**
+ * The focus and blur example.
+ *
+ * @type {Component}
+ */
+
+class FocusBlur extends React.Component {
+
+  /**
+   * Deserialize the raw initial state.
+   *
+   * @type {Object}
+   */
+
+  state = {
+    state: Raw.deserialize(initialState, { terse: true })
+  };
+
+  /**
+   * On change.
+   *
+   * @param {State} state
+   */
+
+  onChange = (state) => {
+    this.setState({ state })
+  }
+
+  /**
+   * Apply a focus or blur transform by `name` after a `timeout`.
+   *
+   * @param {String} name
+   * @param {Number} timeout
+   */
+
+  onClick = (e, name, timeout = 0) => {
+    e.preventDefault()
+
+    setTimeout(() => {
+      const state = this.state.state
+        .transform()
+        [name]()
+        .apply()
+
+      this.setState({ state })
+    }, timeout)
+  }
+
+  /**
+   * Generate focus and blur button handlers.
+   *
+   * @param {Event} e
+   */
+
+  onClickFocus = e => this.onClick(e, 'focus')
+  onClickFocusDelay = e => this.onClick(e, 'focus', 3000)
+  onClickBlur = e => this.onClick(e, 'blur')
+  onClickBlurDelay = e => this.onClick(e, 'blur', 3000)
+
+  /**
+   * Render the app.
+   *
+   * @return {Element} element
+   */
+
+  render = () => {
+    return (
+      <div>
+        {this.renderToolbar()}
+        {this.renderEditor()}
+      </div>
+    )
+  }
+
+  /**
+   * Render the toolbar.
+   *
+   * @return {Element} element
+   */
+
+  renderToolbar = () => {
+    return (
+      <div className="menu toolbar-menu">
+        <span className="button" onMouseDown={this.onClickFocus}>
+          <span className="material-icons">done</span> Focus
+        </span>
+        <span className="button" onMouseDown={this.onClickFocusDelay}>
+          <span className="material-icons">timer</span> Focus
+        </span>
+        <span className="button" onMouseDown={this.onClickBlur}>
+          <span className="material-icons">done</span> Blur
+        </span>
+        <span className="button" onMouseDown={this.onClickBlurDelay}>
+          <span className="material-icons">timer</span> Blur
+        </span>
+      </div>
+    )
+  }
+
+  /**
+   * Render the editor.
+   *
+   * @return {Element} element
+   */
+
+  renderEditor = () => {
+    return (
+      <div className="editor">
+        <Editor
+          schema={schema}
+          state={this.state.state}
+          onChange={this.onChange}
+          onPaste={this.onPaste}
+        />
+      </div>
+    )
+  }
+
+}
+
+/**
+ * Export.
+ */
+
+export default FocusBlur

examples/focus-blur/state.json

@@ -0,0 +1,24 @@
+{
+  "nodes": [
+    {
+      "kind": "block",
+      "type": "paragraph",
+      "nodes": [
+        {
+          "kind": "text",
+          "text": "This is a testing ground for focusing and blurring in Slate."
+        }
+      ]
+    },
+    {
+      "kind": "block",
+      "type": "paragraph",
+      "nodes": [
+        {
+          "kind": "text",
+          "text": "You can use the toolbar buttons above to focus and blur immediately, or after a short delay."
+        }
+      ]
+    }
+  ]
+}

examples/index.css

@@ -79,6 +79,7 @@ input:focus {
 
 .material-icons {
   font-size: 18px;
+  vertical-align: text-bottom;
 }
 
 /**
@@ -126,7 +127,7 @@ input:focus {
 }
 
 .menu > * + * {
-  margin-left: 10px;
+  margin-left: 15px;
 }
 
 .button {

examples/index.js

@@ -11,6 +11,7 @@ import AutoMarkdown from './auto-markdown'
 import CodeHighlighting from './code-highlighting'
 import Embeds from './embeds'
 import Emojis from './emojis'
+import FocusBlur from './focus-blur'
 import HoveringMenu from './hovering-menu'
 import Iframes from './iframes'
 import Images from './images'
@@ -81,6 +82,7 @@ class App extends React.Component {
         {this.renderTab('RTL', 'rtl')}
         {this.renderTab('Plugins', 'plugins')}
         {this.renderTab('Iframes', 'iframes')}
+        {this.renderTab('Focus & Blur', 'focus-blur')}
       </div>
     )
   }
@@ -129,6 +131,7 @@ const router = (
       <Route path="code-highlighting" component={CodeHighlighting} />
       <Route path="embeds" component={Embeds} />
       <Route path="emojis" component={Emojis} />
+      <Route path="focus-blur" component={FocusBlur} />
       <Route path="hovering-menu" component={HoveringMenu} />
       <Route path="iframes" component={Iframes} />
       <Route path="images" component={Images} />