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

packages/netlify-cms-ui-default/src/Icon/images/_index.js

@@ -18,6 +18,7 @@ import iconGitlab from './gitlab.svg';
 import iconGrid from './grid.svg';
 import iconH1 from './h1.svg';
 import iconH2 from './h2.svg';
+import iconHOptions from './h-options.svg';
 import iconHome from './home.svg';
 import iconImage from './image.svg';
 import iconItalic from './italic.svg';
@@ -66,6 +67,7 @@ const images = {
   grid: iconGrid,
   h1: iconH1,
   h2: iconH2,
+  hOptions: iconHOptions,
   home: iconHome,
   image: iconImage,
   italic: iconItalic,

packages/netlify-cms-ui-default/src/Icon/images/h-options.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="22" height="20" viewBox="0 0 22 20"><path fill="#7A8291" d="M3 4h10v12H3V4zm2 0v5h6V4H5zm0 7v5h6v-5H5M17.874 16.91l-3.493-4.117h6.986l-3.493 4.117z"></path></svg>

packages/netlify-cms-ui-default/src/styles.js

@@ -312,11 +312,13 @@ const components = {
     display: flex;
     justify-content: space-between;
     align-items: center;
+    white-space: nowrap;
 
     &:last-of-type {
       border-bottom: 0;
     }
 
+    &.active,
     &:hover,
     &:active,
     &:focus {

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
+          {/* Show dropdown if at least one heading is not hidden */}
-            type="heading-one"
+          {Object.keys(headingOptions).some(optionKey => {
-            label="Header 1"
+            return !this.isHidden(optionKey);
-            icon="h1"
+          }) && (
-            onClick={onBlockClick}
+            <ToolbarDropdownWrapper>
-            isActive={selectionHasBlock}
+              <Dropdown
-            isHidden={this.isHidden('heading-one')}
+                dropdownTopOverlap="36px"
-            disabled={disabled}
+                renderButton={() => (
-          />
+                  <DropdownButton>
-          <ToolbarButton
+                    <ToolbarButton
-            type="heading-two"
+                      type="headings"
-            label="Header 2"
+                      label="Headings"
-            icon="h2"
+                      icon="hOptions"
-            onClick={onBlockClick}
+                      disabled={disabled}
-            isActive={selectionHasBlock}
+                      isActive={() =>
-            isHidden={this.isHidden('heading-two')}
+                        !disabled &&
-            disabled={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;

website/content/docs/widgets/markdown.md

@@ -1,5 +1,5 @@
 ---
-label: "Markdown"
+label: 'Markdown'
 title: markdown
 ---
 
@@ -12,7 +12,7 @@ _Please note:_ If you want to use your markdown editor to fill a markdown file c
 - **Data type:** markdown
 - **Options:**
   - `default`: accepts markdown content
-  - `buttons`: an array of strings representing the formatting buttons to display, all buttons shown by default. Buttons include: `bold`, `italic`, `code`, `link`, `heading-one`, `heading-two`, `quote`, `code-block`, `bulleted-list`, and `numbered-list`.
+  - `buttons`: an array of strings representing the formatting buttons to display, all buttons shown by default. Buttons include: `bold`, `italic`, `code`, `link`, `heading-one`, `heading-two`, `heading-three`, `heading-four`, `heading-five`, `heading-six`, `quote`, `code-block`, `bulleted-list`, and `numbered-list`.
 - **Example:**
 
   ```yaml