hero-editor 2.0.0 → 2.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hero-editor",
-  "version": "2.0.0",
+  "version": "2.1.1",
   "description": "",
   "main": "dist/lib.js",
   "scripts": {

package/src/components/Icon.js

@@ -15,6 +15,10 @@ const svgIcons = {
     '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14h-2V9h-2V7h4v10z"/></svg>',
   looks_two:
     '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4 8c0 1.11-.9 2-2 2h-2v2h4v2H9v-4c0-1.11.9-2 2-2h2V9H9V7h4c1.1 0 2 .89 2 2v2z"/></svg>',
+  looks_three:
+    '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M360-280h160q33 0 56.5-23.5T600-360v-60q0-26-17-43t-43-17q26 0 43-17t17-43v-60q0-33-23.5-56.5T520-680H360v80h160v80h-80v80h80v80H360v80ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Z"/></svg>',
+  looks_four:
+    '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M520-280h80v-400h-80v160h-80v-160h-80v240h160v160ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Z"/></svg>',
   link: '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M13.723 18.654l-3.61 3.609c-2.316 2.315-6.063 2.315-8.378 0-1.12-1.118-1.735-2.606-1.735-4.188 0-1.582.615-3.07 1.734-4.189l4.866-4.865c2.355-2.355 6.114-2.262 8.377 0 .453.453.81.973 1.089 1.527l-1.593 1.592c-.18-.613-.5-1.189-.964-1.652-1.448-1.448-3.93-1.51-5.439-.001l-.001.002-4.867 4.865c-1.5 1.499-1.5 3.941 0 5.44 1.517 1.517 3.958 1.488 5.442 0l2.425-2.424c.993.284 1.791.335 2.654.284zm.161-16.918l-3.574 3.576c.847-.05 1.655 0 2.653.283l2.393-2.389c1.498-1.502 3.94-1.5 5.44-.001 1.517 1.518 1.486 3.959 0 5.442l-4.831 4.831-.003.002c-1.438 1.437-3.886 1.552-5.439-.002-.473-.474-.785-1.042-.956-1.643l-.084.068-1.517 1.515c.28.556.635 1.075 1.088 1.528 2.245 2.245 6.004 2.374 8.378 0l4.832-4.831c2.314-2.316 2.316-6.062-.001-8.377-2.317-2.321-6.067-2.313-8.379-.002z"/></svg>',
   icon: '<svg width="13" height="12" viewBox="0 0 13 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.75 0C10.0637 0 12.75 2.68629 12.75 6C12.75 9.31371 10.0637 12 6.75 12C3.43629 12 0.75 9.31371 0.75 6C0.75 2.68629 3.43629 0 6.75 0ZM6.75 0.84375C3.90228 0.84375 1.59375 3.15228 1.59375 6C1.59375 8.84772 3.90228 11.1562 6.75 11.1562C9.59772 11.1562 11.9062 8.84772 11.9062 6C11.9062 3.15228 9.59772 0.84375 6.75 0.84375ZM8.83711 7.61484C9.04551 7.71904 9.12998 7.97246 9.02578 8.18086C8.53481 9.16281 7.75947 9.67969 6.75 9.67969C5.74053 9.67969 4.96519 9.16281 4.47422 8.18086C4.37002 7.97246 4.45449 7.71904 4.66289 7.61484C4.87129 7.51064 5.12471 7.59512 5.22891 7.80352C5.58168 8.50907 6.07197 8.83594 6.75 8.83594C7.42803 8.83594 7.91832 8.50907 8.27109 7.80352C8.37529 7.59512 8.62871 7.51064 8.83711 7.61484ZM4.3125 3.76172C4.83027 3.76172 5.25 4.18146 5.25 4.69922C5.25 5.21699 4.83027 5.63672 4.3125 5.63672C3.79473 5.63672 3.375 5.21699 3.375 4.69922C3.375 4.18146 3.79473 3.76172 4.3125 3.76172ZM9.15234 3.76172C9.67011 3.76172 10.0898 4.18146 10.0898 4.69922C10.0898 5.21699 9.67011 5.63672 9.15234 5.63672C8.63458 5.63672 8.21484 5.21699 8.21484 4.69922C8.21484 4.18146 8.63458 3.76172 9.15234 3.76172Z" fill="black"/></svg>',
 };

package/src/components/Toolbar.js

@@ -27,6 +27,18 @@ const styles = {
     margin: '10px 5px',
     borderRight: 'solid thin #eaeaea',
   },
+  select: {
+    margin: 5,
+    height: 28,
+    border: 'solid thin silver',
+    borderRadius: 4,
+    padding: '0 4px',
+    cursor: 'pointer',
+    background: 'transparent',
+    fontSize: 12,
+    outline: 'none',
+    maxWidth: 120,
+  },
 };
 
 const Toolbar = ({ children }) => <div style={styles.toolbar}>{children}</div>;
