Skip to content

Commit 28c6479

Browse files
ngsngs
committed
Implement code block
1 parent 9b0f26b commit 28c6479

File tree

16 files changed

+291
-69
lines changed

16 files changed

+291
-69
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,3 +37,4 @@ jspm_packages
3737
.node_repl_history
3838

3939
lib
40+
demo/public

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

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,15 +24,13 @@ const contentState = ContentState.createFromText('');
2424
export default class DemoEditor extends Component {
2525

2626
state = {
27-
editorState: EditorState.createWithContent(contentState),
27+
editorState: EditorState.createWithContent(contentState)
2828
};
2929

3030
onChange = (editorState) => {
3131
this.setState({
3232
editorState,
3333
});
34-
35-
// console.log(JSON.stringify(convertToRaw(editorState.getCurrentContent())));
3634
};
3735

3836
render() {

‎demo/index.html.js‎

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,27 @@
1-
module.exports = () => `
1+
module.exports = (props) => {
2+
const body = props && props.body ? props.body : '';
3+
const template = `
24
<!doctype html>
35
<html lang="en">
46
<head>
57
<meta charset="utf-8"/>
68
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
79
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
810
<title>draft-js-markdown-shortcuts-plugin Demo</title>
9-
<link rel="stylesheet" href="/css/normalize.css"/>
10-
<link rel="stylesheet" href="/css/base.css"/>
11-
<link rel="stylesheet" href="/css/Draft.css"/>
12-
<link rel="stylesheet" href="/app.css"/>
11+
<link rel="stylesheet" href="./css/normalize.css"/>
12+
<link rel="stylesheet" href="./css/base.css"/>
13+
<link rel="stylesheet" href="./css/Draft.css"/>
14+
<link rel="stylesheet" href="./css/prism.css"/>
15+
<link rel="stylesheet" href="./css/CheckableListItem.css"/>
16+
<link rel="stylesheet" href="./app.css"/>
1317
<link href="https://fonts.googleapis.com/css?family=Open+Sans:700,300,700i,300i" rel="stylesheet" type="text/css"/>
1418
<link href='https://fonts.googleapis.com/css?family=Inconsolata' rel='stylesheet' type='text/css'>
1519
<link href="//cdn-images.mailchimp.com/embedcode/horizontal-slim-10_7.css" rel="stylesheet" type="text/css" />
1620
</head>
1721
<body>
18-
<div id="root"></div>
19-
<script src="/app.js"></script>
22+
<div id="root">${body}</div>
23+
<script src="./app.js"></script>
2024
</body>
2125
</html>`.trim();
26+
return template.trim();
27+
};

‎demo/publicTemplate/css/CheckableListItem.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
../../../node_modules/draft-js-checkable-list-item/lib/CheckableListItem.css

‎demo/publicTemplate/css/base.css‎

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -22,11 +22,3 @@ figure {
2222
#root {
2323
height: 100%;
2424
}
25-
26-
.checkable-list-item-block__checkbox, .checkable-list-item-block__text, .checkable-list-item-block__text div {
27-
display: inline-block;
28-
}
29-
30-
.checkable-list-item-block__text {
31-
text-indent: .5em;
32-
}

‎demo/publicTemplate/css/prism.css‎

Lines changed: 139 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,139 @@
1+
/* http://prismjs.com/download.html?themes=prism&languages=markup+css+clike+javascript+abap+actionscript+ada+apacheconf+apl+applescript+asciidoc+aspnet+autoit+autohotkey+bash+basic+batch+c+brainfuck+bro+bison+csharp+cpp+coffeescript+ruby+css-extras+d+dart+diff+docker+eiffel+elixir+erlang+fsharp+fortran+gherkin+git+glsl+go+graphql+groovy+haml+handlebars+haskell+haxe+http+icon+inform7+ini+j+jade+java+jolie+json+julia+keyman+kotlin+latex+less+livescript+lolcode+lua+makefile+markdown+matlab+mel+mizar+monkey+nasm+nginx+nim+nix+nsis+objectivec+ocaml+oz+parigp+parser+pascal+perl+php+php-extras+powershell+processing+prolog+properties+protobuf+puppet+pure+python+q+qore+r+jsx+reason+rest+rip+roboconf+crystal+rust+sas+sass+scss+scala+scheme+smalltalk+smarty+sql+stylus+swift+tcl+textile+twig+typescript+verilog+vhdl+vim+wiki+xojo+yaml */
2+
/**
3+
* prism.js default theme for JavaScript, CSS and HTML
4+
* Based on dabblet (http://dabblet.com)
5+
* @author Lea Verou
6+
*/
7+
8+
code[class*="language-"],
9+
pre[class*="language-"] {
10+
color: black;
11+
background: none;
12+
text-shadow: 0 1px white;
13+
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
14+
text-align: left;
15+
white-space: pre;
16+
word-spacing: normal;
17+
word-break: normal;
18+
word-wrap: normal;
19+
line-height: 1.5;
20+
21+
-moz-tab-size: 4;
22+
-o-tab-size: 4;
23+
tab-size: 4;
24+
25+
-webkit-hyphens: none;
26+
-moz-hyphens: none;
27+
-ms-hyphens: none;
28+
hyphens: none;
29+
}
30+
31+
pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
32+
code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
33+
text-shadow: none;
34+
background: #b3d4fc;
35+
}
36+
37+
pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
38+
code[class*="language-"]::selection, code[class*="language-"] ::selection {
39+
text-shadow: none;
40+
background: #b3d4fc;
41+
}
42+
43+
@media print {
44+
code[class*="language-"],
45+
pre[class*="language-"] {
46+
text-shadow: none;
47+
}
48+
}
49+
50+
/* Code blocks */
51+
pre[class*="language-"] {
52+
padding: 1em;
53+
margin: .5em 0;
54+
overflow: auto;
55+
}
56+
57+
:not(pre) > code[class*="language-"],
58+
pre[class*="language-"] {
59+
background: #f5f2f0;
60+
}
61+
62+
/* Inline code */
63+
:not(pre) > code[class*="language-"] {
64+
padding: .1em;
65+
border-radius: .3em;
66+
white-space: normal;
67+
}
68+
69+
.token.comment,
70+
.token.prolog,
71+
.token.doctype,
72+
.token.cdata {
73+
color: slategray;
74+
}
75+
76+
.token.punctuation {
77+
color: #999;
78+
}
79+
80+
.namespace {
81+
opacity: .7;
82+
}
83+
84+
.token.property,
85+
.token.tag,
86+
.token.boolean,
87+
.token.number,
88+
.token.constant,
89+
.token.symbol,
90+
.token.deleted {
91+
color: #905;
92+
}
93+
94+
.token.selector,
95+
.token.attr-name,
96+
.token.string,
97+
.token.char,
98+
.token.builtin,
99+
.token.inserted {
100+
color: #690;
101+
}
102+
103+
.token.operator,
104+
.token.entity,
105+
.token.url,
106+
.language-css .token.string,
107+
.style .token.string {
108+
color: #a67f59;
109+
background: hsla(0, 0%, 100%, .5);
110+
}
111+
112+
.token.atrule,
113+
.token.attr-value,
114+
.token.keyword {
115+
color: #07a;
116+
}
117+
118+
.token.function {
119+
color: #DD4A68;
120+
}
121+
122+
.token.regex,
123+
.token.important,
124+
.token.variable {
125+
color: #e90;
126+
}
127+
128+
.token.important,
129+
.token.bold {
130+
font-weight: bold;
131+
}
132+
.token.italic {
133+
font-style: italic;
134+
}
135+
136+
.token.entity {
137+
cursor: help;
138+
}
139+

‎demo/webpack.config.base.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,13 +22,14 @@ module.exports = {
2222
test: /\.js$/,
2323
loaders: ['babel'],
2424
include: [
25+
path.join(__dirname),
2526
path.join(__dirname, '..', 'src'),
2627
path.join(__dirname, 'client')
2728
],
2829
}, {
2930
test: /\.css$/,
3031
loader: ExtractTextPlugin.extract('style-loader', 'css-loader?modules&importLoaders=1&localIdentName=[local]___[hash:base64:5]!postcss-loader'),
31-
include: path.join(__dirname, 'client/components'),
32+
include: path.join(__dirname, 'client', 'components'),
3233
}
3334
],
3435
},

‎demo/webpack.config.prod.js‎

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,15 @@
22
var path = require('path');
33
var webpack = require('webpack');
44
var ExtractTextPlugin = require('extract-text-webpack-plugin');
5-
var StaticSitePlugin = require('react-static-webpack-plugin');
5+
var StaticSiteGeneratorPlugin = require('static-site-generator-webpack-plugin');
66
var webpackBaseConfig = require('./webpack.config.base');
77

88
module.exports = Object.assign(webpackBaseConfig, {
99
devtool: 'source-map',
1010

1111
entry: {
12-
app: ['./client/index.js'],
12+
app: [path.join(__dirname, 'client', 'index.js')],
13+
main: [path.join(__dirname, 'index.html.js')],
1314
},
1415

1516
output: {
@@ -31,11 +32,6 @@ module.exports = Object.assign(webpackBaseConfig, {
3132
screw_ie8: true,
3233
compressor: { warnings: false },
3334
}),
34-
new StaticSitePlugin({
35-
src: 'app',
36-
stylesheet: '/app.css',
37-
favicon: '/favicon.ico',
38-
template: path.join(__dirname, 'index.html.js'),
39-
}),
35+
new StaticSiteGeneratorPlugin('main', ['/'], {}),
4036
],
4137
});

‎package.json‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
"clean": "node_modules/.bin/rimraf lib",
88
"build": "npm run clean && npm run build:js",
99
"build:js": "BABEL_DISABLE_CACHE=1 BABEL_ENV=production NODE_ENV=production node_modules/.bin/babel --out-dir='lib' --ignore='**/__test__/*' src",
10+
"build:demo": "NODE_ENV=production webpack --config demo/webpack.config.prod.js && rm -rf demo/public/css && cp -R demo/publicTemplate/* demo/public/",
1011
"prepublish": "npm run build",
1112
"start:dev": "node_modules/.bin/babel-node ./demo/server.js",
1213
"start": "npm run start:dev",
@@ -62,16 +63,16 @@
6263
"postcss-loader": "^1.1.1",
6364
"react-addons-pure-render-mixin": "^15.4.1",
6465
"react-addons-test-utils": "^15.4.1",
65-
"react-router": "^2.4.0",
66-
"react-static-webpack-plugin": "^1.3.0",
6766
"rimraf": "^2.5.4",
67+
"static-site-generator-webpack-plugin": "^3.1.0",
6868
"style-loader": "^0.13.1",
6969
"url-loader": "^0.5.7",
7070
"webpack": "^1.13.3",
7171
"webpack-dev-middleware": "^1.8.4",
7272
"webpack-hot-middleware": "^2.13.2"
7373
},
7474
"dependencies": {
75+
"draft-js-prism": "^1.0.3",
7576
"decorate-component-with-props": "^1.0.2",
7677
"draft-js": "^0.9.1",
7778
"draft-js-checkable-list-item": "^2.0.2",

‎src/components/CodeBlock/index.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import React from 'react';
2+
3+
const CodeBlock = ({ children }) => <code className="language-js">{children}</code>;
4+
5+
export default CodeBlock;

0 commit comments

Comments
 (0)