Merge pull request draft-js-plugins#1069 from simsim0709/feature-draf…

…t-js-divider-plugin

Feature draft js divider plugin

.eslintrc

@@ -1,6 +1,6 @@
 {
   "parser": "babel-eslint",
-  "plugins": [ "mocha" ],
+  "plugins": ["mocha"],
   "env": {
     "browser": true,
     "mocha": true,
@@ -24,7 +24,7 @@
     "import/no-webpack-loader-syntax": 0,
     "import/extensions": 0,
     "jsx-a11y/img-has-alt": 0,
-    "react/require-default-props": 0,
+    "react/require-default-props": 0
   },
   "settings": {
     "import/core-modules": [
@@ -69,7 +69,9 @@
       "draft-js-undo-plugin",
       "draft-js-undo-plugin/lib/plugin.css",
       "draft-js-video-plugin",
-      "draft-js-video-plugin/lib/plugin.css"
+      "draft-js-video-plugin/lib/plugin.css",
+      "draft-js-divider-plugin",
+      "draft-js-divider-plugin/lib/plugin.css"
     ]
   }
 }

.storybook/webpack.config.js

@@ -41,6 +41,7 @@ module.exports = {
           path.join(__dirname, '..', 'draft-js-resizeable-plugin', 'src'),
           path.join(__dirname, '..', 'draft-js-buttons', 'src'),
           path.join(__dirname, '..', 'draft-js-video-plugin', 'src'),
+          path.join(__dirname, '..', 'draft-js-divider-plugin', 'src'),
         ],
       },
       {
@@ -71,6 +72,7 @@ module.exports = {
           path.join(__dirname, '..', 'draft-js-resizeable-plugin', 'src'),
           path.join(__dirname, '..', 'draft-js-buttons', 'src'),
           path.join(__dirname, '..', 'draft-js-video-plugin', 'src'),
+          path.join(__dirname, '..', 'draft-js-divider-plugin', 'src'),
         ],
       }, {
         test: /\.(png|jpg|gif|ico)$/,
@@ -103,6 +105,7 @@ module.exports = {
       'draft-js-resizeable-plugin': path.join(__dirname, '..', 'draft-js-resizeable-plugin', 'src'),
       'draft-js-buttons': path.join(__dirname, '..', 'draft-js-buttons', 'src'),
       'draft-js-video-plugin': path.join(__dirname, '..', 'draft-js-video-plugin', 'src'),
+      'draft-js-divider-plugin': path.join(__dirname, '..', 'draft-js-divider-plugin', 'src'),
       react: path.join(__dirname, '..', 'node_modules', 'react'),
     },
   }

docs/client/components/pages/Divider/DividerWithSideToolbarEditor/editorStyles.css

@@ -0,0 +1,14 @@
+.editor {
+  box-sizing: border-box;
+  border: 1px solid #ddd;
+  cursor: text;
+  padding: 16px;
+  border-radius: 2px;
+  margin-bottom: 2em;
+  box-shadow: inset 0px 1px 8px -3px #ABABAB;
+  background: #fefefe;
+}
+
+.editor :global(.public-DraftEditor-content) {
+  min-height: 140px;
+}

docs/client/components/pages/Divider/DividerWithSideToolbarEditor/index.js

