From caec27c3001e46fed87633db889abf6cb2f083f2 Mon Sep 17 00:00:00 2001
From: Suzanne Aitchison <suzanne@forem.com>
Date: Wed, 27 Jul 2022 17:40:48 +0100
Subject: [PATCH] Dynamically change number of formatter buttons in md toolbar
 overflow menu (#18224)

* dynamically change number of formatter buttons in the overflow menu

* add specs
---
 .../stylesheets/views/article-form.scss       |  20 +-
 app/assets/stylesheets/views/comments.scss    |   7 +-
 .../MarkdownToolbar/MarkdownToolbar.jsx       | 104 ++++---
 .../__tests__/MarkdownToolbar.test.jsx        | 158 +++++++++--
 .../markdownSyntaxFormatters.test.js          | 255 +++++++++---------
 .../markdownSyntaxFormatters.jsx              |   5 +-
 6 files changed, 336 insertions(+), 213 deletions(-)

diff --git a/app/assets/stylesheets/views/article-form.scss b/app/assets/stylesheets/views/article-form.scss
index 9cd6e0b07..846aa9e99 100644
--- a/app/assets/stylesheets/views/article-form.scss
+++ b/app/assets/stylesheets/views/article-form.scss
@@ -158,15 +158,19 @@
     top: 0;
     background: var(--base-0);
     padding: var(--su-2) var(--content-padding-x);
-    padding-right: var(--toolbar-padding-right, 0);
-    overflow-x: auto;
+    padding-right: var(--content-padding-x, 0);
     flex-shrink: 0;
     margin: calc(var(--content-padding-y) * -1)
       calc(var(--content-padding-x) * -1) var(--su-6)
       calc(var(--content-padding-x) * -1);
 
     .editor-toolbar {
-      position: relative;
+      overflow-x: auto;
+
+      @media (min-width: $breakpoint-xs) {
+        overflow-x: unset;
+        position: relative;
+      }
     }
 
     > :first-child {
@@ -174,16 +178,6 @@
         margin-left: calc(var(--su-2) * -1);
       }
     }
