105 lines
2.9 KiB
JavaScript
105 lines
2.9 KiB
JavaScript
// @flow
|
|
import React, { Component } from 'react';
|
|
import type { State } from '../../../types';
|
|
import ToolbarButton from './ToolbarButton';
|
|
import BoldIcon from 'components/Icon/BoldIcon';
|
|
import CodeIcon from 'components/Icon/CodeIcon';
|
|
import Heading1Icon from 'components/Icon/Heading1Icon';
|
|
import Heading2Icon from 'components/Icon/Heading2Icon';
|
|
import LinkIcon from 'components/Icon/LinkIcon';
|
|
import StrikethroughIcon from 'components/Icon/StrikethroughIcon';
|
|
import BulletedListIcon from 'components/Icon/BulletedListIcon';
|
|
|
|
export default class FormattingToolbar extends Component {
|
|
props: {
|
|
state: State,
|
|
onChange: Function,
|
|
onCreateLink: Function,
|
|
};
|
|
|
|
/**
|
|
* Check if the current selection has a mark with `type` in it.
|
|
*
|
|
* @param {String} type
|
|
* @return {Boolean}
|
|
*/
|
|
hasMark = (type: string) => {
|
|
return this.props.state.marks.some(mark => mark.type === type);
|
|
};
|
|
|
|
isBlock = (type: string) => {
|
|
return this.props.state.startBlock.type === type;
|
|
};
|
|
|
|
/**
|
|
* When a mark button is clicked, toggle the current mark.
|
|
*
|
|
* @param {Event} ev
|
|
* @param {String} type
|
|
*/
|
|
onClickMark = (ev: SyntheticEvent, type: string) => {
|
|
ev.preventDefault();
|
|
let { state } = this.props;
|
|
|
|
state = state.transform().toggleMark(type).apply();
|
|
this.props.onChange(state);
|
|
};
|
|
|
|
onClickBlock = (ev: SyntheticEvent, type: string) => {
|
|
ev.preventDefault();
|
|
let { state } = this.props;
|
|
|
|
state = state.transform().setBlock(type).apply();
|
|
this.props.onChange(state);
|
|
};
|
|
|
|
onCreateLink = (ev: SyntheticEvent) => {
|
|
ev.preventDefault();
|
|
ev.stopPropagation();
|
|
let { state } = this.props;
|
|
const data = { href: '' };
|
|
state = state.transform().wrapInline({ type: 'link', data }).apply();
|
|
this.props.onChange(state);
|
|
this.props.onCreateLink();
|
|
};
|
|
|
|
renderMarkButton = (type: string, IconClass: Function) => {
|
|
const isActive = this.hasMark(type);
|
|
const onMouseDown = ev => this.onClickMark(ev, type);
|
|
|
|
return (
|
|
<ToolbarButton onMouseDown={onMouseDown} active={isActive}>
|
|
<IconClass light />
|
|
</ToolbarButton>
|
|
);
|
|
};
|
|
|
|
renderBlockButton = (type: string, IconClass: Function) => {
|
|
const isActive = this.isBlock(type);
|
|
const onMouseDown = ev =>
|
|
this.onClickBlock(ev, isActive ? 'paragraph' : type);
|
|
|
|
return (
|
|
<ToolbarButton onMouseDown={onMouseDown} active={isActive}>
|
|
<IconClass light />
|
|
</ToolbarButton>
|
|
);
|
|
};
|
|
|
|
render() {
|
|
return (
|
|
<span>
|
|
{this.renderMarkButton('bold', BoldIcon)}
|
|
{this.renderMarkButton('deleted', StrikethroughIcon)}
|
|
{this.renderBlockButton('heading1', Heading1Icon)}
|
|
{this.renderBlockButton('heading2', Heading2Icon)}
|
|
{this.renderBlockButton('bulleted-list', BulletedListIcon)}
|
|
{this.renderMarkButton('code', CodeIcon)}
|
|
<ToolbarButton onMouseDown={this.onCreateLink}>
|
|
<LinkIcon light />
|
|
</ToolbarButton>
|
|
</span>
|
|
);
|
|
}
|
|
}
|