yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-12-27 07:03:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add header controls

Browse Source
This commit is contained in:
cyril lopez 2018-03-08 14:24:26 +01:00
parent edc9f82b34
commit ffbc3298c8
2 changed files with 49 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
packages/strapi-helper-plugin/lib/src/components/Wysiwyg/index.js
View File

@ -18,21 +18,29 @@ import PropTypes from 'prop-types';
import { isEmpty } from 'lodash';
import cn from 'classnames';
import Select from 'components/InputSelect';
import Controls from 'components/WysiwygInlineControls';
import styles from './styles.scss';
const CONTROLS = [
[
{label: 'B', style: 'BOLD'},
{label: 'I', style: 'ITALIC', className: 'styleButtonItalic'},
{label: 'U', style: 'UNDERLINE'},
{label: 'UL', style: 'unordered-list-item', className: 'styleButtonUL', hide: true },
{label: 'OL', style: 'ordered-list-item', className: 'styleButtonOL', hide: true },
{ label: 'H1', style: 'header-one', handler: 'toggleBlockType' },
{ label: 'H2', style: 'header-two', handler: 'toggleBlockType' },
{ label: 'H3', style: 'header-three', handler: 'toggleBlockType' },
{ label: 'H4', style: 'header-four', handler: 'toggleBlockType' },
{ label: 'H5', style: 'header-five', handler: 'toggleBlockType' },
{ label: 'H6', style: 'header-six', handler: 'toggleBlockType' },
],
[
{label: '<>', style: 'code-block' },
{label: 'quotes', style: 'blockquote', className: 'styleButtonBlockQuote', hide: true },
{label: 'B', style: 'BOLD', handler: 'toggleInlineStyle' },
{label: 'I', style: 'ITALIC', className: 'styleButtonItalic', handler: 'toggleInlineStyle' },
{label: 'U', style: 'UNDERLINE', handler: 'toggleInlineStyle' },
{label: 'UL', style: 'unordered-list-item', className: 'styleButtonUL', hideLabel: true, handler: 'toggleBlockType' },
{label: 'OL', style: 'ordered-list-item', className: 'styleButtonOL', hideLabel: true, handler: 'toggleBlockType' },
],
[
{label: '<>', style: 'code-block', handler: 'toggleBlockType' },
{label: 'quotes', style: 'blockquote', className: 'styleButtonBlockQuote', hideLabel: true, handler: 'toggleBlockType' },
],
];
@ -51,7 +59,7 @@ function getBlockStyle(block) {
class Wysiwyg extends React.Component {
constructor(props) {
super(props);
this.state = { editorState: EditorState.createEmpty(), isFocused: false, initialValue: '', previewHTML: false };
this.state = { editorState: EditorState.createEmpty(), isFocused: false, initialValue: '', previewHTML: false, headerValue: '' };
this.focus = () => {
this.setState({ isFocused: true });
return this.refs.editor.focus();
@ -88,6 +96,17 @@ class Wysiwyg extends React.Component {
return false;
}
// TODO: uncoment if select
// handleChangeSelect = ({ target }) => {
// this.onChange(
// RichUtils.toggleBlockType(
// this.state.editorState,
// target.value,
// )
// );
// this.setState({ headerValue: target.value });
// }
onChange = (editorState) => {
this.setState({ editorState });
this.props.onChange({ target: {
@ -157,11 +176,21 @@ class Wysiwyg extends React.Component {
return (
<div className={cn(styles.editorWrapper, this.state.isFocused && styles.editorFocus)}>
<div className={styles.controlsContainer}>
{/*}<Select
name="headerSelect"
onChange={this.handleChangeSelect}
value={this.state.headerValue}
selectOptions={SELECT_OPTIONS}
/>*/}
{CONTROLS.map((value, key) => (
<Controls
key={key}
buttons={value}
editorState={editorState}
handlers={{
toggleBlockType: this.toggleBlockType,
toggleInlineStyle: this.toggleInlineStyle,
}}
onToggle={this.toggleInlineStyle}
onToggleBlock={this.toggleBlockType}
previewHTML={() => this.setState(prevState => ({ previewHTML: !prevState.previewHTML }))}

22
packages/strapi-helper-plugin/lib/src/components/WysiwygInlineControls/index.js
View File

@ -20,12 +20,7 @@ const TOGGLE_BLOCK_TYPES = [
class StyleButton extends React.Component {
handleClick = (e) => {
e.preventDefault();
if (TOGGLE_BLOCK_TYPES.includes(this.props.style)) {
return this.props.onToggleBlock(this.props.style);
}
return this.props.onToggle(this.props.style);
this.props.handlers[this.props.handler](this.props.style);
}
render() {
@ -38,13 +33,13 @@ class StyleButton extends React.Component {
)}
onMouseDown={this.handleClick}
>
{!this.props.hide && this.props.label}
{!this.props.hideLabel && this.props.label}
</div>
);
}
}
const WysiwygInlineControls = ({ buttons, editorState, onToggle, onToggleBlock }) => {
const WysiwygInlineControls = ({ buttons, editorState, handlers, onToggle, onToggleBlock }) => {
const selection = editorState.getSelection();
const blockType = editorState
.getCurrentContent()
@ -60,11 +55,13 @@ const WysiwygInlineControls = ({ buttons, editorState, onToggle, onToggleBlock
key={type.label}
active={type.style === blockType || currentStyle.has(type.style)}
className={type.className}
handler={type.handler}
handlers={handlers}
hideLabel={type.hideLabel || false}
label={type.label}
onToggle={onToggle}
onToggleBlock={onToggleBlock}
style={type.style}
hide={type.hide || false}
/>
))}
</div>
@ -74,7 +71,7 @@ const WysiwygInlineControls = ({ buttons, editorState, onToggle, onToggleBlock
StyleButton.defaultProps = {
active: false,
className: '',
hide: false,
hideLabel: false,
label: '',
onToggle: () => {},
onToggleBlock: () => {},
@ -84,7 +81,9 @@ StyleButton.defaultProps = {
StyleButton.propTypes = {
active: PropTypes.bool,
className: PropTypes.string,
hide: PropTypes.bool,
handler: PropTypes.string.isRequired,
handlers: PropTypes.object.isRequired,
hideLabel: PropTypes.bool,
label: PropTypes.string,
onToggle: PropTypes.func,
onToggleBlock: PropTypes.func,
@ -100,6 +99,7 @@ WysiwygInlineControls.defaultProps = {
WysiwygInlineControls.propTypes = {
buttons: PropTypes.array,
editorState: PropTypes.object.isRequired,
handlers: PropTypes.object.isRequired,
onToggle: PropTypes.func,
onToggleBlock: PropTypes.func,
};