Improve documentation and demo

README.md

@@ -5,7 +5,7 @@ draft-js-markdown-plugin
 [![npm](https://img.shields.io/npm/v/draft-js-markdown-plugin.svg)][npm]
 <!-- [![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) -->
 
-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).
+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)
 
 ![screen](screen.gif)
 
@@ -82,7 +82,7 @@ Licensed under the MIT license, Copyright Ⓒ 2017 Space Program Inc. This plugi
 
 See [LICENSE] for the full license text.
 
-[Demo]: https://ngs.github.io/draft-js-markdown-plugin
+[Demo]: https://markdown-plugin.spectrum.chat/
 [DraftJS]: https://facebook.github.io/draft-js/
 [DraftJS Plugins]: https://github.com/draft-js-plugins/draft-js-plugins
 [LICENSE]: ./LICENSE

demo/client/components/DemoEditor/index.js

@@ -4,7 +4,7 @@ import Editor from "draft-js-plugins-editor";
 import createMarkdownShortcutsPlugin from "draft-js-markdown-shortcuts-plugin"; // eslint-disable-line
 import Draft, {
   convertToRaw,
-  // convertFromRaw,
+  convertFromRaw,
   ContentState,
   EditorState,
 } from "draft-js";
@@ -22,52 +22,44 @@ import "prismjs/components/prism-perl";
 import "prismjs/components/prism-ruby";
 import "prismjs/components/prism-swift";
 import createPrismPlugin from "draft-js-prism-plugin";
+import initialState from "./initial-state";
 const prismPlugin = createPrismPlugin({
   prism: Prism,
 });
 
-window.Draft = Draft;
-
 const plugins = [prismPlugin, createMarkdownShortcutsPlugin()];
 
-const contentState = ContentState.createFromText("");
-const initialEditorState = EditorState.createWithContent(contentState);
+const initialEditorState = EditorState.createWithContent(
+  convertFromRaw(initialState)
+);
 
 export default class DemoEditor extends Component {
   state = {
     editorState: initialEditorState,
   };
 
-  componentDidMount = () => {
-    const { editor } = this;
-    if (editor) {
-      setTimeout(editor.focus.bind(editor), 1000);
-    }
-  };
-
   onChange = editorState => {
-    window.editorState = editorState;
-    window.rawContent = convertToRaw(editorState.getCurrentContent());
-
     this.setState({
       editorState,
     });
   };
 
+  focus = () => {
+    this.editor.focus();
+  };
+
   render() {
     const { editorState } = this.state;
-    const placeholder = editorState.getCurrentContent().hasText() ? null : (
-      <div className={styles.placeholder}>Write something here...</div>
-    );
     return (
       <div className={styles.root}>
-        {placeholder}
         <div className={styles.editor} onClick={this.focus}>
           <Editor
             editorState={editorState}
             onChange={this.onChange}
             plugins={plugins}
             spellCheck
+            autoFocus
+            placeholder="Write something here..."
             ref={element => {
               this.editor = element;
             }}

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

@@ -0,0 +1,94 @@
+export default {
+  entityMap: {
+    "0": {
+      type: "LINK",
+      mutability: "MUTABLE",
+      data: {
+        href: "https://github.com/withspectrum/draft-js-markdown-plugin",
+      },
+    },
+  },
+  blocks: [
+    {
+      key: "8ock3",
+      text: "draft-js-markdown-plugin",
+      type: "header-one",
+      depth: 0,
+      inlineStyleRanges: [],
+      entityRanges: [],
+      data: {},
+    },
+    {
+      key: "epvjd",
+      text:
+        "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.",
+      type: "unstyled",
+      depth: 0,
+      inlineStyleRanges: [
+        {
+          offset: 61,
+          length: 34,
+          style: "CODE",
+        },
+        {
+          offset: 97,
+          length: 58,
+          style: "BOLD",
+        },
+      ],
+      entityRanges: [
+        {
+          offset: 12,
+          length: 23,
+          key: 0,
+        },
+      ],
+      data: {},
+    },
+    {
+      key: "e2uqe",
+      text: "Code",
+      type: "header-two",
+      depth: 0,
+      inlineStyleRanges: [],
+      entityRanges: [],
+      data: {},
+    },
+    {
+      key: "5m15n",
+      text: "Let's take a look at some code, shall we?",
+      type: "unstyled",
+      depth: 0,
+      inlineStyleRanges: [
+        {
+          offset: 26,
+          length: 5,
+          style: "ITALIC",
+        },
+      ],
+      entityRanges: [],
+      data: {},
+    },
+    {
+      key: "39j2p",
+      text:
+        "import createMarkdownPlugin from 'draft-js-markdown-plugin';\nconst markdownPlugin = createMarkdownPlugin();",
+      type: "code-block",
+      depth: 0,
+      inlineStyleRanges: [],
+      entityRanges: [],
+      data: {
+        language: "javascript",
+      },
+    },
+    {
+      key: "e4c3t",
+      text: "Nice!",
+      type: "unstyled",
+      depth: 0,
+      inlineStyleRanges: [],
+      entityRanges: [],
+      data: {},
+    },
+  ],
+};

demo/client/components/DemoEditor/styles.css

@@ -1,20 +1,13 @@
 .root {
-  background: #FFF;
+  background: #fff;
   height: 100%;
   position: relative;
+  max-width: 50em;
+  margin: 0 auto;
 }
 
 .editor {
-  margin: 2.5% auto 0 auto;
-  height: 95%;
-  width: 95%;
-}
-
-.placeholder {
-  color: #ccc;
-  font-size: 1em;
-  position: absolute;
-  width: 95%;
-  top: 0;
-  left: 2.5%;
+  padding: 2.5%;
+  height: 100%;
+  width: 100%;
 }

demo/client/index.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { render } from "react-dom";
-import Ribbon from "react-github-fork-ribbon";
+import GitHubCorner from "react-github-corner";
 import DemoEditor from "./components/DemoEditor";
 
 // Import your routes so that you can pass them to the <Router /> component
@@ -9,16 +9,15 @@ import DemoEditor from "./components/DemoEditor";
 // Only render in the browser
 if (typeof document !== "undefined") {
   render(
-    <div>
-      <Ribbon
-        href="https://github.com/ngs/draft-js-markdown-shortcuts-plugin/"
+    <div style={{ height: "100%" }}>
+      <DemoEditor />
+      <GitHubCorner
+        href="https://github.com/withspectrum/draft-js-markdown-plugin"
         target="_blank"
-        position="right"
-        color="black"
+        direction="right"
       >
         Fork me on GitHub
-      </Ribbon>
-      <DemoEditor />
+      </GitHubCorner>
     </div>,
     document.getElementById("root")
   );

demo/index.html.js

@@ -7,7 +7,7 @@ module.exports = props => {
       <meta charset="utf-8"/>
       <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
       <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
-      <title>draft-js-markdown-shortcuts-plugin Demo</title>
+      <title>draft-js-markdown-plugin Demo</title>
       <link rel="stylesheet" href="./css/normalize.css"/>
       <link rel="stylesheet" href="./css/base.css"/>
       <link rel="stylesheet" href="./css/Draft.css"/>
@@ -16,7 +16,6 @@ module.exports = props => {
       <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" />
       <!-- ${new Date()} -->
     </head>
     <body>

package.json

@@ -79,6 +79,7 @@
     "react-addons-pure-render-mixin": "^15.4.1",
     "react-addons-test-utils": "^15.4.1",
     "react-dom": "^15.4.1",
+    "react-github-corner": "^2.0.0",
     "react-github-fork-ribbon": "^0.4.4",
     "rimraf": "^2.5.4",
     "sinon": "^1.17.6",

yarn.lock

@@ -5342,6 +5342,10 @@ react-element-to-jsx-string@^5.0.0:
     stringify-object "2.4.0"
     traverse "^0.6.6"
 
+react-github-corner@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/react-github-corner/-/react-github-corner-2.0.0.tgz#e248f9110afdc03a5e1168f95714795459b1b380"
+
 react-github-fork-ribbon@^0.4.4:
   version "0.4.5"
   resolved "https://registry.yarnpkg.com/react-github-fork-ribbon/-/react-github-fork-ribbon-0.4.5.tgz#2d3586bfde368a19aef7b4a46471e0839c9bc010"