@@ -44,5 +56,22 @@ Toolbar.Button = forwardRef(({ active, ...props }, ref) => (
 ));
 
 Toolbar.Separator = () => <div style={styles.separator} />;
+Toolbar.Dropdown = forwardRef(
+  ({ options = [], currentValue, onChange, ...props }, ref) => (
+    <select
+      ref={ref}
+      onChange={onChange}
+      style={styles.select}
+      value={currentValue}
+      {...props}
+    >
+      {options.map((option) => (
+        <option key={option.value} value={option.value}>
+          {option.label}
+        </option>
+      ))}
+    </select>
+  ),
+);
 
 export default Toolbar;

package/src/components/__tests__/Toolbar.test.js

@@ -0,0 +1,83 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import Toolbar from '../Toolbar';
+
+const OPTIONS = [
+  { value: 'normal', label: 'Normal text' },
+  { value: 'heading-one', label: 'Heading 1' },
+];
+
+describe('Toolbar.Dropdown', () => {
+  it('renders a select with the correct options', () => {
+    const { getAllByRole } = render(
+      <Toolbar.Dropdown
+        options={OPTIONS}
+        currentValue="normal"
+        onChange={() => {}}
+      />,
+    );
+    const options = getAllByRole('option');
+    expect(options).toHaveLength(2);
+    expect(options[0].value).toBe('normal');
+    expect(options[1].value).toBe('heading-one');
+  });
+
+  it('reflects the currentValue as the selected option', () => {
+    const { getByRole } = render(
+      <Toolbar.Dropdown
+        options={OPTIONS}
+        currentValue="heading-one"
+        onChange={() => {}}
+      />,
+    );
+    expect(getByRole('combobox').value).toBe('heading-one');
+  });
+
+  it('applies a numeric margin style to the select element', () => {
+    const { getByRole } = render(
+      <Toolbar.Dropdown
+        options={OPTIONS}
+        currentValue="normal"
+        onChange={() => {}}
+      />,
+    );
+    expect(getByRole('combobox').style.margin).toBe('5px');
+  });
+
+  it('renders with no options', () => {
+    const { getByRole } = render(
+      <Toolbar.Dropdown
+        options={[]}
+        currentValue={undefined}
+        onChange={() => {}}
+      />,
+    );
+    expect(getByRole('combobox')).toBeTruthy();
+  });
+});
+
+describe('Toolbar.Button', () => {
+  it('renders a button', () => {
+    const { getByRole } = render(<Toolbar.Button>Click</Toolbar.Button>);
+    expect(getByRole('button')).toBeTruthy();
+  });
+
+  it('applies active style when active is true', () => {
+    const { getByRole } = render(<Toolbar.Button active>Click</Toolbar.Button>);
+    expect(getByRole('button').style.background).toBe('rgb(245, 245, 245)');
+  });
+
+  it('does not apply active style when active is false', () => {
+    const { getByRole } = render(
+      <Toolbar.Button active={false}>Click</Toolbar.Button>,
+    );
+    expect(getByRole('button').style.background).toBe('transparent');
+  });
+});
+
+describe('Toolbar.Separator', () => {
+  it('renders a div', () => {
+    const { container } = render(<Toolbar.Separator />);
+    expect(container.firstChild.tagName).toBe('DIV');
+  });
+});

package/src/constants.js

