oozou · jaxrtech · Nov 2, 2017 · Nov 14, 2017 · Nov 18, 2017 · Mar 13, 2018
diff --git a/.babelrc b/.babelrc
@@ -1,7 +1,7 @@
 {
   "presets": [
-    "es2015",
+    "env",
     "react",
-    "stage-0"
+    "stage-2"
   ]
-}
+}
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,3 @@
 dist
-example/build.js
+example/bundle.js
 node_modules
diff --git a/example/index.html b/example/index.html
@@ -7,6 +7,6 @@
   </head>
   <body>
     <main></main>
-    <script src="build.js"></script>
+    <script src="bundle.js"></script>
   </body>
 </html>
diff --git a/example/index.js b/example/index.js
@@ -1,8 +1,10 @@
-import SuggestionsPlugin from '..'
 import React from 'react'
 import ReactDOM from 'react-dom'
+import { Value } from 'slate'
+import { Editor } from 'slate-react';
+
+import SuggestionsPlugin from '../lib'
 import initialState from './state.json'
-import { Editor, Raw } from 'slate'
 
 function getCurrentWord(text, index, initialIndex) {
   if (index === initialIndex) {
@@ -25,6 +27,11 @@ const suggestions = [
     value: '@Jon Snow',
     suggestion: '@Jon Snow' // Can be either string or react component
   },
+  {
+    key: 'John Evans',
+    value: '@John Evans',
+    suggestion: '@John Evans'
+  },
   {
     key: 'Daenerys Targaryen',
     value: '@Daenerys Targaryen',
@@ -47,14 +54,12 @@ class Example extends React.Component {
   constructor() {
     super()
 
-    this.suggestionsPlugin = new SuggestionsPlugin({
+    this.suggestionsPlugin = SuggestionsPlugin({
       trigger: '@',
       capture: /@([\w]*)/,
       suggestions,
-      onEnter: (suggestion) => {
-        const { state } = this.state
-
-        const { anchorText, anchorOffset } = state
+      onEnter: (suggestion, change) => {
+        const { anchorText, anchorOffset } = this.state.value
 
         const text = anchorText.text
 
@@ -66,38 +71,38 @@ class Example extends React.Component {
 
         const newText = `${text.substring(0, index.start)}${suggestion.value} `
 
-        return state
-          .transform()
+        change
           .deleteBackward(anchorOffset)
           .insertText(newText)
-          .apply()
+
+        return true;
       }
     })
 
     this.plugins = [
       this.suggestionsPlugin
     ]
-  }
 
-  state = {
-    state: Raw.deserialize(initialState, { terse: true })
-  };
+    this.state = {
+      value: Value.fromJSON(initialState)
+    };
+  }
 
-  onChange = (state) => {
-    this.setState({ state })
+  onChange = ({ value }) => {
+    this.setState({ value })
   }
 
-  render = () => {
+  render() {
     const { SuggestionPortal } = this.suggestionsPlugin
     return (
       <div>
         <Editor
           onChange={this.onChange}
           plugins={this.plugins}
-          state={this.state.state}
+          value={this.state.value}
         />
         <SuggestionPortal
-          state={this.state.state}
+          value={this.state.value}
         />
       </div>
     )
@@ -107,3 +112,5 @@ class Example extends React.Component {
 const example = <Example />
 const root = document.body.querySelector('main')
 ReactDOM.render(example, root)
+
+module.hot.accept()
diff --git a/example/state.json b/example/state.json
@@ -1,54 +1,21 @@
 {
-  "nodes": [
-    {
-      "kind": "block",
-      "type": "paragraph",
-      "nodes": [
-        {
-          "kind": "text",
-          "text": ""
-        }
-      ]
-    },
-    {
-      "kind": "block",
-      "type": "paragraph",
-      "nodes": [
-        {
-          "kind": "text",
-          "text": "Try typing '> ' at the start of this block."
-        }
-      ]
-    },
-    {
-      "kind": "block",
-      "type": "paragraph",
-      "nodes": [
-        {
-          "kind": "text",
-          "text": "Try typing '### ' at the start of this block."
-        }
-      ]
-    },
-    {
-      "kind": "block",
-      "type": "paragraph",
-      "nodes": [
-        {
-          "kind": "text",
-          "text": "Try typing '- ' at the start of this block."
-        }
-      ]
-    },
-    {
-      "kind": "block",
-      "type": "paragraph",
-      "nodes": [
-        {
-          "kind": "text",
-          "text": "Try typing '---<enter>' in a new block."
-        }
-      ]
-    }
-  ]
+  "document": {
+    "nodes": [
+      {
+        "object": "block",
+        "type": "paragraph",
+        "nodes": [
+          {
+            "object": "text",
+            "leaves": [
+              {
+                "object": "leaf",
+                "text": "@Jon Snow "
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  }
 }
diff --git a/lib/index.js b/lib/index.js
@@ -16,7 +16,8 @@ function SuggestionsPlugin(opts) {
   const capture = opts.capture
   const callback = {}
 
-  function onKeyDown(e, data, state, editor) {
+  function onKeyDown(e, change, editor) {
+    const state = change.value
     const keyCode = e.keyCode
     callback.editor = editor
 
@@ -32,29 +33,34 @@ function SuggestionsPlugin(opts) {
 
         // Close portal
         if (callback.closePortal) {
-          callback.closePortal()
+          callback.closePortal(state, editor)
         }
 
         // Handle enter
         if (callback.onEnter && callback.suggestion !== undefined) {
-          return callback.onEnter(callback.suggestion)
+          return callback.onEnter(callback.suggestion, change, editor)
         }
       } else {
         if (callback.onKeyDown) {
-          callback.onKeyDown(keyCode)
+          return callback.onKeyDown(keyCode, change, editor)
         }
       }
     }
   }
 
-  return {
-    onKeyDown,
-    SuggestionPortal: (props) =>
+  function SuggestionPortal(props) {
+    return (
       <Portal
         {...props}
         {...opts}
         callback={callback}
       />
+    )
+  }
+
+  return {
+    onKeyDown,
+    SuggestionPortal
   }
 }
 

diff --git a/lib/suggestion-item.js b/lib/suggestion-item.js
@@ -15,14 +15,17 @@ class SuggestionItem extends React.Component {
   onMouseEnter = () =>
     this.props.setSelectedIndex(this.props.index)
 
-  render = () =>
-    <li
-      className={this.props.index === this.props.selectedIndex ? 'selected' : undefined}
-      onClick={this.onClick}
-      onMouseEnter={this.onMouseEnter}
-    >
-      {this.props.suggestion.suggestion}
-    </li>
+  render() {
+    return (
+      <li
+        className={this.props.index === this.props.selectedIndex ? 'selected' : undefined}
+        onClick={this.onClick}
+        onMouseEnter={this.onMouseEnter}
+      >
+        {this.props.suggestion.suggestion}
+      </li>
+    )
+  }
 }
 
 export default SuggestionItem