Skip to content

Commit 0f272ef

Browse files
juliankrispeljuliankrispel
authored
Merge pull request draft-js-plugins#1069 from simsim0709/feature-draft-js-divider-plugin
Feature draft js divider plugin
2 parents e9648d9 + 3f1a21a commit 0f272ef

31 files changed

+992
-29
lines changed

‎.eslintrc

+5-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"parser": "babel-eslint",
3-
"plugins": [ "mocha" ],
3+
"plugins": ["mocha"],
44
"env": {
55
"browser": true,
66
"mocha": true,
@@ -24,7 +24,7 @@
2424
"import/no-webpack-loader-syntax": 0,
2525
"import/extensions": 0,
2626
"jsx-a11y/img-has-alt": 0,
27-
"react/require-default-props": 0,
27+
"react/require-default-props": 0
2828
},
2929
"settings": {
3030
"import/core-modules": [
@@ -69,7 +69,9 @@
6969
"draft-js-undo-plugin",
7070
"draft-js-undo-plugin/lib/plugin.css",
7171
"draft-js-video-plugin",
72-
"draft-js-video-plugin/lib/plugin.css"
72+
"draft-js-video-plugin/lib/plugin.css",
73+
"draft-js-divider-plugin",
74+
"draft-js-divider-plugin/lib/plugin.css"
7375
]
7476
}
7577
}

‎.storybook/webpack.config.js

+3
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ module.exports = {
4141
path.join(__dirname, '..', 'draft-js-resizeable-plugin', 'src'),
4242
path.join(__dirname, '..', 'draft-js-buttons', 'src'),
4343
path.join(__dirname, '..', 'draft-js-video-plugin', 'src'),
44+
path.join(__dirname, '..', 'draft-js-divider-plugin', 'src'),
4445
],
4546
},
4647
{
@@ -71,6 +72,7 @@ module.exports = {
7172
path.join(__dirname, '..', 'draft-js-resizeable-plugin', 'src'),
7273
path.join(__dirname, '..', 'draft-js-buttons', 'src'),
7374
path.join(__dirname, '..', 'draft-js-video-plugin', 'src'),
75+
path.join(__dirname, '..', 'draft-js-divider-plugin', 'src'),
7476
],
7577
}, {
7678
test: /\.(png|jpg|gif|ico)$/,
@@ -103,6 +105,7 @@ module.exports = {
103105
'draft-js-resizeable-plugin': path.join(__dirname, '..', 'draft-js-resizeable-plugin', 'src'),
104106
'draft-js-buttons': path.join(__dirname, '..', 'draft-js-buttons', 'src'),
105107
'draft-js-video-plugin': path.join(__dirname, '..', 'draft-js-video-plugin', 'src'),
108+
'draft-js-divider-plugin': path.join(__dirname, '..', 'draft-js-divider-plugin', 'src'),
106109
react: path.join(__dirname, '..', 'node_modules', 'react'),
107110
},
108111
}

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

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
.editor {
2+
box-sizing: border-box;
3+
border: 1px solid #ddd;
4+
cursor: text;
5+
padding: 16px;
6+
border-radius: 2px;
7+
margin-bottom: 2em;
8+
box-shadow: inset 0px 1px 8px -3px #ABABAB;
9+
background: #fefefe;
10+
}
11+
12+
.editor :global(.public-DraftEditor-content) {
13+
min-height: 140px;
14+
}

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