@@ -7,6 +7,8 @@ const EMOJI = 'emoji';
 const LINK = 'link';
 const HEADING_ONE = 'heading-one';
 const HEADING_TWO = 'heading-two';
+const HEADING_THREE = 'heading-three';
+const HEADING_FOUR = 'heading-four';
 const PARAGRAPH = 'paragraph';
 
 // Marks
@@ -49,6 +51,8 @@ export {
   LINK,
   HEADING_ONE,
   HEADING_TWO,
+  HEADING_THREE,
+  HEADING_FOUR,
   PARAGRAPH,
   BOLD,
   ITALIC,

package/src/lib.js

@@ -199,5 +199,12 @@ export { default as plainSerializer } from './serializers/plain';
 export { default as makeReactTransformer } from './transformers/react';
 export { defaultReactTransformer } from './transformers/react';
 export { isEmptyContent, getUrl, isUrl, getUrlFromNode } from './helpers';
-export { EMPTY_VALUE } from './constants';
+export {
+  EMPTY_VALUE,
+  PARAGRAPH,
+  HEADING_ONE,
+  HEADING_TWO,
+  HEADING_THREE,
+  HEADING_FOUR,
+} from './constants';
 export default HeroEditor;

package/src/plugins/__tests__/__snapshots__/headingFour.test.js.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`headingFour plugin renders h4 element 1`] = `
+<body>
+  <div>
+    <h4>
+      Heading four
+    </h4>
+  </div>
+</body>
+`;

package/src/plugins/__tests__/__snapshots__/headingThree.test.js.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`headingThree plugin renders h3 element 1`] = `
+<body>
+  <div>
+    <h3>
+      Heading three
+    </h3>
+  </div>
+</body>
+`;

package/src/plugins/__tests__/dropdown.test.js

