draft-js-plugins · juliankrispel · Nov 28, 2018 · Oct 31, 2018 · Oct 31, 2018 · Nov 10, 2018
diff --git a/examples/divider-example/README.md b/examples/divider-example/README.md
diff --git a/examples/divider-example/package-lock.json b/examples/divider-example/package-lock.json
diff --git a/examples/divider-example/package.json b/examples/divider-example/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "@djsp/divider-example",
+  "homepage": "https://github.com/draft-js-plugins/next#readme",
+  "version": "0.1.5",
+  "private": true,
+  "license": "MIT",
+  "dependencies": {
+    "@djsp/atomic-block": "^0.1.5",
+    "@djsp/core": "^0.1.5",
+    "react": "^16.2.0",
+    "react-dom": "^16.2.0",
+    "react-scripts": "^1.1.1"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  },
+  "devDependencies": {
+    "draft-js": "^0.10.5"
+  }
+}
diff --git a/examples/divider-example/public/index.html b/examples/divider-example/public/index.html
@@ -0,0 +1,20 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="theme-color" content="#000000">
+
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+
+    <title>@djsp/divider-example</title>
+  </head>
+
+  <body>
+    <noscript>
+      You need to enable JavaScript to run this app.
+    </noscript>
+
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/examples/divider-example/src/InsertDivider.js b/examples/divider-example/src/InsertDivider.js
@@ -0,0 +1,49 @@
+// @flow
+
+import React, { Component, Fragment } from 'react'
+import { Plugin } from '@djsp/core'
+import AtomicBlock from '@djsp/atomic-block'
+import { insertEntityBlock } from '@djsp/utils'
+
+type Props = {
+  editorState: EditorState,
+  setEditorState: EditorState => void,
+}
+
+class DividerButton 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>
+    )
+  }
+}
+
+const InsertDivider = () => (
+  <Fragment>
+    <AtomicBlock type="divider">
+      {({ isFocused }) => (
+        <hr className={isFocused ? 'divider focused' : 'divider'} />
+      )}
+    </AtomicBlock>
+
+    <Plugin>
+      {({ editorState, setEditorState }) => (
+        <DividerButton
+          editorState={editorState}
+          setEditorState={setEditorState}
+        />
+      )}
+    </Plugin>
+  </Fragment>
+)
+
+export default InsertDivider
diff --git a/examples/divider-example/src/index.js b/examples/divider-example/src/index.js
@@ -0,0 +1,58 @@
+import React, { Component } from 'react'
+import ReactDOM from 'react-dom'
+
+import { EditorState, convertFromRaw } from 'draft-js'
+import { EditorContainer, Editor } from '@djsp/core'
+import InsertDivider from './InsertDivider'
+import './styles.css'
+
+const rawContent = {
+  blocks: [
+    {
+      text: 'Here is the divider!',
+    },
+    {
+      type: 'atomic',
+      text: ' ',
+      entityRanges: [
+        {
+          key: 0,
+          length: 1,
+          offset: 0,
+        },
+      ],
+    },
+    {
+      text: 'You can add another divider below.',
+    },
+  ],
+  entityMap: {
+    0: {
+      mutability: 'IMMUTABLE',
+      type: 'DIVIDER',
+    },
+  },
+}
+
+class App extends Component {
+  state = {
+    editorState: EditorState.createWithContent(convertFromRaw(rawContent)),
+  }
+
+  onChange = editorState => this.setState({ editorState })
+
+  render() {
+    return (
+      <div>
+        <EditorContainer
+          editorState={this.state.editorState}
+          onChange={this.onChange}>
+          <Editor />
+          <InsertDivider />
+        </EditorContainer>
+      </div>
+    )
+  }
+}
+
+ReactDOM.render(<App />, document.getElementById('root'))
diff --git a/examples/divider-example/src/styles.css b/examples/divider-example/src/styles.css
@@ -0,0 +1,44 @@
+body {
+  font-family: sans-serif;
+  font-size: 1.8em;
+  padding: 1em;
+  background: #12312e;
+}
+
+.public-DraftEditor-content {
+  padding: 2em;
+  border-radius: 5px;
+  color: #fff;
+  border: #555;
+  background: #244a46;
+}
+
+
+.divider {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  margin: 32px 0;
+  border: none; /* strip default hr styling */
+  text-align: center;
+}
+
+.divider::after {
+  margin-left: 48px;
+  color: rgba(0, 0, 0, 0.26); /* pick a color */
+  font-size: 2.125rem;
+  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;
+}
diff --git a/packages/atomic-block/README.md b/packages/atomic-block/README.md
@@ -42,4 +42,5 @@ yarn add @djsp/utils @djsp/atomic-block
 
 
 ## Examples
-- [Editor with image](https://codesandbox.io/s/github/draft-js-plugins/next/tree/master/examples/atomic-block)
+- [Editor with image](https://codesandbox.io/s/github/draft-js-plugins/next/tree/master/examples/atomic-block)
+- [Editor with divider](https://codesandbox.io/s/github/draft-js-plugins/next/tree/master/examples/divider-example)