@@ -0,0 +1,105 @@
+import React, { Component } from 'react';
+import { convertFromRaw, EditorState } from 'draft-js';
+
+import Editor, { composeDecorators } from 'draft-js-plugins-editor';
+import createFocusPlugin from 'draft-js-focus-plugin';
+import createSideToolbarPlugin from 'draft-js-side-toolbar-plugin';
+import createDividerPlugin from 'draft-js-divider-plugin';
+// eslint-disable-next-line
+import BlockTypeSelect from 'draft-js-side-toolbar-plugin/components/BlockTypeSelect';
+import editorStyles from './editorStyles.css';
+
+const focusPlugin = createFocusPlugin();
+
+const decorator = composeDecorators(focusPlugin.decorator);
+
+const dividerPlugin = createDividerPlugin({ decorator });
+
+const DefaultBlockTypeSelect = ({ getEditorState, setEditorState, theme }) => (
+  <BlockTypeSelect
+    getEditorState={getEditorState}
+    setEditorState={setEditorState}
+    theme={theme}
+    structure={[dividerPlugin.DividerButton]}
+  />
+);
+
+const sideToolbarPlugin = createSideToolbarPlugin({
+  structure: [DefaultBlockTypeSelect]
+});
+
+const { SideToolbar } = sideToolbarPlugin;
+
+const plugins = [focusPlugin, dividerPlugin, sideToolbarPlugin];
+
+/* eslint-disable */
+const initialState = {
+  entityMap: {
+    '0': {
+      type: 'divider',
+      mutability: 'IMMUTABLE',
+      data: {}
+    }
+  },
+  blocks: [
+    {
+      key: '9gm3s',
+      text:
+        'This is a simple example for divider plugin. Click side toolbar divider button.',
+      type: 'unstyled',
+      depth: 0,
+      inlineStyleRanges: [],
+      entityRanges: [],
+      data: {}
+    },
+    {
+      key: 'ov7r',
+      text: ' ',
+      type: 'atomic',
+      depth: 0,
+      inlineStyleRanges: [],
+      entityRanges: [
+        {
+          offset: 0,
+          length: 1,
+          key: 0
+        }
+      ],
+      data: {}
+    }
+  ]
+};
+/* eslint-enable */
+
+export default class CustomImageEditor extends Component {
+  state = {
+    editorState: EditorState.createWithContent(convertFromRaw(initialState))
+  };
+
+  onChange = (editorState) => {
+    this.setState({
+      editorState
+    });
+  };
+
+  focus = () => {
+    this.editor.focus();
+  };
+
+  render() {
+    return (
+      <div className={editorStyles.editor} onClick={this.focus}>
+        <Editor
+          editorState={this.state.editorState}
+          onChange={this.onChange}
+          plugins={plugins}
+          ref={(element) => {
+            this.editor = element;
+          }}
+        />
+
+        <SideToolbar />
+      </div>
+    );
+  }
+}

docs/client/components/pages/Divider/gettingStarted.js

@@ -0,0 +1,20 @@
+// It is important to import the Editor which accepts plugins.
+
+import Editor from 'draft-js-plugins-editor';
+
+import createDividerPlugin from 'draft-js-divider-plugin';
+import React from 'react';
+
+const dividerPlugin = createDividerPlugin();
+
+// The Editor accepts an array of plugins. In this case, only the dividerPlugin
+// is passed in, although it is possible to pass in multiple plugins.
+const MyEditor = ({ editorState, onChange }) => (
+  <Editor
+    editorState={editorState}
+    onChange={onChange}
+    plugins={[dividerPlugin]}
+  />
+);
+
+export default MyEditor;

docs/client/components/pages/Divider/index.js