@@ -0,0 +1,160 @@
+import { createEditor } from 'slate';
+import { render, fireEvent, waitFor } from '@testing-library/react';
+import React from 'react';
+import dropdown from '../dropdown';
+import { createPlugin, postMessage, withId } from '../../helpers';
+import { PARAGRAPH, HEADING_ONE, HEADING_TWO } from '../../constants';
+
+jest.mock('slate-react', () => ({
+  useSlate: jest.fn(),
+}));
+
+const { useSlate } = require('slate-react');
+
+const OPTIONS = [
+  { value: PARAGRAPH, label: 'Normal text' },
+  { value: HEADING_ONE, label: 'Heading 1' },
+  { value: HEADING_TWO, label: 'Heading 2' },
+];
+
+const renderToolbarButton = (plugin) => {
+  const ToolbarButton = plugin.ToolbarButton;
+  return render(<ToolbarButton />);
+};
+
+describe('dropdown plugin', () => {
+  beforeEach(() => {
+    const editor = withId('sample')(createEditor());
+    editor.children = [{ type: PARAGRAPH, children: [{ text: '' }] }];
+    editor.selection = null;
+    useSlate.mockReturnValue(editor);
+  });
+
+  it('is a plugin object', () => {
+    const plugin = dropdown({ name: 'test-dropdown', options: OPTIONS });
+    for (const prop in createPlugin()) {
+      expect(plugin[prop]).toBeDefined();
+    }
+  });
+
+  it('handles dropdown message and sets block type', async () => {
+    const editor = withId('sample')(createEditor());
+    dropdown({ name: 'test-dropdown', options: OPTIONS }).handleMessage(editor);
+    editor.insertNode({
+      type: PARAGRAPH,
+      children: [{ text: 'Some text' }],
+    });
+
+    postMessage('test-dropdown', { type: HEADING_ONE }, editor);
+
+    await waitFor(() => {
+      expect(editor.children[0].type).toBe(HEADING_ONE);
+    });
+  });
+
+  it('ignores message when data.type is missing', async () => {
+    const editor = withId('sample')(createEditor());
+    dropdown({ name: 'test-dropdown', options: OPTIONS }).handleMessage(editor);
+    editor.insertNode({
+      type: PARAGRAPH,
+      children: [{ text: 'Some text' }],
+    });
+
+    postMessage('test-dropdown', {}, editor);
+
+    await waitFor(() => {
+      expect(editor.children[0].type).toBe(PARAGRAPH);
+    });
+  });
+
+  it('provides a ToolbarButton', () => {
+    const plugin = dropdown({ name: 'test-dropdown', options: OPTIONS });
+    expect(plugin.ToolbarButton).toBeDefined();
+  });
+
+  it('provides a ToolbarButton even with empty options', () => {
+    const plugin = dropdown({ name: 'test-dropdown', options: [] });
+    expect(plugin.ToolbarButton).toBeDefined();
+  });
+
+  it('renders a separator before the dropdown when leftSeparator is true', () => {
+    const { container } = renderToolbarButton(
+      dropdown({
+        name: 'test-dropdown',
+        options: OPTIONS,
+        leftSeparator: true,
+      }),
+    );
+    const children = container.childNodes;
+    expect(children[0].tagName).toBe('DIV');
+    expect(children[1].tagName).toBe('SELECT');
+  });
+
+  it('renders a separator after the dropdown when rightSeparator is true', () => {
+    const { container } = renderToolbarButton(
+      dropdown({
+        name: 'test-dropdown',
+        options: OPTIONS,
+        rightSeparator: true,
+      }),
+    );
+    const children = container.childNodes;
+    expect(children[0].tagName).toBe('SELECT');
+    expect(children[1].tagName).toBe('DIV');
+  });
+
+  it('renders separators on both sides when both leftSeparator and rightSeparator are true', () => {
+    const { container } = renderToolbarButton(
+      dropdown({
+        name: 'test-dropdown',
+        options: OPTIONS,
+        leftSeparator: true,
+        rightSeparator: true,
+      }),
+    );
+    const children = container.childNodes;
+    expect(children[0].tagName).toBe('DIV');
+    expect(children[1].tagName).toBe('SELECT');
+    expect(children[2].tagName).toBe('DIV');
+  });
+
+  it('renders only the dropdown when both separators are false', () => {
+    const { container } = renderToolbarButton(
+      dropdown({
+        name: 'test-dropdown',
+        options: OPTIONS,
+        leftSeparator: false,
+        rightSeparator: false,
+      }),
+    );
+    const children = container.childNodes;
+    expect(children).toHaveLength(1);
+    expect(children[0].tagName).toBe('SELECT');
+  });
+
+  it('returns null when options is empty', () => {
+    const { container } = renderToolbarButton(
+      dropdown({ name: 'test-dropdown', options: [] }),
+    );
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('calls postMessage with the selected value when onChange fires', async () => {
+    const editor = withId('onChange-test')(createEditor());
+    useSlate.mockReturnValue(editor);
+
+    dropdown({ name: 'test-dropdown', options: OPTIONS }).handleMessage(editor);
+
+    editor.insertNode({ type: PARAGRAPH, children: [{ text: 'Some text' }] });
+
+    const { getByRole } = renderToolbarButton(
+      dropdown({ name: 'test-dropdown', options: OPTIONS }),
+    );
+
+    fireEvent.change(getByRole('combobox'), { target: { value: HEADING_ONE } });
+
+    await waitFor(() => {
+      expect(editor.children[0].type).toBe(HEADING_ONE);
+    });
+  });
+});

package/src/plugins/__tests__/headingFour.test.js

@@ -0,0 +1,27 @@
+import { render } from '@testing-library/react';
+import headingFour from '../headingFour';
+import { createPlugin, renderDefaultElement } from '../../helpers';
+
+describe('headingFour plugin', () => {
+  it('is a plugin object', () => {
+    for (const prop in createPlugin()) {
+      expect(headingFour()[prop]).toBeDefined();
+    }
+  });
+
+  it('renders h4 element', () => {
+    const { baseElement } = render(
+      headingFour().renderElement(renderDefaultElement)({
+        element: { type: 'heading-four' },
+        children: 'Heading four',
+      }),
+    );
+    expect(baseElement).toMatchSnapshot();
+  });
+
+  it('still provides ToolbarButton when showToolbarButton is false', () => {
+    expect(
+      headingFour({ showToolbarButton: false }).ToolbarButton,
+    ).toBeDefined();
+  });
+});

package/src/plugins/__tests__/headingOne.test.js

@@ -18,4 +18,10 @@ describe('headingOne plugin', () => {
     );
     expect(baseElement).toMatchSnapshot();
   });
+
+  it('still provides ToolbarButton when showToolbarButton is false', () => {
+    expect(
+      headingOne({ showToolbarButton: false }).ToolbarButton,
+    ).toBeDefined();
+  });
 });