+105
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
import React, { Component } from 'react';
2+
import { convertFromRaw, EditorState } from 'draft-js';
3+
4+
import Editor, { composeDecorators } from 'draft-js-plugins-editor';
5+
import createFocusPlugin from 'draft-js-focus-plugin';
6+
import createSideToolbarPlugin from 'draft-js-side-toolbar-plugin';
7+
import createDividerPlugin from 'draft-js-divider-plugin';
8+
// eslint-disable-next-line
9+
import BlockTypeSelect from 'draft-js-side-toolbar-plugin/components/BlockTypeSelect';
10+
import editorStyles from './editorStyles.css';
11+
12+
const focusPlugin = createFocusPlugin();
13+
14+
const decorator = composeDecorators(focusPlugin.decorator);
15+
16+
const dividerPlugin = createDividerPlugin({ decorator });
17+
18+
const DefaultBlockTypeSelect = ({ getEditorState, setEditorState, theme }) => (
19+
<BlockTypeSelect
20+
getEditorState={getEditorState}
21+
setEditorState={setEditorState}
22+
theme={theme}
23+
structure={[dividerPlugin.DividerButton]}
24+
/>
25+
);
26+
27+
const sideToolbarPlugin = createSideToolbarPlugin({
28+
structure: [DefaultBlockTypeSelect]
29+
});
30+
31+
const { SideToolbar } = sideToolbarPlugin;
32+
33+
const plugins = [focusPlugin, dividerPlugin, sideToolbarPlugin];
34+
35+
/* eslint-disable */
36+
const initialState = {
37+
entityMap: {
38+
'0': {
39+
type: 'divider',
40+
mutability: 'IMMUTABLE',
41+
data: {}
42+
}
43+
},
44+
blocks: [
45+
{
46+
key: '9gm3s',
47+
text:
48+
'This is a simple example for divider plugin. Click side toolbar divider button.',
49+
type: 'unstyled',
50+
depth: 0,
51+
inlineStyleRanges: [],
52+
entityRanges: [],
53+
data: {}
54+
},
55+
{
56+
key: 'ov7r',
57+
text: ' ',
58+
type: 'atomic',
59+
depth: 0,
60+
inlineStyleRanges: [],
61+
entityRanges: [
62+
{
63+
offset: 0,
64+
length: 1,
65+
key: 0
66+
}
67+
],
68+
data: {}
69+
}
70+
]
71+
};
72+
/* eslint-enable */
73+
74+
export default class CustomImageEditor extends Component {
75+
state = {
76+
editorState: EditorState.createWithContent(convertFromRaw(initialState))
77+
};
78+
79+
onChange = (editorState) => {
80+
this.setState({
81+
editorState
82+
});
83+
};
84+
85+
focus = () => {
86+
this.editor.focus();
87+
};
88+
89+
render() {
90+
return (
91+
<div className={editorStyles.editor} onClick={this.focus}>
92+
<Editor
93+
editorState={this.state.editorState}
94+
onChange={this.onChange}
95+
plugins={plugins}
96+
ref={(element) => {
97+
this.editor = element;
98+
}}
99+
/>
100+
101+
<SideToolbar />
102+
</div>
103+
);
104+
}
105+
}

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

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
// It is important to import the Editor which accepts plugins.
2+
3+
import Editor from 'draft-js-plugins-editor';
4+
5+
import createDividerPlugin from 'draft-js-divider-plugin';
6+
import React from 'react';
7+
8+
const dividerPlugin = createDividerPlugin();
9+
10+
// The Editor accepts an array of plugins. In this case, only the dividerPlugin
11+
// is passed in, although it is possible to pass in multiple plugins.
12+
const MyEditor = ({ editorState, onChange }) => (
13+
<Editor
14+
editorState={editorState}
15+
onChange={onChange}
16+
plugins={[dividerPlugin]}
17+
/>
18+
);
19+
20+
export default MyEditor;

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

