├── postcss.config.js ├── .eslintignore ├── .gitignore ├── interfaces ├── mocha.js ├── images.js ├── CSSModule.js ├── draftjs-to-html.js └── draftjs-utils.js ├── docs ├── images │ ├── github.png │ └── demo │ │ ├── bold.gif │ │ ├── erase.gif │ │ ├── image.gif │ │ ├── link.gif │ │ ├── redo.gif │ │ ├── undo.gif │ │ ├── indent.gif │ │ ├── italic.gif │ │ ├── justify.gif │ │ ├── ordered.gif │ │ ├── outdent.gif │ │ ├── unlink.gif │ │ ├── left-align.gif │ │ ├── subscript.gif │ │ ├── underline.gif │ │ ├── unordered.gif │ │ ├── center-align.gif │ │ ├── right-align.gif │ │ ├── superscript.gif │ │ └── strikethrough.gif ├── static │ ├── main.css.map │ └── index.html ├── .babelrc ├── src │ ├── components │ │ ├── Author │ │ │ ├── styles.css │ │ │ └── index.js │ │ ├── index.js │ │ ├── Docs │ │ │ ├── Props │ │ │ │ ├── ReadOnlyProp │ │ │ │ │ └── index.js │ │ │ │ ├── WrapperIdProp │ │ │ │ │ └── index.js │ │ │ │ ├── DecoratorProp │ │ │ │ │ └── index.js │ │ │ │ ├── BlockRenderingProp │ │ │ │ │ └── index.js │ │ │ │ ├── DraftjsProp │ │ │ │ │ └── index.js │ │ │ │ ├── TextAlignmentProp │ │ │ │ │ └── index.js │ │ │ │ ├── HashtagProp │ │ │ │ │ └── index.js │ │ │ │ ├── EventCallbackProp │ │ │ │ │ └── index.js │ │ │ │ ├── index.js │ │ │ │ ├── CustomizingToolbarProp │ │ │ │ │ └── I18N │ │ │ │ │ │ └── index.js │ │ │ │ ├── EditorStyleProp │ │ │ │ │ └── index.js │ │ │ │ └── MentionProp │ │ │ │ │ └── index.js │ │ │ ├── index.js │ │ │ ├── ARIASupport │ │ │ │ └── index.js │ │ │ ├── styles.css │ │ │ ├── Usage │ │ │ │ └── index.js │ │ │ └── Installation │ │ │ │ └── index.js │ │ ├── Demo │ │ │ ├── EditorCustomizedToolbarOption │ │ │ │ └── ColorPic │ │ │ │ │ ├── styles.css │ │ │ │ │ └── index.js │ │ │ ├── EditorI18n │ │ │ │ └── index.js │ │ │ ├── EditorEmbedded │ │ │ │ └── index.js │ │ │ └── index.js │ │ ├── Menu │ │ │ ├── styles.css │ │ │ └── index.js │ │ ├── App │ │ │ ├── styles.css │ │ │ └── index.js │ │ └── Home │ │ │ └── styles.css │ ├── util │ │ ├── uploadImageCallBack.js │ │ └── sampleEditorContent.js │ ├── index.js │ └── icons │ │ └── palette.svg ├── index.html ├── template │ └── index.html ├── config │ ├── server.dev.js │ ├── webpack.dev.config.js │ └── webpack.prod.config.js └── package.json ├── .babelrc ├── src ├── index.js ├── controls │ ├── Remove │ │ └── Component │ │ │ ├── styles.css │ │ │ └── index.js │ ├── BlockType │ │ ├── Component │ │ │ └── styles.css │ │ └── __test__ │ │ │ └── blockControlTest.js │ ├── FontSize │ │ ├── Component │ │ │ └── styles.css │ │ └── __test__ │ │ │ └── fontSizeControlTest.js │ ├── Inline │ │ └── Component │ │ │ └── styles.css │ ├── History │ │ ├── Component │ │ │ └── styles.css │ │ └── __test__ │ │ │ └── historyControlTest.js │ ├── List │ │ ├── Component │ │ │ └── styles.css │ │ └── __test__ │ │ │ └── listControlsTest.js │ ├── FontFamily │ │ ├── Component │ │ │ └── styles.css │ │ └── __test__ │ │ │ └── fontFamilyControlTest.js │ ├── index.js │ ├── Emoji │ │ ├── Component │ │ │ ├── styles.css │ │ │ └── index.js │ │ └── index.js │ ├── TextAlign │ │ └── Component │ │ │ └── styles.css │ ├── ColorPicker │ │ ├── Component │ │ │ └── styles.css │ │ └── __test__ │ │ │ └── colorPickerTest.js │ ├── Link │ │ ├── Component │ │ │ └── styles.css │ │ └── __test__ │ │ │ └── linkControlTest.js │ ├── Image │ │ ├── __test__ │ │ │ └── imageControlTest.js │ │ └── index.js │ └── Embedded │ │ ├── index.js │ │ └── Component │ │ └── styles.css ├── decorators │ ├── HashTag │ │ ├── styles.css │ │ └── index.js │ ├── Mention │ │ ├── Mention │ │ │ ├── styles.css │ │ │ └── index.js │ │ ├── index.js │ │ ├── Suggestion │ │ │ └── styles.css │ │ └── addMention.js │ └── Link │ │ ├── styles.css │ │ ├── __test__ │ │ └── linkDecoratorTest.js │ │ └── index.js ├── components │ ├── Dropdown │ │ ├── index.js │ │ ├── DropdownOption │ │ │ ├── styles.css │ │ │ ├── __test__ │ │ │ │ └── dropdownOptionTest.js │ │ │ └── index.js │ │ └── Dropdown │ │ │ ├── __test__ │ │ │ └── dropdownTest.js │ │ │ └── styles.css │ ├── Spinner │ │ ├── index.js │ │ ├── __test__ │ │ │ └── spinnerTest.js │ │ └── styles.css │ └── Option │ │ ├── styles.css │ │ ├── index.js │ │ └── __test__ │ │ └── optionTest.js ├── event-handler │ ├── suggestions.js │ ├── keyDown.js │ ├── focus.js │ └── modals.js ├── utils │ ├── BlockStyle.js │ ├── toolbar.js │ ├── handlePaste.js │ └── common.js ├── i18n │ └── index.js ├── renderer │ ├── Embedded │ │ └── index.js │ ├── Image │ │ ├── styles.css │ │ └── __test__ │ │ │ └── imageRendererTest.js │ └── index.js └── Editor │ ├── __test__ │ └── editorTest.js │ └── styles.css ├── .travis.yml ├── scripts └── publish.sh ├── stories ├── CustomToolbar │ ├── styles.css │ └── index.js ├── I18n │ ├── styles.css │ └── index.js ├── I18nEditor │ └── styles.css ├── ToolbarHidden │ ├── styles.css │ └── index.js ├── FocusBlurCallbacks │ ├── styles.css │ └── index.js ├── FloatingToolbar │ ├── styles.css │ └── index.js ├── Basic │ └── index.js ├── ReadOnly │ └── index.js ├── styles.css ├── SpellCheck │ └── index.js ├── SelectedOptions │ └── index.js ├── HashTag │ └── index.js ├── BasicControlled │ └── index.js ├── BasicContentState │ └── index.js ├── ConvertToRawDraftContent │ └── index.js ├── ConvertToMarkdown │ └── index.js ├── Mention │ └── index.js ├── ImageUpload │ └── index.js ├── ConvertFromHTML │ └── index.js ├── ConvertFromRawDraftContent │ └── index.js ├── ConvertToHTML │ └── index.js └── index.js ├── .storybook ├── config.js └── webpack.config.js ├── config ├── test-compiler.js ├── test-setup.js └── webpack.config.js ├── .npmignore ├── .flowconfig ├── images ├── italic.svg ├── eraser.svg ├── underline.svg ├── undo.svg ├── redo.svg ├── indent.svg ├── outdent.svg ├── emoji.svg ├── unordered.svg ├── openlink.svg ├── bold.svg ├── align-center.svg ├── align-left.svg ├── align-justify.svg ├── align-right.svg ├── link.svg ├── superscript.svg ├── color.svg ├── subscript.svg ├── monospace.svg ├── ordered.svg ├── font-size.svg └── image.svg ├── .eslintrc ├── LICENSE └── README.md /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = {} -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | npm-debug.log 4 | dist 5 | -------------------------------------------------------------------------------- /interfaces/mocha.js: -------------------------------------------------------------------------------- 1 | function describe() {}; 2 | function it() {}; 3 | function xit() {}; 4 | -------------------------------------------------------------------------------- /docs/images/github.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polydice/react-draft-wysiwyg/master/docs/images/github.png -------------------------------------------------------------------------------- /docs/static/main.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":[],"names":[],"mappings":"","file":"main.css","sourceRoot":""} -------------------------------------------------------------------------------- /interfaces/images.js: -------------------------------------------------------------------------------- 1 | declare module 'images' { 2 | declare var exports: { [key: string]: string }; 3 | } 4 | -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["react", "es2015", "stage-0"], 3 | "plugins": ["transform-flow-strip-types"] 4 | } 5 | -------------------------------------------------------------------------------- /docs/images/demo/bold.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polydice/react-draft-wysiwyg/master/docs/images/demo/bold.gif -------------------------------------------------------------------------------- /docs/images/demo/erase.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polydice/react-draft-wysiwyg/master/docs/images/demo/erase.gif -------------------------------------------------------------------------------- /docs/images/demo/image.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polydice/react-draft-wysiwyg/master/docs/images/demo/image.gif -------------------------------------------------------------------------------- /docs/images/demo/link.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polydice/react-draft-wysiwyg/master/docs/images/demo/link.gif -------------------------------------------------------------------------------- /docs/images/demo/redo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polydice/react-draft-wysiwyg/master/docs/images/demo/redo.gif -------------------------------------------------------------------------------- /docs/images/demo/undo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polydice/react-draft-wysiwyg/master/docs/images/demo/undo.gif -------------------------------------------------------------------------------- /interfaces/CSSModule.js: -------------------------------------------------------------------------------- 1 | declare module 'CSSModule' { 2 | declare var exports: { [key: string]: string }; 3 | } 4 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | /* @flow */ 2 | 3 | import Editor from './Editor'; 4 | 5 | module.exports = { 6 | Editor, 7 | }; 8 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | sudo: false 2 | os: 3 | - osx 4 | language: node_js 5 | node_js: 6 | - "7" 7 | script: 8 | - npm test 9 | -------------------------------------------------------------------------------- /docs/images/demo/indent.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polydice/react-draft-wysiwyg/master/docs/images/demo/indent.gif -------------------------------------------------------------------------------- /docs/images/demo/italic.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polydice/react-draft-wysiwyg/master/docs/images/demo/italic.gif -------------------------------------------------------------------------------- /docs/images/demo/justify.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polydice/react-draft-wysiwyg/master/docs/images/demo/justify.gif -------------------------------------------------------------------------------- /docs/images/demo/ordered.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polydice/react-draft-wysiwyg/master/docs/images/demo/ordered.gif -------------------------------------------------------------------------------- /docs/images/demo/outdent.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polydice/react-draft-wysiwyg/master/docs/images/demo/outdent.gif -------------------------------------------------------------------------------- /docs/images/demo/unlink.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polydice/react-draft-wysiwyg/master/docs/images/demo/unlink.gif -------------------------------------------------------------------------------- /docs/images/demo/left-align.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polydice/react-draft-wysiwyg/master/docs/images/demo/left-align.gif -------------------------------------------------------------------------------- /docs/images/demo/subscript.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polydice/react-draft-wysiwyg/master/docs/images/demo/subscript.gif -------------------------------------------------------------------------------- /docs/images/demo/underline.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polydice/react-draft-wysiwyg/master/docs/images/demo/underline.gif -------------------------------------------------------------------------------- /docs/images/demo/unordered.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polydice/react-draft-wysiwyg/master/docs/images/demo/unordered.gif -------------------------------------------------------------------------------- /docs/images/demo/center-align.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polydice/react-draft-wysiwyg/master/docs/images/demo/center-align.gif -------------------------------------------------------------------------------- /docs/images/demo/right-align.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polydice/react-draft-wysiwyg/master/docs/images/demo/right-align.gif -------------------------------------------------------------------------------- /docs/images/demo/superscript.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polydice/react-draft-wysiwyg/master/docs/images/demo/superscript.gif -------------------------------------------------------------------------------- /docs/images/demo/strikethrough.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polydice/react-draft-wysiwyg/master/docs/images/demo/strikethrough.gif -------------------------------------------------------------------------------- /interfaces/draftjs-to-html.js: -------------------------------------------------------------------------------- 1 | declare module 'draftjs-to-html' { 2 | declare var exports: { 3 | draftToHtml: () => {} 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /scripts/publish.sh: -------------------------------------------------------------------------------- 1 | git subtree split --prefix docs/static -b gh-pages 2 | git push -f origin gh-pages:gh-pages 3 | git branch -D gh-pages 4 | -------------------------------------------------------------------------------- /stories/CustomToolbar/styles.css: -------------------------------------------------------------------------------- 1 | .rdw-storybook-custom-option { 2 | border: 1px solid #f1f1f1; 3 | padding: 3px 10px; 4 | height: 22px; 5 | } 6 | -------------------------------------------------------------------------------- /docs/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "es2015", 4 | "stage-0", 5 | "react" 6 | ], 7 | "plugins": [ 8 | "lodash" 9 | ] 10 | } -------------------------------------------------------------------------------- /stories/I18n/styles.css: -------------------------------------------------------------------------------- 1 | .rdw-storybook-locale-wrapper { 2 | margin-bottom: 20px; 3 | } 4 | .rdw-storybook-locale-lbl { 5 | margin-right: 10px; 6 | } 7 | -------------------------------------------------------------------------------- /docs/src/components/Author/styles.css: -------------------------------------------------------------------------------- 1 | .author-root { 2 | margin: 30px; 3 | width: 50%; 4 | } 5 | .photo { 6 | height: 150px; 7 | width: auto; 8 | } 9 | -------------------------------------------------------------------------------- /stories/I18nEditor/styles.css: -------------------------------------------------------------------------------- 1 | .rdw-storybook-locale-wrapper { 2 | margin-bottom: 20px; 3 | } 4 | .rdw-storybook-locale-lbl { 5 | margin-right: 10px; 6 | } 7 | -------------------------------------------------------------------------------- /stories/ToolbarHidden/styles.css: -------------------------------------------------------------------------------- 1 | .rdw-storybook-locale-wrapper { 2 | margin-bottom: 20px; 3 | } 4 | .rdw-storybook-locale-lbl { 5 | margin-right: 10px; 6 | } 7 | -------------------------------------------------------------------------------- /src/controls/Remove/Component/styles.css: -------------------------------------------------------------------------------- 1 | .rdw-remove-wrapper { 2 | display: flex; 3 | align-items: center; 4 | margin-bottom: 6px; 5 | position: relative; 6 | } 7 | -------------------------------------------------------------------------------- /stories/FocusBlurCallbacks/styles.css: -------------------------------------------------------------------------------- 1 | .rdw-storybook-locale-wrapper { 2 | margin-bottom: 20px; 3 | } 4 | .rdw-storybook-locale-lbl { 5 | margin-right: 10px; 6 | } 7 | -------------------------------------------------------------------------------- /.storybook/config.js: -------------------------------------------------------------------------------- 1 | import { configure } from '@storybook/react'; 2 | 3 | function loadStories() { 4 | require('../stories'); 5 | } 6 | 7 | configure(loadStories, module); 8 | -------------------------------------------------------------------------------- /src/decorators/HashTag/styles.css: -------------------------------------------------------------------------------- 1 | .rdw-hashtag-link { 2 | text-decoration: none; 3 | color: #1236ff; 4 | background-color: #f0fbff; 5 | padding: 1px 2px; 6 | border-radius: 2px; 7 | } 8 | -------------------------------------------------------------------------------- /src/controls/BlockType/Component/styles.css: -------------------------------------------------------------------------------- 1 | .rdw-block-wrapper { 2 | display: flex; 3 | align-items: center; 4 | margin-bottom: 6px; 5 | } 6 | .rdw-block-dropdown { 7 | width: 110px; 8 | } 9 | -------------------------------------------------------------------------------- /src/decorators/Mention/Mention/styles.css: -------------------------------------------------------------------------------- 1 | .rdw-mention-link { 2 | text-decoration: none; 3 | color: #1236ff; 4 | background-color: #f0fbff; 5 | padding: 1px 2px; 6 | border-radius: 2px; 7 | } 8 | -------------------------------------------------------------------------------- /stories/FloatingToolbar/styles.css: -------------------------------------------------------------------------------- 1 | .rdw-storybook-toolbar-absolute { 2 | position: absolute; 3 | top: -130px; 4 | } 5 | .rdw-storybook-wrapper-margined { 6 | margin-top: 100px; 7 | position: relative; 8 | } 9 | -------------------------------------------------------------------------------- /config/test-compiler.js: -------------------------------------------------------------------------------- 1 | require('babel-core/register'); 2 | function noop() { 3 | return null; 4 | } 5 | require.extensions['.css'] = noop; 6 | require.extensions['.svg'] = noop; 7 | require.extensions['.png'] = noop; 8 | -------------------------------------------------------------------------------- /src/components/Dropdown/index.js: -------------------------------------------------------------------------------- 1 | /* @flow */ 2 | 3 | import Dropdown from './Dropdown'; 4 | import DropdownOption from './DropdownOption'; 5 | 6 | module.exports = { 7 | Dropdown, 8 | DropdownOption, 9 | }; 10 | -------------------------------------------------------------------------------- /src/decorators/Link/styles.css: -------------------------------------------------------------------------------- 1 | .rdw-link-decorator-wrapper { 2 | position: relative; 3 | } 4 | .rdw-link-decorator-icon { 5 | position: absolute; 6 | left: 40%; 7 | top: 0; 8 | cursor: pointer; 9 | background-color: white; 10 | } 11 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | .storybook 2 | config 3 | css 4 | docs 5 | images 6 | interfaces 7 | js 8 | scripts 9 | stories 10 | node_modules 11 | .babelrc 12 | .eslintignore 13 | .eslintrc 14 | .flowconfig 15 | .travis.yml 16 | .gitignore 17 | postcss.config.js 18 | .npmignore 19 | yarn.lock 20 | -------------------------------------------------------------------------------- /interfaces/draftjs-utils.js: -------------------------------------------------------------------------------- 1 | declare module 'draftjs-utils' { 2 | declare var exports: { 3 | changeDepth: () => {}, 4 | getSelectedBlocksType: () => {}, 5 | getEntityRange: () => {}, 6 | getSelectionText: () => {}, 7 | getSelectionEntity: () => {}, 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /src/event-handler/suggestions.js: -------------------------------------------------------------------------------- 1 | let suggestionDropdownOpen; 2 | 3 | export default { 4 | open: () => { 5 | suggestionDropdownOpen = true; 6 | }, 7 | 8 | close: () => { 9 | suggestionDropdownOpen = false; 10 | }, 11 | 12 | isOpen: () => suggestionDropdownOpen, 13 | }; 14 | -------------------------------------------------------------------------------- /src/controls/FontSize/Component/styles.css: -------------------------------------------------------------------------------- 1 | .rdw-fontsize-wrapper { 2 | display: flex; 3 | align-items: center; 4 | margin-bottom: 6px; 5 | } 6 | .rdw-fontsize-dropdown { 7 | min-width: 40px; 8 | } 9 | .rdw-fontsize-option { 10 | display: flex; 11 | justify-content: center; 12 | } 13 | -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | React Draft Wysiwyg 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /docs/src/components/index.js: -------------------------------------------------------------------------------- 1 | /* @flow */ 2 | 3 | import App from './App'; 4 | import Home from './Home'; 5 | import Demo from './Demo'; 6 | import Docs from './Docs'; 7 | import Author from './Author'; 8 | 9 | module.exports = { 10 | App, 11 | Home, 12 | Demo, 13 | Docs, 14 | Author, 15 | }; 16 | -------------------------------------------------------------------------------- /docs/template/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | React Draft Wysiwyg 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /src/controls/Inline/Component/styles.css: -------------------------------------------------------------------------------- 1 | .rdw-inline-wrapper { 2 | display: flex; 3 | align-items: center; 4 | margin-bottom: 6px; 5 | } 6 | .rdw-inline-dropdown { 7 | width: 50px; 8 | } 9 | .rdw-inline-dropdownoption { 10 | height: 40px; 11 | display: flex; 12 | justify-content: center; 13 | } 14 | -------------------------------------------------------------------------------- /docs/static/index.html: -------------------------------------------------------------------------------- 1 | React Draft Wysiwyg
-------------------------------------------------------------------------------- /src/components/Spinner/index.js: -------------------------------------------------------------------------------- 1 | /* @flow */ 2 | 3 | import React from 'react'; 4 | import './styles.css'; 5 | 6 | export default () => 7 | (
8 |
9 |
10 |
11 |
); 12 | -------------------------------------------------------------------------------- /src/controls/History/Component/styles.css: -------------------------------------------------------------------------------- 1 | .rdw-history-wrapper { 2 | display: flex; 3 | align-items: center; 4 | margin-bottom: 6px; 5 | } 6 | .rdw-history-dropdownoption { 7 | height: 40px; 8 | display: flex; 9 | justify-content: center; 10 | } 11 | .rdw-history-dropdown { 12 | width: 50px; 13 | } 14 | -------------------------------------------------------------------------------- /src/controls/List/Component/styles.css: -------------------------------------------------------------------------------- 1 | .rdw-list-wrapper { 2 | display: flex; 3 | align-items: center; 4 | margin-bottom: 6px; 5 | } 6 | .rdw-list-dropdown { 7 | width: 50px; 8 | z-index: 90; 9 | } 10 | .rdw-list-dropdownOption { 11 | height: 40px; 12 | display: flex; 13 | justify-content: center; 14 | } 15 | -------------------------------------------------------------------------------- /src/decorators/Mention/index.js: -------------------------------------------------------------------------------- 1 | import Mention from './Mention'; 2 | import Suggestion from './Suggestion'; 3 | 4 | const getDecorators = config => [ 5 | (new Mention(config.mentionClassName)).getMentionDecorator(), 6 | (new Suggestion(config)).getSuggestionDecorator(), 7 | ]; 8 | 9 | module.exports = getDecorators; 10 | -------------------------------------------------------------------------------- /src/utils/BlockStyle.js: -------------------------------------------------------------------------------- 1 | // The function will return block inline styles using block level meta-data 2 | export default function blockStyleFn(block: Object): string { 3 | const blockAlignment = block.getData() && block.getData().get('text-align'); 4 | if (blockAlignment) { 5 | return `rdw-${blockAlignment}-aligned-block`; 6 | } 7 | return ''; 8 | } 9 | -------------------------------------------------------------------------------- /docs/src/components/Docs/Props/ReadOnlyProp/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export default () => ( 4 |
5 |