package/src/plugins/__tests__/headingThree.test.js

@@ -0,0 +1,27 @@
+import { render } from '@testing-library/react';
+import headingThree from '../headingThree';
+import { createPlugin, renderDefaultElement } from '../../helpers';
+
+describe('headingThree plugin', () => {
+  it('is a plugin object', () => {
+    for (const prop in createPlugin()) {
+      expect(headingThree()[prop]).toBeDefined();
+    }
+  });
+
+  it('renders h3 element', () => {
+    const { baseElement } = render(
+      headingThree().renderElement(renderDefaultElement)({
+        element: { type: 'heading-three' },
+        children: 'Heading three',
+      }),
+    );
+    expect(baseElement).toMatchSnapshot();
+  });
+
+  it('still provides ToolbarButton when showToolbarButton is false', () => {
+    expect(
+      headingThree({ showToolbarButton: false }).ToolbarButton,
+    ).toBeDefined();
+  });
+});

package/src/plugins/__tests__/headingTwo.test.js

@@ -18,4 +18,10 @@ describe('headingTwo plugin', () => {
     );
     expect(baseElement).toMatchSnapshot();
   });
+
+  it('still provides ToolbarButton when showToolbarButton is false', () => {
+    expect(
+      headingTwo({ showToolbarButton: false }).ToolbarButton,
+    ).toBeDefined();
+  });
 });

package/src/plugins/dropdown.js

@@ -0,0 +1,64 @@
+import React from 'react';
+import { Transforms } from 'slate';
+import { useSlate } from 'slate-react';
+import {
+  createPlugin,
+  postMessage,
+  addMessageListener,
+  isBlockActive,
+  isList,
+} from '../helpers';
+import Toolbar from '../components/Toolbar';
+
+const makeToolbarButton =
+  ({ name, options, leftSeparator, rightSeparator }) =>
+  () => {
+    const editor = useSlate();
+    if (options.length === 0) {
+      return null;
+    }
+    const currentValue =
+      options.find(({ value }) => isBlockActive(editor, value))?.value ??
+      options[0]?.value;
+
+    return (
+      <>
+        {leftSeparator === true && <Toolbar.Separator />}
+        <Toolbar.Dropdown
+          options={options}
+          currentValue={currentValue}
+          onChange={(event) => {
+            event.preventDefault();
+            postMessage(name, { type: event.target.value }, editor);
+          }}
+        />
+        {rightSeparator === true && <Toolbar.Separator />}
+      </>
+    );
+  };
+
+export default ({
+  name,
+  options = [],
+  leftSeparator = false,
+  rightSeparator = false,
+}) =>
+  createPlugin({
+    name,
+    ToolbarButton: makeToolbarButton({
+      name,
+      options,
+      leftSeparator,
+      rightSeparator,
+    }),
+    handleMessage: addMessageListener(name, ({ editor, data }) => {
+      if (!data?.type) {
+        return;
+      }
+      Transforms.unwrapNodes(editor, {
+        match: isList,
+        split: true,
+      });
+      Transforms.setNodes(editor, { type: data.type });
+    }),
+  });

package/src/plugins/headingFour.js