-
-    &::-webkit-scrollbar {
-      background: transparent;
-      height: 0;
-    }
-
-    @media (min-width: $breakpoint-m) {
-      --toolbar-padding-right: var(--content-padding-x);
-      overflow: visible;
-    }
   }
 
   &__cover {
diff --git a/app/assets/stylesheets/views/comments.scss b/app/assets/stylesheets/views/comments.scss
index bbe82c880..f1dd10268 100644
--- a/app/assets/stylesheets/views/comments.scss
+++ b/app/assets/stylesheets/views/comments.scss
@@ -28,14 +28,9 @@
     .editor-toolbar {
       border-top: 1px solid var(--form-border);
       overflow-x: auto;
-
-      &::-webkit-scrollbar {
-        background: transparent;
-        height: 0;
-      }
     }
 
-    @media (min-width: $breakpoint-m) {
+    @media (min-width: $breakpoint-xs) {
       .editor-toolbar {
         overflow-x: unset;
       }
diff --git a/app/javascript/crayons/MarkdownToolbar/MarkdownToolbar.jsx b/app/javascript/crayons/MarkdownToolbar/MarkdownToolbar.jsx
index 33e215a01..583ccc37f 100644
--- a/app/javascript/crayons/MarkdownToolbar/MarkdownToolbar.jsx
+++ b/app/javascript/crayons/MarkdownToolbar/MarkdownToolbar.jsx
@@ -2,8 +2,7 @@ import { h, cloneElement } from 'preact';
 import { useState, useLayoutEffect, useRef } from 'preact/hooks';
 import { ImageUploader } from '../../article-form/components/ImageUploader';
 import {
-  coreSyntaxFormatters,
-  secondarySyntaxFormatters,
+  markdownSyntaxFormatters,
   getNewTextAreaValueWithEdits,
 } from './markdownSyntaxFormatters';
 import OverflowIcon from '@images/overflow-vertical.svg';
@@ -15,6 +14,25 @@ import { getSelectionData } from '@utilities/textAreaUtils';
 // Placeholder text displayed while an image is uploading
 const UPLOADING_IMAGE_PLACEHOLDER = '![Uploading image](...)';
 
+const MAX_CORE_FORMATTERS_BY_SCREEN_SIZE = {
+  small: 5,
+  large: 7,
+  extraLarge: 10,
+};
+
+const getNumberOfIconsToDisplayInToolbar = ({
+  isSmallScreen,
+  isLargeScreen,
+}) => {
+  if (isSmallScreen) {
+    return MAX_CORE_FORMATTERS_BY_SCREEN_SIZE.small;
+  }
+  if (isLargeScreen) {
+    return MAX_CORE_FORMATTERS_BY_SCREEN_SIZE.large;
+  }
+  return MAX_CORE_FORMATTERS_BY_SCREEN_SIZE.extraLarge;
+};
+
 /**
  * Returns the next sibling in the DOM which matches the given CSS selector.
  * This makes sure that only toolbar buttons are cycled through on Arrow key press,
@@ -66,6 +84,13 @@ export const MarkdownToolbar = ({
   const [overflowMenuOpen, setOverflowMenuOpen] = useState(false);
   const [storedCursorPosition, setStoredCursorPosition] = useState({});
   const smallScreen = useMediaQuery(`(max-width: ${BREAKPOINTS.Medium - 1}px)`);
+  const largeScreen = useMediaQuery(
+    `(min-width: ${BREAKPOINTS.Large}px) and (max-width: ${
+      BREAKPOINTS.ExtraLarge - 1
+    }px)`,
+  );
+
+  const overflowMenuRows = smallScreen ? 2 : 1;
 
   // Enhance any additional toolbar elements with the appropriate roles & listeners
   const additionalSecondaryItems = additionalSecondaryToolbarElements.map(
@@ -78,11 +103,6 @@ export const MarkdownToolbar = ({
       }),
   );
 
-  const markdownSyntaxFormatters = {
-    ...coreSyntaxFormatters,
-    ...secondarySyntaxFormatters,
-  };
-
   const keyboardShortcuts = Object.fromEntries(
     Object.keys(markdownSyntaxFormatters)
       .filter(
@@ -116,7 +136,7 @@ export const MarkdownToolbar = ({
     if (!focusableToolbarButton) {
       document.querySelector('.toolbar-btn').setAttribute('tabindex', '0');
     }
-  }, [smallScreen]);
+  }, [smallScreen, largeScreen]);
 
   useLayoutEffect(() => {
     const clickOutsideHandler = ({ target }) => {
@@ -298,29 +318,32 @@ export const MarkdownToolbar = ({
     );
   };
 
-  const getSecondaryFormatterButtons = (isOverflow) =>
-    Object.keys(secondarySyntaxFormatters).map((controlName, index) => {
+  const numberOfCoreFormatters = getNumberOfIconsToDisplayInToolbar({
+    isSmallScreen: smallScreen,
+    isLargeScreen: largeScreen,
+  });
+
+  const coreSyntaxFormatters = Object.fromEntries(
+    Object.entries(markdownSyntaxFormatters).slice(0, numberOfCoreFormatters),
+  );
+  const secondarySyntaxFormatters = Object.fromEntries(
+    Object.entries(markdownSyntaxFormatters).slice(numberOfCoreFormatters),
+  );
+
+  const secondaryFormatterButtons = Object.keys(secondarySyntaxFormatters).map(
+    (controlName, index) => {
       const { icon, label, getKeyboardShortcut } =
         secondarySyntaxFormatters[controlName];
 
       return (
         <Button
           key={`${controlName}-btn`}
-          role={isOverflow ? 'menuitem' : 'button'}
+          role="menuitem"
           icon={icon}
-          className={
-            isOverflow
-              ? 'overflow-menu-btn hidden m:block mr-1'
-              : 'toolbar-btn m:hidden mr-1'
-          }
-          tabindex={isOverflow && index === 0 ? '0' : '-1'}
+          className="overflow-menu-btn mr-1"
+          tabindex={index === 0 ? '0' : '-1'}
           onClick={() => insertSyntax(controlName)}
-          onKeyUp={(e) =>
-            handleToolbarButtonKeyPress(
-              e,
-              isOverflow ? 'overflow-menu-btn' : 'toolbar-btn',
-            )
-          }
+          onKeyUp={(e) => handleToolbarButtonKeyPress(e, 'overflow-menu-btn')}
           aria-label={label}
           tooltip={
             smallScreen ? null : (
@@ -336,7 +359,8 @@ export const MarkdownToolbar = ({
           }
         />
       );
-    });
+    },
+  );
 
   return (
     <div
@@ -395,31 +419,25 @@ export const MarkdownToolbar = ({
         }}
       />
 
-      {smallScreen ? getSecondaryFormatterButtons(false) : null}
-
-      {smallScreen ? (
-        additionalSecondaryItems
-      ) : (
-        <Button
-          id="overflow-menu-button"
-          onClick={() => setOverflowMenuOpen(!overflowMenuOpen)}
-          onKeyUp={(e) => handleToolbarButtonKeyPress(e, 'toolbar-btn')}
-          aria-expanded={overflowMenuOpen ? 'true' : 'false'}
-          aria-haspopup="true"
-          icon={OverflowIcon}
-          className="toolbar-btn ml-auto hidden m:block"
-          tabindex="-1"
-          aria-label="More options"
-        />
-      )}
+      <Button
+        id="overflow-menu-button"
+        onClick={() => setOverflowMenuOpen(!overflowMenuOpen)}
+        onKeyUp={(e) => handleToolbarButtonKeyPress(e, 'toolbar-btn')}
+        aria-expanded={overflowMenuOpen ? 'true' : 'false'}
+        aria-haspopup="true"
+        icon={OverflowIcon}
+        className="toolbar-btn ml-auto"
+        tabindex="-1"
+        aria-label="More options"
+      />
 
       {overflowMenuOpen && (
         <div
           id="overflow-menu"
           role="menu"
-          className="crayons-dropdown flex p-2 min-w-unset right-0 top-100"
+          className={`crayons-dropdown grid grid-rows-${overflowMenuRows} grid-flow-col p-2 min-w-unset right-0 top-100`}
         >
-          {getSecondaryFormatterButtons(true)}
+          {secondaryFormatterButtons}
           {additionalSecondaryItems}
         </div>
       )}
diff --git a/app/javascript/crayons/MarkdownToolbar/__tests__/MarkdownToolbar.test.jsx b/app/javascript/crayons/MarkdownToolbar/__tests__/MarkdownToolbar.test.jsx
index 85c89e90d..6553fc7f1 100644
--- a/app/javascript/crayons/MarkdownToolbar/__tests__/MarkdownToolbar.test.jsx
+++ b/app/javascript/crayons/MarkdownToolbar/__tests__/MarkdownToolbar.test.jsx
@@ -3,6 +3,7 @@ import { render, waitFor } from '@testing-library/preact';
 import { axe } from 'jest-axe';
 import '@testing-library/jest-dom';
 import { MarkdownToolbar } from '../MarkdownToolbar';
+import { BREAKPOINTS } from '@components/useMediaQuery';
 
 describe('<MarkdownToolbar />', () => {
   beforeEach(() => {
@@ -30,30 +31,149 @@ describe('<MarkdownToolbar />', () => {
     expect(results).toHaveNoViolations();
   });
 
-  it('should render core syntax formatters in main toolbar', () => {
-    const { getByLabelText } = render(<MarkdownToolbar />);
+  describe('small screen layout', () => {
+    const smallScreenMediaQuery = `(max-width: ${BREAKPOINTS.Medium - 1}px)`;
+    beforeEach(() => {
+      global.window.matchMedia = jest.fn((query) => {
+        return {
+          matches: query === smallScreenMediaQuery,
+          media: query,
+          addListener: jest.fn(),
+          removeListener: jest.fn(),
+        };
+      });
+    });
 
-    expect(getByLabelText('Bold')).toBeInTheDocument();
-    expect(getByLabelText('Italic')).toBeInTheDocument();
-    expect(getByLabelText('Ordered list')).toBeInTheDocument();
-    expect(getByLabelText('Unordered list')).toBeInTheDocument();
-    expect(getByLabelText('Heading')).toBeInTheDocument();
-    expect(getByLabelText('Quote')).toBeInTheDocument();
-    expect(getByLabelText('Code')).toBeInTheDocument();
-    expect(getByLabelText('Code block')).toBeInTheDocument();
-    expect(getByLabelText('Embed')).toBeInTheDocument();
+    it('should render only 5 formatters in main toolbar', () => {
+      const { getByLabelText, queryByLabelText } = render(<MarkdownToolbar />);
+
+      expect(getByLabelText('Bold')).toBeInTheDocument();
+      expect(getByLabelText('Italic')).toBeInTheDocument();
+      expect(getByLabelText('Ordered list')).toBeInTheDocument();
+      expect(getByLabelText('Unordered list')).toBeInTheDocument();
+      expect(getByLabelText('Link')).toBeInTheDocument();
+
+      expect(queryByLabelText('Heading')).not.toBeInTheDocument();
+      expect(queryByLabelText('Quote')).not.toBeInTheDocument();
+      expect(queryByLabelText('Code')).not.toBeInTheDocument();
+      expect(queryByLabelText('Code block')).not.toBeInTheDocument();
+      expect(queryByLabelText('Embed')).not.toBeInTheDocument();
+      expect(queryByLabelText('Underline')).not.toBeInTheDocument();
+      expect(queryByLabelText('Strikethrough')).not.toBeInTheDocument();
+      expect(queryByLabelText('Line divider')).not.toBeInTheDocument();
+    });
+
+    it('should render remaining formatters in overflow menu', async () => {
+      const { getByLabelText } = render(<MarkdownToolbar />);
+
+      getByLabelText('More options').click();
+
+      await waitFor(() =>
+        expect(getByLabelText('Heading')).toBeInTheDocument(),
+      );
+
+      expect(getByLabelText('Quote')).toBeInTheDocument();
+      expect(getByLabelText('Code')).toBeInTheDocument();
+      expect(getByLabelText('Code block')).toBeInTheDocument();
+      expect(getByLabelText('Embed')).toBeInTheDocument();
+      expect(getByLabelText('Underline')).toBeInTheDocument();
+      expect(getByLabelText('Strikethrough')).toBeInTheDocument();
+      expect(getByLabelText('Line divider')).toBeInTheDocument();
+    });
   });
 
-  it('should render an overflow menu with secondary formatters', async () => {
-    const { getByLabelText } = render(<MarkdownToolbar />);
+  describe('large screen layout', () => {
+    const largeScreenMediaQuery = `(min-width: ${
+      BREAKPOINTS.Large
+    }px) and (max-width: ${BREAKPOINTS.ExtraLarge - 1}px)`;
+    beforeEach(() => {
+      global.window.matchMedia = jest.fn((query) => {
+        return {
+          matches: query === largeScreenMediaQuery,
+          media: query,
+          addListener: jest.fn(),
+          removeListener: jest.fn(),
+        };
+      });
+    });
 
-    getByLabelText('More options').click();
+    it('should render only 7 formatters in the main toolbar', () => {
+      const { getByLabelText, queryByLabelText } = render(<MarkdownToolbar />);
 
-    await waitFor(() =>
-      expect(getByLabelText('Underline')).toBeInTheDocument(),
-    );
-    expect(getByLabelText('Strikethrough')).toBeInTheDocument();
-    expect(getByLabelText('Line divider')).toBeInTheDocument();
+      expect(getByLabelText('Bold')).toBeInTheDocument();
+      expect(getByLabelText('Italic')).toBeInTheDocument();
+      expect(getByLabelText('Ordered list')).toBeInTheDocument();
+      expect(getByLabelText('Unordered list')).toBeInTheDocument();
+      expect(getByLabelText('Link')).toBeInTheDocument();
+      expect(getByLabelText('Heading')).toBeInTheDocument();
+      expect(getByLabelText('Quote')).toBeInTheDocument();
+
+      expect(queryByLabelText('Code')).not.toBeInTheDocument();
+      expect(queryByLabelText('Code block')).not.toBeInTheDocument();
+      expect(queryByLabelText('Embed')).not.toBeInTheDocument();
+      expect(queryByLabelText('Underline')).not.toBeInTheDocument();
+      expect(queryByLabelText('Strikethrough')).not.toBeInTheDocument();
+      expect(queryByLabelText('Line divider')).not.toBeInTheDocument();
+    });
+
+    it('should render remaining formatters in overflow menu', async () => {
+      const { getByLabelText } = render(<MarkdownToolbar />);
+
+      getByLabelText('More options').click();
+
+      await waitFor(() => expect(getByLabelText('Code')).toBeInTheDocument());
+
+      expect(getByLabelText('Code block')).toBeInTheDocument();
+      expect(getByLabelText('Embed')).toBeInTheDocument();
+      expect(getByLabelText('Underline')).toBeInTheDocument();
+      expect(getByLabelText('Strikethrough')).toBeInTheDocument();
+      expect(getByLabelText('Line divider')).toBeInTheDocument();
+    });
+  });
+
+  describe('extra large screen layout', () => {
+    beforeEach(() => {
+      global.window.matchMedia = jest.fn((query) => {
+        return {
+          matches: false,
+          media: query,
+          addListener: jest.fn(),
+          removeListener: jest.fn(),
+        };
+      });
+    });
+
+    it('should render 10 formatters in the main toolbar', () => {
+      const { getByLabelText, queryByLabelText } = render(<MarkdownToolbar />);
+
+      expect(getByLabelText('Bold')).toBeInTheDocument();
+      expect(getByLabelText('Italic')).toBeInTheDocument();
+      expect(getByLabelText('Ordered list')).toBeInTheDocument();
+      expect(getByLabelText('Unordered list')).toBeInTheDocument();
+      expect(getByLabelText('Link')).toBeInTheDocument();
+      expect(getByLabelText('Heading')).toBeInTheDocument();
+      expect(getByLabelText('Quote')).toBeInTheDocument();
+      expect(getByLabelText('Code')).toBeInTheDocument();
+      expect(getByLabelText('Code block')).toBeInTheDocument();
+      expect(getByLabelText('Embed')).toBeInTheDocument();
+
+      expect(queryByLabelText('Underline')).not.toBeInTheDocument();
+      expect(queryByLabelText('Strikethrough')).not.toBeInTheDocument();
+      expect(queryByLabelText('Line divider')).not.toBeInTheDocument();
+    });
+
+    it('should render remaining formatters in overflow menu', async () => {
+      const { getByLabelText } = render(<MarkdownToolbar />);
+
+      getByLabelText('More options').click();
+
+      await waitFor(() =>
+        expect(getByLabelText('Underline')).toBeInTheDocument(),
+      );
+
+      expect(getByLabelText('Strikethrough')).toBeInTheDocument();
+      expect(getByLabelText('Line divider')).toBeInTheDocument();
+    });
   });
 
   it('should render any custom secondary toolbar elements', async () => {
diff --git a/app/javascript/crayons/MarkdownToolbar/__tests__/markdownSyntaxFormatters.test.js b/app/javascript/crayons/MarkdownToolbar/__tests__/markdownSyntaxFormatters.test.js
index ba57eeba6..cbb008d28 100644
--- a/app/javascript/crayons/MarkdownToolbar/__tests__/markdownSyntaxFormatters.test.js
+++ b/app/javascript/crayons/MarkdownToolbar/__tests__/markdownSyntaxFormatters.test.js
@@ -1,6 +1,5 @@
 import {
-  coreSyntaxFormatters,
-  secondarySyntaxFormatters,
+  markdownSyntaxFormatters,
   getNewTextAreaValueWithEdits,
 } from '../markdownSyntaxFormatters';
 
@@ -17,7 +16,7 @@ describe('markdownSyntaxFormatters', () => {
           editSelectionStart,
           editSelectionEnd,
           replaceSelectionWith,
-        } = coreSyntaxFormatters['bold'].getFormatting({
+        } = markdownSyntaxFormatters['bold'].getFormatting({
           value: textAreaValue,
           selectionStart: 4,
           selectionEnd: 7,
@@ -46,7 +45,7 @@ describe('markdownSyntaxFormatters', () => {
           editSelectionStart,
           editSelectionEnd,
           replaceSelectionWith,
-        } = coreSyntaxFormatters['bold'].getFormatting({
+        } = markdownSyntaxFormatters['bold'].getFormatting({
           value: textAreaValue,
           selectionStart: 4,
           selectionEnd: 4,
@@ -74,7 +73,7 @@ describe('markdownSyntaxFormatters', () => {
           editSelectionStart,
           editSelectionEnd,
           replaceSelectionWith,
-        } = coreSyntaxFormatters['bold'].getFormatting({
+        } = markdownSyntaxFormatters['bold'].getFormatting({
           value: textAreaValue,
           selectionStart: 4,
           selectionEnd: 11,
@@ -103,7 +102,7 @@ describe('markdownSyntaxFormatters', () => {
           editSelectionStart,
           editSelectionEnd,
           replaceSelectionWith,
-        } = coreSyntaxFormatters['bold'].getFormatting({
+        } = markdownSyntaxFormatters['bold'].getFormatting({
           value: textAreaValue,
           selectionStart: 4,
           selectionEnd: 9,
@@ -132,7 +131,7 @@ describe('markdownSyntaxFormatters', () => {
           editSelectionStart,
           editSelectionEnd,
           replaceSelectionWith,
-        } = coreSyntaxFormatters['bold'].getFormatting({
+        } = markdownSyntaxFormatters['bold'].getFormatting({
           value: textAreaValue,
           selectionStart: 4,
           selectionEnd: 9,
@@ -161,7 +160,7 @@ describe('markdownSyntaxFormatters', () => {
           editSelectionStart,
           editSelectionEnd,
           replaceSelectionWith,
-        } = coreSyntaxFormatters['bold'].getFormatting({
+        } = markdownSyntaxFormatters['bold'].getFormatting({
           value: textAreaValue,
           selectionStart: 4,
           selectionEnd: 11,
@@ -190,7 +189,7 @@ describe('markdownSyntaxFormatters', () => {
           editSelectionStart,
           editSelectionEnd,
           replaceSelectionWith,
-        } = coreSyntaxFormatters['bold'].getFormatting({
+        } = markdownSyntaxFormatters['bold'].getFormatting({
           value: textAreaValue,
           selectionStart: 6,
           selectionEnd: 9,
@@ -219,7 +218,7 @@ describe('markdownSyntaxFormatters', () => {
           editSelectionStart,
           editSelectionEnd,
           replaceSelectionWith,
-        } = coreSyntaxFormatters['bold'].getFormatting({
+        } = markdownSyntaxFormatters['bold'].getFormatting({
           value: textAreaValue,
           selectionStart: 4,
           selectionEnd: 7,
@@ -250,7 +249,7 @@ describe('markdownSyntaxFormatters', () => {
           editSelectionStart,
           editSelectionEnd,
           replaceSelectionWith,
-        } = coreSyntaxFormatters['italic'].getFormatting({
+        } = markdownSyntaxFormatters['italic'].getFormatting({
           value: textAreaValue,
           selectionStart: 4,
           selectionEnd: 7,
@@ -279,7 +278,7 @@ describe('markdownSyntaxFormatters', () => {
           editSelectionStart,
           editSelectionEnd,
           replaceSelectionWith,
-        } = coreSyntaxFormatters['italic'].getFormatting({
+        } = markdownSyntaxFormatters['italic'].getFormatting({
           value: textAreaValue,
           selectionStart: 4,
           selectionEnd: 4,
@@ -307,7 +306,7 @@ describe('markdownSyntaxFormatters', () => {
           editSelectionStart,
           editSelectionEnd,
           replaceSelectionWith,
-        } = coreSyntaxFormatters['italic'].getFormatting({
+        } = markdownSyntaxFormatters['italic'].getFormatting({
           value: textAreaValue,
           selectionStart: 4,
           selectionEnd: 9,
@@ -336,7 +335,7 @@ describe('markdownSyntaxFormatters', () => {
           editSelectionStart,
           editSelectionEnd,
           replaceSelectionWith,
-        } = coreSyntaxFormatters['italic'].getFormatting({
+        } = markdownSyntaxFormatters['italic'].getFormatting({
           value: textAreaValue,
           selectionStart: 4,
           selectionEnd: 8,
@@ -365,7 +364,7 @@ describe('markdownSyntaxFormatters', () => {
           editSelectionStart,
           editSelectionEnd,
           replaceSelectionWith,
-        } = coreSyntaxFormatters['italic'].getFormatting({
+        } = markdownSyntaxFormatters['italic'].getFormatting({
           value: textAreaValue,
           selectionStart: 4,
           selectionEnd: 8,
@@ -394,7 +393,7 @@ describe('markdownSyntaxFormatters', () => {
           editSelectionStart,
           editSelectionEnd,
           replaceSelectionWith,
-        } = coreSyntaxFormatters['italic'].getFormatting({
+        } = markdownSyntaxFormatters['italic'].getFormatting({
           value: textAreaValue,
           selectionStart: 5,
           selectionEnd: 8,
@@ -423,7 +422,7 @@ describe('markdownSyntaxFormatters', () => {
           editSelectionStart,
           editSelectionEnd,
           replaceSelectionWith,
-        } = coreSyntaxFormatters['italic'].getFormatting({
+        } = markdownSyntaxFormatters['italic'].getFormatting({
           value: textAreaValue,
           selectionStart: 5,
           selectionEnd: 8,
@@ -452,7 +451,7 @@ describe('markdownSyntaxFormatters', () => {
           editSelectionStart,
           editSelectionEnd,
           replaceSelectionWith,
-        } = coreSyntaxFormatters['italic'].getFormatting({
+        } = markdownSyntaxFormatters['italic'].getFormatting({
           value: textAreaValue,
           selectionStart: 4,
           selectionEnd: 7,
@@ -483,7 +482,7 @@ describe('markdownSyntaxFormatters', () => {
           editSelectionStart,
           editSelectionEnd,
           replaceSelectionWith,
-        } = coreSyntaxFormatters['code'].getFormatting({
+        } = markdownSyntaxFormatters['code'].getFormatting({
           value: textAreaValue,
           selectionStart: 4,
           selectionEnd: 7,
@@ -512,7 +511,7 @@ describe('markdownSyntaxFormatters', () => {
           editSelectionStart,
           editSelectionEnd,
           replaceSelectionWith,
-        } = coreSyntaxFormatters['code'].getFormatting({
+        } = markdownSyntaxFormatters['code'].getFormatting({
           value: textAreaValue,
           selectionStart: 4,
           selectionEnd: 4,
@@ -540,7 +539,7 @@ describe('markdownSyntaxFormatters', () => {
           editSelectionStart,
           editSelectionEnd,
           replaceSelectionWith,
-        } = coreSyntaxFormatters['code'].getFormatting({
+        } = markdownSyntaxFormatters['code'].getFormatting({
           value: textAreaValue,
           selectionStart: 4,
           selectionEnd: 9,
@@ -569,7 +568,7 @@ describe('markdownSyntaxFormatters', () => {
           editSelectionStart,
           editSelectionEnd,
           replaceSelectionWith,
-        } = coreSyntaxFormatters['code'].getFormatting({
+        } = markdownSyntaxFormatters['code'].getFormatting({
           value: textAreaValue,
           selectionStart: 4,
           selectionEnd: 8,
@@ -598,7 +597,7 @@ describe('markdownSyntaxFormatters', () => {
           editSelectionStart,
           editSelectionEnd,
           replaceSelectionWith,
-        } = coreSyntaxFormatters['code'].getFormatting({
+        } = markdownSyntaxFormatters['code'].getFormatting({
           value: textAreaValue,
           selectionStart: 4,
           selectionEnd: 8,
@@ -627,7 +626,7 @@ describe('markdownSyntaxFormatters', () => {
           editSelectionStart,
           editSelectionEnd,
           replaceSelectionWith,
-        } = coreSyntaxFormatters['code'].getFormatting({
+        } = markdownSyntaxFormatters['code'].getFormatting({
           value: textAreaValue,
           selectionStart: 5,
           selectionEnd: 8,
@@ -656,7 +655,7 @@ describe('markdownSyntaxFormatters', () => {
           editSelectionStart,
           editSelectionEnd,
           replaceSelectionWith,
-        } = coreSyntaxFormatters['code'].getFormatting({
+        } = markdownSyntaxFormatters['code'].getFormatting({
           value: textAreaValue,
           selectionStart: 5,
           selectionEnd: 8,
@@ -685,7 +684,7 @@ describe('markdownSyntaxFormatters', () => {
           editSelectionStart,
           editSelectionEnd,
           replaceSelectionWith,
-        } = coreSyntaxFormatters['code'].getFormatting({
+        } = markdownSyntaxFormatters['code'].getFormatting({
           value: textAreaValue,
           selectionStart: 4,
           selectionEnd: 7,
@@ -716,7 +715,7 @@ describe('markdownSyntaxFormatters', () => {
           editSelectionStart,
           editSelectionEnd,
           replaceSelectionWith,
-        } = secondarySyntaxFormatters['underline'].getFormatting({
+        } = markdownSyntaxFormatters['underline'].getFormatting({
           value: textAreaValue,
           selectionStart: 4,
           selectionEnd: 7,
@@ -745,7 +744,7 @@ describe('markdownSyntaxFormatters', () => {
           editSelectionStart,
           editSelectionEnd,
           replaceSelectionWith,
-        } = secondarySyntaxFormatters['underline'].getFormatting({
+        } = markdownSyntaxFormatters['underline'].getFormatting({
           value: textAreaValue,
           selectionStart: 4,
           selectionEnd: 4,
@@ -773,7 +772,7 @@ describe('markdownSyntaxFormatters', () => {
           editSelectionStart,
           editSelectionEnd,
           replaceSelectionWith,
-        } = secondarySyntaxFormatters['underline'].getFormatting({
+        } = markdownSyntaxFormatters['underline'].getFormatting({
           value: textAreaValue,
           selectionStart: 4,
           selectionEnd: 14,
@@ -802,7 +801,7 @@ describe('markdownSyntaxFormatters', () => {
           editSelectionStart,
           editSelectionEnd,
           replaceSelectionWith,
-        } = secondarySyntaxFormatters['underline'].getFormatting({
+        } = markdownSyntaxFormatters['underline'].getFormatting({
           value: textAreaValue,
           selectionStart: 4,
           selectionEnd: 10,
@@ -831,7 +830,7 @@ describe('markdownSyntaxFormatters', () => {
           editSelectionStart,
           editSelectionEnd,
           replaceSelectionWith,
-        } = secondarySyntaxFormatters['underline'].getFormatting({
+        } = markdownSyntaxFormatters['underline'].getFormatting({
           value: textAreaValue,
           selectionStart: 4,
           selectionEnd: 11,
@@ -860,7 +859,7 @@ describe('markdownSyntaxFormatters', () => {
           editSelectionStart,
           editSelectionEnd,
           replaceSelectionWith,
-        } = secondarySyntaxFormatters['underline'].getFormatting({
+        } = markdownSyntaxFormatters['underline'].getFormatting({
           value: textAreaValue,
           selectionStart: 7,
           selectionEnd: 10,
@@ -889,7 +888,7 @@ describe('markdownSyntaxFormatters', () => {
           editSelectionStart,
           editSelectionEnd,
           replaceSelectionWith,
-        } = secondarySyntaxFormatters['underline'].getFormatting({
+        } = markdownSyntaxFormatters['underline'].getFormatting({
           value: textAreaValue,
           selectionStart: 7,
           selectionEnd: 10,
@@ -918,7 +917,7 @@ describe('markdownSyntaxFormatters', () => {
           editSelectionStart,
           editSelectionEnd,
           replaceSelectionWith,
-        } = secondarySyntaxFormatters['underline'].getFormatting({
+        } = markdownSyntaxFormatters['underline'].getFormatting({
           value: textAreaValue,
           selectionStart: 4,
           selectionEnd: 7,
@@ -949,7 +948,7 @@ describe('markdownSyntaxFormatters', () => {
           editSelectionStart,
           editSelectionEnd,
           replaceSelectionWith,
-        } = secondarySyntaxFormatters['strikethrough'].getFormatting({
+        } = markdownSyntaxFormatters['strikethrough'].getFormatting({
           value: textAreaValue,
           selectionStart: 4,
           selectionEnd: 7,
@@ -978,7 +977,7 @@ describe('markdownSyntaxFormatters', () => {
           editSelectionStart,
           editSelectionEnd,
           replaceSelectionWith,
-        } = secondarySyntaxFormatters['strikethrough'].getFormatting({
+        } = markdownSyntaxFormatters['strikethrough'].getFormatting({
           value: textAreaValue,
           selectionStart: 4,
           selectionEnd: 4,
@@ -1006,7 +1005,7 @@ describe('markdownSyntaxFormatters', () => {
           editSelectionStart,
           editSelectionEnd,
           replaceSelectionWith,
-        } = secondarySyntaxFormatters['strikethrough'].getFormatting({
+        } = markdownSyntaxFormatters['strikethrough'].getFormatting({
           value: textAreaValue,
           selectionStart: 4,
           selectionEnd: 11,
@@ -1035,7 +1034,7 @@ describe('markdownSyntaxFormatters', () => {
           editSelectionStart,
           editSelectionEnd,
           replaceSelectionWith,
-        } = secondarySyntaxFormatters['strikethrough'].getFormatting({
+        } = markdownSyntaxFormatters['strikethrough'].getFormatting({
           value: textAreaValue,
           selectionStart: 4,
           selectionEnd: 9,
@@ -1064,7 +1063,7 @@ describe('markdownSyntaxFormatters', () => {
           editSelectionStart,
           editSelectionEnd,
           replaceSelectionWith,
-        } = secondarySyntaxFormatters['strikethrough'].getFormatting({
+        } = markdownSyntaxFormatters['strikethrough'].getFormatting({
           value: textAreaValue,
           selectionStart: 4,
           selectionEnd: 9,
@@ -1093,7 +1092,7 @@ describe('markdownSyntaxFormatters', () => {
           editSelectionStart,
           editSelectionEnd,
           replaceSelectionWith,
-        } = secondarySyntaxFormatters['strikethrough'].getFormatting({
+        } = markdownSyntaxFormatters['strikethrough'].getFormatting({
           value: textAreaValue,
           selectionStart: 6,
           selectionEnd: 9,
@@ -1122,7 +1121,7 @@ describe('markdownSyntaxFormatters', () => {
           editSelectionStart,
           editSelectionEnd,
           replaceSelectionWith,
-        } = secondarySyntaxFormatters['strikethrough'].getFormatting({
+        } = markdownSyntaxFormatters['strikethrough'].getFormatting({
           value: textAreaValue,
           selectionStart: 6,
           selectionEnd: 9,
@@ -1151,7 +1150,7 @@ describe('markdownSyntaxFormatters', () => {
           editSelectionStart,
           editSelectionEnd,
           replaceSelectionWith,
-        } = secondarySyntaxFormatters['strikethrough'].getFormatting({
+        } = markdownSyntaxFormatters['strikethrough'].getFormatting({
           value: textAreaValue,
           selectionStart: 4,
           selectionEnd: 7,
@@ -1182,7 +1181,7 @@ describe('markdownSyntaxFormatters', () => {
           editSelectionStart,
           editSelectionEnd,
           replaceSelectionWith,
-        } = coreSyntaxFormatters['link'].getFormatting({
+        } = markdownSyntaxFormatters['link'].getFormatting({
           value: textAreaValue,
           selectionStart: 8,
           selectionEnd: 8,
@@ -1211,7 +1210,7 @@ describe('markdownSyntaxFormatters', () => {
           editSelectionStart,
           editSelectionEnd,
           replaceSelectionWith,
-        } = coreSyntaxFormatters['link'].getFormatting({
+        } = markdownSyntaxFormatters['link'].getFormatting({
           value: textAreaValue,
           selectionStart: 4,
           selectionEnd: 7,
@@ -1240,7 +1239,7 @@ describe('markdownSyntaxFormatters', () => {
           editSelectionStart,
           editSelectionEnd,
           replaceSelectionWith,
-        } = coreSyntaxFormatters['link'].getFormatting({
+        } = markdownSyntaxFormatters['link'].getFormatting({
           value: textAreaValue,
           selectionStart: 4,
           selectionEnd: 24,
@@ -1268,7 +1267,7 @@ describe('markdownSyntaxFormatters', () => {
           editSelectionStart,
           editSelectionEnd,
           replaceSelectionWith,
-        } = coreSyntaxFormatters['link'].getFormatting({
+        } = markdownSyntaxFormatters['link'].getFormatting({
           value: textAreaValue,
           selectionStart: 4,
           selectionEnd: 25,
@@ -1296,7 +1295,7 @@ describe('markdownSyntaxFormatters', () => {
           editSelectionStart,
           editSelectionEnd,
           replaceSelectionWith,
-        } = coreSyntaxFormatters['link'].getFormatting({
+        } = markdownSyntaxFormatters['link'].getFormatting({
           value: textAreaValue,
           selectionStart: 5,
           selectionEnd: 5,
@@ -1324,7 +1323,7 @@ describe('markdownSyntaxFormatters', () => {
           editSelectionStart,
           editSelectionEnd,
           replaceSelectionWith,
-        } = coreSyntaxFormatters['link'].getFormatting({
+        } = markdownSyntaxFormatters['link'].getFormatting({
           value: textAreaValue,
           selectionStart: 7,
           selectionEnd: 10,
@@ -1352,7 +1351,7 @@ describe('markdownSyntaxFormatters', () => {
           editSelectionStart,
           editSelectionEnd,
           replaceSelectionWith,
-        } = coreSyntaxFormatters['link'].getFormatting({
+        } = markdownSyntaxFormatters['link'].getFormatting({
           value: textAreaValue,
           selectionStart: 16,
           selectionEnd: 19,
@@ -1381,7 +1380,7 @@ describe('markdownSyntaxFormatters', () => {
           editSelectionStart,
           editSelectionEnd,
           replaceSelectionWith,
-        } = coreSyntaxFormatters['link'].getFormatting({
+        } = markdownSyntaxFormatters['link'].getFormatting({
           value: textAreaValue,
           selectionStart: 7,
           selectionEnd: 25,
@@ -1410,7 +1409,7 @@ describe('markdownSyntaxFormatters', () => {
           editSelectionStart,
           editSelectionEnd,
           replaceSelectionWith,
-        } = coreSyntaxFormatters['link'].getFormatting({
+        } = markdownSyntaxFormatters['link'].getFormatting({
           value: textAreaValue,
           selectionStart: 16,
           selectionEnd: 34,
@@ -1440,7 +1439,7 @@ describe('markdownSyntaxFormatters', () => {
           editSelectionStart,
           editSelectionEnd,
           replaceSelectionWith,
-        } = coreSyntaxFormatters['link'].getFormatting({
+        } = markdownSyntaxFormatters['link'].getFormatting({
           value: textAreaValue,
           selectionStart: 4,
           selectionEnd: 42,
@@ -1469,7 +1468,7 @@ describe('markdownSyntaxFormatters', () => {
           editSelectionStart,
           editSelectionEnd,
           replaceSelectionWith,
-        } = coreSyntaxFormatters['link'].getFormatting({
+        } = markdownSyntaxFormatters['link'].getFormatting({
           value: textAreaValue,
           selectionStart: 4,
           selectionEnd: 26,
@@ -1498,7 +1497,7 @@ describe('markdownSyntaxFormatters', () => {
           editSelectionStart,
           editSelectionEnd,
           replaceSelectionWith,
-        } = coreSyntaxFormatters['link'].getFormatting({
+        } = markdownSyntaxFormatters['link'].getFormatting({
           value: textAreaValue,
           selectionStart: 4,
           selectionEnd: 11,
@@ -1528,7 +1527,7 @@ describe('markdownSyntaxFormatters', () => {
           editSelectionStart,
           editSelectionEnd,
           replaceSelectionWith,
-        } = coreSyntaxFormatters['embed'].getFormatting({
+        } = markdownSyntaxFormatters['embed'].getFormatting({
           value: textAreaValue,
           selectionStart: 8,
           selectionEnd: 8,
@@ -1557,7 +1556,7 @@ describe('markdownSyntaxFormatters', () => {
           editSelectionStart,
           editSelectionEnd,
           replaceSelectionWith,
-        } = coreSyntaxFormatters['embed'].getFormatting({
+        } = markdownSyntaxFormatters['embed'].getFormatting({
           value: textAreaValue,
           selectionStart: 4,
           selectionEnd: 7,
@@ -1585,7 +1584,7 @@ describe('markdownSyntaxFormatters', () => {
           editSelectionStart,
           editSelectionEnd,
           replaceSelectionWith,
-        } = coreSyntaxFormatters['embed'].getFormatting({
+        } = markdownSyntaxFormatters['embed'].getFormatting({
           value: textAreaValue,
           selectionStart: 13,
           selectionEnd: 13,
@@ -1613,7 +1612,7 @@ describe('markdownSyntaxFormatters', () => {
           editSelectionStart,
           editSelectionEnd,
           replaceSelectionWith,
-        } = coreSyntaxFormatters['embed'].getFormatting({
+        } = markdownSyntaxFormatters['embed'].getFormatting({
           value: textAreaValue,
           selectionStart: 13,
           selectionEnd: 33,
@@ -1642,7 +1641,7 @@ describe('markdownSyntaxFormatters', () => {
           editSelectionStart,
           editSelectionEnd,
           replaceSelectionWith,
-        } = coreSyntaxFormatters['embed'].getFormatting({
+        } = markdownSyntaxFormatters['embed'].getFormatting({
           value: textAreaValue,
           selectionStart: 4,
           selectionEnd: 35,
@@ -1675,7 +1674,7 @@ describe('markdownSyntaxFormatters', () => {
           editSelectionStart,
           editSelectionEnd,
           replaceSelectionWith,
-        } = coreSyntaxFormatters['orderedList'].getFormatting({
+        } = markdownSyntaxFormatters['orderedList'].getFormatting({
           value: textAreaValue,
           selectionStart: 4,
           selectionEnd: 7,
@@ -1704,7 +1703,7 @@ describe('markdownSyntaxFormatters', () => {
           editSelectionStart,
           editSelectionEnd,
           replaceSelectionWith,
-        } = coreSyntaxFormatters['orderedList'].getFormatting({
+        } = markdownSyntaxFormatters['orderedList'].getFormatting({
           value: textAreaValue,
           selectionStart: 0,
           selectionEnd: 13,
@@ -1733,7 +1732,7 @@ describe('markdownSyntaxFormatters', () => {
           editSelectionStart,
           editSelectionEnd,
           replaceSelectionWith,
-        } = coreSyntaxFormatters['orderedList'].getFormatting({
+        } = markdownSyntaxFormatters['orderedList'].getFormatting({
           value: textAreaValue,
           selectionStart: 4,
           selectionEnd: 4,
@@ -1762,7 +1761,7 @@ describe('markdownSyntaxFormatters', () => {
           editSelectionStart,
           editSelectionEnd,
           replaceSelectionWith,
-        } = coreSyntaxFormatters['orderedList'].getFormatting({
+        } = markdownSyntaxFormatters['orderedList'].getFormatting({
           value: textAreaValue,
           selectionStart: 4,
           selectionEnd: 10,
@@ -1791,7 +1790,7 @@ describe('markdownSyntaxFormatters', () => {
           editSelectionStart,
           editSelectionEnd,
           replaceSelectionWith,
-        } = coreSyntaxFormatters['orderedList'].getFormatting({
+        } = markdownSyntaxFormatters['orderedList'].getFormatting({
           value: textAreaValue,
           selectionStart: 9,
           selectionEnd: 9,
@@ -1819,7 +1818,7 @@ describe('markdownSyntaxFormatters', () => {
           editSelectionStart,
           editSelectionEnd,
           replaceSelectionWith,
-        } = coreSyntaxFormatters['orderedList'].getFormatting({
+        } = markdownSyntaxFormatters['orderedList'].getFormatting({
           value: textAreaValue,
           selectionStart: 0,
           selectionEnd: 22,
@@ -1848,7 +1847,7 @@ describe('markdownSyntaxFormatters', () => {
           editSelectionStart,
           editSelectionEnd,
           replaceSelectionWith,
-        } = coreSyntaxFormatters['orderedList'].getFormatting({
+        } = markdownSyntaxFormatters['orderedList'].getFormatting({
           value: textAreaValue,
           selectionStart: 0,
           selectionEnd: 19,
@@ -1877,7 +1876,7 @@ describe('markdownSyntaxFormatters', () => {
           editSelectionStart,
           editSelectionEnd,
           replaceSelectionWith,
-        } = coreSyntaxFormatters['orderedList'].getFormatting({
+        } = markdownSyntaxFormatters['orderedList'].getFormatting({
           value: textAreaValue,
           selectionStart: 0,
           selectionEnd: 3,
@@ -1906,7 +1905,7 @@ describe('markdownSyntaxFormatters', () => {
           editSelectionStart,
           editSelectionEnd,
           replaceSelectionWith,
-        } = coreSyntaxFormatters['orderedList'].getFormatting({
+        } = markdownSyntaxFormatters['orderedList'].getFormatting({
           value: textAreaValue,
           selectionStart: 1,
           selectionEnd: 4,
@@ -1935,7 +1934,7 @@ describe('markdownSyntaxFormatters', () => {
           editSelectionStart,
           editSelectionEnd,
           replaceSelectionWith,
-        } = coreSyntaxFormatters['orderedList'].getFormatting({
+        } = markdownSyntaxFormatters['orderedList'].getFormatting({
           value: textAreaValue,
           selectionStart: 4,
           selectionEnd: 7,
@@ -1964,7 +1963,7 @@ describe('markdownSyntaxFormatters', () => {
           editSelectionStart,
           editSelectionEnd,
           replaceSelectionWith,
-        } = coreSyntaxFormatters['orderedList'].getFormatting({
+        } = markdownSyntaxFormatters['orderedList'].getFormatting({
           value: textAreaValue,
           selectionStart: 0,
           selectionEnd: 3,
@@ -1993,7 +1992,7 @@ describe('markdownSyntaxFormatters', () => {
           editSelectionStart,
           editSelectionEnd,
           replaceSelectionWith,
-        } = coreSyntaxFormatters['orderedList'].getFormatting({
+        } = markdownSyntaxFormatters['orderedList'].getFormatting({
           value: textAreaValue,
           selectionStart: 0,
           selectionEnd: 3,
@@ -2024,7 +2023,7 @@ describe('markdownSyntaxFormatters', () => {
           editSelectionStart,
           editSelectionEnd,
           replaceSelectionWith,
-        } = coreSyntaxFormatters['unorderedList'].getFormatting({
+        } = markdownSyntaxFormatters['unorderedList'].getFormatting({
           value: textAreaValue,
           selectionStart: 4,
           selectionEnd: 7,
@@ -2053,7 +2052,7 @@ describe('markdownSyntaxFormatters', () => {
           editSelectionStart,
           editSelectionEnd,
           replaceSelectionWith,
-        } = coreSyntaxFormatters['unorderedList'].getFormatting({
+        } = markdownSyntaxFormatters['unorderedList'].getFormatting({
           value: textAreaValue,
           selectionStart: 0,
           selectionEnd: 13,
@@ -2082,7 +2081,7 @@ describe('markdownSyntaxFormatters', () => {
           editSelectionStart,
           editSelectionEnd,
           replaceSelectionWith,
-        } = coreSyntaxFormatters['unorderedList'].getFormatting({
+        } = markdownSyntaxFormatters['unorderedList'].getFormatting({
           value: textAreaValue,
           selectionStart: 4,
           selectionEnd: 4,
@@ -2111,7 +2110,7 @@ describe('markdownSyntaxFormatters', () => {
           editSelectionStart,
           editSelectionEnd,
           replaceSelectionWith,
-        } = coreSyntaxFormatters['unorderedList'].getFormatting({
+        } = markdownSyntaxFormatters['unorderedList'].getFormatting({
           value: textAreaValue,
           selectionStart: 4,
           selectionEnd: 9,
@@ -2140,7 +2139,7 @@ describe('markdownSyntaxFormatters', () => {
           editSelectionStart,
           editSelectionEnd,
           replaceSelectionWith,
-        } = coreSyntaxFormatters['unorderedList'].getFormatting({
+        } = markdownSyntaxFormatters['unorderedList'].getFormatting({
           value: textAreaValue,
           selectionStart: 7,
           selectionEnd: 7,
@@ -2168,7 +2167,7 @@ describe('markdownSyntaxFormatters', () => {
           editSelectionStart,
           editSelectionEnd,
           replaceSelectionWith,
-        } = coreSyntaxFormatters['unorderedList'].getFormatting({
+        } = markdownSyntaxFormatters['unorderedList'].getFormatting({
           value: textAreaValue,
           selectionStart: 0,
           selectionEnd: 20,
@@ -2197,7 +2196,7 @@ describe('markdownSyntaxFormatters', () => {
           editSelectionStart,
           editSelectionEnd,
           replaceSelectionWith,
-        } = coreSyntaxFormatters['unorderedList'].getFormatting({
+        } = markdownSyntaxFormatters['unorderedList'].getFormatting({
           value: textAreaValue,
           selectionStart: 0,
           selectionEnd: 17,
@@ -2226,7 +2225,7 @@ describe('markdownSyntaxFormatters', () => {
           editSelectionStart,
           editSelectionEnd,
           replaceSelectionWith,
-        } = coreSyntaxFormatters['unorderedList'].getFormatting({
+        } = markdownSyntaxFormatters['unorderedList'].getFormatting({
           value: textAreaValue,
           selectionStart: 0,
           selectionEnd: 3,
@@ -2255,7 +2254,7 @@ describe('markdownSyntaxFormatters', () => {
           editSelectionStart,
           editSelectionEnd,
           replaceSelectionWith,
-        } = coreSyntaxFormatters['unorderedList'].getFormatting({
+        } = markdownSyntaxFormatters['unorderedList'].getFormatting({
           value: textAreaValue,
           selectionStart: 1,
           selectionEnd: 4,
@@ -2284,7 +2283,7 @@ describe('markdownSyntaxFormatters', () => {
           editSelectionStart,
           editSelectionEnd,
           replaceSelectionWith,
-        } = coreSyntaxFormatters['unorderedList'].getFormatting({
+        } = markdownSyntaxFormatters['unorderedList'].getFormatting({
           value: textAreaValue,
           selectionStart: 4,
           selectionEnd: 7,
@@ -2313,7 +2312,7 @@ describe('markdownSyntaxFormatters', () => {
           editSelectionStart,
           editSelectionEnd,
           replaceSelectionWith,
-        } = coreSyntaxFormatters['unorderedList'].getFormatting({
+        } = markdownSyntaxFormatters['unorderedList'].getFormatting({
           value: textAreaValue,
           selectionStart: 0,
           selectionEnd: 3,
@@ -2342,7 +2341,7 @@ describe('markdownSyntaxFormatters', () => {
           editSelectionStart,
           editSelectionEnd,
           replaceSelectionWith,
-        } = coreSyntaxFormatters['unorderedList'].getFormatting({
+        } = markdownSyntaxFormatters['unorderedList'].getFormatting({
           value: textAreaValue,
           selectionStart: 0,
           selectionEnd: 3,
@@ -2373,7 +2372,7 @@ describe('markdownSyntaxFormatters', () => {
           editSelectionStart,
           editSelectionEnd,
           replaceSelectionWith,
-        } = coreSyntaxFormatters['heading'].getFormatting({
+        } = markdownSyntaxFormatters['heading'].getFormatting({
           value: textAreaValue,
           selectionStart: 4,
           selectionEnd: 4,
@@ -2401,7 +2400,7 @@ describe('markdownSyntaxFormatters', () => {
           editSelectionStart,
           editSelectionEnd,
           replaceSelectionWith,
-        } = coreSyntaxFormatters['heading'].getFormatting({
+        } = markdownSyntaxFormatters['heading'].getFormatting({
           value: textAreaValue,
           selectionStart: 4,
           selectionEnd: 7,
@@ -2429,7 +2428,7 @@ describe('markdownSyntaxFormatters', () => {
           editSelectionStart,
           editSelectionEnd,
           replaceSelectionWith,
-        } = coreSyntaxFormatters['heading'].getFormatting({
+        } = markdownSyntaxFormatters['heading'].getFormatting({
           value: textAreaValue,
           selectionStart: 11,
           selectionEnd: 11,
@@ -2457,7 +2456,7 @@ describe('markdownSyntaxFormatters', () => {
           editSelectionStart,
           editSelectionEnd,
           replaceSelectionWith,
-        } = coreSyntaxFormatters['heading'].getFormatting({
+        } = markdownSyntaxFormatters['heading'].getFormatting({
           value: textAreaValue,
           selectionStart: 8,
           selectionEnd: 11,
@@ -2485,7 +2484,7 @@ describe('markdownSyntaxFormatters', () => {
           editSelectionStart,
           editSelectionEnd,
           replaceSelectionWith,
-        } = coreSyntaxFormatters['heading'].getFormatting({
+        } = markdownSyntaxFormatters['heading'].getFormatting({
           value: textAreaValue,
           selectionStart: 12,
           selectionEnd: 12,
@@ -2513,7 +2512,7 @@ describe('markdownSyntaxFormatters', () => {
           editSelectionStart,
           editSelectionEnd,
           replaceSelectionWith,
-        } = coreSyntaxFormatters['heading'].getFormatting({
+        } = markdownSyntaxFormatters['heading'].getFormatting({
           value: textAreaValue,
           selectionStart: 9,
           selectionEnd: 12,
@@ -2541,7 +2540,7 @@ describe('markdownSyntaxFormatters', () => {
           editSelectionStart,
           editSelectionEnd,
           replaceSelectionWith,
-        } = coreSyntaxFormatters['heading'].getFormatting({
+        } = markdownSyntaxFormatters['heading'].getFormatting({
           value: textAreaValue,
           selectionStart: 13,
           selectionEnd: 13,
@@ -2569,7 +2568,7 @@ describe('markdownSyntaxFormatters', () => {
           editSelectionStart,
           editSelectionEnd,
           replaceSelectionWith,
-        } = coreSyntaxFormatters['heading'].getFormatting({
+        } = markdownSyntaxFormatters['heading'].getFormatting({
           value: textAreaValue,
           selectionStart: 10,
           selectionEnd: 13,
@@ -2597,7 +2596,7 @@ describe('markdownSyntaxFormatters', () => {
           editSelectionStart,
           editSelectionEnd,
           replaceSelectionWith,
-        } = coreSyntaxFormatters['heading'].getFormatting({
+        } = markdownSyntaxFormatters['heading'].getFormatting({
           value: textAreaValue,
           selectionStart: 0,
           selectionEnd: 3,
@@ -2626,7 +2625,7 @@ describe('markdownSyntaxFormatters', () => {
           editSelectionStart,
           editSelectionEnd,
           replaceSelectionWith,
-        } = coreSyntaxFormatters['heading'].getFormatting({
+        } = markdownSyntaxFormatters['heading'].getFormatting({
           value: textAreaValue,
           selectionStart: 1,
           selectionEnd: 4,
@@ -2655,7 +2654,7 @@ describe('markdownSyntaxFormatters', () => {
           editSelectionStart,
           editSelectionEnd,
           replaceSelectionWith,
-        } = coreSyntaxFormatters['heading'].getFormatting({
+        } = markdownSyntaxFormatters['heading'].getFormatting({
           value: textAreaValue,
           selectionStart: 4,
           selectionEnd: 7,
@@ -2684,7 +2683,7 @@ describe('markdownSyntaxFormatters', () => {
           editSelectionStart,
           editSelectionEnd,
           replaceSelectionWith,
-        } = coreSyntaxFormatters['heading'].getFormatting({
+        } = markdownSyntaxFormatters['heading'].getFormatting({
           value: textAreaValue,
           selectionStart: 0,
           selectionEnd: 3,
@@ -2713,7 +2712,7 @@ describe('markdownSyntaxFormatters', () => {
           editSelectionStart,
           editSelectionEnd,
           replaceSelectionWith,
-        } = coreSyntaxFormatters['heading'].getFormatting({
+        } = markdownSyntaxFormatters['heading'].getFormatting({
           value: textAreaValue,
           selectionStart: 0,
           selectionEnd: 3,
@@ -2744,7 +2743,7 @@ describe('markdownSyntaxFormatters', () => {
           editSelectionStart,
           editSelectionEnd,
           replaceSelectionWith,
-        } = coreSyntaxFormatters['quote'].getFormatting({
+        } = markdownSyntaxFormatters['quote'].getFormatting({
           value: textAreaValue,
           selectionStart: 4,
           selectionEnd: 7,
@@ -2773,7 +2772,7 @@ describe('markdownSyntaxFormatters', () => {
           editSelectionStart,
           editSelectionEnd,
           replaceSelectionWith,
-        } = coreSyntaxFormatters['quote'].getFormatting({
+        } = markdownSyntaxFormatters['quote'].getFormatting({
           value: textAreaValue,
           selectionStart: 0,
           selectionEnd: 13,
@@ -2802,7 +2801,7 @@ describe('markdownSyntaxFormatters', () => {
           editSelectionStart,
           editSelectionEnd,
           replaceSelectionWith,
-        } = coreSyntaxFormatters['quote'].getFormatting({
+        } = markdownSyntaxFormatters['quote'].getFormatting({
           value: textAreaValue,
           selectionStart: 4,
           selectionEnd: 4,
@@ -2831,7 +2830,7 @@ describe('markdownSyntaxFormatters', () => {
           editSelectionStart,
           editSelectionEnd,
           replaceSelectionWith,
-        } = coreSyntaxFormatters['quote'].getFormatting({
+        } = markdownSyntaxFormatters['quote'].getFormatting({
           value: textAreaValue,
           selectionStart: 4,
           selectionEnd: 9,
@@ -2860,7 +2859,7 @@ describe('markdownSyntaxFormatters', () => {
           editSelectionStart,
           editSelectionEnd,
           replaceSelectionWith,
-        } = coreSyntaxFormatters['quote'].getFormatting({
+        } = markdownSyntaxFormatters['quote'].getFormatting({
           value: textAreaValue,
           selectionStart: 7,
           selectionEnd: 7,
@@ -2888,7 +2887,7 @@ describe('markdownSyntaxFormatters', () => {
           editSelectionStart,
           editSelectionEnd,
           replaceSelectionWith,
-        } = coreSyntaxFormatters['quote'].getFormatting({
+        } = markdownSyntaxFormatters['quote'].getFormatting({
           value: textAreaValue,
           selectionStart: 0,
           selectionEnd: 20,
@@ -2917,7 +2916,7 @@ describe('markdownSyntaxFormatters', () => {
           editSelectionStart,
           editSelectionEnd,
           replaceSelectionWith,
-        } = coreSyntaxFormatters['quote'].getFormatting({
+        } = markdownSyntaxFormatters['quote'].getFormatting({
           value: textAreaValue,
           selectionStart: 0,
           selectionEnd: 17,
@@ -2946,7 +2945,7 @@ describe('markdownSyntaxFormatters', () => {
           editSelectionStart,
           editSelectionEnd,
           replaceSelectionWith,
-        } = coreSyntaxFormatters['quote'].getFormatting({
+        } = markdownSyntaxFormatters['quote'].getFormatting({
           value: textAreaValue,
           selectionStart: 0,
           selectionEnd: 3,
@@ -2975,7 +2974,7 @@ describe('markdownSyntaxFormatters', () => {
           editSelectionStart,
           editSelectionEnd,
           replaceSelectionWith,
-        } = coreSyntaxFormatters['quote'].getFormatting({
+        } = markdownSyntaxFormatters['quote'].getFormatting({
           value: textAreaValue,
           selectionStart: 1,
           selectionEnd: 4,
@@ -3004,7 +3003,7 @@ describe('markdownSyntaxFormatters', () => {
           editSelectionStart,
           editSelectionEnd,
           replaceSelectionWith,
-        } = coreSyntaxFormatters['quote'].getFormatting({
+        } = markdownSyntaxFormatters['quote'].getFormatting({
           value: textAreaValue,
           selectionStart: 4,
           selectionEnd: 7,
@@ -3033,7 +3032,7 @@ describe('markdownSyntaxFormatters', () => {
           editSelectionStart,
           editSelectionEnd,
           replaceSelectionWith,
-        } = coreSyntaxFormatters['quote'].getFormatting({
+        } = markdownSyntaxFormatters['quote'].getFormatting({
           value: textAreaValue,
           selectionStart: 0,
           selectionEnd: 3,
@@ -3062,7 +3061,7 @@ describe('markdownSyntaxFormatters', () => {
           editSelectionStart,
           editSelectionEnd,
           replaceSelectionWith,
-        } = coreSyntaxFormatters['quote'].getFormatting({
+        } = markdownSyntaxFormatters['quote'].getFormatting({
           value: textAreaValue,
           selectionStart: 0,
           selectionEnd: 3,
@@ -3093,7 +3092,7 @@ describe('markdownSyntaxFormatters', () => {
           editSelectionStart,
           editSelectionEnd,
           replaceSelectionWith,
-        } = coreSyntaxFormatters['codeBlock'].getFormatting({
+        } = markdownSyntaxFormatters['codeBlock'].getFormatting({
           value: textAreaValue,
           selectionStart: 4,
           selectionEnd: 7,
@@ -3122,7 +3121,7 @@ describe('markdownSyntaxFormatters', () => {
           editSelectionStart,
           editSelectionEnd,
           replaceSelectionWith,
-        } = coreSyntaxFormatters['codeBlock'].getFormatting({
+        } = markdownSyntaxFormatters['codeBlock'].getFormatting({
           value: textAreaValue,
           selectionStart: 0,
           selectionEnd: 13,
@@ -3151,7 +3150,7 @@ describe('markdownSyntaxFormatters', () => {
           editSelectionStart,
           editSelectionEnd,
           replaceSelectionWith,
-        } = coreSyntaxFormatters['codeBlock'].getFormatting({
+        } = markdownSyntaxFormatters['codeBlock'].getFormatting({
           value: textAreaValue,
           selectionStart: 4,
           selectionEnd: 4,
@@ -3180,7 +3179,7 @@ describe('markdownSyntaxFormatters', () => {
           editSelectionStart,
           editSelectionEnd,
           replaceSelectionWith,
-        } = coreSyntaxFormatters['codeBlock'].getFormatting({
+        } = markdownSyntaxFormatters['codeBlock'].getFormatting({
           value: textAreaValue,
           selectionStart: 9,
           selectionEnd: 12,
@@ -3209,7 +3208,7 @@ describe('markdownSyntaxFormatters', () => {
           editSelectionStart,
           editSelectionEnd,
           replaceSelectionWith,
-        } = coreSyntaxFormatters['codeBlock'].getFormatting({
+        } = markdownSyntaxFormatters['codeBlock'].getFormatting({
           value: textAreaValue,
           selectionStart: 9,
           selectionEnd: 18,
@@ -3238,7 +3237,7 @@ describe('markdownSyntaxFormatters', () => {
           editSelectionStart,
           editSelectionEnd,
           replaceSelectionWith,
-        } = coreSyntaxFormatters['codeBlock'].getFormatting({
+        } = markdownSyntaxFormatters['codeBlock'].getFormatting({
           value: textAreaValue,
           selectionStart: 9,
           selectionEnd: 9,
@@ -3267,7 +3266,7 @@ describe('markdownSyntaxFormatters', () => {
           editSelectionStart,
           editSelectionEnd,
           replaceSelectionWith,
-        } = coreSyntaxFormatters['codeBlock'].getFormatting({
+        } = markdownSyntaxFormatters['codeBlock'].getFormatting({
           value: textAreaValue,
           selectionStart: 5,
           selectionEnd: 16,
@@ -3296,7 +3295,7 @@ describe('markdownSyntaxFormatters', () => {
           editSelectionStart,
           editSelectionEnd,
           replaceSelectionWith,
-        } = coreSyntaxFormatters['codeBlock'].getFormatting({
+        } = markdownSyntaxFormatters['codeBlock'].getFormatting({
           value: textAreaValue,
           selectionStart: 0,
           selectionEnd: 3,
@@ -3325,7 +3324,7 @@ describe('markdownSyntaxFormatters', () => {
           editSelectionStart,
           editSelectionEnd,
           replaceSelectionWith,
-        } = coreSyntaxFormatters['codeBlock'].getFormatting({
+        } = markdownSyntaxFormatters['codeBlock'].getFormatting({
           value: textAreaValue,
           selectionStart: 1,
           selectionEnd: 4,
@@ -3354,7 +3353,7 @@ describe('markdownSyntaxFormatters', () => {
           editSelectionStart,
           editSelectionEnd,
           replaceSelectionWith,
-        } = coreSyntaxFormatters['codeBlock'].getFormatting({
+        } = markdownSyntaxFormatters['codeBlock'].getFormatting({
           value: textAreaValue,
           selectionStart: 4,
           selectionEnd: 7,
@@ -3383,7 +3382,7 @@ describe('markdownSyntaxFormatters', () => {
           editSelectionStart,
           editSelectionEnd,
           replaceSelectionWith,
-        } = coreSyntaxFormatters['codeBlock'].getFormatting({
+        } = markdownSyntaxFormatters['codeBlock'].getFormatting({
           value: textAreaValue,
           selectionStart: 0,
           selectionEnd: 3,
@@ -3412,7 +3411,7 @@ describe('markdownSyntaxFormatters', () => {
           editSelectionStart,
           editSelectionEnd,
           replaceSelectionWith,
-        } = coreSyntaxFormatters['codeBlock'].getFormatting({
+        } = markdownSyntaxFormatters['codeBlock'].getFormatting({
           value: textAreaValue,
           selectionStart: 0,
           selectionEnd: 3,
@@ -3443,7 +3442,7 @@ describe('markdownSyntaxFormatters', () => {
           editSelectionStart,
           editSelectionEnd,
           replaceSelectionWith,
-        } = secondarySyntaxFormatters['divider'].getFormatting({
+        } = markdownSyntaxFormatters['divider'].getFormatting({
           value: textAreaValue,
           selectionStart: 4,
           selectionEnd: 4,
@@ -3472,7 +3471,7 @@ describe('markdownSyntaxFormatters', () => {
           editSelectionStart,
           editSelectionEnd,
           replaceSelectionWith,
-        } = secondarySyntaxFormatters['divider'].getFormatting({
+        } = markdownSyntaxFormatters['divider'].getFormatting({
           value: textAreaValue,
           selectionStart: 4,
           selectionEnd: 7,
@@ -3500,7 +3499,7 @@ describe('markdownSyntaxFormatters', () => {
           editSelectionStart,
           editSelectionEnd,
           replaceSelectionWith,
-        } = secondarySyntaxFormatters['divider'].getFormatting({
+        } = markdownSyntaxFormatters['divider'].getFormatting({
           value: textAreaValue,
           selectionStart: 9,
           selectionEnd: 9,
@@ -3528,7 +3527,7 @@ describe('markdownSyntaxFormatters', () => {
           editSelectionStart,
           editSelectionEnd,
           replaceSelectionWith,
-        } = secondarySyntaxFormatters['divider'].getFormatting({
+        } = markdownSyntaxFormatters['divider'].getFormatting({
           value: textAreaValue,
           selectionStart: 9,
           selectionEnd: 12,
@@ -3557,7 +3556,7 @@ describe('markdownSyntaxFormatters', () => {
           editSelectionStart,
           editSelectionEnd,
           replaceSelectionWith,
-        } = secondarySyntaxFormatters['divider'].getFormatting({
+        } = markdownSyntaxFormatters['divider'].getFormatting({
           value: textAreaValue,
           selectionStart: 0,
           selectionEnd: 3,
@@ -3586,7 +3585,7 @@ describe('markdownSyntaxFormatters', () => {
           editSelectionStart,
           editSelectionEnd,
           replaceSelectionWith,
-        } = secondarySyntaxFormatters['divider'].getFormatting({
+        } = markdownSyntaxFormatters['divider'].getFormatting({
           value: textAreaValue,
           selectionStart: 1,
           selectionEnd: 4,
@@ -3615,7 +3614,7 @@ describe('markdownSyntaxFormatters', () => {
           editSelectionStart,
           editSelectionEnd,
           replaceSelectionWith,
-        } = secondarySyntaxFormatters['divider'].getFormatting({
+        } = markdownSyntaxFormatters['divider'].getFormatting({
           value: textAreaValue,
           selectionStart: 4,
           selectionEnd: 7,
@@ -3644,7 +3643,7 @@ describe('markdownSyntaxFormatters', () => {
           editSelectionStart,
           editSelectionEnd,
           replaceSelectionWith,
-        } = secondarySyntaxFormatters['divider'].getFormatting({
+        } = markdownSyntaxFormatters['divider'].getFormatting({
           value: textAreaValue,
           selectionStart: 0,
           selectionEnd: 3,
diff --git a/app/javascript/crayons/MarkdownToolbar/markdownSyntaxFormatters.jsx b/app/javascript/crayons/MarkdownToolbar/markdownSyntaxFormatters.jsx
index 8d241a04a..0a370178a 100644
--- a/app/javascript/crayons/MarkdownToolbar/markdownSyntaxFormatters.jsx
+++ b/app/javascript/crayons/MarkdownToolbar/markdownSyntaxFormatters.jsx
@@ -404,7 +404,7 @@ export const getNewTextAreaValueWithEdits = ({
     editSelectionStart,
   )}${replaceSelectionWith}${textAreaValue.substring(editSelectionEnd)}`;
 
-export const coreSyntaxFormatters = {
+export const markdownSyntaxFormatters = {
   bold: {
     icon: () => <Icon src={BoldIcon} />,
     label: 'Bold',
@@ -734,9 +734,6 @@ export const coreSyntaxFormatters = {
         suffix: ' %}',
       }),
   },
-};
-
-export const secondarySyntaxFormatters = {
   underline: {
     icon: () => <Icon src={UnderlineIcon} />,
     label: 'Underline',