+116
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
import React, { Component } from 'react';
2+
3+
// eslint-disable-next-line import/no-unresolved
4+
import simpleExampleCode from '!!../../../loaders/prism-loader?language=javascript!./DividerWithSideToolbarEditor';
5+
// eslint-disable-next-line import/no-unresolved
6+
import simpleExampleEditorStylesCode from '!!../../../loaders/prism-loader?language=css!./DividerWithSideToolbarEditor/editorStyles.css';
7+
8+
// eslint-disable-next-line import/no-unresolved
9+
import gettingStarted from '!!../../../loaders/prism-loader?language=javascript!./gettingStarted';
10+
// eslint-disable-next-line import/no-unresolved
11+
import webpackConfig from '!!../../../loaders/prism-loader?language=javascript!./webpackConfig';
12+
// eslint-disable-next-line import/no-unresolved
13+
import webpackImport from '!!../../../loaders/prism-loader?language=javascript!./webpackImport';
14+
15+
import Container from '../../shared/Container';
16+
import AlternateContainer from '../../shared/AlternateContainer';
17+
import Heading from '../../shared/Heading';
18+
import styles from './styles.css';
19+
import Code from '../../shared/Code';
20+
import DividerWithSideToolbarEditor from './DividerWithSideToolbarEditor';
21+
import ExternalLink from '../../shared/Link';
22+
import InlineCode from '../../shared/InlineCode';
23+
import SocialBar from '../../shared/SocialBar';
24+
import NavBar from '../../shared/NavBar';
25+
import Separator from '../../shared/Separator';
26+
27+
export default class App extends Component {
28+
render() {
29+
return (
30+
<div>
31+
<NavBar />
32+
<Separator />
33+
<Container>
34+
<Heading level={2}>Divider</Heading>
35+
<Heading level={3}>Supported Environment</Heading>
36+
<ul className={styles.list}>
37+
<li className={styles.listEntry}>Desktop: Yes</li>
38+
<li className={styles.listEntry}>Mobile: Yes</li>
39+
<li className={styles.listEntry}>Screen-reader: Yes</li>
40+
</ul>
41+
</Container>
42+
<AlternateContainer>
43+
<Heading level={2}>Getting Started</Heading>
44+
<Code code="npm install draft-js-plugins-editor" />
45+
<Code code="npm install draft-js-divider-plugin" />
46+
<Code code={gettingStarted} name="gettingStarted.js" />
47+
<Heading level={3}>Importing the default styles</Heading>
48+
<p>
49+
The plugin ships with a default styling available at this location
50+
in the installed package: &nbsp;
51+
<InlineCode
52+
code={'node_modules/draft-js-divider-plugin/lib/plugin.css'}
53+
/>
54+
</p>
55+
<Heading level={4}>Webpack Usage</Heading>
56+
<ul className={styles.list}>
57+
<li className={styles.listEntry}>
58+
1. Install Webpack loaders: &nbsp;
59+
<InlineCode code={'npm i style-loader css-loader --save-dev'} />
60+
</li>
61+
<li className={styles.listEntry}>
62+
2. Add the below section to Webpack config (if your config already
63+
has a loaders array, simply add the below loader object to your
64+
existing list.
65+
<Code code={webpackConfig} className={styles.guideCodeBlock} />
66+
</li>
67+
<li className={styles.listEntry}>
68+
3. Add the below import line to your component to tell Webpack to
69+
inject the style to your component.
70+
<Code code={webpackImport} className={styles.guideCodeBlock} />
71+
</li>
72+
<li className={styles.listEntry}>4. Restart Webpack.</li>
73+
</ul>
74+
<Heading level={4}>Browserify Usage</Heading>
75+
<p>
76+
Please help, by submiting a Pull Request to the{' '}
77+
<ExternalLink href="https://github.com/draft-js-plugins/draft-js-plugins/blob/master/docs/client/components/pages/Image/index.js">
78+
documentation
79+
</ExternalLink>.
80+
</p>
81+
</AlternateContainer>
82+
<Container>
83+
<Heading level={2}>Configuration Parameters</Heading>
84+
<div className={styles.param}>
85+
<span className={styles.paramName}>theme</span>
86+
<span>Object of CSS classes with the following keys.</span>
87+
<div className={styles.subParams}>
88+
<div className={styles.subParam}>
89+
<span className={styles.subParamName}>divider:</span> CSS class
90+
for the divider.
91+
</div>
92+
</div>
93+
</div>
94+
<div className={styles.param}>
95+
<span className={styles.paramName}>entityType</span>
96+
<span>Entity type for divider. default type is `divider`</span>
97+
</div>
98+
<div className={styles.param}>
99+
<span className={styles.paramName}>dividerComponent</span>
100+
<span>Pass in a custom divider component to be rendered.</span>
101+
</div>
102+
</Container>
103+
<Container>
104+
<Heading level={2}>Divider + SideToolbar + Focus Example</Heading>
105+
<DividerWithSideToolbarEditor />
106+
<Code
107+
code={simpleExampleCode}
108+
name="DividerWithSideToolbarEditor.js"
109+
/>
110+
<Code code={simpleExampleEditorStylesCode} name="editorStyles.css" />
111+
</Container>
112+
<SocialBar />
113+
</div>
114+
);
115+
}
116+
}

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

+49
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
.root {
2+
text-align: center;
3+
padding-top: 10em;
4+
}
5+
6+
.param {
7+
margin: 10px 0;
8+
}
9+
10+
.paramBig {
11+
margin: 10px 0;
12+
display: flex;
13+
}
14+
15+
.paramName {
16+
font-weight: bold;
17+
width: 175px;
18+
min-width: 175px;
19+
display: inline-block;
20+
}
21+
22+
.subParams {
23+
margin-left: 175px;
24+
margin-top: 10px;
25+
}
26+
27+
.subParam {
28+
margin-bottom: 5px;
29+
display: flex;
30+
}
31+
32+
.subParamName {
33+
font-weight: bold;
34+
margin-right: 5px;
35+
}
36+
37+
.list {
38+
list-style-type: none;
39+
padding-left: 0;
40+
}
41+
42+
.listEntry {
43+
margin-top: 1rem;
44+
}
45+
46+
.guideCodeBlock {
47+
margin-top: 1rem;
48+
margin-bottom: 1rem !important;
49+
}

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

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
module.exports = {
2+
module: {
3+
loaders: [
4+
{
5+
test: /plugin\.css$/,
6+
loaders: [
7+
'style-loader', 'css',
8+
],
9+
},
10+
],
11+
},
12+
};

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

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
import 'draft-js-divider-plugin/lib/plugin.css';

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

+6-2
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import { Link } from 'react-router';
33
import styles from './styles.css';
44

55
export default class NavBar extends Component {
6-
76
render() {
87
return (
98
<div className={styles.pluginsWrapper}>
@@ -97,7 +96,12 @@ export default class NavBar extends Component {
9796
</li>
9897
<li className={styles.plugin}>
9998
<Link to="/plugin/drag-n-drop" className={styles.link}>
100-
{'Drag\'n\'Drop'}
99+
{"Drag'n'Drop"}
100+
</Link>
101+
</li>
102+
<li className={styles.plugin}>
103+
<Link to="/plugin/divider" className={styles.link}>
104+
Divider
101105
</Link>
102106
</li>
103107
</ul>

0 commit comments

Comments
 (0)