Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add optional renderTray render prop to Editor #36

Merged
merged 3 commits into from
Nov 6, 2018
Merged

Add optional renderTray render prop to Editor #36

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d13b7ce
add optional renderTray render prop to Editor
Nov 6, 2018
299ea32
add tray example
Nov 6, 2018
092dbe4
add a ;
Nov 6, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
145 changes: 145 additions & 0 deletions example/tray.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,145 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>draft-extend</title>
<link rel="stylesheet" href="../node_modules/draft-js/dist/Draft.css" />
<link rel="stylesheet" href="../dist/draft-extend.css" />
<style>
#target {
font-family: sans-serif;
margin: 20px;
border: solid 1px #ccc;
}
</style>
</head>
<body>
<div id="target"></div>
<script src="../node_modules/react/umd/react.development.js"></script>
<script src="../node_modules/create-react-class/create-react-class.js"></script>
<script src="../node_modules/react-dom/umd/react-dom.development.js"></script>
<script src="../node_modules/react-dom/umd/react-dom-server.browser.development.js"></script>
<script src="../node_modules/immutable/dist/immutable.min.js"></script>
<script src="../node_modules/es6-shim/es6-shim.js"></script>
<script src="../node_modules/babel-standalone/babel.min.js"></script>
<script src="../node_modules/draft-js/dist/Draft.js"></script>
<script src="../dist/draft-extend.js"></script>
<script src="../node_modules/draft-convert/dist/draft-convert.js"></script>
<script src="./ToolbarButton.js"></script>
<script type="text/babel">
const {
EditorState,
RichUtils
} = Draft;

const {
Editor,
createPlugin
} = window.DraftExtend;

const {
convertToHTML,
convertFromHTML
} = window.DraftConvert;

const INLINE_STYLES = [
{label: 'Bold', style: 'BOLD'},
{label: 'Italic', style: 'ITALIC'},
{label: 'Underline', style: 'UNDERLINE'},
{label: 'Code', style: 'CODE'},
{label: 'Strikethrough', style: 'STRIKETHROUGH'}
];

const styleToHTML = (style) => {
if (style === 'STRIKETHROUGH') {
return <s />;
}
if (style === 'CODE') {
return <div style={{fontFamily: 'monospace'}} />;
}
};

const createInlineStyle = ({label, style}) => {
return ({editorState, onChange}) => {
const toggleStyle = () => {
onChange(
RichUtils.toggleInlineStyle(
editorState,
style
)
);
};

const currentInlineStyle = editorState.getCurrentInlineStyle();

const isActive = currentInlineStyle.has(style);

return (
<ToolbarButton
active={isActive}
label={label}
onClick={toggleStyle}
/>
);
};
};

const InlinePlugin = createPlugin({
buttons: INLINE_STYLES.map(createInlineStyle),
styleToHTML
});

const WithPlugin = InlinePlugin(Editor);
const toHTML = InlinePlugin(convertToHTML);
const fromHTML = InlinePlugin(convertFromHTML);

const InlineStylesExample = createReactClass({
getInitialState() {
return {
editorState: EditorState.createWithContent(
fromHTML('<div><strong>Inline</strong> styles <em>example</em></div>')
)
};
},

onChange(editorState) {
console.log(toHTML(editorState.getCurrentContent()));
this.setState({editorState});
},

renderTray() {
return (
<div style={{
color: 'firebrick',
fontSize: 14,
marginBottom: 8,
maxWidth: 500
}}>
Arbitrary information can be displayed in a tray,
located between the editor body and the plugin button controls.
It's a good place to display validation warnings or information related to plugin data.
</div>
);
},

render() {
return (
<WithPlugin
editorState={this.state.editorState}
onChange={this.onChange}
keyCommandListeners={[Draft.RichUtils.handleKeyCommand]}
renderTray={this.renderTray}
/>
);
}
});

ReactDOM.render(
<InlineStylesExample />,
document.getElementById('target')
);
</script>
<script>
eval(Babel.transform(document.querySelector('script[type="text/babel"]').innerText, { presets: ['es2015', 'react']}).code)
</script>
</body>
35 changes: 24 additions & 11 deletions src/components/Editor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import React from 'react';
import PropTypes from 'prop-types';
import createReactClass from 'create-react-class';
import {List} from 'immutable';
import {
Editor,
EditorState,
Expand Down Expand Up @@ -31,7 +30,8 @@ const propTypes = {
onUpArrow: PropTypes.func,
onDownArrow: PropTypes.func,
readOnly: PropTypes.bool,
showButtons: PropTypes.bool
showButtons: PropTypes.bool,
renderTray: PropTypes.func,
};

const EditorWrapper = createReactClass({
Expand All @@ -50,15 +50,15 @@ const EditorWrapper = createReactClass({
return {
className: '',
editorState: EditorState.createEmpty(),
onChange: () => {},
onChange: () => { },
decorators: [],
baseDecorator: CompositeDecorator,
styleMap: {},
buttons: [],
overlays: [],
blockRendererFn: () => {},
blockStyleFn: () => {},
keyBindingFn: () => {},
blockRendererFn: () => { },
blockStyleFn: () => { },
keyBindingFn: () => { },
readOnly: false,
showButtons: true
};
Expand Down Expand Up @@ -95,7 +95,7 @@ const EditorWrapper = createReactClass({
}
}

this.setState({decorator: new nextProps.baseDecorator(nextProps.decorators)});
this.setState({ decorator: new nextProps.baseDecorator(nextProps.decorators) });
},

keyBindingFn(e) {
Expand Down Expand Up @@ -154,20 +154,30 @@ const EditorWrapper = createReactClass({
},

setReadOnly(readOnly) {
this.setState({readOnly});
this.setState({ readOnly });
},

getDecoratedState() {
const {editorState} = this.props;
const {decorator} = this.state;
const { editorState } = this.props;
const { decorator } = this.state;

const currentDecorator = editorState.getDecorator();

if (currentDecorator && currentDecorator._decorators === decorator._decorators) {
return editorState;
}

return EditorState.set(editorState, {decorator});
return EditorState.set(editorState, { decorator });
},

renderTray() {
const { renderTray } = this.props;

if (typeof renderTray !== 'function') {
return null;
}

return renderTray();
},

renderPluginButtons() {
Expand Down Expand Up @@ -258,6 +268,9 @@ const EditorWrapper = createReactClass({
onUpArrow={this.onUpArrow}
onDownArrow={this.onDownArrow}
/>
<div className="draft-extend-tray">
{this.renderTray()}
</div>
<div className="draft-extend-controls">
{this.renderPluginButtons()}
</div>
Expand Down