feat(widget-markdown): add headings dropdown (#2879)
This commit is contained in:
committed by
Shawn Erquhart
parent
dc0c4c51ed
commit
78face334f
@ -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"
|
||||
|
@ -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;
|
||||
|
Reference in New Issue
Block a user