Initial commit

package.json

@@ -7,11 +7,19 @@
     "@types/node": "12.7.1",
     "@types/react": "16.9.1",
     "@types/react-dom": "16.8.5",
+    "immutable": "^3.8.1",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
     "react-scripts": "3.1.0",
+    "slate": "^0.47.4",
+    "slate-react": "^0.22.4",
+    "typeface-open-sans": "^0.0.75",
     "typescript": "3.5.3"
   },
+  "devDependencies": {
+    "@types/slate-react": "^0.22.5",
+    "node-sass": "^4.12.0"
+  },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",

src/components/App.tsx

@@ -0,0 +1,13 @@
+import 'typeface-open-sans';
+import React from 'react';
+import { Editor } from '.';
+
+const App: React.FC = () => {
+  return (
+    <div className="App">
+      <Editor/>
+    </div>
+  );
+}
+
+export default App;

src/components/Editor.tsx

@@ -0,0 +1,58 @@
+import React, { useState } from 'react';
+import { Value } from 'slate';
+import { Editor as SlateEditor } from 'slate-react';
+import WordPlugin from '../plugins/word';
+
+const initialState =  Value.fromJSON({
+  document: {
+    nodes: [
+      {
+        object: 'block',
+        type: 'paragaph',
+        nodes: [
+          {
+            object: 'text',
+            text: 'Hello from the first block.'
+          }
+        ]
+      },
+      {
+        object: 'block',
+        type: 'paragaph',
+        nodes: [
+          {
+            object: 'text',
+            text: 'This is another paragraph.'
+          }
+        ]
+      }
+    ]
+  }
+});
+
+const plugins = [
+  WordPlugin()
+]
+
+export interface EditorProps {
+}
+
+const Editor: React.FC<EditorProps> = () => {
+  const [value, setValue] = useState(
+    initialState
+  );
+
+  return (
+    <div className="c_editor">
+      <SlateEditor
+        onChange={({ value }: { value: Value }) => {
+          setValue(value)
+        }}
+        plugins={plugins}
+        value={value}
+      />
+    </div>
+  );
+}
+
+export default Editor;

src/components/index.ts

@@ -0,0 +1,2 @@
+export { default as App } from './App';
+export { default as Editor } from './Editor';

src/index.scss

@@ -0,0 +1,14 @@
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+  font-size: 16px;
+}
+
+.c_editor {
+  border: 1px solid #ccc;
+}

src/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
+import './index.scss';
+import { App } from './components';
 import * as serviceWorker from './serviceWorker';
 
 ReactDOM.render(<App />, document.getElementById('root'));

src/plugins/word.tsx

@@ -0,0 +1,65 @@
+import { Plugin, Range, Value } from 'slate';
+
+export default function WordPlugin(): Plugin {
+  return {
+    onChange: (editor, next) => {
+      const word = findWord(editor.value);
+      console.log(word);
+      if(word) {
+        console.log(word.text);
+        editor.select(word);
+      }
+      next();
+    }
+  };
+}
+
+interface TextRange extends Range {
+  text?: string;
+}
+
+function findWord(
+  value: Value
+): TextRange | null {
+  if(!value.focusText) {
+    return null;
+  }
+
+  const text = value.focusText.text;
+  const focus = value.selection.focus;
+  const offset = focus.offset;
+
+  const start = text.lastIndexOf(
+    ' ',
+    offset - 1
+  ) + 1;
+
+  let end = text.indexOf(
+    ' ',
+    offset
+  );
+
+  if(end < 0) {
+    end = text.length;
+  }
+
+  const path = focus.path.toArray();
+
+  const range: TextRange = Range.create({
+    anchor: {
+      offset: start,
+      path
+    },
+    focus: {
+      offset: end,
+      path
+    }
+  });
+
+  range.text = text.substring(
+    start,
+    end
+  );
+
+  return range;
+}