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

Commit 52bedb6

Browse files
juliankrispeljuliankrispel
authored
Merge pull request #45 from draft-js-plugins/example/undo
Add undo example
2 parents ef8c76d + 78d89ba commit 52bedb6

File tree

9 files changed

+14454
-0
lines changed

9 files changed

+14454
-0
lines changed

‎examples/undo-example/README.md‎

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

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

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

‎examples/undo-example/package.json‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
{
2+
"name": "@djsp/undo-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/core": "^0.1.5",
9+
"react": "^16.2.0",
10+
"react-dom": "^16.2.0",
11+
"react-scripts": "^1.1.1"
12+
},
13+
"scripts": {
14+
"start": "react-scripts start",
15+
"build": "react-scripts build",
16+
"test": "react-scripts test --env=jsdom",
17+
"eject": "react-scripts eject"
18+
},
19+
"devDependencies": {
20+
"draft-js": "^0.10.5"
21+
}
22+
}

‎examples/undo-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/suggestions</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/undo-example/src/Undo/components/Redo.js‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
// @flow
2+
3+
import React, { Component } from 'react'
4+
import { EditorState } from 'draft-js'
5+
6+
type Props = {
7+
editorState: EditorState,
8+
setEditorState: EditorState => void,
9+
}
10+
11+
class Redo extends Component<Props> {
12+
onClick = event => {
13+
event.stopPropagation()
14+
this.props.setEditorState(EditorState.redo(this.props.editorState))
15+
}
16+
17+
render() {
18+
return (
19+
<button
20+
disabled={
21+
!this.props.editorState ||
22+
this.props.editorState.getRedoStack().isEmpty()
23+
}
24+
type="button"
25+
onClick={this.onClick}>
26+
redo
27+
</button>
28+
)
29+
}
30+
}
31+
32+
export default Redo

‎examples/undo-example/src/Undo/components/Undo.js‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
// @flow
2+
3+
import React, { Component } from 'react'
4+
import { EditorState } from 'draft-js'
5+
6+
type Props = {
7+
editorState: EditorState,
8+
setEditorState: EditorState => void,
9+
}
10+
11+
class Undo extends Component<Props> {
12+
onClick = event => {
13+
event.stopPropagation()
14+
this.props.setEditorState(EditorState.undo(this.props.editorState))
15+
}
16+
17+
render() {
18+
return (
19+
<button
20+
disabled={
21+
!this.props.editorState ||
22+
this.props.editorState.getUndoStack().isEmpty()
23+
}
24+
type="button"
25+
onClick={this.onClick}>
26+
undo
27+
</button>
28+
)
29+
}
30+
}
31+
32+
export default Undo

‎examples/undo-example/src/Undo/index.js‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import React from 'react'
2+
import { Plugin } from '@djsp/core'
3+
import Redo from './components/Redo'
4+
import Undo from './components/Undo'
5+
6+
const RedoButton = () => (
7+
<Plugin>
8+
{({ editorState, setEditorState }) => (
9+
<Redo editorState={editorState} setEditorState={setEditorState} />
10+
)}
11+
</Plugin>
12+
)
13+
14+
const UndoButton = () => (
15+
<Plugin>
16+
{({ editorState, setEditorState }) => (
17+
<Undo editorState={editorState} setEditorState={setEditorState} />
18+
)}
19+
</Plugin>
20+
)
21+
22+
export { RedoButton, UndoButton }

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

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import React, { Component } from 'react'
2+
import ReactDOM from 'react-dom'
3+
4+
import { EditorState, ContentState } from 'draft-js'
5+
import { EditorContainer, Editor } from '@djsp/core'
6+
import { RedoButton, UndoButton } from './Undo'
7+
import './styles.css'
8+
9+
class App extends Component {
10+
state = {
11+
editorState: EditorState.createWithContent(
12+
ContentState.createFromText(
13+
'Just type something and click the undo and redo button!'
14+
)
15+
),
16+
}
17+
18+
onChange = editorState => this.setState({ editorState })
19+
20+
render() {
21+
return (
22+
<div>
23+
<EditorContainer
24+
editorState={this.state.editorState}
25+
onChange={this.onChange}>
26+
<RedoButton />
27+
<UndoButton />
28+
<Editor />
29+
</EditorContainer>
30+
</div>
31+
)
32+
}
33+
}
34+
35+
ReactDOM.render(<App />, document.getElementById('root'))

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

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
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+
}

0 commit comments

Comments
 (0)