Merge branch 'simple-markdown-editor'
This commit is contained in:
Cássio Zen
commit
ff0fa2cf6b
@ -1,15 +1,21 @@
|
||||
html, body {
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
html,
|
||||
body {
|
||||
color: #444;
|
||||
font-size: 14px;
|
||||
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-weight: bold;
|
||||
color: #666;
|
||||
font-size: 32px;
|
||||
margin-top: 20px;
|
||||
color: #666;
|
||||
font-weight: bold;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
@ -93,6 +93,7 @@
|
||||
"@kadira/storybook": "^1.36.0",
|
||||
"autoprefixer": "^6.3.3",
|
||||
"bricks.js": "^1.7.0",
|
||||
"textarea-caret-position": "^0.1.1",
|
||||
"dateformat": "^1.0.12",
|
||||
"fuzzy": "^0.1.1",
|
||||
"immutability-helper": "^2.0.0",
|
||||
|
||||
@ -20,6 +20,7 @@
|
||||
}
|
||||
}
|
||||
.label {
|
||||
display: block;
|
||||
color: #AAB0AF;
|
||||
font-size: 12px;
|
||||
margin-bottom: 18px;
|
||||
|
||||
@ -30,7 +30,7 @@ class MarkdownControl extends React.Component {
|
||||
};
|
||||
|
||||
render() {
|
||||
const { editor, onChange, onAddMedia, getMedia, value } = this.props;
|
||||
const { editor, onChange, onAddMedia, onRemoveMedia, getMedia, value } = this.props;
|
||||
if (editor.get('useVisualMode')) {
|
||||
return (
|
||||
<div className="cms-editor-visual">
|
||||
@ -51,6 +51,7 @@ class MarkdownControl extends React.Component {
|
||||
<RawEditor
|
||||
onChange={onChange}
|
||||
onAddMedia={onAddMedia}
|
||||
onRemoveMedia={onRemoveMedia}
|
||||
getMedia={getMedia}
|
||||
value={value}
|
||||
/>
|
||||
|
||||
@ -0,0 +1,134 @@
|
||||
.root {
|
||||
position: absolute;
|
||||
left: -18px;
|
||||
display: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.visible {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.button {
|
||||
display: block;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
border: 1px solid #444;
|
||||
border-radius: 100%;
|
||||
background: transparent;
|
||||
line-height: 13px;
|
||||
}
|
||||
|
||||
.expanded {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.collapsed {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.pluginForm,
|
||||
.menu {
|
||||
margin-top: -20px;
|
||||
margin-bottom: 30px;
|
||||
margin-left: 20px;
|
||||
border-radius: 4px;
|
||||
background: #fff;
|
||||
box-shadow: 1px 1px 20px;
|
||||
|
||||
& h3 {
|
||||
padding: 5px 20px;
|
||||
border-bottom: 1px solid;
|
||||
}
|
||||
}
|
||||
|
||||
.menu {
|
||||
list-style: none;
|
||||
|
||||
& li button {
|
||||
display: block;
|
||||
padding: 5px 20px;
|
||||
min-width: 30%;
|
||||
width: 100%;
|
||||
border: none;
|
||||
border-bottom: 1px solid;
|
||||
background: #fff;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
& li:last-child button {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
& li:hover button {
|
||||
background: #efefef;
|
||||
}
|
||||
}
|
||||
|
||||
.menu.expanded {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.control {
|
||||
position: relative;
|
||||
padding: 20px 20px;
|
||||
color: #7c8382;
|
||||
|
||||
& input,
|
||||
& textarea,
|
||||
& select {
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
outline: 0;
|
||||
border: none;
|
||||
background: 0 0;
|
||||
box-shadow: none;
|
||||
color: #7c8382;
|
||||
font-size: 18px;
|
||||
font-family: monospace;
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
display: block;
|
||||
margin-bottom: 18px;
|
||||
color: #aab0af;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.widget {
|
||||
position: relative;
|
||||
border-bottom: 1px solid #aaa;
|
||||
|
||||
&:after {
|
||||
position: absolute;
|
||||
bottom: -7px;
|
||||
left: 42px;
|
||||
z-index: 1;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-right: 1px solid #aaa;
|
||||
border-bottom: 1px solid #aaa;
|
||||
background-color: #f2f5f4;
|
||||
content: '';
|
||||
-webkit-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
&:last-child:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
padding: 10px 20px;
|
||||
border-top: 1px solid #eee;
|
||||
background: #fff;
|
||||
text-align: right;
|
||||
}
|
||||
@ -0,0 +1,135 @@
|
||||
import React, { Component, PropTypes } from 'react';
|
||||
import { fromJS } from 'immutable';
|
||||
import { Button } from 'react-toolbox/lib/button';
|
||||
import { resolveWidget } from '../../../Widgets';
|
||||
import styles from './BlockMenu.css';
|
||||
|
||||
export default class BlockMenu extends Component {
|
||||
static propTypes = {
|
||||
isOpen: PropTypes.bool,
|
||||
selectionPosition: PropTypes.object,
|
||||
plugins: PropTypes.object.isRequired,
|
||||
onBlock: PropTypes.func.isRequired,
|
||||
onAddMedia: PropTypes.func.isRequired,
|
||||
onRemoveMedia: PropTypes.func.isRequired,
|
||||
getMedia: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
isExpanded: false,
|
||||
openPlugin: null,
|
||||
pluginData: fromJS({}),
|
||||
};
|
||||
}
|
||||
|
||||
componentDidUpdate() {
|
||||
const { selectionPosition } = this.props;
|
||||
if (selectionPosition) {
|
||||
const style = this.element.style;
|
||||
style.setProperty('top', `${ selectionPosition.top }px`);
|
||||
}
|
||||
}
|
||||
|
||||
handleToggle = (e) => {
|
||||
e.preventDefault();
|
||||
this.setState({ isExpanded: !this.state.isExpanded });
|
||||
};
|
||||
|
||||
handleRef = (ref) => {
|
||||
this.element = ref;
|
||||
};
|
||||
|
||||
handlePlugin(plugin) {
|
||||
return (e) => {
|
||||
e.preventDefault();
|
||||
this.setState({ openPlugin: plugin, pluginData: fromJS({}) });
|
||||
};
|
||||
}
|
||||
|
||||
buttonFor(plugin) {
|
||||
return (<li key={plugin.get('id')}>
|
||||
<button onClick={this.handlePlugin(plugin)}>{plugin.get('label')}</button>
|
||||
</li>);
|
||||
}
|
||||
|
||||
handleSubmit = (e) => {
|
||||
e.preventDefault();
|
||||
const { openPlugin, pluginData } = this.state;
|
||||
const toBlock = openPlugin.get('toBlock');
|
||||
this.props.onBlock(toBlock.call(toBlock, pluginData.toJS()));
|
||||
this.setState({ openPlugin: null, isExpanded: false });
|
||||
};
|
||||
|
||||
handleCancel = (e) => {
|
||||
e.preventDefault();
|
||||
this.setState({ openPlugin: null, isExpanded: false });
|
||||
};
|
||||
|
||||
controlFor(field) {
|
||||
const { onAddMedia, onRemoveMedia, getMedia } = this.props;
|
||||
const { pluginData } = this.state;
|
||||
const widget = resolveWidget(field.get('widget') || 'string');
|
||||
const value = pluginData.get(field.get('name'));
|
||||
|
||||
return (
|
||||
<div className={styles.control} key={field.get('name')}>
|
||||
<label className={styles.label}>{field.get('label')}</label>
|
||||
{
|
||||
React.createElement(widget.control, {
|
||||
field,
|
||||
value,
|
||||
onChange: (val) => {
|
||||
this.setState({
|
||||
pluginData: pluginData.set(field.get('name'), val),
|
||||
});
|
||||
},
|
||||
onAddMedia,
|
||||
onRemoveMedia,
|
||||
getMedia,
|
||||
})
|
||||
}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
pluginForm(plugin) {
|
||||
return (<form className={styles.pluginForm} onSubmit={this.handleSubmit}>
|
||||
<h3>Insert {plugin.get('label')}</h3>
|
||||
{plugin.get('fields').map(field => this.controlFor(field))}
|
||||
<div className={styles.footer}>
|
||||
<Button
|
||||
raised
|
||||
onClick={this.handleSubmit}
|
||||
>
|
||||
Insert
|
||||
</Button>
|
||||
{' '}
|
||||
<Button onClick={this.handleCancel}>
|
||||
Cancel
|
||||
</Button>
|
||||
</div>
|
||||
</form>);
|
||||
}
|
||||
|
||||
render() {
|
||||
const { isOpen, plugins } = this.props;
|
||||
const { isExpanded, openPlugin } = this.state;
|
||||
const classNames = [styles.root];
|
||||
if (isOpen) {
|
||||
classNames.push(styles.visible);
|
||||
}
|
||||
if (openPlugin) {
|
||||
classNames.push(styles.openPlugin);
|
||||
}
|
||||
|
||||
return (<div className={classNames.join(' ')} ref={this.handleRef}>
|
||||
<button className={styles.button} onClick={this.handleToggle}>+</button>
|
||||
<ul className={[styles.menu, isExpanded && !openPlugin ? styles.expanded : styles.collapsed].join(' ')}>
|
||||
{plugins.map(plugin => this.buttonFor(plugin))}
|
||||
</ul>
|
||||
{openPlugin && this.pluginForm(openPlugin)}
|
||||
</div>);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,16 @@
|
||||
.Toolbar {
|
||||
position: absolute;
|
||||
z-index: 1000;
|
||||
display: none;
|
||||
margin: none;
|
||||
padding: none;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.Button {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.Visible {
|
||||
display: block;
|
||||
}
|
||||
@ -0,0 +1,54 @@
|
||||
import React, { Component, PropTypes } from 'react';
|
||||
import styles from './Toolbar.css';
|
||||
|
||||
function button(label, action) {
|
||||
return (<li className={styles.Button}>
|
||||
<button className={styles[label]} onClick={action}>{label}</button>
|
||||
</li>);
|
||||
}
|
||||
|
||||
export default class Toolbar extends Component {
|
||||
static propTypes = {
|
||||
isOpen: PropTypes.bool,
|
||||
selectionPosition: PropTypes.object,
|
||||
onBold: PropTypes.func.isRequired,
|
||||
onItalic: PropTypes.func.isRequired,
|
||||
onLink: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
componentDidUpdate() {
|
||||
const { selectionPosition } = this.props;
|
||||
if (selectionPosition) {
|
||||
const rect = this.element.getBoundingClientRect();
|
||||
const parentRect = this.element.parentElement.getBoundingClientRect();
|
||||
const style = this.element.style;
|
||||
const pos = {
|
||||
top: selectionPosition.top - rect.height - 5,
|
||||
left: Math.min(selectionPosition.left, parentRect.width - rect.width),
|
||||
};
|
||||
style.setProperty('top', `${ pos.top }px`);
|
||||
style.setProperty('left', `${ pos.left }px`);
|
||||
}
|
||||
}
|
||||
|
||||
handleRef = (ref) => {
|
||||
this.element = ref;
|
||||
};
|
||||
|
||||
render() {
|
||||
const { isOpen, onBold, onItalic, onLink } = this.props;
|
||||
const classNames = [styles.Toolbar];
|
||||
|
||||
if (isOpen) {
|
||||
classNames.push(styles.Visible);
|
||||
}
|
||||
|
||||
return (
|
||||
<ul className={classNames.join(' ')} ref={this.handleRef}>
|
||||
{button('Bold', onBold)}
|
||||
{button('Italic', onItalic)}
|
||||
{button('Link', onLink)}
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1,13 +1,3 @@
|
||||
.root {
|
||||
font-family: monospace;
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: none;
|
||||
outline: 0;
|
||||
box-shadow: none;
|
||||
background: 0 0;
|
||||
font-size: 18px;
|
||||
color: #7c8382;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@ -1,133 +1,266 @@
|
||||
import React, { PropTypes } from 'react';
|
||||
import { Editor, Plain, Mark } from 'slate';
|
||||
import Prism from 'prismjs';
|
||||
import PluginDropImages from 'slate-drop-or-paste-images';
|
||||
import { fromJS } from 'immutable';
|
||||
import CaretPosition from 'textarea-caret-position';
|
||||
import registry from '../../../../lib/registry';
|
||||
import MediaProxy from '../../../../valueObjects/MediaProxy';
|
||||
import marks from './prismMarkdown';
|
||||
import Toolbar from './Toolbar';
|
||||
import BlockMenu from './BlockMenu';
|
||||
import styles from './index.css';
|
||||
|
||||
Prism.languages.markdown = Prism.languages.extend('markup', {});
|
||||
Prism.languages.insertBefore('markdown', 'prolog', marks);
|
||||
Prism.languages.markdown.bold.inside.url = Prism.util.clone(Prism.languages.markdown.url);
|
||||
Prism.languages.markdown.italic.inside.url = Prism.util.clone(Prism.languages.markdown.url);
|
||||
Prism.languages.markdown.bold.inside.italic = Prism.util.clone(Prism.languages.markdown.italic);
|
||||
Prism.languages.markdown.italic.inside.bold = Prism.util.clone(Prism.languages.markdown.bold);
|
||||
const HAS_LINE_BREAK = /\n/m;
|
||||
|
||||
function renderDecorations(text, block) {
|
||||
let characters = text.characters.asMutable();
|
||||
const string = text.text;
|
||||
const grammar = Prism.languages.markdown;
|
||||
const tokens = Prism.tokenize(string, grammar);
|
||||
let offset = 0;
|
||||
|
||||
for (const token of tokens) {
|
||||
if (typeof token == 'string') {
|
||||
offset += token.length;
|
||||
continue;
|
||||
}
|
||||
|
||||
const length = offset + token.matchedStr.length;
|
||||
const name = token.alias || token.type;
|
||||
const type = `highlight-${ name }`;
|
||||
|
||||
for (let i = offset; i < length; i++) {
|
||||
let char = characters.get(i);
|
||||
let { marks } = char;
|
||||
marks = marks.add(Mark.create({ type }));
|
||||
char = char.merge({ marks });
|
||||
characters = characters.set(i, char);
|
||||
}
|
||||
|
||||
offset = length;
|
||||
function processUrl(url) {
|
||||
if (url.match(/^(https?:\/\/|mailto:|\/)/)) {
|
||||
return url;
|
||||
}
|
||||
|
||||
return characters.asImmutable();
|
||||
if (url.match(/^[^\/]+\.[^\/]+/)) {
|
||||
return `https://${ url }`;
|
||||
}
|
||||
return `/${ url }`;
|
||||
}
|
||||
|
||||
const SCHEMA = {
|
||||
rules: [
|
||||
{
|
||||
match: object => object.kind == 'block',
|
||||
decorate: renderDecorations,
|
||||
},
|
||||
],
|
||||
marks: {
|
||||
'highlight-comment': {
|
||||
opacity: '0.33',
|
||||
},
|
||||
'highlight-important': {
|
||||
fontWeight: 'bold',
|
||||
color: '#006',
|
||||
},
|
||||
'highlight-keyword': {
|
||||
fontWeight: 'bold',
|
||||
color: '#006',
|
||||
},
|
||||
'highlight-url': {
|
||||
color: '#006',
|
||||
},
|
||||
'highlight-punctuation': {
|
||||
color: '#006',
|
||||
},
|
||||
function preventDefault(e) {
|
||||
e.preventDefault();
|
||||
}
|
||||
|
||||
const buildtInPlugins = fromJS([{
|
||||
label: 'Image',
|
||||
id: 'image',
|
||||
fromBlock: (data) => {
|
||||
const m = data.match(/^!\[([^\]]+)\]\(([^\)]+)\)$/);
|
||||
return m && {
|
||||
image: m[2],
|
||||
alt: m[1],
|
||||
};
|
||||
},
|
||||
};
|
||||
toBlock: data => ``,
|
||||
toPreview: data => `<img src="${ data.image }" alt="${ data.alt }" />`,
|
||||
pattern: /^!\[([^\]]+)\]\(([^\)]+)\)$/,
|
||||
fields: [{
|
||||
label: 'Image',
|
||||
name: 'image',
|
||||
widget: 'image',
|
||||
}, {
|
||||
label: 'Alt Text',
|
||||
name: 'alt',
|
||||
}],
|
||||
}]);
|
||||
|
||||
export default class RawEditor extends React.Component {
|
||||
|
||||
static propTypes = {
|
||||
onAddMedia: PropTypes.func.isRequired,
|
||||
getMedia: PropTypes.func.isRequired,
|
||||
onChange: PropTypes.func.isRequired,
|
||||
value: PropTypes.string,
|
||||
};
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
const content = props.value ? Plain.deserialize(props.value) : Plain.deserialize('');
|
||||
|
||||
const plugins = registry.getEditorComponents();
|
||||
this.state = {
|
||||
state: content,
|
||||
plugins: buildtInPlugins.concat(plugins),
|
||||
};
|
||||
|
||||
this.plugins = [
|
||||
PluginDropImages({
|
||||
applyTransform: (transform, file) => {
|
||||
const mediaProxy = new MediaProxy(file.name, file);
|
||||
const state = Plain.deserialize(`\n\n\n\n`);
|
||||
props.onAddMedia(mediaProxy);
|
||||
return transform
|
||||
.insertFragment(state.get('document'));
|
||||
},
|
||||
}),
|
||||
];
|
||||
this.shortcuts = {
|
||||
meta: {
|
||||
b: this.handleBold,
|
||||
},
|
||||
};
|
||||
}
|
||||
componentDidMount() {
|
||||
this.updateHeight();
|
||||
this.element.addEventListener('dragenter', preventDefault, false);
|
||||
this.element.addEventListener('dragover', preventDefault, false);
|
||||
this.element.addEventListener('drop', this.handleDrop, false);
|
||||
}
|
||||
|
||||
/**
|
||||
* Slate keeps track of selections, scroll position etc.
|
||||
* So, onChange gets dispatched on every interaction (click, arrows, everything...)
|
||||
* It also have an onDocumentChange, that get's dispatched only when the actual
|
||||
* content changes
|
||||
*/
|
||||
handleChange = (state) => {
|
||||
this.setState({ state });
|
||||
componentDidUpdate() {
|
||||
if (this.newSelection) {
|
||||
this.element.selectionStart = this.newSelection.start;
|
||||
this.element.selectionEnd = this.newSelection.end;
|
||||
this.newSelection = null;
|
||||
}
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
this.element.removeEventListener('dragenter', preventDefault);
|
||||
this.element.removeEventListener('dragover', preventDefault);
|
||||
this.element.removeEventListener('drop', this.handleDrop);
|
||||
}
|
||||
|
||||
getSelection() {
|
||||
const start = this.element.selectionStart;
|
||||
const end = this.element.selectionEnd;
|
||||
const selected = (this.props.value || '').substr(start, end - start);
|
||||
return { start, end, selected };
|
||||
}
|
||||
|
||||
surroundSelection(chars) {
|
||||
const selection = this.getSelection();
|
||||
const newSelection = Object.assign({}, selection);
|
||||
const { value } = this.props;
|
||||
const escapedChars = chars.replace(/\*/g, '\\*');
|
||||
const regexp = new RegExp(`^${ escapedChars }.*${ escapedChars }$`);
|
||||
let changed = chars + selection.selected + chars;
|
||||
|
||||
if (regexp.test(selection.selected)) {
|
||||
changed = selection.selected.substr(chars.length, selection.selected.length - (chars.length * 2));
|
||||
newSelection.end = selection.end - (chars.length * 2);
|
||||
} else if (
|
||||
value.substr(selection.start - chars.length, chars.length) === chars &&
|
||||
value.substr(selection.end, chars.length) === chars
|
||||
) {
|
||||
newSelection.start = selection.start - chars.length;
|
||||
newSelection.end = selection.end + chars.length;
|
||||
changed = selection.selected;
|
||||
} else {
|
||||
newSelection.end = selection.end + (chars.length * 2);
|
||||
}
|
||||
|
||||
const beforeSelection = value.substr(0, selection.start);
|
||||
const afterSelection = value.substr(selection.end);
|
||||
|
||||
this.newSelection = newSelection;
|
||||
this.props.onChange(beforeSelection + changed + afterSelection);
|
||||
}
|
||||
|
||||
replaceSelection(chars) {
|
||||
const { value } = this.props;
|
||||
const selection = this.getSelection();
|
||||
const newSelection = Object.assign({}, selection);
|
||||
const beforeSelection = value.substr(0, selection.start);
|
||||
const afterSelection = value.substr(selection.end);
|
||||
newSelection.end = selection.start + chars.length;
|
||||
this.newSelection = newSelection;
|
||||
this.props.onChange(beforeSelection + chars + afterSelection);
|
||||
}
|
||||
|
||||
updateHeight() {
|
||||
if (this.element.scrollHeight > this.element.clientHeight) {
|
||||
this.element.style.height = `${ this.element.scrollHeight }px`;
|
||||
}
|
||||
}
|
||||
|
||||
handleRef = (ref) => {
|
||||
this.element = ref;
|
||||
if (ref) {
|
||||
this.caretPosition = new CaretPosition(ref);
|
||||
}
|
||||
};
|
||||
|
||||
handleDocumentChange = (document, state) => {
|
||||
const content = Plain.serialize(state, { terse: true });
|
||||
this.props.onChange(content);
|
||||
handleKey = (e) => {
|
||||
if (e.metaKey) {
|
||||
const action = this.shortcuts.meta[e.key];
|
||||
if (action) {
|
||||
e.preventDefault();
|
||||
action();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
handleBold = () => {
|
||||
this.surroundSelection('**');
|
||||
};
|
||||
|
||||
handleItalic = () => {
|
||||
this.surroundSelection('*');
|
||||
};
|
||||
|
||||
handleLink = () => {
|
||||
const url = prompt('URL:');
|
||||
const selection = this.getSelection();
|
||||
this.replaceSelection(`[${ selection.selected }](${ processUrl(url) })`);
|
||||
};
|
||||
|
||||
handleSelection = () => {
|
||||
const { value } = this.props;
|
||||
const selection = this.getSelection();
|
||||
if (selection.start !== selection.end && !HAS_LINE_BREAK.test(selection.selected)) {
|
||||
try {
|
||||
const position = this.caretPosition.get(selection.start, selection.end);
|
||||
this.setState({ showToolbar: true, showBlockMenu: false, selectionPosition: position });
|
||||
} catch (e) {
|
||||
this.setState({ showToolbar: false, showBlockMenu: false });
|
||||
}
|
||||
} else if (selection.start === selection.end) {
|
||||
const newBlock =
|
||||
(
|
||||
(selection.start === 0 && value.substr(0,1).match(/^\n?$/)) ||
|
||||
value.substr(selection.start - 2, 2) === '\n\n') &&
|
||||
(
|
||||
selection.end === (value.length - 1) ||
|
||||
value.substr(selection.end, 2) === '\n\n' ||
|
||||
value.substr(selection.end).match(/\n*$/m)
|
||||
);
|
||||
|
||||
if (newBlock) {
|
||||
const position = this.caretPosition.get(selection.start, selection.end);
|
||||
this.setState({ showToolbar: false, showBlockMenu: true, selectionPosition: position });
|
||||
} else {
|
||||
this.setState({ showToolbar: false, showBlockMenu: false });
|
||||
}
|
||||
} else {
|
||||
this.setState({ showToolbar: false, showBlockMenu: false });
|
||||
}
|
||||
};
|
||||
|
||||
handleChange = (e) => {
|
||||
this.props.onChange(e.target.value);
|
||||
this.updateHeight();
|
||||
};
|
||||
|
||||
handleBlock = (chars) => {
|
||||
this.replaceSelection(chars);
|
||||
this.setState({ showBlockMenu: false });
|
||||
};
|
||||
|
||||
handleDrop = (e) => {
|
||||
e.preventDefault();
|
||||
let data;
|
||||
|
||||
if (e.dataTransfer.files && e.dataTransfer.files.length) {
|
||||
data = Array.from(e.dataTransfer.files).map((file) => {
|
||||
const mediaProxy = new MediaProxy(file.name, file);
|
||||
this.props.onAddMedia(mediaProxy);
|
||||
const link = `[${ file.name }](${ mediaProxy.public_path })`;
|
||||
if (file.type.split('/')[0] === 'image') {
|
||||
return `!${ link }`;
|
||||
}
|
||||
return link;
|
||||
}).join('\n\n');
|
||||
} else {
|
||||
data = e.dataTransfer.getData('text/plain');
|
||||
}
|
||||
this.replaceSelection(data);
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Editor
|
||||
className={styles.root}
|
||||
placeholder={'Enter some rich text...'}
|
||||
state={this.state.state}
|
||||
schema={SCHEMA}
|
||||
onChange={this.handleChange}
|
||||
onDocumentChange={this.handleDocumentChange}
|
||||
plugins={this.plugins}
|
||||
const { onAddMedia, onRemoveMedia, getMedia } = this.props;
|
||||
const { showToolbar, showBlockMenu, plugins, selectionPosition } = this.state;
|
||||
return (<div className={styles.root}>
|
||||
<Toolbar
|
||||
isOpen={showToolbar}
|
||||
selectionPosition={selectionPosition}
|
||||
onBold={this.handleBold}
|
||||
onItalic={this.handleItalic}
|
||||
onLink={this.handleLink}
|
||||
/>
|
||||
);
|
||||
<BlockMenu
|
||||
isOpen={showBlockMenu}
|
||||
selectionPosition={selectionPosition}
|
||||
plugins={plugins}
|
||||
onBlock={this.handleBlock}
|
||||
onAddMedia={onAddMedia}
|
||||
onRemoveMedia={onRemoveMedia}
|
||||
getMedia={getMedia}
|
||||
/>
|
||||
<textarea
|
||||
ref={this.handleRef}
|
||||
value={this.props.value || ''}
|
||||
onKeyDown={this.handleKey}
|
||||
onChange={this.handleChange}
|
||||
onSelect={this.handleSelection}
|
||||
/>
|
||||
</div>);
|
||||
}
|
||||
}
|
||||
|
||||
RawEditor.propTypes = {
|
||||
onAddMedia: PropTypes.func.isRequired,
|
||||
onRemoveMedia: PropTypes.func.isRequired,
|
||||
getMedia: PropTypes.func.isRequired,
|
||||
onChange: PropTypes.func.isRequired,
|
||||
value: PropTypes.node,
|
||||
};
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { Component, PropTypes, Children } from 'react';
|
||||
import { List, Record } from 'immutable';
|
||||
import { List, Record, fromJS } from 'immutable';
|
||||
import _ from 'lodash';
|
||||
|
||||
const plugins = { editor: List() };
|
||||
@ -11,23 +11,23 @@ const EditorComponent = Record({
|
||||
icon: 'exclamation-triangle',
|
||||
fields: [],
|
||||
pattern: catchesNothing,
|
||||
fromBlock: function(match) { return {}; },
|
||||
toBlock: function(attributes) { return 'Plugin'; },
|
||||
toPreview: function(attributes) { return 'Plugin'; }
|
||||
fromBlock(match) { return {}; },
|
||||
toBlock(attributes) { return 'Plugin'; },
|
||||
toPreview(attributes) { return 'Plugin'; },
|
||||
});
|
||||
|
||||
|
||||
class Plugin extends Component { // eslint-disable-line
|
||||
static propTypes = {
|
||||
children: PropTypes.element.isRequired
|
||||
children: PropTypes.element.isRequired,
|
||||
};
|
||||
|
||||
static childContextTypes = {
|
||||
plugins: PropTypes.object
|
||||
plugins: PropTypes.object,
|
||||
};
|
||||
|
||||
getChildContext() {
|
||||
return { plugins: plugins };
|
||||
return { plugins };
|
||||
}
|
||||
|
||||
render() {
|
||||
@ -40,11 +40,11 @@ export function newEditorPlugin(config) {
|
||||
id: config.id || config.label.replace(/[^A-Z0-9]+/ig, '_'),
|
||||
label: config.label,
|
||||
icon: config.icon,
|
||||
fields: config.fields,
|
||||
fields: fromJS(config.fields),
|
||||
pattern: config.pattern,
|
||||
fromBlock: _.isFunction(config.fromBlock) ? config.fromBlock.bind(null) : null,
|
||||
toBlock: _.isFunction(config.toBlock) ? config.toBlock.bind(null) : null,
|
||||
toPreview: _.isFunction(config.toPreview) ? config.toPreview.bind(null) : config.toBlock.bind(null)
|
||||
toPreview: _.isFunction(config.toPreview) ? config.toPreview.bind(null) : config.toBlock.bind(null),
|
||||
});
|
||||
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user