extend divider-example

Author: freedomlang

examples/divider-example/src/InsertDivider.js

@@ -0,0 +1,30 @@
+// @flow
+
+import React, { Component } from 'react'
+import { insertEntityBlock } from '@djsp/utils'
+
+type Props = {
+  editorState: EditorState,
+  setEditorState: EditorState => void,
+}
+
+class InsertDivider extends Component<Props> {
+  onClick = event => {
+    event.stopPropagation()
+
+    const { setEditorState, editorState } = this.props;
+    setEditorState(insertEntityBlock(editorState, 'divider'))
+  }
+
+  render() {
+    return (
+      <button
+        type="button"
+        onClick={this.onClick}>
+        Insert divider
+      </button>
+    )
+  }
+}
+
+export default InsertDivider

examples/divider-example/src/index.js

@@ -2,9 +2,9 @@ import React, { Component } from 'react'
 import ReactDOM from 'react-dom'
 
 import { EditorState, convertFromRaw } from 'draft-js'
-import { EditorContainer, Editor } from '@djsp/core'
+import { EditorContainer, Editor, Plugin } from '@djsp/core'
 import AtomicBlock from '@djsp/atomic-block'
-import '@djsp/atomic-block/dist/index.css'
+import InsertDivider from './InsertDivider'
 import './styles.css'
 
 const rawContent = {
@@ -51,8 +51,12 @@ class App extends Component {
           <Editor />
 
           <AtomicBlock type="divider">
-            {() => <hr className="divider" />}
+            {({ isFocused }) => <hr className={isFocused ? 'divider focused' : 'divider'} />}
           </AtomicBlock>
+
+          <Plugin>{
+            ({ editorState, setEditorState }) => <InsertDivider editorState={editorState} setEditorState={setEditorState} />
+          }</Plugin>
         </EditorContainer>
       </div>
     )

examples/divider-example/src/styles.css

@@ -32,3 +32,13 @@ body {
   letter-spacing: 48px; /* increase space between dots */
   content: '•••';
 }
+
+.divider:hover {
+  border-radius: 2px;
+  box-shadow: 0 0 0 2px #D2E3F7;
+}
+
+.divider.focused {
+  border-radius: 2px;
+  box-shadow: 0 0 0 2px #ACCEF7;
+}