feat(widget-markdown): add headings dropdown (#2879)

This commit is contained in:
Christian Fritsch
2019-11-18 23:16:33 +01:00
committed by Shawn Erquhart
parent dc0c4c51ed
commit 78face334f
6 changed files with 58 additions and 21 deletions

View File

@ -58,6 +58,15 @@ const ToolbarToggleLabel = styled.span`
`};
`;
const headingOptions = {
'heading-one': 'Heading 1',
'heading-two': 'Heading 2',
'heading-three': 'Heading 3',
'heading-four': 'Heading 4',
'heading-five': 'Heading 5',
'heading-six': 'Heading 6',
};
export default class Toolbar extends React.Component {
static propTypes = {
buttons: ImmutablePropTypes.list,
@ -135,24 +144,45 @@ export default class Toolbar extends React.Component {
isHidden={this.isHidden('link')}
disabled={disabled}
/>
<ToolbarButton
type="heading-one"
label="Header 1"
icon="h1"
onClick={onBlockClick}
isActive={selectionHasBlock}
isHidden={this.isHidden('heading-one')}
disabled={disabled}
/>
<ToolbarButton
type="heading-two"
label="Header 2"
icon="h2"
onClick={onBlockClick}
isActive={selectionHasBlock}
isHidden={this.isHidden('heading-two')}
disabled={disabled}
/>
{/* Show dropdown if at least one heading is not hidden */}
{Object.keys(headingOptions).some(optionKey => {
return !this.isHidden(optionKey);
}) && (
<ToolbarDropdownWrapper>
<Dropdown
dropdownTopOverlap="36px"
renderButton={() => (
<DropdownButton>
<ToolbarButton
type="headings"
label="Headings"
icon="hOptions"
disabled={disabled}
isActive={() =>
!disabled &&
Object.keys(headingOptions).some(optionKey => {
return selectionHasBlock(optionKey);
})
}
/>
</DropdownButton>
)}
>
{!disabled &&
Object.keys(headingOptions).map(
(optionKey, idx) =>
!this.isHidden(optionKey) && (
<DropdownItem
key={idx}
label={headingOptions[optionKey]}
className={selectionHasBlock(optionKey) && 'active'}
onClick={() => onBlockClick(undefined, optionKey)}
/>
),
)}
</Dropdown>
</ToolbarDropdownWrapper>
)}
<ToolbarButton
type="quote"
label="Quote"

View File

@ -112,7 +112,9 @@ export default class Editor extends React.Component {
};
handleBlockClick = (event, type) => {
event.preventDefault();
if (event) {
event.preventDefault();
}
let { value } = this.state;
const { document: doc } = value;
const { unwrapList, wrapInList } = EditListConfigured.changes;