ldx-widgets
Version:
widgets
228 lines (207 loc) • 7.25 kB
JavaScript
(function() {
var ContentState, Editor, EditorState, GridFormRichText, RTEButtonRow, React, RichUtils, convertFromHTML, createClass, div, label, ref, ref1, stateToHTML;
React = require('react');
createClass = require('create-react-class');
require('es6-shim');
ref = require('draft-js'), Editor = ref.Editor, EditorState = ref.EditorState, RichUtils = ref.RichUtils, ContentState = ref.ContentState, convertFromHTML = ref.convertFromHTML;
Editor = React.createFactory(Editor);
stateToHTML = require('draft-js-export-html').stateToHTML;
RTEButtonRow = React.createFactory(require('./rte_button_row'));
ref1 = require('react-dom-factories'), div = ref1.div, label = ref1.label;
/*
Rich Text Props
@props.labelColumnClass - OPTIONAL - string
optional class that will be added to the label column
@props.inputColumnClass - OPTIONAL - string
optional class that will be added to the input column
@props.inlineStyles - OPTIONAL - array
optional array of inline style objects. Objects expected
to have label and style key/values. Block styles have a
different handler than inline styles so they are in separate
arrays. Defaults set in getDefaultProps.
e.g. [{label: 'Bold', style: 'BOLD'}]
@props.blockStyles - OPTIONAL - array
optional array of block style objects. Objects expected
to have label and style key/values. Block styles have a
different handler than inline styles so they are in separate
arrays. Defaults set in getDefaultProps.
e.g. [{label: 'H1', style: 'header-one'}]
@props.isFieldRequired - OPTIONAL - boolean
optional boolean that will display the red asterisk if true
@props.formLabel - OPTIONAL - string
The value of the label that will display to the left of the input
@props.fullRow - OPTIONAL - boolean
optional boolean that will determine whether to display the input in a full row with or without a label
*/
GridFormRichText = createClass({
displayName: 'GridFormRichText',
getInitialState: function() {
return {
editorState: EditorState.createEmpty()
};
},
getDefaultProps: function() {
return {
inlineStyles: [
{
label: 'Bold',
style: 'BOLD'
}, {
label: 'Italic',
style: 'ITALIC'
}, {
label: 'Underline',
style: 'UNDERLINE'
}, {
label: 'Monospace',
style: 'CODE'
}
],
blockStyles: [
{
label: 'H1',
style: 'header-one'
}, {
label: 'H2',
style: 'header-two'
}, {
label: 'H3',
style: 'header-three'
}, {
label: 'H4',
style: 'header-four'
}, {
label: 'H5',
style: 'header-five'
}, {
label: 'H6',
style: 'header-six'
}, {
label: 'Blockquote',
style: 'blockquote'
}
],
fullRow: true,
formLabel: null
};
},
componentWillMount: function() {
var htmlContent;
htmlContent = this.props.htmlContent;
if (htmlContent != null) {
return this.convertHTML(htmlContent);
}
},
render: function() {
var blockStyles, className, contentState, editorState, formLabel, fullRow, inlineStyles, inputColumnClass, isFieldRequired, labelClass, labelColumnClass, labelField, ref2;
editorState = this.state.editorState;
ref2 = this.props, inputColumnClass = ref2.inputColumnClass, labelColumnClass = ref2.labelColumnClass, blockStyles = ref2.blockStyles, inlineStyles = ref2.inlineStyles, isFieldRequired = ref2.isFieldRequired, formLabel = ref2.formLabel, fullRow = ref2.fullRow;
if (formLabel != null) {
labelClass = 'form-label';
if (isFieldRequired) {
labelClass += ' is-required';
}
labelField = div({
key: 'label',
className: labelColumnClass
}, label({
className: labelClass
}, formLabel));
}
contentState = editorState.getCurrentContent();
className = 'RichEditor-editor';
if (!contentState.hasText()) {
if (contentState.getBlockMap().first().getType() !== 'unstyled') {
className += ' RichEditor-hidePlaceholder';
}
}
return div({
key: 'rte-row',
className: 'grid grid-pad'
}, [
formLabel != null ? labelField : void 0, div({
key: 'rich-text',
className: "rich-text-container " + inputColumnClass
}, [
RTEButtonRow({
buttonStyles: blockStyles,
key: "block",
onToggle: this.toggleBlockType,
editorState: editorState
}), RTEButtonRow({
buttonStyles: inlineStyles,
key: "inline",
onToggle: this.toggleInlineStyle,
editorState: editorState
}), div({
key: "editor-container",
className: className,
onClick: this.focus
}, Editor({
key: 'editor',
blockStyleFn: this.getBlockStyle,
editorState: editorState,
handleKeyCommand: this.handleKeyCommand,
onChange: this.onChange,
onTab: this.onTab,
placeholder: t("Educational Content"),
ref: "editor",
spellCheck: true
}))
])
]);
},
focus: function() {
return this.refs.editor.focus();
},
onChange: function(editorState) {
this.setState({
editorState: editorState
});
return this.props.handleChange();
},
getBlockStyle: function(block) {
switch (block.getType()) {
case 'blockquote':
return 'RichEditor-blockquote';
default:
return null;
}
},
handleKeyCommand: function(command) {
var editorState, newState;
editorState = this.state.editorState;
newState = RichUtils.handleKeyCommand(editorState, command);
if (newState) {
this.onChange(newState);
return true;
}
return false;
},
onTab: function(e) {
var maxDepth;
maxDepth = 4;
return this.onChange(RichUtils.onTab(e, this.state.editorState, maxDepth));
},
toggleBlockType: function(blockType) {
return this.onChange(RichUtils.toggleBlockType(this.state.editorState, blockType));
},
toggleInlineStyle: function(inlineStyle) {
return this.onChange(RichUtils.toggleInlineStyle(this.state.editorState, inlineStyle));
},
convertHTML: function(html) {
var content, state;
content = convertFromHTML(html);
state = ContentState.createFromBlockArray(content);
return this.setState({
editorState: EditorState.createWithContent(state)
});
},
getValue: function() {
var editorState, html;
editorState = this.state.editorState;
return html = stateToHTML(editorState.getCurrentContent()).replace(/[\n\r]+/g, '');
}
});
module.exports = GridFormRichText;
}).call(this);