![\"WYSIWYG](\"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/10\/react_draftjs_wysiwyg_editor.gif\")
Features<\/h2>\n\n\n\n- Configurable toolbar with option to add\/remove controls.<\/li>
- Option to change the order of the controls in the toolbar.<\/li>
- Option to add custom controls to the toolbar.<\/li>
- Option to change styles and icons in the toolbar.<\/li>
- Option to show toolbar only when editor is focused.<\/li>
- Support for inline styles: Bold, Italic, Underline, StrikeThrough, Code, Subscript, Superscript.<\/li>
- Support for block types: Paragraph, H1 – H6, Blockquote, Code.<\/li>
- Support for setting font-size and font-family.<\/li>
- Support for ordered \/ unordered lists and indenting.<\/li>
- Support for text-alignment.<\/li>
- Support for coloring text or background.<\/li>
- Support for adding \/ editing links<\/li>
- Choice of more than 150 emojis.<\/li>
- Support for mentions.<\/li>
- Support for hashtags.<\/li>
- Support for adding \/ uploading images.<\/li>
- Support for aligning images, setting height, width.<\/li>
- Support for Embedded links, flexibility to set height and width.<\/li>
- Option provided to remove added styling.<\/li>
- Option of undo and redo.<\/li>
- Configurable behavior for RTL and Spellcheck.<\/li>
- Support for placeholder.<\/li>
- Support for WAI-ARIA Support attributes<\/li>
- Using editor as controlled or un-controlled React component.<\/li>
- Support to convert Editor Content to HTML, JSON, Markdown.<\/li>
- Support to convert the HTML generated by the editor back to editor content.<\/li>
- Support for internationalization.<\/li><\/ul>\n\n\n\n
Source Code of React WYSIWYG Editor Using Draft.js<\/h2>\n\n\n\npackage.json<\/h3>\n\n\n\n{\n "name": "react-draft-wysiwyg",\n "version": "1.15.0",\n "description": "A wysiwyg on top of DraftJS.",\n "main": "dist\/react-draft-wysiwyg.js",\n "repository": {\n "type": "git",\n "url": "https:\/\/github.com\/jpuri\/react-draft-wysiwyg.git"\n },\n "author": "Jyoti Puri",\n "devDependencies": {\n "@babel\/core": "^7.7.4",\n "@babel\/preset-env": "^7.7.4",\n "@babel\/preset-react": "^7.7.4",\n "@babel\/register": "^7.7.4",\n "@storybook\/react": "^5.2.8",\n "autoprefixer": "^9.7.3",\n "babel-eslint": "^10.0.3",\n "babel-loader": "^8.0.6",\n "babel-plugin-transform-flow-strip-types": "^6.22.0",\n "chai": "^4.2.0",\n "cross-env": "^6.0.3",\n "css-loader": "^3.2.1",\n "draft-js": "^0.11.2",\n "draftjs-to-html": "^0.9.0",\n "draftjs-to-markdown": "^0.6.0",\n "embed-video": "^2.0.4",\n "enzyme": "^3.10.0",\n "enzyme-adapter-react-16": "^1.15.1",\n "eslint": "^6.7.2",\n "eslint-config-airbnb": "^18.0.1",\n "eslint-plugin-import": "^2.18.2",\n "eslint-plugin-jsx-a11y": "^6.2.3",\n "eslint-plugin-mocha": "^6.2.2",\n "eslint-plugin-react": "^7.17.0",\n "file-loader": "^5.0.2",\n "flow-bin": "^0.113.0",\n "immutable": "^4.0.0-rc.12",\n "jsdom": "^15.2.1",\n "mini-css-extract-plugin": "^0.8.0",\n "mocha": "^6.2.2",\n "postcss-loader": "^3.0.0",\n "precss": "^4.0.0",\n "react": "^16.12.0",\n "react-addons-test-utils": "^15.6.2",\n "react-dom": "^16.12.0",\n "react-test-renderer": "^16.12.0",\n "rimraf": "^3.0.0",\n "sinon": "^7.5.0",\n "style-loader": "^1.0.1",\n "uglifyjs-webpack-plugin": "^2.2.0",\n "url-loader": "^3.0.0",\n "webpack": "^4.41.2",\n "webpack-bundle-analyzer": "^3.6.0",\n "webpack-cli": "^3.3.10"\n },\n "dependencies": {\n "classnames": "^2.2.6",\n "draftjs-utils": "^0.10.2",\n "html-to-draftjs": "^1.5.0",\n "linkify-it": "^2.2.0",\n "prop-types": "^15.7.2"\n },\n "peerDependencies": {\n "draft-js": "^0.10.x || ^0.11.x",\n "immutable": "3.x.x || 4.x.x",\n "react": "0.13.x || 0.14.x || ^15.0.0-0 || 15.x.x || ^16.0.0-0 || ^16.x.x || ^17.x.x || ^18.x.x",\n "react-dom": "0.13.x || 0.14.x || ^15.0.0-0 || 15.x.x || ^16.0.0-0 || ^16.x.x || ^17.x.x || ^18.x.x"\n },\n "scripts": {\n "clean": "rimraf dist",\n "build:webpack": "cross-env NODE_ENV=production webpack --mode production --config config\/webpack.config.js",\n "build": "npm run clean && npm run build:webpack",\n "test": "cross-env BABEL_ENV=test mocha --require config\/test-compiler.js config\/test-setup.js src\/**\/*Test.js",\n "lint": "eslint src",\n "lintdocs": "eslint docs\/src",\n "flow": "flow; test $? -eq 0 -o $? -eq 2",\n "check": "npm run lint && npm run flow",\n "storybook": "start-storybook -p 6006",\n "build-storybook": "build-storybook"\n },\n "license": "MIT"\n}<\/pre><\/div>\n\n\n\nindex.js<\/h3>\n\n\n\nimport React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport {\n Editor,\n EditorState,\n RichUtils,\n convertToRaw,\n convertFromRaw,\n CompositeDecorator,\n getDefaultKeyBinding,\n} from 'draft-js';\nimport {\n changeDepth,\n handleNewLine,\n blockRenderMap,\n getCustomStyleMap,\n extractInlineStyle,\n getSelectedBlocksType,\n} from 'draftjs-utils';\nimport classNames from 'classnames';\nimport ModalHandler from '..\/event-handler\/modals';\nimport FocusHandler from '..\/event-handler\/focus';\nimport KeyDownHandler from '..\/event-handler\/keyDown';\nimport SuggestionHandler from '..\/event-handler\/suggestions';\nimport blockStyleFn from '..\/utils\/BlockStyle';\nimport { mergeRecursive } from '..\/utils\/toolbar';\nimport { hasProperty, filter } from '..\/utils\/common';\nimport { handlePastedText } from '..\/utils\/handlePaste';\nimport Controls from '..\/controls';\nimport getLinkDecorator from '..\/decorators\/Link';\nimport getMentionDecorators from '..\/decorators\/Mention';\nimport getHashtagDecorator from '..\/decorators\/HashTag';\nimport getBlockRenderFunc from '..\/renderer';\nimport defaultToolbar from '..\/config\/defaultToolbar';\nimport localeTranslations from '..\/i18n';\nimport '.\/styles.css';\nimport '..\/..\/css\/Draft.css';\n\nclass WysiwygEditor extends Component {\n constructor(props) {\n super(props);\n const toolbar = mergeRecursive(defaultToolbar, props.toolbar);\n const wrapperId = props.wrapperId\n ? props.wrapperId\n : Math.floor(Math.random() * 10000);\n this.wrapperId = `rdw-wrapper-${wrapperId}`;\n this.modalHandler = new ModalHandler();\n this.focusHandler = new FocusHandler();\n this.blockRendererFn = getBlockRenderFunc(\n {\n isReadOnly: this.isReadOnly,\n isImageAlignmentEnabled: this.isImageAlignmentEnabled,\n getEditorState: this.getEditorState,\n onChange: this.onChange,\n },\n props.customBlockRenderFunc\n );\n this.editorProps = this.filterEditorProps(props);\n this.customStyleMap = this.getStyleMap(props);\n this.compositeDecorator = this.getCompositeDecorator(toolbar);\n const editorState = this.createEditorState(this.compositeDecorator);\n extractInlineStyle(editorState);\n this.state = {\n editorState,\n editorFocused: false,\n toolbar,\n };\n }\n\n componentDidMount() {\n this.modalHandler.init(this.wrapperId);\n }\n \/\/ todo: change decorators depending on properties recceived in componentWillReceiveProps.\n\n componentDidUpdate(prevProps) {\n if (prevProps === this.props) return;\n const newState = {};\n const { editorState, contentState } = this.props;\n if (!this.state.toolbar) {\n const toolbar = mergeRecursive(defaultToolbar, toolbar);\n newState.toolbar = toolbar;\n }\n if (\n hasProperty(this.props, 'editorState') &&\n editorState !== prevProps.editorState\n ) {\n if (editorState) {\n newState.editorState = EditorState.set(editorState, {\n decorator: this.compositeDecorator,\n });\n } else {\n newState.editorState = EditorState.createEmpty(this.compositeDecorator);\n }\n } else if (\n hasProperty(this.props, 'contentState') &&\n contentState !== prevProps.contentState\n ) {\n if (contentState) {\n const newEditorState = this.changeEditorState(contentState);\n if (newEditorState) {\n newState.editorState = newEditorState;\n }\n } else {\n newState.editorState = EditorState.createEmpty(this.compositeDecorator);\n }\n }\n if (\n prevProps.editorState !== editorState ||\n prevProps.contentState !== contentState\n ) {\n extractInlineStyle(newState.editorState);\n }\n if (Object.keys(newState).length) this.setState(newState);\n this.editorProps = this.filterEditorProps(this.props);\n this.customStyleMap = this.getStyleMap(this.props);\n }\n\n onEditorBlur = () => {\n this.setState({\n editorFocused: false,\n });\n };\n\n onEditorFocus = event => {\n const { onFocus } = this.props;\n this.setState({\n editorFocused: true,\n });\n const editFocused = this.focusHandler.isEditorFocused();\n if (onFocus && editFocused) {\n onFocus(event);\n }\n };\n\n onEditorMouseDown = () => {\n this.focusHandler.onEditorMouseDown();\n };\n\n keyBindingFn = event => {\n if (event.key === 'Tab') {\n const { onTab } = this.props;\n if (!onTab || !onTab(event)) {\n const editorState = changeDepth(\n this.state.editorState,\n event.shiftKey ? -1 : 1,\n 4\n );\n if (editorState && editorState !== this.state.editorState) {\n this.onChange(editorState);\n event.preventDefault();\n }\n }\n return null;\n }\n if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {\n if (SuggestionHandler.isOpen()) {\n event.preventDefault();\n }\n }\n return getDefaultKeyBinding(event);\n };\n\n onToolbarFocus = event => {\n const { onFocus } = this.props;\n if (onFocus && this.focusHandler.isToolbarFocused()) {\n onFocus(event);\n }\n };\n\n onWrapperBlur = event => {\n const { onBlur } = this.props;\n if (onBlur && this.focusHandler.isEditorBlur(event)) {\n onBlur(event, this.getEditorState());\n }\n };\n\n onChange = editorState => {\n const { readOnly, onEditorStateChange } = this.props;\n if (\n !readOnly &&\n !(\n getSelectedBlocksType(editorState) === 'atomic' &&\n editorState.getSelection().isCollapsed\n )\n ) {\n if (onEditorStateChange) {\n onEditorStateChange(editorState, this.props.wrapperId);\n }\n if (!hasProperty(this.props, 'editorState')) {\n this.setState({ editorState }, this.afterChange(editorState));\n } else {\n this.afterChange(editorState);\n }\n }\n };\n\n setWrapperReference = ref => {\n this.wrapper = ref;\n };\n\n setEditorReference = ref => {\n if (this.props.editorRef) {\n this.props.editorRef(ref);\n }\n this.editor = ref;\n };\n\n getCompositeDecorator = toolbar => {\n const decorators = [\n ...this.props.customDecorators,\n getLinkDecorator({\n showOpenOptionOnHover: toolbar.link.showOpenOptionOnHover,\n }),\n ];\n if (this.props.mention) {\n decorators.push(\n ...getMentionDecorators({\n ...this.props.mention,\n onChange: this.onChange,\n getEditorState: this.getEditorState,\n getSuggestions: this.getSuggestions,\n getWrapperRef: this.getWrapperRef,\n modalHandler: this.modalHandler,\n })\n );\n }\n if (this.props.hashtag) {\n decorators.push(getHashtagDecorator(this.props.hashtag));\n }\n return new CompositeDecorator(decorators);\n };\n\n getWrapperRef = () => this.wrapper;\n\n getEditorState = () => this.state ? this.state.editorState : null;\n\n getSuggestions = () => this.props.mention && this.props.mention.suggestions;\n\n afterChange = editorState => {\n setTimeout(() => {\n const { onChange, onContentStateChange } = this.props;\n if (onChange) {\n onChange(convertToRaw(editorState.getCurrentContent()));\n }\n if (onContentStateChange) {\n onContentStateChange(convertToRaw(editorState.getCurrentContent()));\n }\n });\n };\n\n isReadOnly = () => this.props.readOnly;\n\n isImageAlignmentEnabled = () => this.state.toolbar.image.alignmentEnabled;\n\n createEditorState = compositeDecorator => {\n let editorState;\n if (hasProperty(this.props, 'editorState')) {\n if (this.props.editorState) {\n editorState = EditorState.set(this.props.editorState, {\n decorator: compositeDecorator,\n });\n }\n } else if (hasProperty(this.props, 'defaultEditorState')) {\n if (this.props.defaultEditorState) {\n editorState = EditorState.set(this.props.defaultEditorState, {\n decorator: compositeDecorator,\n });\n }\n } else if (hasProperty(this.props, 'contentState')) {\n if (this.props.contentState) {\n const contentState = convertFromRaw(this.props.contentState);\n editorState = EditorState.createWithContent(\n contentState,\n compositeDecorator\n );\n editorState = EditorState.moveSelectionToEnd(editorState);\n }\n } else if (\n hasProperty(this.props, 'defaultContentState') ||\n hasProperty(this.props, 'initialContentState')\n ) {\n let contentState =\n this.props.defaultContentState || this.props.initialContentState;\n if (contentState) {\n contentState = convertFromRaw(contentState);\n editorState = EditorState.createWithContent(\n contentState,\n compositeDecorator\n );\n editorState = EditorState.moveSelectionToEnd(editorState);\n }\n }\n if (!editorState) {\n editorState = EditorState.createEmpty(compositeDecorator);\n }\n return editorState;\n };\n\n filterEditorProps = props =>\n filter(props, [\n 'onChange',\n 'onEditorStateChange',\n 'onContentStateChange',\n 'initialContentState',\n 'defaultContentState',\n 'contentState',\n 'editorState',\n 'defaultEditorState',\n 'locale',\n 'localization',\n 'toolbarOnFocus',\n 'toolbar',\n 'toolbarCustomButtons',\n 'toolbarClassName',\n 'editorClassName',\n 'toolbarHidden',\n 'wrapperClassName',\n 'toolbarStyle',\n 'editorStyle',\n 'wrapperStyle',\n 'uploadCallback',\n 'onFocus',\n 'onBlur',\n 'onTab',\n 'mention',\n 'hashtag',\n 'ariaLabel',\n 'customBlockRenderFunc',\n 'customDecorators',\n 'handlePastedText',\n 'customStyleMap',\n ]);\n\n getStyleMap = props => ({ ...getCustomStyleMap(), ...props.customStyleMap });\n\n changeEditorState = contentState => {\n const newContentState = convertFromRaw(contentState);\n let { editorState } = this.state;\n editorState = EditorState.push(\n editorState,\n newContentState,\n 'insert-characters'\n );\n editorState = EditorState.moveSelectionToEnd(editorState);\n return editorState;\n };\n\n focusEditor = () => {\n setTimeout(() => {\n this.editor.focus();\n });\n };\n\n handleKeyCommand = command => {\n const {\n editorState,\n toolbar: { inline },\n } = this.state;\n if (inline && inline.options.indexOf(command) >= 0) {\n const newState = RichUtils.handleKeyCommand(editorState, command);\n if (newState) {\n this.onChange(newState);\n return true;\n }\n }\n return false;\n };\n\n handleReturn = event => {\n if (SuggestionHandler.isOpen()) {\n return true;\n }\n const { editorState } = this.state;\n const newEditorState = handleNewLine(editorState, event);\n if (newEditorState) {\n this.onChange(newEditorState);\n return true;\n }\n return false;\n };\n\n handlePastedTextFn = (text, html) => {\n const { editorState } = this.state;\n const {\n handlePastedText: handlePastedTextProp,\n stripPastedStyles,\n } = this.props;\n\n if (handlePastedTextProp) {\n return handlePastedTextProp(text, html, editorState, this.onChange);\n }\n if (!stripPastedStyles) {\n return handlePastedText(text, html, editorState, this.onChange);\n }\n return false;\n };\n\n preventDefault = event => {\n if (\n event.target.tagName === 'INPUT' ||\n event.target.tagName === 'LABEL' ||\n event.target.tagName === 'TEXTAREA'\n ) {\n this.focusHandler.onInputMouseDown();\n } else {\n event.preventDefault();\n }\n };\n\n render() {\n const { editorState, editorFocused, toolbar } = this.state;\n const {\n locale,\n localization: { locale: newLocale, translations },\n toolbarCustomButtons,\n toolbarOnFocus,\n toolbarClassName,\n toolbarHidden,\n editorClassName,\n wrapperClassName,\n toolbarStyle,\n editorStyle,\n wrapperStyle,\n uploadCallback,\n ariaLabel,\n } = this.props;\n\n const controlProps = {\n modalHandler: this.modalHandler,\n editorState,\n onChange: this.onChange,\n translations: {\n ...localeTranslations[locale || newLocale],\n ...translations,\n },\n };\n const toolbarShow =\n editorFocused || this.focusHandler.isInputFocused() || !toolbarOnFocus;\n return (\n <div\n id={this.wrapperId}\n className={classNames(wrapperClassName, 'rdw-editor-wrapper')}\n style={wrapperStyle}\n onClick={this.modalHandler.onEditorClick}\n onBlur={this.onWrapperBlur}\n aria-label="rdw-wrapper"\n >\n {!toolbarHidden && (\n <div\n className={classNames('rdw-editor-toolbar', toolbarClassName)}\n style={{\n visibility: toolbarShow ? 'visible' : 'hidden',\n ...toolbarStyle,\n }}\n onMouseDown={this.preventDefault}\n aria-label="rdw-toolbar"\n aria-hidden={(!editorFocused && toolbarOnFocus).toString()}\n onFocus={this.onToolbarFocus}\n >\n {toolbar.options.map((opt, index) => {\n const Control = Controls[opt];\n const config = toolbar[opt];\n if (opt === 'image' && uploadCallback) {\n config.uploadCallback = uploadCallback;\n }\n return <Control key={index} {...controlProps} config={config} \/>;\n })}\n {toolbarCustomButtons &&\n toolbarCustomButtons.map((button, index) =>\n React.cloneElement(button, { key: index, ...controlProps })\n )}\n <\/div>\n )}\n <div\n ref={this.setWrapperReference}\n className={classNames(editorClassName, 'rdw-editor-main')}\n style={editorStyle}\n onClick={this.focusEditor}\n onFocus={this.onEditorFocus}\n onBlur={this.onEditorBlur}\n onKeyDown={KeyDownHandler.onKeyDown}\n onMouseDown={this.onEditorMouseDown}\n >\n <Editor\n ref={this.setEditorReference}\n keyBindingFn={this.keyBindingFn}\n editorState={editorState}\n onChange={this.onChange}\n blockStyleFn={blockStyleFn}\n customStyleMap={this.getStyleMap(this.props)}\n handleReturn={this.handleReturn}\n handlePastedText={this.handlePastedTextFn}\n blockRendererFn={this.blockRendererFn}\n handleKeyCommand={this.handleKeyCommand}\n ariaLabel={ariaLabel || 'rdw-editor'}\n blockRenderMap={blockRenderMap}\n {...this.editorProps}\n \/>\n <\/div>\n <\/div>\n );\n }\n}\n\nWysiwygEditor.propTypes = {\n onChange: PropTypes.func,\n onEditorStateChange: PropTypes.func,\n onContentStateChange: PropTypes.func,\n \/\/ initialContentState is deprecated\n initialContentState: PropTypes.object,\n defaultContentState: PropTypes.object,\n contentState: PropTypes.object,\n editorState: PropTypes.object,\n defaultEditorState: PropTypes.object,\n toolbarOnFocus: PropTypes.bool,\n spellCheck: PropTypes.bool, \/\/ eslint-disable-line react\/no-unused-prop-types\n stripPastedStyles: PropTypes.bool, \/\/ eslint-disable-line react\/no-unused-prop-types\n toolbar: PropTypes.object,\n toolbarCustomButtons: PropTypes.array,\n toolbarClassName: PropTypes.string,\n toolbarHidden: PropTypes.bool,\n locale: PropTypes.string,\n localization: PropTypes.object,\n editorClassName: PropTypes.string,\n wrapperClassName: PropTypes.string,\n toolbarStyle: PropTypes.object,\n editorStyle: PropTypes.object,\n wrapperStyle: PropTypes.object,\n uploadCallback: PropTypes.func,\n onFocus: PropTypes.func,\n onBlur: PropTypes.func,\n onTab: PropTypes.func,\n mention: PropTypes.object,\n hashtag: PropTypes.object,\n textAlignment: PropTypes.string, \/\/ eslint-disable-line react\/no-unused-prop-types\n readOnly: PropTypes.bool,\n tabIndex: PropTypes.number, \/\/ eslint-disable-line react\/no-unused-prop-types\n placeholder: PropTypes.string, \/\/ eslint-disable-line react\/no-unused-prop-types\n ariaLabel: PropTypes.string,\n ariaOwneeID: PropTypes.string, \/\/ eslint-disable-line react\/no-unused-prop-types\n ariaActiveDescendantID: PropTypes.string, \/\/ eslint-disable-line react\/no-unused-prop-types\n ariaAutoComplete: PropTypes.string, \/\/ eslint-disable-line react\/no-unused-prop-types\n ariaDescribedBy: PropTypes.string, \/\/ eslint-disable-line react\/no-unused-prop-types\n ariaExpanded: PropTypes.string, \/\/ eslint-disable-line react\/no-unused-prop-types\n ariaHasPopup: PropTypes.string, \/\/ eslint-disable-line react\/no-unused-prop-types\n customBlockRenderFunc: PropTypes.func,\n wrapperId: PropTypes.number,\n customDecorators: PropTypes.array,\n editorRef: PropTypes.func,\n handlePastedText: PropTypes.func,\n};\n\nWysiwygEditor.defaultProps = {\n toolbarOnFocus: false,\n toolbarHidden: false,\n stripPastedStyles: false,\n localization: { locale: 'en', translations: {} },\n customDecorators: [],\n};\n\nexport default WysiwygEditor;\n\n\/\/ todo: evaluate draftjs-utils to move some methods here\n\/\/ todo: move color near font-family<\/pre><\/div>\n\n\n\nstyles.css<\/h3>\n\n\n\n.rdw-editor-main {\n height: 100%;\n overflow: auto;\n box-sizing: border-box;\n}\n.rdw-editor-toolbar {\n padding: 6px 5px 0;\n border-radius: 2px;\n border: 1px solid #F1F1F1;\n display: flex;\n justify-content: flex-start;\n background: white;\n flex-wrap: wrap;\n font-size: 15px;\n margin-bottom: 5px;\n user-select: none;\n}\n.public-DraftStyleDefault-block {\n margin: 1em 0;\n}\n.rdw-editor-wrapper:focus {\n outline: none;\n}\n.rdw-editor-wrapper {\n box-sizing: content-box;\n}\n.rdw-editor-main blockquote {\n border-left: 5px solid #f1f1f1;\n padding-left: 5px;\n}\n.rdw-editor-main pre {\n background: #f1f1f1;\n border-radius: 3px;\n padding: 1px 10px;\n}<\/pre><\/div>\n\n\n\nLive Demo and Download<\/h2>\n\n\n
Live Demo<\/a>Download<\/a><\/p>","protected":false},"excerpt":{"rendered":"
Source Code of React WYSIWYG Editor Using Draft.js<\/h2>\n\n\n\npackage.json<\/h3>\n\n\n\n{\n "name": "react-draft-wysiwyg",\n "version": "1.15.0",\n "description": "A wysiwyg on top of DraftJS.",\n "main": "dist\/react-draft-wysiwyg.js",\n "repository": {\n "type": "git",\n "url": "https:\/\/github.com\/jpuri\/react-draft-wysiwyg.git"\n },\n "author": "Jyoti Puri",\n "devDependencies": {\n "@babel\/core": "^7.7.4",\n "@babel\/preset-env": "^7.7.4",\n "@babel\/preset-react": "^7.7.4",\n "@babel\/register": "^7.7.4",\n "@storybook\/react": "^5.2.8",\n "autoprefixer": "^9.7.3",\n "babel-eslint": "^10.0.3",\n "babel-loader": "^8.0.6",\n "babel-plugin-transform-flow-strip-types": "^6.22.0",\n "chai": "^4.2.0",\n "cross-env": "^6.0.3",\n "css-loader": "^3.2.1",\n "draft-js": "^0.11.2",\n "draftjs-to-html": "^0.9.0",\n "draftjs-to-markdown": "^0.6.0",\n "embed-video": "^2.0.4",\n "enzyme": "^3.10.0",\n "enzyme-adapter-react-16": "^1.15.1",\n "eslint": "^6.7.2",\n "eslint-config-airbnb": "^18.0.1",\n "eslint-plugin-import": "^2.18.2",\n "eslint-plugin-jsx-a11y": "^6.2.3",\n "eslint-plugin-mocha": "^6.2.2",\n "eslint-plugin-react": "^7.17.0",\n "file-loader": "^5.0.2",\n "flow-bin": "^0.113.0",\n "immutable": "^4.0.0-rc.12",\n "jsdom": "^15.2.1",\n "mini-css-extract-plugin": "^0.8.0",\n "mocha": "^6.2.2",\n "postcss-loader": "^3.0.0",\n "precss": "^4.0.0",\n "react": "^16.12.0",\n "react-addons-test-utils": "^15.6.2",\n "react-dom": "^16.12.0",\n "react-test-renderer": "^16.12.0",\n "rimraf": "^3.0.0",\n "sinon": "^7.5.0",\n "style-loader": "^1.0.1",\n "uglifyjs-webpack-plugin": "^2.2.0",\n "url-loader": "^3.0.0",\n "webpack": "^4.41.2",\n "webpack-bundle-analyzer": "^3.6.0",\n "webpack-cli": "^3.3.10"\n },\n "dependencies": {\n "classnames": "^2.2.6",\n "draftjs-utils": "^0.10.2",\n "html-to-draftjs": "^1.5.0",\n "linkify-it": "^2.2.0",\n "prop-types": "^15.7.2"\n },\n "peerDependencies": {\n "draft-js": "^0.10.x || ^0.11.x",\n "immutable": "3.x.x || 4.x.x",\n "react": "0.13.x || 0.14.x || ^15.0.0-0 || 15.x.x || ^16.0.0-0 || ^16.x.x || ^17.x.x || ^18.x.x",\n "react-dom": "0.13.x || 0.14.x || ^15.0.0-0 || 15.x.x || ^16.0.0-0 || ^16.x.x || ^17.x.x || ^18.x.x"\n },\n "scripts": {\n "clean": "rimraf dist",\n "build:webpack": "cross-env NODE_ENV=production webpack --mode production --config config\/webpack.config.js",\n "build": "npm run clean && npm run build:webpack",\n "test": "cross-env BABEL_ENV=test mocha --require config\/test-compiler.js config\/test-setup.js src\/**\/*Test.js",\n "lint": "eslint src",\n "lintdocs": "eslint docs\/src",\n "flow": "flow; test $? -eq 0 -o $? -eq 2",\n "check": "npm run lint && npm run flow",\n "storybook": "start-storybook -p 6006",\n "build-storybook": "build-storybook"\n },\n "license": "MIT"\n}<\/pre><\/div>\n\n\n\nindex.js<\/h3>\n\n\n\nimport React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport {\n Editor,\n EditorState,\n RichUtils,\n convertToRaw,\n convertFromRaw,\n CompositeDecorator,\n getDefaultKeyBinding,\n} from 'draft-js';\nimport {\n changeDepth,\n handleNewLine,\n blockRenderMap,\n getCustomStyleMap,\n extractInlineStyle,\n getSelectedBlocksType,\n} from 'draftjs-utils';\nimport classNames from 'classnames';\nimport ModalHandler from '..\/event-handler\/modals';\nimport FocusHandler from '..\/event-handler\/focus';\nimport KeyDownHandler from '..\/event-handler\/keyDown';\nimport SuggestionHandler from '..\/event-handler\/suggestions';\nimport blockStyleFn from '..\/utils\/BlockStyle';\nimport { mergeRecursive } from '..\/utils\/toolbar';\nimport { hasProperty, filter } from '..\/utils\/common';\nimport { handlePastedText } from '..\/utils\/handlePaste';\nimport Controls from '..\/controls';\nimport getLinkDecorator from '..\/decorators\/Link';\nimport getMentionDecorators from '..\/decorators\/Mention';\nimport getHashtagDecorator from '..\/decorators\/HashTag';\nimport getBlockRenderFunc from '..\/renderer';\nimport defaultToolbar from '..\/config\/defaultToolbar';\nimport localeTranslations from '..\/i18n';\nimport '.\/styles.css';\nimport '..\/..\/css\/Draft.css';\n\nclass WysiwygEditor extends Component {\n constructor(props) {\n super(props);\n const toolbar = mergeRecursive(defaultToolbar, props.toolbar);\n const wrapperId = props.wrapperId\n ? props.wrapperId\n : Math.floor(Math.random() * 10000);\n this.wrapperId = `rdw-wrapper-${wrapperId}`;\n this.modalHandler = new ModalHandler();\n this.focusHandler = new FocusHandler();\n this.blockRendererFn = getBlockRenderFunc(\n {\n isReadOnly: this.isReadOnly,\n isImageAlignmentEnabled: this.isImageAlignmentEnabled,\n getEditorState: this.getEditorState,\n onChange: this.onChange,\n },\n props.customBlockRenderFunc\n );\n this.editorProps = this.filterEditorProps(props);\n this.customStyleMap = this.getStyleMap(props);\n this.compositeDecorator = this.getCompositeDecorator(toolbar);\n const editorState = this.createEditorState(this.compositeDecorator);\n extractInlineStyle(editorState);\n this.state = {\n editorState,\n editorFocused: false,\n toolbar,\n };\n }\n\n componentDidMount() {\n this.modalHandler.init(this.wrapperId);\n }\n \/\/ todo: change decorators depending on properties recceived in componentWillReceiveProps.\n\n componentDidUpdate(prevProps) {\n if (prevProps === this.props) return;\n const newState = {};\n const { editorState, contentState } = this.props;\n if (!this.state.toolbar) {\n const toolbar = mergeRecursive(defaultToolbar, toolbar);\n newState.toolbar = toolbar;\n }\n if (\n hasProperty(this.props, 'editorState') &&\n editorState !== prevProps.editorState\n ) {\n if (editorState) {\n newState.editorState = EditorState.set(editorState, {\n decorator: this.compositeDecorator,\n });\n } else {\n newState.editorState = EditorState.createEmpty(this.compositeDecorator);\n }\n } else if (\n hasProperty(this.props, 'contentState') &&\n contentState !== prevProps.contentState\n ) {\n if (contentState) {\n const newEditorState = this.changeEditorState(contentState);\n if (newEditorState) {\n newState.editorState = newEditorState;\n }\n } else {\n newState.editorState = EditorState.createEmpty(this.compositeDecorator);\n }\n }\n if (\n prevProps.editorState !== editorState ||\n prevProps.contentState !== contentState\n ) {\n extractInlineStyle(newState.editorState);\n }\n if (Object.keys(newState).length) this.setState(newState);\n this.editorProps = this.filterEditorProps(this.props);\n this.customStyleMap = this.getStyleMap(this.props);\n }\n\n onEditorBlur = () => {\n this.setState({\n editorFocused: false,\n });\n };\n\n onEditorFocus = event => {\n const { onFocus } = this.props;\n this.setState({\n editorFocused: true,\n });\n const editFocused = this.focusHandler.isEditorFocused();\n if (onFocus && editFocused) {\n onFocus(event);\n }\n };\n\n onEditorMouseDown = () => {\n this.focusHandler.onEditorMouseDown();\n };\n\n keyBindingFn = event => {\n if (event.key === 'Tab') {\n const { onTab } = this.props;\n if (!onTab || !onTab(event)) {\n const editorState = changeDepth(\n this.state.editorState,\n event.shiftKey ? -1 : 1,\n 4\n );\n if (editorState && editorState !== this.state.editorState) {\n this.onChange(editorState);\n event.preventDefault();\n }\n }\n return null;\n }\n if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {\n if (SuggestionHandler.isOpen()) {\n event.preventDefault();\n }\n }\n return getDefaultKeyBinding(event);\n };\n\n onToolbarFocus = event => {\n const { onFocus } = this.props;\n if (onFocus && this.focusHandler.isToolbarFocused()) {\n onFocus(event);\n }\n };\n\n onWrapperBlur = event => {\n const { onBlur } = this.props;\n if (onBlur && this.focusHandler.isEditorBlur(event)) {\n onBlur(event, this.getEditorState());\n }\n };\n\n onChange = editorState => {\n const { readOnly, onEditorStateChange } = this.props;\n if (\n !readOnly &&\n !(\n getSelectedBlocksType(editorState) === 'atomic' &&\n editorState.getSelection().isCollapsed\n )\n ) {\n if (onEditorStateChange) {\n onEditorStateChange(editorState, this.props.wrapperId);\n }\n if (!hasProperty(this.props, 'editorState')) {\n this.setState({ editorState }, this.afterChange(editorState));\n } else {\n this.afterChange(editorState);\n }\n }\n };\n\n setWrapperReference = ref => {\n this.wrapper = ref;\n };\n\n setEditorReference = ref => {\n if (this.props.editorRef) {\n this.props.editorRef(ref);\n }\n this.editor = ref;\n };\n\n getCompositeDecorator = toolbar => {\n const decorators = [\n ...this.props.customDecorators,\n getLinkDecorator({\n showOpenOptionOnHover: toolbar.link.showOpenOptionOnHover,\n }),\n ];\n if (this.props.mention) {\n decorators.push(\n ...getMentionDecorators({\n ...this.props.mention,\n onChange: this.onChange,\n getEditorState: this.getEditorState,\n getSuggestions: this.getSuggestions,\n getWrapperRef: this.getWrapperRef,\n modalHandler: this.modalHandler,\n })\n );\n }\n if (this.props.hashtag) {\n decorators.push(getHashtagDecorator(this.props.hashtag));\n }\n return new CompositeDecorator(decorators);\n };\n\n getWrapperRef = () => this.wrapper;\n\n getEditorState = () => this.state ? this.state.editorState : null;\n\n getSuggestions = () => this.props.mention && this.props.mention.suggestions;\n\n afterChange = editorState => {\n setTimeout(() => {\n const { onChange, onContentStateChange } = this.props;\n if (onChange) {\n onChange(convertToRaw(editorState.getCurrentContent()));\n }\n if (onContentStateChange) {\n onContentStateChange(convertToRaw(editorState.getCurrentContent()));\n }\n });\n };\n\n isReadOnly = () => this.props.readOnly;\n\n isImageAlignmentEnabled = () => this.state.toolbar.image.alignmentEnabled;\n\n createEditorState = compositeDecorator => {\n let editorState;\n if (hasProperty(this.props, 'editorState')) {\n if (this.props.editorState) {\n editorState = EditorState.set(this.props.editorState, {\n decorator: compositeDecorator,\n });\n }\n } else if (hasProperty(this.props, 'defaultEditorState')) {\n if (this.props.defaultEditorState) {\n editorState = EditorState.set(this.props.defaultEditorState, {\n decorator: compositeDecorator,\n });\n }\n } else if (hasProperty(this.props, 'contentState')) {\n if (this.props.contentState) {\n const contentState = convertFromRaw(this.props.contentState);\n editorState = EditorState.createWithContent(\n contentState,\n compositeDecorator\n );\n editorState = EditorState.moveSelectionToEnd(editorState);\n }\n } else if (\n hasProperty(this.props, 'defaultContentState') ||\n hasProperty(this.props, 'initialContentState')\n ) {\n let contentState =\n this.props.defaultContentState || this.props.initialContentState;\n if (contentState) {\n contentState = convertFromRaw(contentState);\n editorState = EditorState.createWithContent(\n contentState,\n compositeDecorator\n );\n editorState = EditorState.moveSelectionToEnd(editorState);\n }\n }\n if (!editorState) {\n editorState = EditorState.createEmpty(compositeDecorator);\n }\n return editorState;\n };\n\n filterEditorProps = props =>\n filter(props, [\n 'onChange',\n 'onEditorStateChange',\n 'onContentStateChange',\n 'initialContentState',\n 'defaultContentState',\n 'contentState',\n 'editorState',\n 'defaultEditorState',\n 'locale',\n 'localization',\n 'toolbarOnFocus',\n 'toolbar',\n 'toolbarCustomButtons',\n 'toolbarClassName',\n 'editorClassName',\n 'toolbarHidden',\n 'wrapperClassName',\n 'toolbarStyle',\n 'editorStyle',\n 'wrapperStyle',\n 'uploadCallback',\n 'onFocus',\n 'onBlur',\n 'onTab',\n 'mention',\n 'hashtag',\n 'ariaLabel',\n 'customBlockRenderFunc',\n 'customDecorators',\n 'handlePastedText',\n 'customStyleMap',\n ]);\n\n getStyleMap = props => ({ ...getCustomStyleMap(), ...props.customStyleMap });\n\n changeEditorState = contentState => {\n const newContentState = convertFromRaw(contentState);\n let { editorState } = this.state;\n editorState = EditorState.push(\n editorState,\n newContentState,\n 'insert-characters'\n );\n editorState = EditorState.moveSelectionToEnd(editorState);\n return editorState;\n };\n\n focusEditor = () => {\n setTimeout(() => {\n this.editor.focus();\n });\n };\n\n handleKeyCommand = command => {\n const {\n editorState,\n toolbar: { inline },\n } = this.state;\n if (inline && inline.options.indexOf(command) >= 0) {\n const newState = RichUtils.handleKeyCommand(editorState, command);\n if (newState) {\n this.onChange(newState);\n return true;\n }\n }\n return false;\n };\n\n handleReturn = event => {\n if (SuggestionHandler.isOpen()) {\n return true;\n }\n const { editorState } = this.state;\n const newEditorState = handleNewLine(editorState, event);\n if (newEditorState) {\n this.onChange(newEditorState);\n return true;\n }\n return false;\n };\n\n handlePastedTextFn = (text, html) => {\n const { editorState } = this.state;\n const {\n handlePastedText: handlePastedTextProp,\n stripPastedStyles,\n } = this.props;\n\n if (handlePastedTextProp) {\n return handlePastedTextProp(text, html, editorState, this.onChange);\n }\n if (!stripPastedStyles) {\n return handlePastedText(text, html, editorState, this.onChange);\n }\n return false;\n };\n\n preventDefault = event => {\n if (\n event.target.tagName === 'INPUT' ||\n event.target.tagName === 'LABEL' ||\n event.target.tagName === 'TEXTAREA'\n ) {\n this.focusHandler.onInputMouseDown();\n } else {\n event.preventDefault();\n }\n };\n\n render() {\n const { editorState, editorFocused, toolbar } = this.state;\n const {\n locale,\n localization: { locale: newLocale, translations },\n toolbarCustomButtons,\n toolbarOnFocus,\n toolbarClassName,\n toolbarHidden,\n editorClassName,\n wrapperClassName,\n toolbarStyle,\n editorStyle,\n wrapperStyle,\n uploadCallback,\n ariaLabel,\n } = this.props;\n\n const controlProps = {\n modalHandler: this.modalHandler,\n editorState,\n onChange: this.onChange,\n translations: {\n ...localeTranslations[locale || newLocale],\n ...translations,\n },\n };\n const toolbarShow =\n editorFocused || this.focusHandler.isInputFocused() || !toolbarOnFocus;\n return (\n <div\n id={this.wrapperId}\n className={classNames(wrapperClassName, 'rdw-editor-wrapper')}\n style={wrapperStyle}\n onClick={this.modalHandler.onEditorClick}\n onBlur={this.onWrapperBlur}\n aria-label="rdw-wrapper"\n >\n {!toolbarHidden && (\n <div\n className={classNames('rdw-editor-toolbar', toolbarClassName)}\n style={{\n visibility: toolbarShow ? 'visible' : 'hidden',\n ...toolbarStyle,\n }}\n onMouseDown={this.preventDefault}\n aria-label="rdw-toolbar"\n aria-hidden={(!editorFocused && toolbarOnFocus).toString()}\n onFocus={this.onToolbarFocus}\n >\n {toolbar.options.map((opt, index) => {\n const Control = Controls[opt];\n const config = toolbar[opt];\n if (opt === 'image' && uploadCallback) {\n config.uploadCallback = uploadCallback;\n }\n return <Control key={index} {...controlProps} config={config} \/>;\n })}\n {toolbarCustomButtons &&\n toolbarCustomButtons.map((button, index) =>\n React.cloneElement(button, { key: index, ...controlProps })\n )}\n <\/div>\n )}\n <div\n ref={this.setWrapperReference}\n className={classNames(editorClassName, 'rdw-editor-main')}\n style={editorStyle}\n onClick={this.focusEditor}\n onFocus={this.onEditorFocus}\n onBlur={this.onEditorBlur}\n onKeyDown={KeyDownHandler.onKeyDown}\n onMouseDown={this.onEditorMouseDown}\n >\n <Editor\n ref={this.setEditorReference}\n keyBindingFn={this.keyBindingFn}\n editorState={editorState}\n onChange={this.onChange}\n blockStyleFn={blockStyleFn}\n customStyleMap={this.getStyleMap(this.props)}\n handleReturn={this.handleReturn}\n handlePastedText={this.handlePastedTextFn}\n blockRendererFn={this.blockRendererFn}\n handleKeyCommand={this.handleKeyCommand}\n ariaLabel={ariaLabel || 'rdw-editor'}\n blockRenderMap={blockRenderMap}\n {...this.editorProps}\n \/>\n <\/div>\n <\/div>\n );\n }\n}\n\nWysiwygEditor.propTypes = {\n onChange: PropTypes.func,\n onEditorStateChange: PropTypes.func,\n onContentStateChange: PropTypes.func,\n \/\/ initialContentState is deprecated\n initialContentState: PropTypes.object,\n defaultContentState: PropTypes.object,\n contentState: PropTypes.object,\n editorState: PropTypes.object,\n defaultEditorState: PropTypes.object,\n toolbarOnFocus: PropTypes.bool,\n spellCheck: PropTypes.bool, \/\/ eslint-disable-line react\/no-unused-prop-types\n stripPastedStyles: PropTypes.bool, \/\/ eslint-disable-line react\/no-unused-prop-types\n toolbar: PropTypes.object,\n toolbarCustomButtons: PropTypes.array,\n toolbarClassName: PropTypes.string,\n toolbarHidden: PropTypes.bool,\n locale: PropTypes.string,\n localization: PropTypes.object,\n editorClassName: PropTypes.string,\n wrapperClassName: PropTypes.string,\n toolbarStyle: PropTypes.object,\n editorStyle: PropTypes.object,\n wrapperStyle: PropTypes.object,\n uploadCallback: PropTypes.func,\n onFocus: PropTypes.func,\n onBlur: PropTypes.func,\n onTab: PropTypes.func,\n mention: PropTypes.object,\n hashtag: PropTypes.object,\n textAlignment: PropTypes.string, \/\/ eslint-disable-line react\/no-unused-prop-types\n readOnly: PropTypes.bool,\n tabIndex: PropTypes.number, \/\/ eslint-disable-line react\/no-unused-prop-types\n placeholder: PropTypes.string, \/\/ eslint-disable-line react\/no-unused-prop-types\n ariaLabel: PropTypes.string,\n ariaOwneeID: PropTypes.string, \/\/ eslint-disable-line react\/no-unused-prop-types\n ariaActiveDescendantID: PropTypes.string, \/\/ eslint-disable-line react\/no-unused-prop-types\n ariaAutoComplete: PropTypes.string, \/\/ eslint-disable-line react\/no-unused-prop-types\n ariaDescribedBy: PropTypes.string, \/\/ eslint-disable-line react\/no-unused-prop-types\n ariaExpanded: PropTypes.string, \/\/ eslint-disable-line react\/no-unused-prop-types\n ariaHasPopup: PropTypes.string, \/\/ eslint-disable-line react\/no-unused-prop-types\n customBlockRenderFunc: PropTypes.func,\n wrapperId: PropTypes.number,\n customDecorators: PropTypes.array,\n editorRef: PropTypes.func,\n handlePastedText: PropTypes.func,\n};\n\nWysiwygEditor.defaultProps = {\n toolbarOnFocus: false,\n toolbarHidden: false,\n stripPastedStyles: false,\n localization: { locale: 'en', translations: {} },\n customDecorators: [],\n};\n\nexport default WysiwygEditor;\n\n\/\/ todo: evaluate draftjs-utils to move some methods here\n\/\/ todo: move color near font-family<\/pre><\/div>\n\n\n\nstyles.css<\/h3>\n\n\n\n.rdw-editor-main {\n height: 100%;\n overflow: auto;\n box-sizing: border-box;\n}\n.rdw-editor-toolbar {\n padding: 6px 5px 0;\n border-radius: 2px;\n border: 1px solid #F1F1F1;\n display: flex;\n justify-content: flex-start;\n background: white;\n flex-wrap: wrap;\n font-size: 15px;\n margin-bottom: 5px;\n user-select: none;\n}\n.public-DraftStyleDefault-block {\n margin: 1em 0;\n}\n.rdw-editor-wrapper:focus {\n outline: none;\n}\n.rdw-editor-wrapper {\n box-sizing: content-box;\n}\n.rdw-editor-main blockquote {\n border-left: 5px solid #f1f1f1;\n padding-left: 5px;\n}\n.rdw-editor-main pre {\n background: #f1f1f1;\n border-radius: 3px;\n padding: 1px 10px;\n}<\/pre><\/div>\n\n\n\nLive Demo and Download<\/h2>\n\n\n
Live Demo<\/a>Download<\/a><\/p>","protected":false},"excerpt":{"rendered":"
{\n "name": "react-draft-wysiwyg",\n "version": "1.15.0",\n "description": "A wysiwyg on top of DraftJS.",\n "main": "dist\/react-draft-wysiwyg.js",\n "repository": {\n "type": "git",\n "url": "https:\/\/github.com\/jpuri\/react-draft-wysiwyg.git"\n },\n "author": "Jyoti Puri",\n "devDependencies": {\n "@babel\/core": "^7.7.4",\n "@babel\/preset-env": "^7.7.4",\n "@babel\/preset-react": "^7.7.4",\n "@babel\/register": "^7.7.4",\n "@storybook\/react": "^5.2.8",\n "autoprefixer": "^9.7.3",\n "babel-eslint": "^10.0.3",\n "babel-loader": "^8.0.6",\n "babel-plugin-transform-flow-strip-types": "^6.22.0",\n "chai": "^4.2.0",\n "cross-env": "^6.0.3",\n "css-loader": "^3.2.1",\n "draft-js": "^0.11.2",\n "draftjs-to-html": "^0.9.0",\n "draftjs-to-markdown": "^0.6.0",\n "embed-video": "^2.0.4",\n "enzyme": "^3.10.0",\n "enzyme-adapter-react-16": "^1.15.1",\n "eslint": "^6.7.2",\n "eslint-config-airbnb": "^18.0.1",\n "eslint-plugin-import": "^2.18.2",\n "eslint-plugin-jsx-a11y": "^6.2.3",\n "eslint-plugin-mocha": "^6.2.2",\n "eslint-plugin-react": "^7.17.0",\n "file-loader": "^5.0.2",\n "flow-bin": "^0.113.0",\n "immutable": "^4.0.0-rc.12",\n "jsdom": "^15.2.1",\n "mini-css-extract-plugin": "^0.8.0",\n "mocha": "^6.2.2",\n "postcss-loader": "^3.0.0",\n "precss": "^4.0.0",\n "react": "^16.12.0",\n "react-addons-test-utils": "^15.6.2",\n "react-dom": "^16.12.0",\n "react-test-renderer": "^16.12.0",\n "rimraf": "^3.0.0",\n "sinon": "^7.5.0",\n "style-loader": "^1.0.1",\n "uglifyjs-webpack-plugin": "^2.2.0",\n "url-loader": "^3.0.0",\n "webpack": "^4.41.2",\n "webpack-bundle-analyzer": "^3.6.0",\n "webpack-cli": "^3.3.10"\n },\n "dependencies": {\n "classnames": "^2.2.6",\n "draftjs-utils": "^0.10.2",\n "html-to-draftjs": "^1.5.0",\n "linkify-it": "^2.2.0",\n "prop-types": "^15.7.2"\n },\n "peerDependencies": {\n "draft-js": "^0.10.x || ^0.11.x",\n "immutable": "3.x.x || 4.x.x",\n "react": "0.13.x || 0.14.x || ^15.0.0-0 || 15.x.x || ^16.0.0-0 || ^16.x.x || ^17.x.x || ^18.x.x",\n "react-dom": "0.13.x || 0.14.x || ^15.0.0-0 || 15.x.x || ^16.0.0-0 || ^16.x.x || ^17.x.x || ^18.x.x"\n },\n "scripts": {\n "clean": "rimraf dist",\n "build:webpack": "cross-env NODE_ENV=production webpack --mode production --config config\/webpack.config.js",\n "build": "npm run clean && npm run build:webpack",\n "test": "cross-env BABEL_ENV=test mocha --require config\/test-compiler.js config\/test-setup.js src\/**\/*Test.js",\n "lint": "eslint src",\n "lintdocs": "eslint docs\/src",\n "flow": "flow; test $? -eq 0 -o $? -eq 2",\n "check": "npm run lint && npm run flow",\n "storybook": "start-storybook -p 6006",\n "build-storybook": "build-storybook"\n },\n "license": "MIT"\n}<\/pre><\/div>\n\n\n\nindex.js<\/h3>\n\n\n\nimport React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport {\n Editor,\n EditorState,\n RichUtils,\n convertToRaw,\n convertFromRaw,\n CompositeDecorator,\n getDefaultKeyBinding,\n} from 'draft-js';\nimport {\n changeDepth,\n handleNewLine,\n blockRenderMap,\n getCustomStyleMap,\n extractInlineStyle,\n getSelectedBlocksType,\n} from 'draftjs-utils';\nimport classNames from 'classnames';\nimport ModalHandler from '..\/event-handler\/modals';\nimport FocusHandler from '..\/event-handler\/focus';\nimport KeyDownHandler from '..\/event-handler\/keyDown';\nimport SuggestionHandler from '..\/event-handler\/suggestions';\nimport blockStyleFn from '..\/utils\/BlockStyle';\nimport { mergeRecursive } from '..\/utils\/toolbar';\nimport { hasProperty, filter } from '..\/utils\/common';\nimport { handlePastedText } from '..\/utils\/handlePaste';\nimport Controls from '..\/controls';\nimport getLinkDecorator from '..\/decorators\/Link';\nimport getMentionDecorators from '..\/decorators\/Mention';\nimport getHashtagDecorator from '..\/decorators\/HashTag';\nimport getBlockRenderFunc from '..\/renderer';\nimport defaultToolbar from '..\/config\/defaultToolbar';\nimport localeTranslations from '..\/i18n';\nimport '.\/styles.css';\nimport '..\/..\/css\/Draft.css';\n\nclass WysiwygEditor extends Component {\n constructor(props) {\n super(props);\n const toolbar = mergeRecursive(defaultToolbar, props.toolbar);\n const wrapperId = props.wrapperId\n ? props.wrapperId\n : Math.floor(Math.random() * 10000);\n this.wrapperId = `rdw-wrapper-${wrapperId}`;\n this.modalHandler = new ModalHandler();\n this.focusHandler = new FocusHandler();\n this.blockRendererFn = getBlockRenderFunc(\n {\n isReadOnly: this.isReadOnly,\n isImageAlignmentEnabled: this.isImageAlignmentEnabled,\n getEditorState: this.getEditorState,\n onChange: this.onChange,\n },\n props.customBlockRenderFunc\n );\n this.editorProps = this.filterEditorProps(props);\n this.customStyleMap = this.getStyleMap(props);\n this.compositeDecorator = this.getCompositeDecorator(toolbar);\n const editorState = this.createEditorState(this.compositeDecorator);\n extractInlineStyle(editorState);\n this.state = {\n editorState,\n editorFocused: false,\n toolbar,\n };\n }\n\n componentDidMount() {\n this.modalHandler.init(this.wrapperId);\n }\n \/\/ todo: change decorators depending on properties recceived in componentWillReceiveProps.\n\n componentDidUpdate(prevProps) {\n if (prevProps === this.props) return;\n const newState = {};\n const { editorState, contentState } = this.props;\n if (!this.state.toolbar) {\n const toolbar = mergeRecursive(defaultToolbar, toolbar);\n newState.toolbar = toolbar;\n }\n if (\n hasProperty(this.props, 'editorState') &&\n editorState !== prevProps.editorState\n ) {\n if (editorState) {\n newState.editorState = EditorState.set(editorState, {\n decorator: this.compositeDecorator,\n });\n } else {\n newState.editorState = EditorState.createEmpty(this.compositeDecorator);\n }\n } else if (\n hasProperty(this.props, 'contentState') &&\n contentState !== prevProps.contentState\n ) {\n if (contentState) {\n const newEditorState = this.changeEditorState(contentState);\n if (newEditorState) {\n newState.editorState = newEditorState;\n }\n } else {\n newState.editorState = EditorState.createEmpty(this.compositeDecorator);\n }\n }\n if (\n prevProps.editorState !== editorState ||\n prevProps.contentState !== contentState\n ) {\n extractInlineStyle(newState.editorState);\n }\n if (Object.keys(newState).length) this.setState(newState);\n this.editorProps = this.filterEditorProps(this.props);\n this.customStyleMap = this.getStyleMap(this.props);\n }\n\n onEditorBlur = () => {\n this.setState({\n editorFocused: false,\n });\n };\n\n onEditorFocus = event => {\n const { onFocus } = this.props;\n this.setState({\n editorFocused: true,\n });\n const editFocused = this.focusHandler.isEditorFocused();\n if (onFocus && editFocused) {\n onFocus(event);\n }\n };\n\n onEditorMouseDown = () => {\n this.focusHandler.onEditorMouseDown();\n };\n\n keyBindingFn = event => {\n if (event.key === 'Tab') {\n const { onTab } = this.props;\n if (!onTab || !onTab(event)) {\n const editorState = changeDepth(\n this.state.editorState,\n event.shiftKey ? -1 : 1,\n 4\n );\n if (editorState && editorState !== this.state.editorState) {\n this.onChange(editorState);\n event.preventDefault();\n }\n }\n return null;\n }\n if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {\n if (SuggestionHandler.isOpen()) {\n event.preventDefault();\n }\n }\n return getDefaultKeyBinding(event);\n };\n\n onToolbarFocus = event => {\n const { onFocus } = this.props;\n if (onFocus && this.focusHandler.isToolbarFocused()) {\n onFocus(event);\n }\n };\n\n onWrapperBlur = event => {\n const { onBlur } = this.props;\n if (onBlur && this.focusHandler.isEditorBlur(event)) {\n onBlur(event, this.getEditorState());\n }\n };\n\n onChange = editorState => {\n const { readOnly, onEditorStateChange } = this.props;\n if (\n !readOnly &&\n !(\n getSelectedBlocksType(editorState) === 'atomic' &&\n editorState.getSelection().isCollapsed\n )\n ) {\n if (onEditorStateChange) {\n onEditorStateChange(editorState, this.props.wrapperId);\n }\n if (!hasProperty(this.props, 'editorState')) {\n this.setState({ editorState }, this.afterChange(editorState));\n } else {\n this.afterChange(editorState);\n }\n }\n };\n\n setWrapperReference = ref => {\n this.wrapper = ref;\n };\n\n setEditorReference = ref => {\n if (this.props.editorRef) {\n this.props.editorRef(ref);\n }\n this.editor = ref;\n };\n\n getCompositeDecorator = toolbar => {\n const decorators = [\n ...this.props.customDecorators,\n getLinkDecorator({\n showOpenOptionOnHover: toolbar.link.showOpenOptionOnHover,\n }),\n ];\n if (this.props.mention) {\n decorators.push(\n ...getMentionDecorators({\n ...this.props.mention,\n onChange: this.onChange,\n getEditorState: this.getEditorState,\n getSuggestions: this.getSuggestions,\n getWrapperRef: this.getWrapperRef,\n modalHandler: this.modalHandler,\n })\n );\n }\n if (this.props.hashtag) {\n decorators.push(getHashtagDecorator(this.props.hashtag));\n }\n return new CompositeDecorator(decorators);\n };\n\n getWrapperRef = () => this.wrapper;\n\n getEditorState = () => this.state ? this.state.editorState : null;\n\n getSuggestions = () => this.props.mention && this.props.mention.suggestions;\n\n afterChange = editorState => {\n setTimeout(() => {\n const { onChange, onContentStateChange } = this.props;\n if (onChange) {\n onChange(convertToRaw(editorState.getCurrentContent()));\n }\n if (onContentStateChange) {\n onContentStateChange(convertToRaw(editorState.getCurrentContent()));\n }\n });\n };\n\n isReadOnly = () => this.props.readOnly;\n\n isImageAlignmentEnabled = () => this.state.toolbar.image.alignmentEnabled;\n\n createEditorState = compositeDecorator => {\n let editorState;\n if (hasProperty(this.props, 'editorState')) {\n if (this.props.editorState) {\n editorState = EditorState.set(this.props.editorState, {\n decorator: compositeDecorator,\n });\n }\n } else if (hasProperty(this.props, 'defaultEditorState')) {\n if (this.props.defaultEditorState) {\n editorState = EditorState.set(this.props.defaultEditorState, {\n decorator: compositeDecorator,\n });\n }\n } else if (hasProperty(this.props, 'contentState')) {\n if (this.props.contentState) {\n const contentState = convertFromRaw(this.props.contentState);\n editorState = EditorState.createWithContent(\n contentState,\n compositeDecorator\n );\n editorState = EditorState.moveSelectionToEnd(editorState);\n }\n } else if (\n hasProperty(this.props, 'defaultContentState') ||\n hasProperty(this.props, 'initialContentState')\n ) {\n let contentState =\n this.props.defaultContentState || this.props.initialContentState;\n if (contentState) {\n contentState = convertFromRaw(contentState);\n editorState = EditorState.createWithContent(\n contentState,\n compositeDecorator\n );\n editorState = EditorState.moveSelectionToEnd(editorState);\n }\n }\n if (!editorState) {\n editorState = EditorState.createEmpty(compositeDecorator);\n }\n return editorState;\n };\n\n filterEditorProps = props =>\n filter(props, [\n 'onChange',\n 'onEditorStateChange',\n 'onContentStateChange',\n 'initialContentState',\n 'defaultContentState',\n 'contentState',\n 'editorState',\n 'defaultEditorState',\n 'locale',\n 'localization',\n 'toolbarOnFocus',\n 'toolbar',\n 'toolbarCustomButtons',\n 'toolbarClassName',\n 'editorClassName',\n 'toolbarHidden',\n 'wrapperClassName',\n 'toolbarStyle',\n 'editorStyle',\n 'wrapperStyle',\n 'uploadCallback',\n 'onFocus',\n 'onBlur',\n 'onTab',\n 'mention',\n 'hashtag',\n 'ariaLabel',\n 'customBlockRenderFunc',\n 'customDecorators',\n 'handlePastedText',\n 'customStyleMap',\n ]);\n\n getStyleMap = props => ({ ...getCustomStyleMap(), ...props.customStyleMap });\n\n changeEditorState = contentState => {\n const newContentState = convertFromRaw(contentState);\n let { editorState } = this.state;\n editorState = EditorState.push(\n editorState,\n newContentState,\n 'insert-characters'\n );\n editorState = EditorState.moveSelectionToEnd(editorState);\n return editorState;\n };\n\n focusEditor = () => {\n setTimeout(() => {\n this.editor.focus();\n });\n };\n\n handleKeyCommand = command => {\n const {\n editorState,\n toolbar: { inline },\n } = this.state;\n if (inline && inline.options.indexOf(command) >= 0) {\n const newState = RichUtils.handleKeyCommand(editorState, command);\n if (newState) {\n this.onChange(newState);\n return true;\n }\n }\n return false;\n };\n\n handleReturn = event => {\n if (SuggestionHandler.isOpen()) {\n return true;\n }\n const { editorState } = this.state;\n const newEditorState = handleNewLine(editorState, event);\n if (newEditorState) {\n this.onChange(newEditorState);\n return true;\n }\n return false;\n };\n\n handlePastedTextFn = (text, html) => {\n const { editorState } = this.state;\n const {\n handlePastedText: handlePastedTextProp,\n stripPastedStyles,\n } = this.props;\n\n if (handlePastedTextProp) {\n return handlePastedTextProp(text, html, editorState, this.onChange);\n }\n if (!stripPastedStyles) {\n return handlePastedText(text, html, editorState, this.onChange);\n }\n return false;\n };\n\n preventDefault = event => {\n if (\n event.target.tagName === 'INPUT' ||\n event.target.tagName === 'LABEL' ||\n event.target.tagName === 'TEXTAREA'\n ) {\n this.focusHandler.onInputMouseDown();\n } else {\n event.preventDefault();\n }\n };\n\n render() {\n const { editorState, editorFocused, toolbar } = this.state;\n const {\n locale,\n localization: { locale: newLocale, translations },\n toolbarCustomButtons,\n toolbarOnFocus,\n toolbarClassName,\n toolbarHidden,\n editorClassName,\n wrapperClassName,\n toolbarStyle,\n editorStyle,\n wrapperStyle,\n uploadCallback,\n ariaLabel,\n } = this.props;\n\n const controlProps = {\n modalHandler: this.modalHandler,\n editorState,\n onChange: this.onChange,\n translations: {\n ...localeTranslations[locale || newLocale],\n ...translations,\n },\n };\n const toolbarShow =\n editorFocused || this.focusHandler.isInputFocused() || !toolbarOnFocus;\n return (\n <div\n id={this.wrapperId}\n className={classNames(wrapperClassName, 'rdw-editor-wrapper')}\n style={wrapperStyle}\n onClick={this.modalHandler.onEditorClick}\n onBlur={this.onWrapperBlur}\n aria-label="rdw-wrapper"\n >\n {!toolbarHidden && (\n <div\n className={classNames('rdw-editor-toolbar', toolbarClassName)}\n style={{\n visibility: toolbarShow ? 'visible' : 'hidden',\n ...toolbarStyle,\n }}\n onMouseDown={this.preventDefault}\n aria-label="rdw-toolbar"\n aria-hidden={(!editorFocused && toolbarOnFocus).toString()}\n onFocus={this.onToolbarFocus}\n >\n {toolbar.options.map((opt, index) => {\n const Control = Controls[opt];\n const config = toolbar[opt];\n if (opt === 'image' && uploadCallback) {\n config.uploadCallback = uploadCallback;\n }\n return <Control key={index} {...controlProps} config={config} \/>;\n })}\n {toolbarCustomButtons &&\n toolbarCustomButtons.map((button, index) =>\n React.cloneElement(button, { key: index, ...controlProps })\n )}\n <\/div>\n )}\n <div\n ref={this.setWrapperReference}\n className={classNames(editorClassName, 'rdw-editor-main')}\n style={editorStyle}\n onClick={this.focusEditor}\n onFocus={this.onEditorFocus}\n onBlur={this.onEditorBlur}\n onKeyDown={KeyDownHandler.onKeyDown}\n onMouseDown={this.onEditorMouseDown}\n >\n <Editor\n ref={this.setEditorReference}\n keyBindingFn={this.keyBindingFn}\n editorState={editorState}\n onChange={this.onChange}\n blockStyleFn={blockStyleFn}\n customStyleMap={this.getStyleMap(this.props)}\n handleReturn={this.handleReturn}\n handlePastedText={this.handlePastedTextFn}\n blockRendererFn={this.blockRendererFn}\n handleKeyCommand={this.handleKeyCommand}\n ariaLabel={ariaLabel || 'rdw-editor'}\n blockRenderMap={blockRenderMap}\n {...this.editorProps}\n \/>\n <\/div>\n <\/div>\n );\n }\n}\n\nWysiwygEditor.propTypes = {\n onChange: PropTypes.func,\n onEditorStateChange: PropTypes.func,\n onContentStateChange: PropTypes.func,\n \/\/ initialContentState is deprecated\n initialContentState: PropTypes.object,\n defaultContentState: PropTypes.object,\n contentState: PropTypes.object,\n editorState: PropTypes.object,\n defaultEditorState: PropTypes.object,\n toolbarOnFocus: PropTypes.bool,\n spellCheck: PropTypes.bool, \/\/ eslint-disable-line react\/no-unused-prop-types\n stripPastedStyles: PropTypes.bool, \/\/ eslint-disable-line react\/no-unused-prop-types\n toolbar: PropTypes.object,\n toolbarCustomButtons: PropTypes.array,\n toolbarClassName: PropTypes.string,\n toolbarHidden: PropTypes.bool,\n locale: PropTypes.string,\n localization: PropTypes.object,\n editorClassName: PropTypes.string,\n wrapperClassName: PropTypes.string,\n toolbarStyle: PropTypes.object,\n editorStyle: PropTypes.object,\n wrapperStyle: PropTypes.object,\n uploadCallback: PropTypes.func,\n onFocus: PropTypes.func,\n onBlur: PropTypes.func,\n onTab: PropTypes.func,\n mention: PropTypes.object,\n hashtag: PropTypes.object,\n textAlignment: PropTypes.string, \/\/ eslint-disable-line react\/no-unused-prop-types\n readOnly: PropTypes.bool,\n tabIndex: PropTypes.number, \/\/ eslint-disable-line react\/no-unused-prop-types\n placeholder: PropTypes.string, \/\/ eslint-disable-line react\/no-unused-prop-types\n ariaLabel: PropTypes.string,\n ariaOwneeID: PropTypes.string, \/\/ eslint-disable-line react\/no-unused-prop-types\n ariaActiveDescendantID: PropTypes.string, \/\/ eslint-disable-line react\/no-unused-prop-types\n ariaAutoComplete: PropTypes.string, \/\/ eslint-disable-line react\/no-unused-prop-types\n ariaDescribedBy: PropTypes.string, \/\/ eslint-disable-line react\/no-unused-prop-types\n ariaExpanded: PropTypes.string, \/\/ eslint-disable-line react\/no-unused-prop-types\n ariaHasPopup: PropTypes.string, \/\/ eslint-disable-line react\/no-unused-prop-types\n customBlockRenderFunc: PropTypes.func,\n wrapperId: PropTypes.number,\n customDecorators: PropTypes.array,\n editorRef: PropTypes.func,\n handlePastedText: PropTypes.func,\n};\n\nWysiwygEditor.defaultProps = {\n toolbarOnFocus: false,\n toolbarHidden: false,\n stripPastedStyles: false,\n localization: { locale: 'en', translations: {} },\n customDecorators: [],\n};\n\nexport default WysiwygEditor;\n\n\/\/ todo: evaluate draftjs-utils to move some methods here\n\/\/ todo: move color near font-family<\/pre><\/div>\n\n\n\nstyles.css<\/h3>\n\n\n\n.rdw-editor-main {\n height: 100%;\n overflow: auto;\n box-sizing: border-box;\n}\n.rdw-editor-toolbar {\n padding: 6px 5px 0;\n border-radius: 2px;\n border: 1px solid #F1F1F1;\n display: flex;\n justify-content: flex-start;\n background: white;\n flex-wrap: wrap;\n font-size: 15px;\n margin-bottom: 5px;\n user-select: none;\n}\n.public-DraftStyleDefault-block {\n margin: 1em 0;\n}\n.rdw-editor-wrapper:focus {\n outline: none;\n}\n.rdw-editor-wrapper {\n box-sizing: content-box;\n}\n.rdw-editor-main blockquote {\n border-left: 5px solid #f1f1f1;\n padding-left: 5px;\n}\n.rdw-editor-main pre {\n background: #f1f1f1;\n border-radius: 3px;\n padding: 1px 10px;\n}<\/pre><\/div>\n\n\n\nLive Demo and Download<\/h2>\n\n\n
Live Demo<\/a>Download<\/a><\/p>","protected":false},"excerpt":{"rendered":"