diff --git a/CHANGELOG.md b/CHANGELOG.md index 8eb07599..1a70849f 100644 --- a/CHANGELOG.md +++ b/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 + +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 diff --git a/assets/css/demo.css b/assets/css/demo.css index 5105eec7..600741ef 100644 --- a/assets/css/demo.css +++ b/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; +} diff --git a/package.json b/package.json index 70887f06..eadbd072 100644 --- a/package.json +++ b/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", diff --git a/src/EditorDemo.js b/src/EditorDemo.js index 380111a7..40c035d9 100644 --- a/src/EditorDemo.js +++ b/src/EditorDemo.js @@ -27,6 +27,7 @@ export default class EditorDemo extends Component { render(): React.Element { let {value, format} = this.state; + return (
@@ -36,7 +37,10 @@ export default class EditorDemo extends Component {
diff --git a/src/RichTextEditor.css b/src/RichTextEditor.css index fc1ac993..6c424441 100644 --- a/src/RichTextEditor.css +++ b/src/RichTextEditor.css @@ -21,7 +21,6 @@ } .editor :global(.public-DraftEditor-content) { - height: 110px; overflow: auto; } diff --git a/src/RichTextEditor.js b/src/RichTextEditor.js index 13e8c968..da937fd8 100644 --- a/src/RichTextEditor.js +++ b/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 ( -
+
-
+
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 ( -
+
{this._renderInlineStyleButtons()} {this._renderBlockTypeButtons()} {this._renderLinkButtons()} diff --git a/test/mocha.opts b/test/mocha.opts index a7a82c62..54abcf1c 100644 --- a/test/mocha.opts +++ b/test/mocha.opts @@ -1,3 +1,2 @@ --compilers js:babel-core/register --require ./test/init.js -src/__tests__/*.js src/**/__tests__/*.js