ReadOnly

6 |
7 | The property can be used to render Editor in ReadOnly mode. 8 | When its true user can not change editor text or use any toolbar option. 9 |
10 |
11 | ); 12 | -------------------------------------------------------------------------------- /stories/Basic/index.js: -------------------------------------------------------------------------------- 1 | /* @flow */ 2 | 3 | import React from 'react'; 4 | import { Editor } from '../../src'; 5 | 6 | const Basic = () => (
7 | 12 |
); 13 | 14 | export default Basic; 15 | -------------------------------------------------------------------------------- /src/components/Spinner/__test__/spinnerTest.js: -------------------------------------------------------------------------------- 1 | /* @flow */ 2 | 3 | import React from 'react'; 4 | import { expect } from 'chai'; 5 | import { shallow } from 'enzyme'; 6 | import Spinner from '..'; 7 | 8 | describe('Option test suite', () => { 9 | it('should have a div when rendered', () => { 10 | expect(shallow( 11 | , 12 | ).node.type).to.equal('div'); 13 | }); 14 | }); 15 | -------------------------------------------------------------------------------- /src/components/Dropdown/DropdownOption/styles.css: -------------------------------------------------------------------------------- 1 | .rdw-dropdownoption-default { 2 | min-height: 25px; 3 | display: flex; 4 | align-items: center; 5 | padding: 0 5px; 6 | } 7 | .rdw-dropdownoption-highlighted { 8 | background: #F1F1F1; 9 | } 10 | .rdw-dropdownoption-active { 11 | background: #f5f5f5; 12 | } 13 | .rdw-dropdownoption-disabled { 14 | opacity: 0.3; 15 | cursor: default; 16 | } 17 | -------------------------------------------------------------------------------- /src/controls/FontFamily/Component/styles.css: -------------------------------------------------------------------------------- 1 | .rdw-fontfamily-wrapper { 2 | display: flex; 3 | align-items: center; 4 | margin-bottom: 6px; 5 | } 6 | .rdw-fontfamily-dropdown { 7 | width: 115px; 8 | } 9 | .rdw-fontfamily-placeholder { 10 | white-space: nowrap; 11 | max-width: 90px; 12 | overflow: hidden; 13 | text-overflow: ellipsis; 14 | } 15 | .rdw-fontfamily-optionwrapper { 16 | width: 140px; 17 | } 18 | -------------------------------------------------------------------------------- /src/event-handler/keyDown.js: -------------------------------------------------------------------------------- 1 | let callBacks = []; 2 | 3 | export default { 4 | onKeyDown: (event: Object) => { 5 | callBacks.forEach((callBack) => { 6 | callBack(event); 7 | }); 8 | }, 9 | 10 | registerCallBack: (callBack): void => { 11 | callBacks.push(callBack); 12 | }, 13 | 14 | deregisterCallBack: (callBack): void => { 15 | callBacks = callBacks.filter(cb => cb !== callBack); 16 | }, 17 | }; 18 | -------------------------------------------------------------------------------- /src/i18n/index.js: -------------------------------------------------------------------------------- 1 | import en from './en'; 2 | import fr from './fr'; 3 | import zh from './zh'; 4 | import ru from './ru'; 5 | import pt from './pt'; 6 | import ko from './ko'; 7 | import it from './it'; 8 | import nl from './nl'; 9 | import de from './de'; 10 | import da from './da'; 11 | 12 | module.exports = { 13 | en, 14 | fr, 15 | zh, 16 | ru, 17 | pt, 18 | ko, 19 | it, 20 | nl, 21 | de, 22 | da 23 | }; 24 | -------------------------------------------------------------------------------- /docs/src/components/Demo/EditorCustomizedToolbarOption/ColorPic/styles.css: -------------------------------------------------------------------------------- 1 | .demo-color-wrapper { 2 | display: flex; 3 | align-items: center; 4 | margin-bottom: 6px; 5 | position: relative; 6 | } 7 | .demo-icon-wrapper { 8 | border: 1px solid #F1F1F1; 9 | padding: 3px 5px; 10 | } 11 | .demo-icon { 12 | width: 20px; 13 | } 14 | .demo-color-modal { 15 | position: absolute; 16 | right: -70px; 17 | top: 135%; 18 | z-index: 10; 19 | } -------------------------------------------------------------------------------- /docs/src/components/Docs/Props/WrapperIdProp/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export default () => ( 4 |
5 |

wrapperId

6 |
7 | The library generates and adds an id to wrapper around the editor. This is required for some more complex event handling. 8 | In case of server side rendering generated id can create trouble and thus this property can be used. 9 |
10 |
11 | ); 12 | -------------------------------------------------------------------------------- /docs/src/components/Docs/Props/DecoratorProp/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export default () => ( 4 |
5 |

customDecorators

6 |
7 | Rendering of a entities can be changed using customDecorators. An array of decorators can be passed to the editor. 8 | These should be decorators exactly as in DraftJS, an object with 2 properties: strategy and component. 9 |
10 |
11 | ); 12 | -------------------------------------------------------------------------------- /stories/ReadOnly/index.js: -------------------------------------------------------------------------------- 1 | /* @flow */ 2 | 3 | import React from 'react'; 4 | import { Editor } from '../../src'; 5 | 6 | const Basic = () => 7 | (
8 |

ReadOnly editor

9 | 15 |
); 16 | 17 | export default Basic; 18 | -------------------------------------------------------------------------------- /stories/styles.css: -------------------------------------------------------------------------------- 1 | .rdw-storybook-root { 2 | margin: 50px; 3 | width: 90%; 4 | } 5 | .rdw-storybook-wrapper { 6 | } 7 | .rdw-storybook-editor { 8 | border: 1px solid #F1F1F1; 9 | padding: 5px; 10 | border-radius: 2px; 11 | height: 200px; 12 | } 13 | .rdw-storybook-toolbar { 14 | top: -130px; 15 | } 16 | .rdw-storybook-textarea { 17 | margin-top: 20px; 18 | resize: none; 19 | width: 100%; 20 | border: 1px solid #F1F1F1; 21 | height: 100px; 22 | } 23 | -------------------------------------------------------------------------------- /docs/src/components/Menu/styles.css: -------------------------------------------------------------------------------- 1 | .menu-root { 2 | width: 120px; 3 | display: flex; 4 | flex-direction: column; 5 | padding: 30px; 6 | border-right: 1px solid #a21717; 7 | } 8 | .menu-option { 9 | margin-top: 25px; 10 | text-decoration: none; 11 | font-size: 18px; 12 | font-family: Roboto; 13 | cursor: pointer; 14 | color: black; 15 | } 16 | .menu-option:hover { 17 | color: #a21717; 18 | } 19 | .menu-option-active { 20 | color: #a21717; 21 | } 22 | -------------------------------------------------------------------------------- /docs/src/components/Docs/index.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import Installation from './Installation'; 3 | import Usage from './Usage'; 4 | import Props from './Props'; 5 | import ARIASupport from './ARIASupport'; 6 | import DataConversion from './DataConversion'; 7 | import './styles.css'; 8 | 9 | export default () => 10 |
11 | 12 | 13 | 14 | 15 | 16 |
; 17 | -------------------------------------------------------------------------------- /stories/SpellCheck/index.js: -------------------------------------------------------------------------------- 1 | /* @flow */ 2 | 3 | import React from 'react'; 4 | import { Editor } from '../../src'; 5 | 6 | const SpellCheck = () => 7 | (
8 |

Editor with spellcheck

9 | 15 |
); 16 | 17 | export default SpellCheck; 18 | -------------------------------------------------------------------------------- /docs/src/components/Docs/Props/BlockRenderingProp/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export default () => ( 4 |
5 |

customBlockRenderFunc

6 |
7 | Rendering of a blocks can be changed using customDecorators. It should be a function that returns a react component.
8 | (Currently if customBlockRenderFunc is present the default renderers of the editor do not work, this will soon be fixed.) 9 |
10 |
11 | ); 12 | -------------------------------------------------------------------------------- /src/decorators/Mention/Suggestion/styles.css: -------------------------------------------------------------------------------- 1 | .rdw-suggestion-wrapper { 2 | position: relative; 3 | } 4 | .rdw-suggestion-dropdown { 5 | position: absolute; 6 | display: flex; 7 | flex-direction: column; 8 | border: 1px solid #F1F1F1; 9 | min-width: 100px; 10 | max-height: 150px; 11 | overflow: auto; 12 | background: white; 13 | z-index: 100; 14 | } 15 | .rdw-suggestion-option { 16 | padding: 7px 5px; 17 | border-bottom: 1px solid #f1f1f1; 18 | } 19 | .rdw-suggestion-option-active { 20 | background-color: #F1F1F1; 21 | } 22 | -------------------------------------------------------------------------------- /src/renderer/Embedded/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | 4 | const Embed = ({ block, contentState }) => { 5 | const entity = contentState.getEntity(block.getEntityAt(0)); 6 | const { src, height, width } = entity.getData(); 7 | return (