Skip to content
This repository was archived by the owner on Oct 11, 2022. It is now read-only.

Commit bf27f6e

Browse files
mxstbrmxstbr
authored
Merge pull request #12 from withspectrum/improve-docs
Improve documentation and demo
2 parents 320956a + eb973ae commit bf27f6e

File tree

8 files changed

+126
-44
lines changed

8 files changed

+126
-44
lines changed

‎README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ draft-js-markdown-plugin
55
[![npm](https://img.shields.io/npm/v/draft-js-markdown-plugin.svg)][npm]
66
<!-- [![Coverage Status](https://coveralls.io/repos/github/withspectrum/draft-js-markdown-plugin/badge.svg?branch=master)](https://coveralls.io/github/withspectrum/draft-js-markdown-plugin?branch=master) -->
77

8-
A [DraftJS] plugin for supporting Markdown syntax shortcuts in DraftJS. This plugin works with [DraftJS Plugins], and is a fork of the excellent [`draft-js-markdown-shortcuts-plugin`](https://github.com/ngs/draft-js-markdown-shortcuts-plugin) by [@ngs](https://github.com/ngs).
8+
A [DraftJS] plugin for supporting Markdown syntax shortcuts in DraftJS. This plugin works with [DraftJS Plugins], and is a fork of the excellent [`draft-js-markdown-shortcuts-plugin`](https://github.com/ngs/draft-js-markdown-shortcuts-plugin) by [@ngs](https://github.com/ngs). (see [why fork that plugin](#why-fork-the-markdown-shortcuts-plugin) for more info)
99

1010
![screen](screen.gif)
1111

@@ -82,7 +82,7 @@ Licensed under the MIT license, Copyright Ⓒ 2017 Space Program Inc. This plugi
8282

8383
See [LICENSE] for the full license text.
8484

85-
[Demo]: https://ngs.github.io/draft-js-markdown-plugin
85+
[Demo]: https://markdown-plugin.spectrum.chat/
8686
[DraftJS]: https://facebook.github.io/draft-js/
8787
[DraftJS Plugins]: https://github.com/draft-js-plugins/draft-js-plugins
8888
[LICENSE]: ./LICENSE

‎demo/client/components/DemoEditor/index.js‎

Lines changed: 11 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import Editor from "draft-js-plugins-editor";
44
import createMarkdownShortcutsPlugin from "draft-js-markdown-shortcuts-plugin"; // eslint-disable-line
55
import Draft, {
66
convertToRaw,
7-
// convertFromRaw,
7+
convertFromRaw,
88
ContentState,
99
EditorState,
1010
} from "draft-js";
@@ -22,52 +22,44 @@ import "prismjs/components/prism-perl";
2222
import "prismjs/components/prism-ruby";
2323
import "prismjs/components/prism-swift";
2424
import createPrismPlugin from "draft-js-prism-plugin";
25+
import initialState from "./initial-state";
2526
const prismPlugin = createPrismPlugin({
2627
prism: Prism,
2728
});
2829

29-
window.Draft = Draft;
30-
3130
const plugins = [prismPlugin, createMarkdownShortcutsPlugin()];
3231

33-
const contentState = ContentState.createFromText("");
34-
const initialEditorState = EditorState.createWithContent(contentState);
32+
const initialEditorState = EditorState.createWithContent(
33+
convertFromRaw(initialState)
34+
);
3535

3636
export default class DemoEditor extends Component {
3737
state = {
3838
editorState: initialEditorState,
3939
};
4040

41-
componentDidMount = () => {
42-
const { editor } = this;
43-
if (editor) {
44-
setTimeout(editor.focus.bind(editor), 1000);
45-
}
46-
};
47-
4841
onChange = editorState => {
49-
window.editorState = editorState;
50-
window.rawContent = convertToRaw(editorState.getCurrentContent());
51-
5242
this.setState({
5343
editorState,
5444
});
5545
};
5646

47+
focus = () => {
48+
this.editor.focus();
49+
};
50+
5751
render() {
5852
const { editorState } = this.state;
59-
const placeholder = editorState.getCurrentContent().hasText() ? null : (
60-
<div className={styles.placeholder}>Write something here...</div>
61-
);
6253
return (
6354
<div className={styles.root}>
64-
{placeholder}
6555
<div className={styles.editor} onClick={this.focus}>
6656
<Editor
6757
editorState={editorState}
6858
onChange={this.onChange}
6959
plugins={plugins}
7060
spellCheck
61+
autoFocus
62+
placeholder="Write something here..."
7163
ref={element => {
7264
this.editor = element;
7365
}}

‎demo/client/components/DemoEditor/initial-state.js‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
export default {
2+
entityMap: {
3+
"0": {
4+
type: "LINK",
5+
mutability: "MUTABLE",
6+
data: {
7+
href: "https://github.com/withspectrum/draft-js-markdown-plugin",
8+
},
9+
},
10+
},
11+
blocks: [
12+
{
13+
key: "8ock3",
14+
text: "draft-js-markdown-plugin",
15+
type: "header-one",
16+
depth: 0,
17+
inlineStyleRanges: [],
18+
entityRanges: [],
19+
data: {},
20+
},
21+
{
22+
key: "epvjd",
23+
text:
24+
"This is the DraftJS Markdown plugin, a fork of the excellent draft-js-markdown-shortcuts-plugin. This text you're seeing right now is actual DraftJS state! Go on, edit it and play around with different markdown syntax.",
25+
type: "unstyled",
26+
depth: 0,
27+
inlineStyleRanges: [
28+
{
29+
offset: 61,
30+
length: 34,
31+
style: "CODE",
32+
},
33+
{
34+
offset: 97,
35+
length: 58,
36+
style: "BOLD",
37+
},
38+
],
39+
entityRanges: [
40+
{
41+
offset: 12,
42+
length: 23,
43+
key: 0,
44+
},
45+
],
46+
data: {},
47+
},
48+
{
49+
key: "e2uqe",
50+
text: "Code",
51+
type: "header-two",
52+
depth: 0,
53+
inlineStyleRanges: [],
54+
entityRanges: [],
55+
data: {},
56+
},
57+
{
58+
key: "5m15n",
59+
text: "Let's take a look at some code, shall we?",
60+
type: "unstyled",
61+
depth: 0,
62+
inlineStyleRanges: [
63+
{
64+
offset: 26,
65+
length: 5,
66+
style: "ITALIC",
67+
},
68+
],
69+
entityRanges: [],
70+
data: {},
71+
},
72+
{
73+
key: "39j2p",
74+
text:
75+
"import createMarkdownPlugin from 'draft-js-markdown-plugin';\nconst markdownPlugin = createMarkdownPlugin();",
76+
type: "code-block",
77+
depth: 0,
78+
inlineStyleRanges: [],
79+
entityRanges: [],
80+
data: {
81+
language: "javascript",
82+
},
83+
},
84+
{
85+
key: "e4c3t",
86+
text: "Nice!",
87+
type: "unstyled",
88+
depth: 0,
89+
inlineStyleRanges: [],
90+
entityRanges: [],
91+
data: {},
92+
},
93+
],
94+
};

‎demo/client/components/DemoEditor/styles.css‎

Lines changed: 6 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,13 @@
11
.root {
2-
background: #FFF;
2+
background: #fff;
33
height: 100%;
44
position: relative;
5+
max-width: 50em;
6+
margin: 0 auto;
57
}
68

79
.editor {
8-
margin: 2.5% auto 0 auto;
9-
height: 95%;
10-
width: 95%;
11-
}
12-
13-
.placeholder {
14-
color: #ccc;
15-
font-size: 1em;
16-
position: absolute;
17-
width: 95%;
18-
top: 0;
19-
left: 2.5%;
10+
padding: 2.5%;
11+
height: 100%;
12+
width: 100%;
2013
}

‎demo/client/index.js‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from "react";
22
import { render } from "react-dom";
3-
import Ribbon from "react-github-fork-ribbon";
3+
import GitHubCorner from "react-github-corner";
44
import DemoEditor from "./components/DemoEditor";
55

66
// Import your routes so that you can pass them to the <Router /> component
@@ -9,16 +9,15 @@ import DemoEditor from "./components/DemoEditor";
99
// Only render in the browser
1010
if (typeof document !== "undefined") {
1111
render(
12-
<div>
13-
<Ribbon
14-
href="https://github.com/ngs/draft-js-markdown-shortcuts-plugin/"
12+
<div style={{ height: "100%" }}>
13+
<DemoEditor />
14+
<GitHubCorner
15+
href="https://github.com/withspectrum/draft-js-markdown-plugin"
1516
target="_blank"
16-
position="right"
17-
color="black"
17+
direction="right"
1818
>
1919
Fork me on GitHub
20-
</Ribbon>
21-
<DemoEditor />
20+
</GitHubCorner>
2221
</div>,
2322
document.getElementById("root")
2423
);

‎demo/index.html.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ module.exports = props => {
77
<meta charset="utf-8"/>
88
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
99
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
10-
<title>draft-js-markdown-shortcuts-plugin Demo</title>
10+
<title>draft-js-markdown-plugin Demo</title>
1111
<link rel="stylesheet" href="./css/normalize.css"/>
1212
<link rel="stylesheet" href="./css/base.css"/>
1313
<link rel="stylesheet" href="./css/Draft.css"/>
@@ -16,7 +16,6 @@ module.exports = props => {
1616
<link rel="stylesheet" href="./app.css"/>
1717
<link href="https://fonts.googleapis.com/css?family=Open+Sans:700,300,700i,300i" rel="stylesheet" type="text/css"/>
1818
<link href='https://fonts.googleapis.com/css?family=Inconsolata' rel='stylesheet' type='text/css'>
19-
<link href="//cdn-images.mailchimp.com/embedcode/horizontal-slim-10_7.css" rel="stylesheet" type="text/css" />
2019
<!-- ${new Date()} -->
2120
</head>
2221
<body>

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,7 @@
7979
"react-addons-pure-render-mixin": "^15.4.1",
8080
"react-addons-test-utils": "^15.4.1",
8181
"react-dom": "^15.4.1",
82+
"react-github-corner": "^2.0.0",
8283
"react-github-fork-ribbon": "^0.4.4",
8384
"rimraf": "^2.5.4",
8485
"sinon": "^1.17.6",

‎yarn.lock‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5342,6 +5342,10 @@ react-element-to-jsx-string@^5.0.0:
53425342
stringify-object "2.4.0"
53435343
traverse "^0.6.6"
53445344

5345+
react-github-corner@^2.0.0:
5346+
version "2.0.0"
5347+
resolved "https://registry.yarnpkg.com/react-github-corner/-/react-github-corner-2.0.0.tgz#e248f9110afdc03a5e1168f95714795459b1b380"
5348+
53455349
react-github-fork-ribbon@^0.4.4:
53465350
version "0.4.5"
53475351
resolved "https://registry.yarnpkg.com/react-github-fork-ribbon/-/react-github-fork-ribbon-0.4.5.tgz#2d3586bfde368a19aef7b4a46471e0839c9bc010"

0 commit comments

Comments
 (0)