125 |
154 | );
155 | }
156 | }
157 |
158 | MyEditor.propTypes = {
159 | handleImageFile: React.PropTypes.func.isRequired,
160 | onChange: React.PropTypes.func
161 | };
162 |
163 | MyEditor.defaultProps = {
164 | onChange: () => {}
165 | };
166 |
167 | export default MyEditor;
168 |
--------------------------------------------------------------------------------
/src/main/editor/components/action/ActionBar.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Tabs, Tab } from 'material-ui/Tabs';
3 |
4 | const ActionBar = (props) => {
5 | const { onLeftClicked, onCenterClicked, onRightClicked, selectedIndex } = props;
6 | return (
7 | e.preventDefault()}
140 | >
141 |
152 | {/* eslint-enable jsx-a11y/no-static-element-interactions */}
153 |
32 | {BLOCK_TYPES.map(type =>
33 |
42 | );
43 | };
44 |
45 | BlockStyleControls.propTypes = {
46 | currentType: React.PropTypes.string.isRequired,
47 | onToggle: React.PropTypes.func
48 | };
49 |
50 | export default BlockStyleControls;
51 |
--------------------------------------------------------------------------------
/src/main/editor/components/controls/ImageControl.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Entity } from 'draft-js';
3 | import IconButton from 'material-ui/IconButton';
4 | import FlatButton from 'material-ui/FlatButton';
5 | import PhotoIcon from 'material-ui/svg-icons/editor/insert-photo';
6 | import UploadIcon from 'material-ui/svg-icons/file/file-upload';
7 | import Dialog from 'material-ui/Dialog';
8 | import TextField from 'material-ui/TextField';
9 | import styles from './styles.css';
10 | import Types from '../../components/entities/constants/Types';
11 |
12 | class ImageControl extends React.Component {
13 | constructor(props) {
14 | super(props);
15 | this.state = {
16 | open: false,
17 | src: '',
18 | title: '',
19 | fileName: ''
20 | };
21 |
22 | this.handleOpen = () => this._handleOpen();
23 | this.setTitle = e => this._setTitle(e);
24 | this.handleFiles = e => this._handleFiles(e);
25 | this.insertImage = () => this._insertImage();
26 | this.handleClose = () => this._handleClose();
27 | this.confirmTitle = e => this._confirmTitle(e);
28 | this.openFileDialog = () => this._openFileDialog();
29 | }
30 |
31 | _handleOpen() {
32 | this.setState({
33 | open: true
34 | });
35 | }
36 |
37 | _handleClose() {
38 | this.setState({
39 | open: false
40 | });
41 | }
42 |
43 | _setTitle(e) {
44 | this.setState({
45 | title: e.target.value
46 | });
47 | }
48 |
49 | _handleFiles(e) {
50 | const imageFile = e.target.files[0];
51 | this.props.handleImageFile(imageFile, (src) => {
52 | this.setState({
53 | src,
54 | fileName: imageFile.name
55 | }, () => this.refs['img-title'].focus());
56 | });
57 | }
58 |
59 | _insertImage() {
60 | const { src, title } = this.state;
61 | const entityKey = Entity.create(Types.IMAGE, 'IMMUTABLE', {
62 | src,
63 | title,
64 | alignment: 'center'
65 | });
66 | this.props.onImageAdd(entityKey);
67 | this.handleClose();
68 | }
69 |
70 | _confirmTitle(e) {
71 | if (e.keyCode === 13) {
72 | this.insertImage();
73 | }
74 | }
75 |
76 | _openFileDialog() {
77 | this.refs['image-file-input'].click();
78 | }
79 |
80 | render() {
81 | const actions = [
82 |
16 | {INLINE_STYLES.map(type =>
17 |
26 | );
27 | };
28 |
29 | InlineStyleControls.propTypes = {
30 | // eslint-disable-next-line react/forbid-prop-types
31 | currentStyle: React.PropTypes.object.isRequired,
32 | onToggle: React.PropTypes.func
33 | };
34 |
35 | export default InlineStyleControls;
36 |
--------------------------------------------------------------------------------
/src/main/editor/components/controls/LinkControl.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Entity } from 'draft-js';
3 | import IconButton from 'material-ui/IconButton';
4 | import LinkIcon from 'material-ui/svg-icons/content/link';
5 | import Dialog from 'material-ui/Dialog';
6 | import TextField from 'material-ui/TextField';
7 | import FlatButton from 'material-ui/FlatButton';
8 | import Snackbar from 'material-ui/Snackbar';
9 | import { findLinkEntities } from '../../decorators/LinkDecorator';
10 | import Types from '../../components/entities/constants/Types';
11 |
12 | function findLinkEntityRangesIn(blockContent) {
13 | const entityRanges = [];
14 | findLinkEntities(blockContent, (start, end) => {
15 | entityRanges.push({ start, end });
16 | });
17 | return entityRanges;
18 | }
19 |
20 | function matchesExactly(selectionState, entityRange) {
21 | return selectionState.getStartOffset() === entityRange.start &&
22 | selectionState.getEndOffset() === entityRange.end;
23 | }
24 |
25 | class LinkControl extends React.Component {
26 | constructor(props) {
27 | super(props);
28 | this.state = {
29 | open: false,
30 | url: '',
31 | showLinkError: false
32 | };
33 | this.toggleLink = () => this._toggleLink();
34 | this.setUrl = e => this._setUrl(e);
35 | this.handleOpen = () => this._handleOpen();
36 | this.handleClose = () => this._handleClose();
37 | this.confirmLink = e => this._confirmLink(e);
38 | this.closeLinkError = () => this._closeLinkError();
39 | }
40 |
41 | _toggleLink() {
42 | const { url } = this.state;
43 | const entityKey = url ? Entity.create(Types.LINK, 'MUTABLE', { href: url }) : null;
44 | this.props.onToggle(entityKey);
45 | this.handleClose();
46 | }
47 |
48 | _confirmLink(e) {
49 | if (e.keyCode === 13) {
50 | this.toggleLink();
51 | }
52 | }
53 |
54 | _setUrl(e) {
55 | this.setState({
56 | url: e.target.value
57 | });
58 | }
59 |
60 | _handleClose() {
61 | this.setState({
62 | open: false
63 | });
64 | }
65 |
66 | _handleOpen() {
67 | if (!this.props.editorState.getSelection().isCollapsed()) {
68 | this.setState({
69 | open: true,
70 | url: this._getCurrentUrl()
71 | }, () => {
72 | this.refs['url-input'].focus();
73 | });
74 | } else {
75 | this.setState({
76 | showLinkError: true
77 | });
78 | }
79 | }
80 |
81 | _closeLinkError() {
82 | this.setState({
83 | showLinkError: false
84 | });
85 | }
86 |
87 | _getCurrentUrl() {
88 | let url;
89 | const { editorState } = this.props;
90 | const selection = editorState.getSelection();
91 | const blockContent = editorState.getCurrentContent()
92 | .getBlockForKey(selection.getAnchorKey());
93 | const linkEntityRanges = findLinkEntityRangesIn(blockContent);
94 | if (linkEntityRanges.length === 1 && matchesExactly(selection, linkEntityRanges[0])) {
95 | const entityKey = blockContent.getEntityAt(0);
96 | const entity = entityKey ? Entity.get(entityKey) : null;
97 | url = entity && entity.getType() === Types.LINK ? entity.getData().href : '';
98 | } else {
99 | url = '';
100 | }
101 | return url;
102 | }
103 |
104 | render() {
105 | const actions = [
106 |
42 | {showActionBar ? this.props.onAlign('left')}
46 | onCenterClicked={() => this.props.onAlign('center')}
47 | onRightClicked={() => this.props.onAlign('right')}
48 | /> : false}
49 | {/* eslint-disable jsx-a11y/no-static-element-interactions */}
50 |
55 | );
56 | }
57 |
58 | }
59 |
60 | Alignable.propTypes = {
61 | children: React.PropTypes.node.isRequired,
62 | onAlign: React.PropTypes.func,
63 | alignment: React.PropTypes.string
64 | };
65 |
66 | Alignable.defaultProps = {
67 | onAlign: () => {}
68 | };
69 |
70 | export default Alignable;
71 |
--------------------------------------------------------------------------------
/src/main/editor/container/align/styles.css:
--------------------------------------------------------------------------------
1 | .alignable {
2 | display: inline-block;
3 | position: relative;
4 | }
5 |
6 | .action-bar {
7 | position: absolute;
8 | top: 0;
9 | left: 0;
10 | right: 0;
11 | z-index: 10;
12 | }
13 |
--------------------------------------------------------------------------------
/src/main/editor/container/resize/Resizable.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import interact from 'interact.js';
4 | import classNames from 'classnames/bind';
5 | import styles from './styles.css';
6 |
7 | const classNamesWithStyles = classNames.bind(styles);
8 |
9 | class Resizable extends React.Component {
10 |
11 | constructor(props) {
12 | super(props);
13 | this.startEdit = () => this._startEdit();
14 | this.enableResizable = () => this._enableResizable();
15 | this.disableResizable = () => this._disableResizable();
16 | this.state = {
17 | editMode: false
18 | };
19 | }
20 |
21 | componentDidMount() {
22 | this.eventListener = (e) => {
23 | const domNode = ReactDOM.findDOMNode(this);
24 | if (e.target !== domNode) {
25 | this.setState({ editMode: false }, this.disableResizable);
26 | }
27 | };
28 | document.addEventListener('click', this.eventListener, false);
29 | }
30 |
31 | componentWillUnmount() {
32 | document.removeEventListener('click', this.eventListener);
33 | }
34 |
35 | _disableResizable() {
36 | const domNode = ReactDOM.findDOMNode(this);
37 | interact(domNode).unset();
38 | }
39 |
40 | _enableResizable() {
41 | const domNode = ReactDOM.findDOMNode(this);
42 | interact(domNode)
43 | .resizable({
44 | preserveAspectRatio: true,
45 | edges: { right: true, bottom: true }
46 | })
47 | .on('resizemove', (event) => {
48 | const target = event.target;
49 | let x = (parseFloat(target.getAttribute('data-x')) || 0);
50 | let y = (parseFloat(target.getAttribute('data-y')) || 0);
51 |
52 | // update the element's style
53 | target.style.width = `${event.rect.width}px`;
54 | target.style.height = `${event.rect.height}px`;
55 |
56 | // translate when resizing from top or left edges
57 | x += event.deltaRect.left;
58 | y += event.deltaRect.top;
59 |
60 | target.style.webkitTransform = target.style.transform =
61 | `translate(${x}px, ${y}px)`;
62 |
63 | target.setAttribute('data-x', x);
64 | target.setAttribute('data-y', y);
65 | })
66 | .on('resizeend', (event) => {
67 | const width = event.target.width;
68 | const height = event.target.height;
69 | this.props.onResize(width, height);
70 | })
71 | .on('move', (event) => {
72 | const target = event.target;
73 | target.style.cursor = document.getElementsByTagName('html')[0].style.cursor;
74 | });
75 | }
76 |
77 | _startEdit() {
78 | this.setState({ editMode: true }, this.enableResizable);
79 | }
80 |
81 | render() {
82 | const { editMode } = this.state;
83 | const className = classNamesWithStyles({
84 | selected: editMode
85 | });
86 | const children = React.Children.only(this.props.children);
87 | return React.cloneElement(children, {
88 | className,
89 | onClick: this.startEdit
90 | });
91 | }
92 | }
93 |
94 | Resizable.propTypes = {
95 | children: React.PropTypes.node.isRequired,
96 | onResize: React.PropTypes.func
97 | };
98 |
99 | Resizable.defaultProps = {
100 | onResize: () => {}
101 | };
102 |
103 | export default Resizable;
104 |
--------------------------------------------------------------------------------
/src/main/editor/container/resize/styles.css:
--------------------------------------------------------------------------------
1 | .selected {
2 | outline-color: rgb(77, 144, 254); // #4D90FE
3 | outline-offset: -2px;
4 | outline-style: auto;
5 | outline-width: 6px;
6 | cursor: move;
7 | }
8 |
--------------------------------------------------------------------------------
/src/main/editor/decorators/LinkDecorator.js:
--------------------------------------------------------------------------------
1 | import { Entity } from 'draft-js';
2 | import Link from '../components/entities/Link';
3 | import Types from '../components/entities/constants/Types';
4 |
5 | export function findLinkEntities(contentBlock, callback) {
6 | contentBlock.findEntityRanges((character) => {
7 | const entityKey = character.getEntity();
8 | return (entityKey !== null && Entity.get(entityKey).getType() === Types.LINK);
9 | }, callback);
10 | }
11 |
12 | export default Object.freeze({
13 | strategy: findLinkEntities,
14 | component: Link
15 | });
16 |
--------------------------------------------------------------------------------
/src/main/editor/modifier/Modifier.js:
--------------------------------------------------------------------------------
1 | import copyBlock from './copyBlock';
2 | import removeBlock from './removeBlock';
3 | import moveBlock from './moveBlock';
4 |
5 | export { copyBlock, removeBlock, moveBlock };
6 |
--------------------------------------------------------------------------------
/src/main/editor/modifier/copyBlock.js:
--------------------------------------------------------------------------------
1 | import { copyAtomicBlock } from './utils/AtomicBlockUtils';
2 |
3 | export default function (contentState, targetSelection, blockKey) {
4 | const block = contentState.getBlockForKey(blockKey);
5 | let newContentState;
6 | switch (block.getType()) {
7 | case 'atomic':
8 | newContentState = copyAtomicBlock(contentState, targetSelection, block);
9 | break;
10 | default:
11 | newContentState = contentState;
12 | }
13 | return newContentState;
14 | }
15 |
--------------------------------------------------------------------------------
/src/main/editor/modifier/moveBlock.js:
--------------------------------------------------------------------------------
1 | import copyBlock from './copyBlock';
2 | import removeBlock from './removeBlock';
3 | import { getBlockRange } from './utils/BlockUtils';
4 | import { isSelectionSame } from './utils/SelectionUtils';
5 |
6 | export default function (contentState, targetSelection, blockKey) {
7 | let newContentState;
8 | const blockRange = getBlockRange(contentState, blockKey);
9 | if (!isSelectionSame(targetSelection, blockRange)) {
10 | const contentWithCopiedBlock = copyBlock(contentState, targetSelection, blockKey);
11 | newContentState = removeBlock(contentWithCopiedBlock, blockKey);
12 | } else {
13 | newContentState = contentState;
14 | }
15 | return newContentState;
16 | }
17 |
--------------------------------------------------------------------------------
/src/main/editor/modifier/removeBlock.js:
--------------------------------------------------------------------------------
1 | import { Modifier } from 'draft-js';
2 | import { getBlockRange } from './utils/BlockUtils';
3 |
4 | export default function (contentState, blockKey) {
5 | const blockRange = getBlockRange(contentState, blockKey);
6 |
7 | const contentWithResettedBlock = Modifier.setBlockType(
8 | contentState,
9 | blockRange,
10 | 'unstyled'
11 | );
12 |
13 | return Modifier.removeRange(
14 | contentWithResettedBlock,
15 | blockRange,
16 | 'backward'
17 | );
18 | }
19 |
--------------------------------------------------------------------------------
/src/main/editor/modifier/utils/AtomicBlockUtils.js:
--------------------------------------------------------------------------------
1 | import {
2 | Modifier,
3 | CharacterMetadata,
4 | ContentBlock,
5 | BlockMapBuilder,
6 | genKey
7 | } from 'draft-js';
8 | import { List, Repeat } from 'immutable';
9 |
10 | const copyAtomicBlock = (contentState, targetSelection, block) => {
11 | const entityKey = block.getEntityAt(0);
12 |
13 | const afterRemoval = Modifier.removeRange(contentState, targetSelection, 'backward');
14 | const afterSplit = Modifier.splitBlock(afterRemoval, afterRemoval.getSelectionAfter());
15 | const insertionTarget = afterSplit.getSelectionAfter();
16 | const asAtomicBlock = Modifier.setBlockType(afterSplit, insertionTarget, 'atomic');
17 |
18 | const charData = CharacterMetadata.create({ entity: entityKey });
19 | const fragmentArray = [new ContentBlock({
20 | key: genKey(),
21 | type: 'atomic',
22 | text: block.getText(),
23 | characterList: List(Repeat(charData, block.getText().length)) // eslint-disable-line new-cap
24 | }), new ContentBlock({
25 | key: genKey(),
26 | type: 'unstyled',
27 | text: '',
28 | characterList: List() // eslint-disable-line new-cap
29 | })];
30 |
31 | const fragment = BlockMapBuilder.createFromArray(fragmentArray);
32 | const withAtomicBlock = Modifier.replaceWithFragment(asAtomicBlock, insertionTarget, fragment);
33 | const newContent = withAtomicBlock.merge({
34 | selectionBefore: targetSelection,
35 | selectionAfter: withAtomicBlock.getSelectionAfter().set('hasFocus', true)
36 | });
37 |
38 | return newContent;
39 | };
40 |
41 | export { copyAtomicBlock };
42 |
--------------------------------------------------------------------------------
/src/main/editor/modifier/utils/BlockUtils.js:
--------------------------------------------------------------------------------
1 | import { SelectionState } from 'draft-js';
2 |
3 | const getBlockRange = (contentState, blockKey) => {
4 | const block = contentState.getBlockForKey(blockKey);
5 |
6 | return new SelectionState({
7 | anchorKey: blockKey,
8 | anchorOffset: 0,
9 | focusKey: blockKey,
10 | focusOffset: block.getLength(),
11 | isBackward: false
12 | });
13 | };
14 |
15 | export { getBlockRange };
16 |
--------------------------------------------------------------------------------
/src/main/editor/modifier/utils/SelectionUtils.js:
--------------------------------------------------------------------------------
1 | function isSelectionSame({ anchorKey: ak1, focusKey: fk1 }, { anchorKey: ak2, focusKey: fk2 }) {
2 | return ak1 === ak2 && fk1 === fk2;
3 | }
4 |
5 | export { isSelectionSame };
6 |
--------------------------------------------------------------------------------
/src/main/editor/styles/editor.global.css:
--------------------------------------------------------------------------------
1 | .public-DraftEditorPlaceholder-root,
2 | .public-DraftEditor-content {
3 | margin: 0 -15px -15px;
4 | padding: 15px;
5 | }
6 |
--------------------------------------------------------------------------------
/src/main/editor/utils/Utils.js:
--------------------------------------------------------------------------------
1 | const valuesAsArray = obj => Object.keys(obj).map(key => obj[key]);
2 |
3 | export { valuesAsArray };
4 |
--------------------------------------------------------------------------------
/src/test/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "plugins": [
3 | "mocha"
4 | ],
5 | "rules": {
6 | "mocha/no-global-tests": 2,
7 | "mocha/handle-done-callback": 2,
8 | "mocha/no-exclusive-tests": 1,
9 | "mocha/no-skipped-tests": 1,
10 | "no-unused-expressions": 0,
11 | "import/no-extraneous-dependencies": 0,
12 | },
13 | "env": {
14 | "mocha": true
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/src/test/editor/components/action/ActionBar.spec.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import chai from 'chai';
3 | import chaiEnzyme from 'chai-enzyme';
4 | import chaiSinon from 'sinon-chai';
5 | import sinon from 'sinon';
6 | import ActionBar from '../../../../main/editor/components/action/ActionBar';
7 | import { mountWithMuiContext, simulateTouchTap } from '../../../utils/TestUtils';
8 |
9 | chai.should();
10 | chai.use(chaiEnzyme());
11 | chai.use(chaiSinon);
12 |
13 | describe('
51 | {this.props.children}
52 |
53 | {/* eslint-enable jsx-a11y/no-static-element-interactions */}
54 | foo
foo
foo
foo
49 |
51 | );
52 | alignable.should.have.ref('alignable');
53 | });
54 |
55 | it('should invoke onAlign with left on left button click', () => {
56 | const onAlign = sinon.spy();
57 | const alignable = mountWithMuiContext(
58 | foo
50 | foo
60 | foo
73 | foo
86 |