@@ -0,0 +1,116 @@
+import React, { Component } from 'react';
+
+// eslint-disable-next-line import/no-unresolved
+import simpleExampleCode from '!!../../../loaders/prism-loader?language=javascript!./DividerWithSideToolbarEditor';
+// eslint-disable-next-line import/no-unresolved
+import simpleExampleEditorStylesCode from '!!../../../loaders/prism-loader?language=css!./DividerWithSideToolbarEditor/editorStyles.css';
+
+// eslint-disable-next-line import/no-unresolved
+import gettingStarted from '!!../../../loaders/prism-loader?language=javascript!./gettingStarted';
+// eslint-disable-next-line import/no-unresolved
+import webpackConfig from '!!../../../loaders/prism-loader?language=javascript!./webpackConfig';
+// eslint-disable-next-line import/no-unresolved
+import webpackImport from '!!../../../loaders/prism-loader?language=javascript!./webpackImport';
+
+import Container from '../../shared/Container';
+import AlternateContainer from '../../shared/AlternateContainer';
+import Heading from '../../shared/Heading';
+import styles from './styles.css';
+import Code from '../../shared/Code';
+import DividerWithSideToolbarEditor from './DividerWithSideToolbarEditor';
+import ExternalLink from '../../shared/Link';
+import InlineCode from '../../shared/InlineCode';
+import SocialBar from '../../shared/SocialBar';
+import NavBar from '../../shared/NavBar';
+import Separator from '../../shared/Separator';
+
+export default class App extends Component {
+  render() {
+    return (
+      <div>
+        <NavBar />
+        <Separator />
+        <Container>
+          <Heading level={2}>Divider</Heading>
+          <Heading level={3}>Supported Environment</Heading>
+          <ul className={styles.list}>
+            <li className={styles.listEntry}>Desktop: Yes</li>
+            <li className={styles.listEntry}>Mobile: Yes</li>
+            <li className={styles.listEntry}>Screen-reader: Yes</li>
+          </ul>
+        </Container>
+        <AlternateContainer>
+          <Heading level={2}>Getting Started</Heading>
+          <Code code="npm install draft-js-plugins-editor" />
+          <Code code="npm install draft-js-divider-plugin" />
+          <Code code={gettingStarted} name="gettingStarted.js" />
+          <Heading level={3}>Importing the default styles</Heading>
+          <p>
+            The plugin ships with a default styling available at this location
+            in the installed package: &nbsp;
+            <InlineCode
+              code={'node_modules/draft-js-divider-plugin/lib/plugin.css'}
+            />
+          </p>
+          <Heading level={4}>Webpack Usage</Heading>
+          <ul className={styles.list}>
+            <li className={styles.listEntry}>
+              1. Install Webpack loaders: &nbsp;
+              <InlineCode code={'npm i style-loader css-loader --save-dev'} />
+            </li>
+            <li className={styles.listEntry}>
+              2. Add the below section to Webpack config (if your config already
+              has a loaders array, simply add the below loader object to your
+              existing list.
+              <Code code={webpackConfig} className={styles.guideCodeBlock} />
+            </li>
+            <li className={styles.listEntry}>
+              3. Add the below import line to your component to tell Webpack to
+              inject the style to your component.
+              <Code code={webpackImport} className={styles.guideCodeBlock} />
+            </li>
+            <li className={styles.listEntry}>4. Restart Webpack.</li>
+          </ul>
+          <Heading level={4}>Browserify Usage</Heading>
+          <p>
+            Please help, by submiting a Pull Request to the{' '}
+            <ExternalLink href="https://github.com/draft-js-plugins/draft-js-plugins/blob/master/docs/client/components/pages/Image/index.js">
+              documentation
+            </ExternalLink>.
+          </p>
+        </AlternateContainer>
+        <Container>
+          <Heading level={2}>Configuration Parameters</Heading>
+          <div className={styles.param}>
+            <span className={styles.paramName}>theme</span>
+            <span>Object of CSS classes with the following keys.</span>
+            <div className={styles.subParams}>
+              <div className={styles.subParam}>
+                <span className={styles.subParamName}>divider:</span> CSS class
+                for the divider.
+              </div>
+            </div>
+          </div>
+          <div className={styles.param}>
+            <span className={styles.paramName}>entityType</span>
+            <span>Entity type for divider. default type is `divider`</span>
+          </div>
+          <div className={styles.param}>
+            <span className={styles.paramName}>dividerComponent</span>
+            <span>Pass in a custom divider component to be rendered.</span>
+          </div>
+        </Container>
+        <Container>
+          <Heading level={2}>Divider + SideToolbar + Focus Example</Heading>
+          <DividerWithSideToolbarEditor />
+          <Code
+            code={simpleExampleCode}
+            name="DividerWithSideToolbarEditor.js"
+          />
+          <Code code={simpleExampleEditorStylesCode} name="editorStyles.css" />
+        </Container>
+        <SocialBar />
+      </div>
+    );
+  }
+}

docs/client/components/pages/Divider/styles.css

@@ -0,0 +1,49 @@
+.root {
+  text-align: center;
+  padding-top: 10em;
+}
+
+.param {
+  margin: 10px 0;
+}
+
+.paramBig {
+  margin: 10px 0;
+  display: flex;
+}
+
+.paramName {
+  font-weight: bold;
+  width: 175px;
+  min-width: 175px;
+  display: inline-block;
+}
+
+.subParams {
+  margin-left: 175px;
+  margin-top: 10px;
+}
+
+.subParam {
+  margin-bottom: 5px;
+  display: flex;
+}
+
+.subParamName {
+  font-weight: bold;
+  margin-right: 5px;
+}
+
+.list {
+  list-style-type: none;
+  padding-left: 0;
+}
+
+.listEntry {
+  margin-top: 1rem;
+}
+
+.guideCodeBlock {
+  margin-top: 1rem;
+  margin-bottom: 1rem !important;
+}

docs/client/components/pages/Divider/webpackConfig.js

@@ -0,0 +1,12 @@
+module.exports = {
+  module: {
+    loaders: [
+      {
+        test: /plugin\.css$/,
+        loaders: [
+          'style-loader', 'css',
+        ],
+      },
+    ],
+  },
+};

docs/client/components/pages/Divider/webpackImport.js

@@ -0,0 +1 @@
+import 'draft-js-divider-plugin/lib/plugin.css';

docs/client/components/shared/NavBar/index.js

@@ -3,7 +3,6 @@ import { Link } from 'react-router';
 import styles from './styles.css';
 
 export default class NavBar extends Component {
-
   render() {
     return (
       <div className={styles.pluginsWrapper}>
@@ -97,7 +96,12 @@ export default class NavBar extends Component {
             </li>
             <li className={styles.plugin}>
               <Link to="/plugin/drag-n-drop" className={styles.link}>
-                {'Drag\'n\'Drop'}
+                {"Drag'n'Drop"}
+              </Link>
+            </li>
+            <li className={styles.plugin}>
+              <Link to="/plugin/divider" className={styles.link}>
+                Divider
               </Link>
             </li>
           </ul>