Update demo styles

Author: ngs

demo/client/components/DemoEditor/index.js

@@ -20,8 +20,8 @@ import 'prismjs/components/prism-perl';
 import 'prismjs/components/prism-ruby';
 import 'prismjs/components/prism-swift';
 import createPrismPlugin from 'draft-js-prism-plugin';
-import styles from './styles.css';
 import createMarkdownShortcutsPlugin from '../../../..'; // eslint-disable-line
+import styled from 'styled-components';
 
 const prismPlugin = createPrismPlugin({
   prism: Prism,
@@ -58,12 +58,12 @@ export default class DemoEditor extends Component {
   render() {
     const { editorState } = this.state;
     const placeholder = editorState.getCurrentContent().hasText() ? null : (
-      <div className={styles.placeholder}>Write something here...</div>
+      <Placeholder>Write something here...</Placeholder>
     );
     return (
-      <div className={styles.root}>
+      <Root>
         {placeholder}
-        <div className={styles.editor} onClick={this.focus} onKeyDown={this.focus}>
+        <EditorContainer onClick={this.focus} onKeyDown={this.focus}>
           <Editor
             editorState={editorState}
             onChange={this.onChange}
@@ -73,8 +73,29 @@ export default class DemoEditor extends Component {
               this.editor = element;
             }}
           />
-        </div>
-      </div>
+        </EditorContainer>
+      </Root>
     );
   }
 }
+
+const Root = styled.div`
+  background: #fff;
+  height: 100%;
+  position: relative;
+`;
+
+const Placeholder = styled.div`
+  color: #ccc;
+  font-size: 1em;
+  position: absolute;
+  width: 95%;
+  top: 0;
+  left: 2.5%;
+`;
+
+const EditorContainer = styled.div`
+  margin: 2.5% auto 0 auto;
+  height: 95%;
+  width: 95%;
+`;

demo/client/components/DemoEditor/styles.css

@@ -7,10 +7,8 @@
     <title>draft-js-markdown-shortcuts-plugin Demo</title>
     <link rel="stylesheet" href="./css/normalize.css"/>
     <link rel="stylesheet" href="./css/base.css"/>
-    <link rel="stylesheet" href="./css/Draft.css"/>
     <link rel="stylesheet" href="./css/prism.css"/>
     <link rel="stylesheet" href="./css/CheckableListItem.css"/>
-    <link rel="stylesheet" href="./app.css"/>
     <link href="https://fonts.googleapis.com/css?family=Open+Sans:700,300,700i,300i" rel="stylesheet" type="text/css"/>
     <link href='https://fonts.googleapis.com/css?family=Inconsolata' rel='stylesheet' type='text/css'>
     <link href="//cdn-images.mailchimp.com/embedcode/horizontal-slim-10_7.css" rel="stylesheet" type="text/css" />

demo/publicTemplate/index.html

@@ -16,10 +16,6 @@ module.exports = {
         exclude: /node_modules/,
         loader: 'babel-loader',
       },
-      {
-        test: /\.css$/,
-        use: ['style-loader', 'css-loader', 'postcss-loader'],
-      },
     ],
   },
   devServer: {

demo/webpack.config.dev.js

@@ -16,14 +16,6 @@ module.exports = {
         exclude: /node_modules/,
         loader: 'babel-loader',
       },
-      {
-        test: /\.css$/,
-        use: ['style-loader', 'css-loader', 'postcss-loader'],
-      },
     ],
   },
-  devServer: {
-    contentBase: [path.join(__dirname, 'public'), path.join(__dirname, 'publicTemplate')],
-    port: process.env.PORT || 3001,
-  },
 };

demo/webpack.config.prod.js

@@ -12,7 +12,7 @@
     "prepare": "npm run build",
     "prepublish": "npm run build",
     "start": "npm run start:dev",
-    "start:dev": "node_modules/.bin/babel-node ./demo/server.js",
+    "start:dev": "webpack-dev-server --config demo/webpack.config.dev.js",
     "test": "npm run test:coverage",
     "test:coverage": "node_modules/.bin/nyc --require @babel/register npm run test:mocha",
     "test:mocha": "BABEL_ENV=test mocha",
@@ -22,14 +22,21 @@
   },
   "watch": {
     "test": {
-      "patterns": ["src/**/*.js"]
+      "patterns": [
+        "src/**/*.js"
+      ]
     }
   },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/ngs/draft-js-markdown-shortcuts-plugin.git"
   },
-  "keywords": ["draftjs", "editor", "plugin", "markdown"],
+  "keywords": [
+    "draftjs",
+    "editor",
+    "plugin",
+    "markdown"
+  ],
   "author": "Atsushi Nagase",
   "license": "MIT",
   "bugs": {
@@ -91,6 +98,7 @@
     "sinon": "^9.0.2",
     "sinon-chai": "^3.5.0",
     "style-loader": "^1.2.1",
+    "styled-components": "^5.1.1",
     "url-loader": "^4.1.0",
     "webpack": "~4.43.0",
     "webpack-cli": "^3.3.11",
@@ -101,7 +109,9 @@
     "react": "^16.13.1",
     "react-dom": "^16.13.1"
   },
-  "contributors": ["Atsushi Nagase <a@ngs.io>"],
+  "contributors": [
+    "Atsushi Nagase <a@ngs.io>"
+  ],
   "dependencies": {
     "decorate-component-with-props": "^1.1.0",
     "draft-js": "~0.11.5",