Skip to content
This repository was archived by the owner on May 31, 2020. It is now read-only.

Commit ef8c76d

Browse files
juliankrispeljuliankrispel
authored
Merge pull request #42 from draft-js-plugins/example/divider
Add example for divider
2 parents 880e0ab + 78dd79c commit ef8c76d

File tree

8 files changed

+13450
-1
lines changed

8 files changed

+13450
-1
lines changed

‎examples/divider-example/README.md‎

Lines changed: 2164 additions & 0 deletions
Large diffs are not rendered by default.

‎examples/divider-example/package-lock.json‎

Lines changed: 11090 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/divider-example/package.json‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
{
2+
"name": "@djsp/divider-example",
3+
"homepage": "https://github.com/draft-js-plugins/next#readme",
4+
"version": "0.1.5",
5+
"private": true,
6+
"license": "MIT",
7+
"dependencies": {
8+
"@djsp/atomic-block": "^0.1.5",
9+
"@djsp/core": "^0.1.5",
10+
"react": "^16.2.0",
11+
"react-dom": "^16.2.0",
12+
"react-scripts": "^1.1.1"
13+
},
14+
"scripts": {
15+
"start": "react-scripts start",
16+
"build": "react-scripts build",
17+
"test": "react-scripts test --env=jsdom",
18+
"eject": "react-scripts eject"
19+
},
20+
"devDependencies": {
21+
"draft-js": "^0.10.5"
22+
}
23+
}

‎examples/divider-example/public/index.html‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
6+
<meta name="theme-color" content="#000000">
7+
8+
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
9+
10+
<title>@djsp/divider-example</title>
11+
</head>
12+
13+
<body>
14+
<noscript>
15+
You need to enable JavaScript to run this app.
16+
</noscript>
17+
18+
<div id="root"></div>
19+
</body>
20+
</html>

‎examples/divider-example/src/InsertDivider.js‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
// @flow
2+
3+
import React, { Component, Fragment } from 'react'
4+
import { Plugin } from '@djsp/core'
5+
import AtomicBlock from '@djsp/atomic-block'
6+
import { insertEntityBlock } from '@djsp/utils'
7+
8+
type Props = {
9+
editorState: EditorState,
10+
setEditorState: EditorState => void,
11+
}
12+
13+
class DividerButton extends Component<Props> {
14+
onClick = event => {
15+
event.stopPropagation()
16+
17+
const { setEditorState, editorState } = this.props
18+
setEditorState(insertEntityBlock(editorState, 'divider'))
19+
}
20+
21+
render() {
22+
return (
23+
<button type="button" onClick={this.onClick}>
24+
Insert divider
25+
</button>
26+
)
27+
}
28+
}
29+
30+
const InsertDivider = () => (
31+
<Fragment>
32+
<AtomicBlock type="divider">
33+
{({ isFocused }) => (
34+
<hr className={isFocused ? 'divider focused' : 'divider'} />
35+
)}
36+
</AtomicBlock>
37+
38+
<Plugin>
39+
{({ editorState, setEditorState }) => (
40+
<DividerButton
41+
editorState={editorState}
42+
setEditorState={setEditorState}
43+
/>
44+
)}
45+
</Plugin>
46+
</Fragment>
47+
)
48+
49+
export default InsertDivider

‎examples/divider-example/src/index.js‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import React, { Component } from 'react'
2+
import ReactDOM from 'react-dom'
3+
4+
import { EditorState, convertFromRaw } from 'draft-js'
5+
import { EditorContainer, Editor } from '@djsp/core'
6+
import InsertDivider from './InsertDivider'
7+
import './styles.css'
8+
9+
const rawContent = {
10+
blocks: [
11+
{
12+
text: 'Here is the divider!',
13+
},
14+
{
15+
type: 'atomic',
16+
text: ' ',
17+
entityRanges: [
18+
{
19+
key: 0,
20+
length: 1,
21+
offset: 0,
22+
},
23+
],
24+
},
25+
{
26+
text: 'You can add another divider below.',
27+
},
28+
],
29+
entityMap: {
30+
0: {
31+
mutability: 'IMMUTABLE',
32+
type: 'DIVIDER',
33+
},
34+
},
35+
}
36+
37+
class App extends Component {
38+
state = {
39+
editorState: EditorState.createWithContent(convertFromRaw(rawContent)),
40+
}
41+
42+
onChange = editorState => this.setState({ editorState })
43+
44+
render() {
45+
return (
46+
<div>
47+
<EditorContainer
48+
editorState={this.state.editorState}
49+
onChange={this.onChange}>
50+
<Editor />
51+
<InsertDivider />
52+
</EditorContainer>
53+
</div>
54+
)
55+
}
56+
}
57+
58+
ReactDOM.render(<App />, document.getElementById('root'))

‎examples/divider-example/src/styles.css‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
body {
2+
font-family: sans-serif;
3+
font-size: 1.8em;
4+
padding: 1em;
5+
background: #12312e;
6+
}
7+
8+
.public-DraftEditor-content {
9+
padding: 2em;
10+
border-radius: 5px;
11+
color: #fff;
12+
border: #555;
13+
background: #244a46;
14+
}
15+
16+
17+
.divider {
18+
display: flex;
19+
align-items: center;
20+
justify-content: center;
21+
width: 100%;
22+
height: 100%;
23+
margin: 32px 0;
24+
border: none; /* strip default hr styling */
25+
text-align: center;
26+
}
27+
28+
.divider::after {
29+
margin-left: 48px;
30+
color: rgba(0, 0, 0, 0.26); /* pick a color */
31+
font-size: 2.125rem;
32+
letter-spacing: 48px; /* increase space between dots */
33+
content: '•••';
34+
}
35+
36+
.divider:hover {
37+
border-radius: 2px;
38+
box-shadow: 0 0 0 2px #D2E3F7;
39+
}
40+
41+
.divider.focused {
42+
border-radius: 2px;
43+
box-shadow: 0 0 0 2px #ACCEF7;
44+
}

‎packages/atomic-block/README.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,4 +42,5 @@ yarn add @djsp/utils @djsp/atomic-block
4242

4343

4444
## Examples
45-
- [Editor with image](https://codesandbox.io/s/github/draft-js-plugins/next/tree/master/examples/atomic-block)
45+
- [Editor with image](https://codesandbox.io/s/github/draft-js-plugins/next/tree/master/examples/atomic-block)
46+
- [Editor with divider](https://codesandbox.io/s/github/draft-js-plugins/next/tree/master/examples/divider-example)

0 commit comments

Comments
 (0)