Add demo

SamyPesse · May 25, 2016 · 3ed8928 · 3ed8928
1 parent b3879ec
commit 3ed8928
Show file tree

Hide file tree

Showing 6 changed files with 320 additions and 6 deletions.
diff --git a/.gitignore b/.gitignore
@@ -31,3 +31,7 @@ node_modules
 
 # Optional REPL history
 .node_repl_history
+
+demo/dist.js
+demo/draft.css
+demo/prism.css
diff --git a/demo/editor.css b/demo/editor.css
@@ -0,0 +1,63 @@
+.RichEditor-root {
+  background: #fff;
+  border: 1px solid #ddd;
+  font-family: 'Georgia', serif;
+  font-size: 14px;
+  padding: 15px;
+}
+
+.RichEditor-editor {
+  border-top: 1px solid #ddd;
+  cursor: text;
+  font-size: 16px;
+  margin-top: 10px;
+}
+
+.RichEditor-editor .public-DraftEditorPlaceholder-root,
+.RichEditor-editor .public-DraftEditor-content {
+  margin: 0 -15px -15px;
+  padding: 15px;
+}
+
+.RichEditor-editor .public-DraftEditor-content {
+  min-height: 100px;
+}
+
+.RichEditor-hidePlaceholder .public-DraftEditorPlaceholder-root {
+  display: none;
+}
+
+.RichEditor-editor .RichEditor-blockquote {
+  border-left: 5px solid #eee;
+  color: #666;
+  font-family: 'Hoefler Text', 'Georgia', serif;
+  font-style: italic;
+  margin: 16px 0;
+  padding: 10px 20px;
+}
+
+.RichEditor-editor .public-DraftStyleDefault-pre {
+  background-color: rgba(0, 0, 0, 0.05);
+  font-family: 'Inconsolata', 'Menlo', 'Consolas', monospace;
+  font-size: 16px;
+  padding: 20px;
+}
+
+.RichEditor-controls {
+  font-family: 'Helvetica', sans-serif;
+  font-size: 14px;
+  margin-bottom: 5px;
+  user-select: none;
+}
+
+.RichEditor-styleButton {
+  color: #999;
+  cursor: pointer;
+  margin-right: 16px;
+  padding: 2px 0;
+  display: inline-block;
+}
+
+.RichEditor-activeButton {
+  color: #5890ff;
+}
diff --git a/demo/index.html b/demo/index.html
@@ -0,0 +1,30 @@
+<!--
+Copyright (c) 2013-present, Facebook, Inc. All rights reserved.
+
+This file provided by Facebook is for non-commercial testing and evaluation
+purposes only. Facebook reserves all rights not expressly granted.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN
+ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+-->
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>Draft • Code Highlighting</title>
+    <link rel="stylesheet" href="draft.css" />
+    <link rel="stylesheet" href="prism.css" />
+    <link rel="stylesheet" href="editor.css" />
+    <style>
+      #target { width: 600px; }
+    </style>
+  </head>
+  <body>
+    <div id="target"></div>
+    <script src="dist.js"></script>
+  </body>
+</html>
diff --git a/demo/main.js b/demo/main.js
@@ -0,0 +1,206 @@
+const Draft = require('draft-js');
+const React = require('react');
+const Immutable = require('immutable');
+const ReactDOM = require('react-dom');
+const PrismDraftDecorator = require('../')
+
+const {
+    Editor,
+    EditorState,
+    RichUtils,
+    DefaultDraftBlockRenderMap,
+    Decorator
+} = Draft;
+
+const {Map, List} = Immutable;
+
+class PrismEditorExample extends React.Component {
+    constructor(props) {
+        super(props);
+
+        var decorator = new PrismDraftDecorator(Prism.languages.javascript);
+
+        this.state = {
+            editorState: EditorState.createEmpty(decorator),
+        };
+
+        this.focus = () => this.refs.editor.focus();
+        this.onChange = (editorState) => this.setState({editorState});
+
+        this.handleKeyCommand = (command) => this._handleKeyCommand(command);
+        this.toggleBlockType = (type) => this._toggleBlockType(type);
+        this.toggleInlineStyle = (style) => this._toggleInlineStyle(style);
+    }
+
+    _handleKeyCommand(command) {
+        const {editorState} = this.state;
+        const newState = RichUtils.handleKeyCommand(editorState, command);
+        if (newState) {
+            this.onChange(newState);
+            return true;
+        }
+        return false;
+    }
+
+    _toggleBlockType(blockType) {
+        this.onChange(
+            RichUtils.toggleBlockType(
+                this.state.editorState,
+                blockType
+            )
+        );
+    }
+
+    _toggleInlineStyle(inlineStyle) {
+        this.onChange(
+            RichUtils.toggleInlineStyle(
+                this.state.editorState,
+                inlineStyle
+            )
+        );
+    }
+
+    render() {
+        const {editorState} = this.state;
+
+        // If the user changes block type before entering any text, we can
+        // either style the placeholder or hide it. Let's just hide it now.
+        let className = 'RichEditor-editor';
+        var contentState = editorState.getCurrentContent();
+        if (!contentState.hasText()) {
+            if (contentState.getBlockMap().first().getType() !== 'unstyled') {
+                className += ' RichEditor-hidePlaceholder';
+            }
+        }
+
+        return (
+            <div className="RichEditor-root">
+                <BlockStyleControls
+                    editorState={editorState}
+                    onToggle={this.toggleBlockType}
+                />
+                <InlineStyleControls
+                    editorState={editorState}
+                    onToggle={this.toggleInlineStyle}
+                />
+                <div className={className} onClick={this.focus}>
+                    <Editor
+                        blockStyleFn={getBlockStyle}
+                        customStyleMap={styleMap}
+                        editorState={editorState}
+                        handleKeyCommand={this.handleKeyCommand}
+                        onChange={this.onChange}
+                        placeholder="Tell a story..."
+                        ref="editor"
+                        spellCheck={true}
+                    />
+                </div>
+            </div>
+        );
+    }
+}
+
+// Custom overrides for "code" style.
+const styleMap = {
+    CODE: {
+        backgroundColor: 'rgba(0, 0, 0, 0.05)',
+        fontFamily: '"Inconsolata", "Menlo", "Consolas", monospace',
+        fontSize: 16,
+        padding: 2,
+    },
+};
+
+function getBlockStyle(block) {
+    switch (block.getType()) {
+        case 'blockquote': return 'RichEditor-blockquote';
+        default: return null;
+    }
+}
+
+class StyleButton extends React.Component {
+    constructor() {
+        super();
+        this.onToggle = (e) => {
+            e.preventDefault();
+            this.props.onToggle(this.props.style);
+        };
+    }
+
+    render() {
+        let className = 'RichEditor-styleButton';
+        if (this.props.active) {
+            className += ' RichEditor-activeButton';
+        }
+
+        return (
+            <span className={className} onMouseDown={this.onToggle}>
+                {this.props.label}
+            </span>
+        );
+    }
+}
+
+const BLOCK_TYPES = [
+    {label: 'H1', style: 'header-one'},
+    {label: 'H2', style: 'header-two'},
+    {label: 'H3', style: 'header-three'},
+    {label: 'H4', style: 'header-four'},
+    {label: 'H5', style: 'header-five'},
+    {label: 'H6', style: 'header-six'},
+    {label: 'Blockquote', style: 'blockquote'},
+    {label: 'UL', style: 'unordered-list-item'},
+    {label: 'OL', style: 'ordered-list-item'},
+    {label: 'Code Block', style: 'code-block'},
+];
+
+const BlockStyleControls = (props) => {
+    const {editorState} = props;
+    const selection = editorState.getSelection();
+    const blockType = editorState
+        .getCurrentContent()
+        .getBlockForKey(selection.getStartKey())
+        .getType();
+
+    return (
+        <div className="RichEditor-controls">
+            {BLOCK_TYPES.map((type) =>
+                <StyleButton
+                    key={type.label}
+                    active={type.style === blockType}
+                    label={type.label}
+                    onToggle={props.onToggle}
+                    style={type.style}
+                />
+            )}
+        </div>
+    );
+};
+
+var INLINE_STYLES = [
+    {label: 'Bold', style: 'BOLD'},
+    {label: 'Italic', style: 'ITALIC'},
+    {label: 'Underline', style: 'UNDERLINE'},
+    {label: 'Monospace', style: 'CODE'},
+];
+
+const InlineStyleControls = (props) => {
+    var currentStyle = props.editorState.getCurrentInlineStyle();
+    return (
+        <div className="RichEditor-controls">
+            {INLINE_STYLES.map(type =>
+                <StyleButton
+                    key={type.label}
+                    active={currentStyle.has(type.style)}
+                    label={type.label}
+                    onToggle={props.onToggle}
+                    style={type.style}
+                />
+            )}
+        </div>
+    );
+};
+
+ReactDOM.render(
+    <PrismEditorExample />,
+    document.getElementById('target')
+);
diff --git a/lib/index.js b/lib/index.js
@@ -1,5 +1,5 @@
 var Immutable = require('immutable');
