Editor fixes (#143)
* Use icons for style menu * Add h1/h2 options to style toolbar * Handle rich paste events
This commit is contained in:
committed by
Cássio Souza
parent
2e1d98ac7e
commit
72b56d1cbc
@ -1,14 +1,26 @@
|
|||||||
.Toolbar {
|
.Toolbar {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
z-index: 1000;
|
z-index: 1000;
|
||||||
display: none;
|
display: none;
|
||||||
margin: none;
|
margin: none;
|
||||||
padding: none;
|
padding: none;
|
||||||
|
box-shadow: 1px 1px 5px;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.Button {
|
.Button {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
|
||||||
|
& button {
|
||||||
|
padding: 5px;
|
||||||
|
border: none;
|
||||||
|
border-right: 1px solid #eee;
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.Button:last-child button {
|
||||||
|
border-right: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.Visible {
|
.Visible {
|
||||||
|
@ -1,9 +1,12 @@
|
|||||||
import React, { Component, PropTypes } from 'react';
|
import React, { Component, PropTypes } from 'react';
|
||||||
|
import { Icon } from '../../../UI';
|
||||||
import styles from './Toolbar.css';
|
import styles from './Toolbar.css';
|
||||||
|
|
||||||
function button(label, action) {
|
function button(label, icon, action) {
|
||||||
return (<li className={styles.Button}>
|
return (<li className={styles.Button}>
|
||||||
<button className={styles[label]} onClick={action}>{label}</button>
|
<button className={styles[label]} onClick={action} title={label}>
|
||||||
|
<Icon type={icon} />
|
||||||
|
</button>
|
||||||
</li>);
|
</li>);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -11,6 +14,8 @@ export default class Toolbar extends Component {
|
|||||||
static propTypes = {
|
static propTypes = {
|
||||||
isOpen: PropTypes.bool,
|
isOpen: PropTypes.bool,
|
||||||
selectionPosition: PropTypes.object,
|
selectionPosition: PropTypes.object,
|
||||||
|
onH1: PropTypes.func.isRequired,
|
||||||
|
onH2: PropTypes.func.isRequired,
|
||||||
onBold: PropTypes.func.isRequired,
|
onBold: PropTypes.func.isRequired,
|
||||||
onItalic: PropTypes.func.isRequired,
|
onItalic: PropTypes.func.isRequired,
|
||||||
onLink: PropTypes.func.isRequired,
|
onLink: PropTypes.func.isRequired,
|
||||||
@ -36,7 +41,7 @@ export default class Toolbar extends Component {
|
|||||||
};
|
};
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { isOpen, onBold, onItalic, onLink } = this.props;
|
const { isOpen, onH1, onH2, onBold, onItalic, onLink } = this.props;
|
||||||
const classNames = [styles.Toolbar];
|
const classNames = [styles.Toolbar];
|
||||||
|
|
||||||
if (isOpen) {
|
if (isOpen) {
|
||||||
@ -45,9 +50,11 @@ export default class Toolbar extends Component {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<ul className={classNames.join(' ')} ref={this.handleRef}>
|
<ul className={classNames.join(' ')} ref={this.handleRef}>
|
||||||
{button('Bold', onBold)}
|
{button('Header 1', 'h1', onH1)}
|
||||||
{button('Italic', onItalic)}
|
{button('Header 2', 'h2', onH2)}
|
||||||
{button('Link', onLink)}
|
{button('Bold', 'bold', onBold)}
|
||||||
|
{button('Italic', 'italic', onItalic)}
|
||||||
|
{button('Link', 'link', onLink)}
|
||||||
</ul>
|
</ul>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -1,5 +1,8 @@
|
|||||||
import React, { PropTypes } from 'react';
|
import React, { PropTypes } from 'react';
|
||||||
import { fromJS } from 'immutable';
|
import { fromJS } from 'immutable';
|
||||||
|
import MarkupIt from 'markup-it';
|
||||||
|
import markdownSyntax from 'markup-it/syntaxes/markdown';
|
||||||
|
import htmlSyntax from 'markup-it/syntaxes/html';
|
||||||
import CaretPosition from 'textarea-caret-position';
|
import CaretPosition from 'textarea-caret-position';
|
||||||
import registry from '../../../../lib/registry';
|
import registry from '../../../../lib/registry';
|
||||||
import MediaProxy from '../../../../valueObjects/MediaProxy';
|
import MediaProxy from '../../../../valueObjects/MediaProxy';
|
||||||
@ -9,6 +12,9 @@ import styles from './index.css';
|
|||||||
|
|
||||||
const HAS_LINE_BREAK = /\n/m;
|
const HAS_LINE_BREAK = /\n/m;
|
||||||
|
|
||||||
|
const markdown = new MarkupIt(markdownSyntax);
|
||||||
|
const html = new MarkupIt(htmlSyntax);
|
||||||
|
|
||||||
function processUrl(url) {
|
function processUrl(url) {
|
||||||
if (url.match(/^(https?:\/\/|mailto:|\/)/)) {
|
if (url.match(/^(https?:\/\/|mailto:|\/)/)) {
|
||||||
return url;
|
return url;
|
||||||
@ -23,6 +29,42 @@ function preventDefault(e) {
|
|||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function cleanupPaste(paste) {
|
||||||
|
const content = html.toContent(paste);
|
||||||
|
return markdown.toText(content);
|
||||||
|
}
|
||||||
|
|
||||||
|
function getCleanPaste(e) {
|
||||||
|
const transfer = e.clipboardData;
|
||||||
|
return new Promise((resolve) => {
|
||||||
|
const isHTML = !!Array.from(transfer.types).find(type => type === 'text/html');
|
||||||
|
|
||||||
|
if (isHTML) {
|
||||||
|
const data = transfer.getData('text/html');
|
||||||
|
// Avoid trying to clean up full HTML documents with head/body/etc
|
||||||
|
if (!data.match(/^\s*<!doctype/i)) {
|
||||||
|
e.preventDefault();
|
||||||
|
resolve(cleanupPaste(data));
|
||||||
|
} else {
|
||||||
|
// Handle complex pastes by stealing focus with a contenteditable div
|
||||||
|
const div = document.createElement('div');
|
||||||
|
div.contentEditable = true;
|
||||||
|
div.setAttribute('style', 'opacity: 0; overflow: hidden; width: 1px; height: 1px; position: fixed; top: 50%; left: 0;');
|
||||||
|
document.body.appendChild(div);
|
||||||
|
div.focus();
|
||||||
|
setTimeout(() => {
|
||||||
|
resolve(cleanupPaste(div.innerHTML));
|
||||||
|
document.body.removeChild(div);
|
||||||
|
}, 50);
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
e.preventDefault();
|
||||||
|
return resolve(transfer.getData(transfer.types[0]));
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
const buildtInPlugins = fromJS([{
|
const buildtInPlugins = fromJS([{
|
||||||
label: 'Image',
|
label: 'Image',
|
||||||
id: 'image',
|
id: 'image',
|
||||||
@ -64,6 +106,7 @@ export default class RawEditor extends React.Component {
|
|||||||
this.element.addEventListener('dragenter', preventDefault, false);
|
this.element.addEventListener('dragenter', preventDefault, false);
|
||||||
this.element.addEventListener('dragover', preventDefault, false);
|
this.element.addEventListener('dragover', preventDefault, false);
|
||||||
this.element.addEventListener('drop', this.handleDrop, false);
|
this.element.addEventListener('drop', this.handleDrop, false);
|
||||||
|
this.element.addEventListener('paste', this.handlePaste, false);
|
||||||
}
|
}
|
||||||
|
|
||||||
componentDidUpdate() {
|
componentDidUpdate() {
|
||||||
@ -127,6 +170,31 @@ export default class RawEditor extends React.Component {
|
|||||||
this.props.onChange(beforeSelection + chars + afterSelection);
|
this.props.onChange(beforeSelection + chars + afterSelection);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
toggleHeader(header) {
|
||||||
|
const { value } = this.props;
|
||||||
|
const selection = this.getSelection();
|
||||||
|
const newSelection = Object.assign({}, selection);
|
||||||
|
const lastNewline = value.lastIndexOf('\n', selection.start);
|
||||||
|
const currentMatch = value.substr(lastNewline + 1).match(/^(#+)\s/);
|
||||||
|
const beforeHeader = value.substr(0, lastNewline + 1);
|
||||||
|
let afterHeader;
|
||||||
|
let chars;
|
||||||
|
if (currentMatch) {
|
||||||
|
afterHeader = value.substr(lastNewline + 1 + currentMatch[0].length);
|
||||||
|
chars = currentMatch[1] === header ? '' : `${ header } `;
|
||||||
|
const diff = chars.length - currentMatch[0].length;
|
||||||
|
newSelection.start += diff;
|
||||||
|
newSelection.end += diff;
|
||||||
|
} else {
|
||||||
|
afterHeader = value.substr(lastNewline + 1);
|
||||||
|
chars = `${ header } `;
|
||||||
|
newSelection.start += header.length + 1;
|
||||||
|
newSelection.end += header.length + 1;
|
||||||
|
}
|
||||||
|
this.newSelection = newSelection;
|
||||||
|
this.props.onChange(beforeHeader + chars + afterHeader);
|
||||||
|
}
|
||||||
|
|
||||||
updateHeight() {
|
updateHeight() {
|
||||||
if (this.element.scrollHeight > this.element.clientHeight) {
|
if (this.element.scrollHeight > this.element.clientHeight) {
|
||||||
this.element.style.height = `${ this.element.scrollHeight }px`;
|
this.element.style.height = `${ this.element.scrollHeight }px`;
|
||||||
@ -206,6 +274,12 @@ export default class RawEditor extends React.Component {
|
|||||||
this.setState({ showBlockMenu: false });
|
this.setState({ showBlockMenu: false });
|
||||||
};
|
};
|
||||||
|
|
||||||
|
handleHeader(header) {
|
||||||
|
return () => {
|
||||||
|
this.toggleHeader(header);
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
handleDrop = (e) => {
|
handleDrop = (e) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
let data;
|
let data;
|
||||||
@ -226,6 +300,20 @@ export default class RawEditor extends React.Component {
|
|||||||
this.replaceSelection(data);
|
this.replaceSelection(data);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
handlePaste = (e) => {
|
||||||
|
const { value, onChange } = this.props;
|
||||||
|
const selection = this.getSelection();
|
||||||
|
const beforeSelection = value.substr(0, selection.start);
|
||||||
|
const afterSelection = value.substr(selection.end);
|
||||||
|
|
||||||
|
getCleanPaste(e).then((paste) => {
|
||||||
|
const newSelection = Object.assign({}, selection);
|
||||||
|
newSelection.start = newSelection.end = beforeSelection.length + paste.length;
|
||||||
|
this.newSelection = newSelection;
|
||||||
|
onChange(beforeSelection + paste + afterSelection);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { onAddMedia, onRemoveMedia, getMedia } = this.props;
|
const { onAddMedia, onRemoveMedia, getMedia } = this.props;
|
||||||
const { showToolbar, showBlockMenu, plugins, selectionPosition } = this.state;
|
const { showToolbar, showBlockMenu, plugins, selectionPosition } = this.state;
|
||||||
@ -233,6 +321,8 @@ export default class RawEditor extends React.Component {
|
|||||||
<Toolbar
|
<Toolbar
|
||||||
isOpen={showToolbar}
|
isOpen={showToolbar}
|
||||||
selectionPosition={selectionPosition}
|
selectionPosition={selectionPosition}
|
||||||
|
onH1={this.handleHeader('#')}
|
||||||
|
onH2={this.handleHeader('##')}
|
||||||
onBold={this.handleBold}
|
onBold={this.handleBold}
|
||||||
onItalic={this.handleItalic}
|
onItalic={this.handleItalic}
|
||||||
onLink={this.handleLink}
|
onLink={this.handleLink}
|
||||||
|
Reference in New Issue
Block a user