@@ -0,0 +1,62 @@
+import React from 'react';
+import { Transforms } from 'slate';
+import { useSlate } from 'slate-react';
+import {
+  createPlugin,
+  isBlockActive,
+  makeRenderElement,
+  addMessageListener,
+  postMessage,
+  isList,
+} from '../helpers';
+import Toolbar from '../components/Toolbar';
+import Icon from '../components/Icon';
+import { HEADING_FOUR } from '../constants';
+
+const renderElement = makeRenderElement(
+  HEADING_FOUR,
+  ({ attributes, children }) => <h4 {...attributes}>{children}</h4>,
+);
+
+const handleMessage = addMessageListener(HEADING_FOUR, ({ editor }) => {
+  const isActive = isBlockActive(editor, HEADING_FOUR);
+
+  // Unwrap all the items of any list
+  Transforms.unwrapNodes(editor, {
+    match: isList,
+    split: true,
+  });
+
+  Transforms.setNodes(editor, {
+    type: isActive ? 'paragraph' : HEADING_FOUR,
+  });
+});
+
+const ToolbarButton = ({ showToolbarButton }) => {
+  const editor = useSlate();
+
+  if (!showToolbarButton) return null;
+
+  return (
+    <Toolbar.Button
+      active={isBlockActive(editor, HEADING_FOUR)}
+      onMouseDown={(event) => {
+        event.preventDefault();
+        postMessage(HEADING_FOUR, {}, editor);
+      }}
+    >
+      <Icon>looks_four</Icon>
+    </Toolbar.Button>
+  );
+};
+
+export default ({ showToolbarButton = true } = {}) =>
+  createPlugin({
+    name: HEADING_FOUR,
+    renderElement,
+    handleMessage,
+    ToolbarButton: () => (
+      <ToolbarButton showToolbarButton={showToolbarButton} />
+    ),
+    isActive: (editor) => isBlockActive(editor, HEADING_FOUR),
+  });

package/src/plugins/headingOne.js

@@ -32,9 +32,11 @@ const handleMessage = addMessageListener(HEADING_ONE, ({ editor }) => {
   });
 });
 
-const ToolbarButton = () => {
+const ToolbarButton = ({ showToolbarButton }) => {
   const editor = useSlate();
 
+  if (!showToolbarButton) return null;
+
   return (
     <Toolbar.Button
       active={isBlockActive(editor, HEADING_ONE)}
@@ -48,11 +50,13 @@ const ToolbarButton = () => {
   );
 };
 
-export default () =>
+export default ({ showToolbarButton = true } = {}) =>
   createPlugin({
     name: HEADING_ONE,
     renderElement,
     handleMessage,
-    ToolbarButton,
+    ToolbarButton: () => (
+      <ToolbarButton showToolbarButton={showToolbarButton} />
+    ),
     isActive: (editor) => isBlockActive(editor, HEADING_ONE),
   });

package/src/plugins/headingThree.js

@@ -0,0 +1,62 @@
+import React from 'react';
+import { Transforms } from 'slate';
+import { useSlate } from 'slate-react';
+import {
+  createPlugin,
+  isBlockActive,
+  makeRenderElement,
+  addMessageListener,
+  postMessage,
+  isList,
+} from '../helpers';
+import Toolbar from '../components/Toolbar';
+import Icon from '../components/Icon';
+import { HEADING_THREE } from '../constants';
+
+const renderElement = makeRenderElement(
+  HEADING_THREE,
+  ({ attributes, children }) => <h3 {...attributes}>{children}</h3>,
+);
+
+const handleMessage = addMessageListener(HEADING_THREE, ({ editor }) => {
+  const isActive = isBlockActive(editor, HEADING_THREE);
+
+  // Unwrap all the items of any list
+  Transforms.unwrapNodes(editor, {
+    match: isList,
+    split: true,
+  });
+
+  Transforms.setNodes(editor, {
+    type: isActive ? 'paragraph' : HEADING_THREE,
+  });
+});
+
+const ToolbarButton = ({ showToolbarButton }) => {
+  const editor = useSlate();
+
+  if (!showToolbarButton) return null;
+
+  return (
+    <Toolbar.Button
+      active={isBlockActive(editor, HEADING_THREE)}
+      onMouseDown={(event) => {
+        event.preventDefault();
+        postMessage(HEADING_THREE, {}, editor);
+      }}
+    >
+      <Icon>looks_three</Icon>
+    </Toolbar.Button>
+  );
+};
+
+export default ({ showToolbarButton = true } = {}) =>
+  createPlugin({
+    name: HEADING_THREE,
+    renderElement,
+    handleMessage,
+    ToolbarButton: () => (
+      <ToolbarButton showToolbarButton={showToolbarButton} />
+    ),
+    isActive: (editor) => isBlockActive(editor, HEADING_THREE),
+  });