refactor plugins example, fixes #2243

examples/plugins/collapse-on-escape.js

@@ -0,0 +1,14 @@
+export default function CollapseOnEscape(options = {}) {
+  return {
+    onKeyDown(event, change, next) {
+      const { value } = change
+      const { selection } = value
+
+      if (event.key === 'Escape' && selection.isExpanded) {
+        change.moveToEnd()
+      } else {
+        return next()
+      }
+    },
+  }
+}

examples/plugins/index.js

@@ -2,45 +2,9 @@ import Plain from 'slate-plain-serializer'
 import { Editor } from 'slate-react'
 
 import React from 'react'
-import CollapseOnEscape from 'slate-collapse-on-escape'
-import SoftBreak from 'slate-soft-break'
-import styled from 'react-emotion'
-
-/**
- * A styled word counter component.
- *
- * @type {Component}
- */
-
-const WordCounter = styled('span')`
-  margin-top: 10px;
-  padding: 12px;
-  background-color: #ebebeb;
-  display: inline-block;
-`
-
-/**
- * A simple word count plugin.
- *
- * @param {Object} options
- * @return {Object}
- */
-
-function WordCount(options) {
-  return {
-    renderEditor(props, next) {
-      const children = next()
-      return (
-        <div>
-          <div>{children}</div>
-          <WordCounter>
-            Word Count: {props.value.document.text.split(' ').length}
-          </WordCounter>
-        </div>
-      )
-    },
-  }
-}
+import CollapseOnEscape from './collapse-on-escape'
+import SoftBreak from './soft-break'
+import WordCount from './word-count'
 
 /**
  * Plugins.

examples/plugins/soft-break.js

@@ -0,0 +1,11 @@
+export default function SoftBreak(options = {}) {
+  return {
+    onKeyDown(event, change, next) {
+      if (event.key === 'Enter') {
+        change.insertText('\n')
+      } else {
+        next()
+      }
+    },
+  }
+}

examples/plugins/word-count.js

@@ -0,0 +1,25 @@
+import React from 'react'
+import styled from 'react-emotion'
+
+const WordCounter = styled('span')`
+  margin-top: 10px;
+  padding: 12px;
+  background-color: #ebebeb;
+  display: inline-block;
+`
+
+export default function WordCount(options) {
+  return {
+    renderEditor(props, next) {
+      const children = next()
+      return (
+        <div>
+          <div>{children}</div>
+          <WordCounter>
+            Word Count: {props.value.document.text.split(' ').length}
+          </WordCounter>
+        </div>
+      )
+    },
+  }
+}

package.json

@@ -72,10 +72,6 @@
     "rollup-plugin-replace": "^2.0.0",
     "rollup-plugin-sourcemaps": "^0.4.2",
     "rollup-plugin-uglify": "^3.0.0",
-    "slate-collapse-on-escape": "^0.6.0",
-    "slate-dev-benchmark": "*",
-    "slate-dev-test-utils": "*",
-    "slate-soft-break": "^0.6.0",
     "source-map-loader": "^0.2.3",
     "source-map-support": "^0.4.0",
     "style-loader": "^0.20.2",
@@ -87,6 +83,8 @@
   },
   "peerDependencies": {
     "slate": "*",
+    "slate-dev-benchmark": "*",
+    "slate-dev-test-utils": "*",
     "slate-html-serializer": "*",
     "slate-plain-serializer": "*",
     "slate-react": "*"

yarn.lock

@@ -7439,20 +7439,10 @@ slash@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/slash/-/slash-1.0.0.tgz#c41f2f6c39fc16d1cd17ad4b5d896114ae470d55"
 
-slate-collapse-on-escape@^0.6.0:
-  version "0.6.0"
-  resolved "https://registry.yarnpkg.com/slate-collapse-on-escape/-/slate-collapse-on-escape-0.6.0.tgz#668f2318770608a09a25a95623f5fb4329a277bf"
-  dependencies:
-    to-pascal-case "^1.0.0"
-
 slate-simulator@^0.4.67:
   version "0.4.67"
   resolved "https://registry.yarnpkg.com/slate-simulator/-/slate-simulator-0.4.67.tgz#9313c84736db1e23d6aebacd536f582b6d54723c"
 
-slate-soft-break@^0.6.0:
-  version "0.6.0"
-  resolved "https://registry.yarnpkg.com/slate-soft-break/-/slate-soft-break-0.6.0.tgz#1e44815b7ff4ddada055bba14cd0d2d4ef0fd463"
-
 slice-ansi@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/slice-ansi/-/slice-ansi-1.0.0.tgz#044f1a49d8842ff307aad6b505ed178bd950134d"
@@ -8079,12 +8069,6 @@ to-object-path@^0.3.0:
   dependencies:
     kind-of "^3.0.2"
 
-to-pascal-case@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/to-pascal-case/-/to-pascal-case-1.0.0.tgz#0bbdc8df448886ba01535e543327048d0aa1ce78"
-  dependencies:
-    to-space-case "^1.0.0"
-
 to-regex-range@^2.1.0:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/to-regex-range/-/to-regex-range-2.1.1.tgz#7c80c17b9dfebe599e27367e0d4dd5590141db38"