-var Prism = require('prism');
+var Prism = require('prismjs');
 
 var PrismOptions = require('./options');
 
@@ -46,7 +46,7 @@ PrismDecorator.prototype.getDecorations = function(block) {
             tokenId = 'tok'+offset;
             resultId = blockKey + '-' + tokenId;
 
-            that.highlighted[blockKey][tokenId] = token;
+            this.highlighted[blockKey][tokenId] = token;
 
             occupySlice(decorations, offset, offset + token.content.length, resultId);
             offset += token.content.length;

diff --git a/package.json b/package.json
@@ -4,7 +4,12 @@
   "description": "Code highlighting for DraftJS",
   "main": "./lib/index.js",
   "scripts": {
-    "test": "export TESTING=true; mocha --reporter spec --bail"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "browserify -t [ babelify --presets [ es2015 react ] ] ./demo/main.js > ./demo/dist.js; cp ./node_modules/prismjs/themes/prism.css ./demo/prism.css; cp ./node_modules/draft-js/dist/Draft.css ./demo/draft.css",
+    "deploy": "npm run build; gh-pages -d ./demo",
+    "watch": "watch 'npm run build' ./lib",
+    "serve": "http-server -p 9090 demo/",
+    "start": "npm run build; parallelshell 'npm run serve -s' 'npm run watch -s'"
   },
   "repository": {
     "type": "git",
@@ -25,9 +30,15 @@
   },
   "devDependencies": {
     "draft-js": "^0.7.0",
-    "expect": "^1.20.1",
-    "mocha": "^2.5.3",
     "react": "^15.1.0",
-    "react-dom": "^15.1.0"
+    "react-dom": "^15.1.0",
+    "babel-preset-es2015": "^6.6.0",
+    "babel-preset-react": "^6.5.0",
+    "babelify": "^7.2.0",
+    "browserify": "^13.0.0",
+    "gh-pages": "^0.11.0",
+    "http-server": "^0.9.0",
+    "watch": "^0.18.0",
+    "parallelshell": "2.0.0"
   }
 }