merge master to image-support

CHANGELOG.md

@@ -1,3 +1,33 @@
+v0.1.17
+
+  - Remove hard-coded height from RichTextEditor.css
+
+v0.1.16
+
+  - Update peerDependencies to allow React 0.14
+  - Pass extra props to <Editor />
+
+v0.1.15
+
+  - Update Flow and fix some Flow errors
+
+v0.1.14
+
+  - Update README about building demo
+
+v0.1.13
+
+  - Updates to demo including better display on mobile
+  - Remove console.error hack
+  - Minor style fixes to dropdown component
+
+v0.1.12
+
+  - Updates to README
+  - CSS fix for transparent dropdown options. Fixes #26
+  - Fix placeholder text that was hard-coded in component
+  - Update contributors
+
 v0.1.11
 
   - Add onTab handler for list indent

assets/css/demo.css

@@ -91,3 +91,7 @@ a {
   white-space: pre;
   word-wrap: normal;
 }
+
+.editor-demo .react-rte-demo .public-DraftEditor-content {
+  min-height: 110px;
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-rte",
-  "version": "0.1.14",
+  "version": "0.3.0",
   "description": "React Rich Text Editor",
   "main": "dist/react-rte.js",
   "scripts": {
@@ -11,46 +11,46 @@
     "typecheck": "flow",
     "prepublish": "npm run build",
     "test": "npm run lint && npm run typecheck && npm run test-src",
-    "test-src": "mocha"
+    "test-src": "mocha src/__tests__/*.js src/**/__tests__/*.js"
   },
   "dependencies": {
     "class-autobind": "^0.1.2",
     "classnames": "^2.2.5",
-    "draft-js": "^0.6.0",
-    "draft-js-export-html": "^0.1.13",
-    "draft-js-export-markdown": "^0.1.5",
-    "draft-js-import-html": "^0.1.8",
-    "draft-js-import-markdown": "^0.1.4",
-    "draft-js-utils": "^0.1.4",
+    "draft-js": "^0.7.0",
+    "draft-js-export-html": "^0.2.2",
+    "draft-js-export-markdown": "^0.2.0",
+    "draft-js-import-html": "^0.1.10",
+    "draft-js-import-markdown": "^0.1.6",
+    "draft-js-utils": "^0.1.5",
     "immutable": "^3.8.1"
   },
   "peerDependencies": {
-    "react": "^15.0.1",
-    "react-dom": "^15.0.1"
+    "react": "0.14.x || 15.x.x",
+    "react-dom": "0.14.x || 15.x.x"
   },
   "devDependencies": {
-    "babel-cli": "^6.8.0",
-    "babel-core": "^6.8.0",
+    "babel-cli": "^6.9.0",
+    "babel-core": "^6.9.0",
     "babel-eslint": "^6.0.4",
     "babel-loader": "^6.2.3",
-    "babel-plugin-transform-class-properties": "^6.8.0",
-    "babel-preset-es2015": "^6.5.0",
+    "babel-plugin-transform-class-properties": "^6.9.0",
+    "babel-preset-es2015": "^6.9.0",
     "babel-preset-react": "^6.5.0",
     "babel-preset-stage-2": "^6.5.0",
     "css-loader": "^0.23.1",
     "css-modules-require-hook": "^4.0.0",
-    "eslint": "^2.9.0",
+    "eslint": "^2.10.2",
     "eslint-plugin-babel": "^3.2.0",
     "eslint-plugin-flow-vars": "^0.4.0",
-    "eslint-plugin-react": "^5.0.1",
-    "expect": "^1.19.0",
-    "flow-bin": "^0.22.1",
+    "eslint-plugin-react": "^5.1.1",
+    "expect": "^1.20.1",
+    "flow-bin": "^0.25.0",
     "mocha": "^2.4.5",
     "raw-loader": "^0.5.1",
     "react-addons-test-utils": "^15.0.2",
     "rimraf": "^2.5.2",
     "style-loader": "^0.13.1",
-    "webpack": "^1.13.0"
+    "webpack": "^1.13.1"
   },
   "repository": {
     "type": "git",

src/EditorDemo.js

@@ -27,6 +27,7 @@ export default class EditorDemo extends Component {
 
   render(): React.Element {
     let {value, format} = this.state;
+
     return (
       <div className="editor-demo">
         <div className="row">
@@ -36,7 +37,10 @@ export default class EditorDemo extends Component {
           <RichTextEditor
             value={value}
             onChange={this._onChange}
+            className="react-rte-demo"
             placeholder="Tell a story"
+            toolbarClassName="demo-toolbar"
+            editorClassName="demo-editor"
           />
         </div>
         <div className="row">

src/RichTextEditor.css

@@ -21,7 +21,6 @@
 }
 
 .editor :global(.public-DraftEditor-content) {
-  height: 110px;
   overflow: auto;
 }
 

src/RichTextEditor.js

@@ -38,9 +38,12 @@ type ChangeHandler = (value: EditorValue) => any;
 
 type Props = {
   className?: string;
+  toolbarClassName?: string;
+  editorClassName?: string;
   value: EditorValue;
   onChange?: ChangeHandler;
   placeholder?: string;
+  customStyleMap?: {[style: string]: {[key: string]: any}};
 };
 
 export default class RichTextEditor extends Component {
@@ -54,28 +57,30 @@ export default class RichTextEditor extends Component {
   }
 
   render(): React.Element {
-    let {props} = this;
-    let editorState = props.value.getEditorState();
-    let className = cx(props.className, styles.root);
-    let placeholder = props.placeholder ? props.placeholder : '';
+    let {value, className, toolbarClassName, editorClassName, placeholder, customStyleMap, ...otherProps} = this.props;
+    let editorState = value.getEditorState();
+    customStyleMap = customStyleMap ? {...styleMap, ...customStyleMap} : styleMap;
+
     // If the user changes block type before entering any text, we can either
     // style the placeholder or hide it. Let's just hide it for now.
-    let editorClassName = cx({
+    let combinedEditorClassName = cx({
       [styles.editor]: true,
       [styles.hidePlaceholder]: this._shouldHidePlaceholder(),
-    });
+    }, editorClassName);
     return (
-      <div className={className}>
+      <div className={cx(styles.root, className)}>
         <EditorToolbar
+          className={toolbarClassName}
           keyEmitter={this._keyEmitter}
           editorState={editorState}
           onChange={this._onChange}
           focusEditor={this._focus}
         />
-        <div className={editorClassName}>
+        <div className={combinedEditorClassName}>
           <Editor
+            {...otherProps}
             blockStyleFn={getBlockStyle}
-            customStyleMap={styleMap}
+            customStyleMap={customStyleMap}
             editorState={editorState}
             handleReturn={this._handleReturn}
             keyBindingFn={this._customKeyHandler}

src/lib/EditorToolbar.js

@@ -18,6 +18,7 @@ import IconButton from '../ui/IconButton';
 import getEntityAtCursor from './getEntityAtCursor';
 import clearEntityForRange from './clearEntityForRange';
 import autobind from 'class-autobind';
+import cx from 'classnames';
 
 // $FlowIssue - Flow doesn't understand CSS Modules
 import styles from './EditorToolbar.css';
@@ -27,6 +28,7 @@ import type {EventEmitter} from 'events';
 type ChangeHandler = (state: EditorState) => any;
 
 type Props = {
+  className?: string;
   editorState: EditorState;
   keyEmitter: EventEmitter;
   onChange: ChangeHandler;
@@ -60,8 +62,9 @@ export default class EditorToolbar extends Component {
   }
 
   render(): React.Element {
+    const {className} = this.props;
     return (
-      <div className={styles.root}>
+      <div className={cx(styles.root, className)}>
         {this._renderInlineStyleButtons()}
         {this._renderBlockTypeButtons()}
         {this._renderLinkButtons()}

test/mocha.opts

@@ -1,3 +1,2 @@
 --compilers js:babel-core/register
 --require ./test/init.js
-src/__tests__/*.js src/**/__tests__/*.js