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

packages/netlify-cms-widget-markdown/src/MarkdownControl/Toolbar.js

@@ -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"

packages/netlify-cms-widget-markdown/src/MarkdownControl/VisualEditor.js

@@ -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;