@squiz/formatted-text-editor 1.12.0-alpha.27 → 1.12.0-alpha.32

package/lib/Editor/Editor.js

@@ -1,14 +1,18 @@
 import React from 'react';
-import { BoldExtension, ItalicExtension, NodeFormattingExtension, UnderlineExtension, HistoryExtension, wysiwygPreset, } from 'remirror/extensions';
+import { BoldExtension, HeadingExtension, ItalicExtension, NodeFormattingExtension, ParagraphExtension, UnderlineExtension, HistoryExtension, wysiwygPreset, } from 'remirror/extensions';
 import { EditorComponent, Remirror, useRemirror } from '@remirror/react';
 import { EditorToolbar } from '../EditorToolbar/EditorToolbar';
+import { PreformattedExtension } from '../extensions/PreformattedExtension/PreformattedExtension';
 const Editor = ({ content }) => {
     const { manager, state, setState } = useRemirror({
         extensions: () => [
             ...wysiwygPreset(),
             new BoldExtension(),
+            new HeadingExtension(),
             new ItalicExtension(),
             new NodeFormattingExtension(),
+            new ParagraphExtension(),
+            new PreformattedExtension(),
             new UnderlineExtension(),
             new HistoryExtension(),
         ],

package/lib/EditorToolbar/EditorToolbar.js

@@ -6,6 +6,7 @@ import BoldButton from './Tools/Bold/BoldButton';
 import TextAlignButtons from './Tools/TextAlign/TextAlignButtons';
 import UndoButton from './Tools/Undo/UndoButton';
 import RedoButton from './Tools/Redo/RedoButton';
+import TextTypeDropdown from './Tools/TextType/TextTypeDropdown';
 // The editor main toolbar
 export const EditorToolbar = ({ manager, isPopover }) => {
     const extensionNames = {};
@@ -17,6 +18,7 @@ export const EditorToolbar = ({ manager, isPopover }) => {
             React.createElement(UndoButton, null),
             React.createElement(RedoButton, null),
             React.createElement(VerticalDivider, { className: "editor-divider" }))),
+        extensionNames.heading && extensionNames.paragraph && extensionNames.preformatted && React.createElement(TextTypeDropdown, null),
         extensionNames.bold && React.createElement(BoldButton, null),
         extensionNames.italic && React.createElement(ItalicButton, null),
         extensionNames.underline && React.createElement(UnderlineButton, null),

package/lib/EditorToolbar/Tools/TextType/Heading/HeadingButton.d.ts

@@ -0,0 +1,5 @@
+type HeadingButtonProps = {
+    level: number;
+};
+declare const HeadingButton: ({ level }: HeadingButtonProps) => JSX.Element;
+export default HeadingButton;

package/lib/EditorToolbar/Tools/TextType/Heading/HeadingButton.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { useCommands, useChainedCommands, useActive } from '@remirror/react';
+import DropdownButton from '../../../../ui/DropdownButton/DropdownButton';
+const HeadingButton = ({ level }) => {
+    const { toggleHeading } = useCommands();
+    const chain = useChainedCommands();
+    const active = useActive();
+    const enabled = toggleHeading.enabled({ level });
+    const handleSelect = () => {
+        if (toggleHeading.enabled({ level })) {
+            chain.toggleHeading({ level }).focus().run();
+        }
+    };
+    const headingContent = () => {
+        switch (level) {
+            case 1:
+                return React.createElement("h1", null, "Heading 1");
+            case 2:
+                return React.createElement("h2", null, "Heading 2");
+            case 3:
+                return React.createElement("h3", null, "Heading 3");
+            case 4:
+                return React.createElement("h4", null, "Heading 4");
+            case 5:
+                return React.createElement("h5", null, "Heading 5");
+            case 6:
+                return React.createElement("h6", null, "Heading 6");
+        }
+    };
+    return (React.createElement(DropdownButton, { handleOnClick: handleSelect, isDisabled: !enabled, isActive: active.heading({ level }), label: `Heading ${level}` }, headingContent()));
+};
+export default HeadingButton;

package/lib/EditorToolbar/Tools/TextType/Paragraph/ParagraphButton.d.ts

@@ -0,0 +1,2 @@
+declare const ParagraphButton: () => JSX.Element;
+export default ParagraphButton;

package/lib/EditorToolbar/Tools/TextType/Paragraph/ParagraphButton.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { useCommands, useChainedCommands, useActive } from '@remirror/react';
+import DropdownButton from '../../../../ui/DropdownButton/DropdownButton';
+const ParagraphButton = () => {
+    const { convertParagraph } = useCommands();
+    const chain = useChainedCommands();
+    const active = useActive();
+    const enabled = convertParagraph.enabled();
+    const handleSelect = () => {
+        if (convertParagraph.enabled()) {
+            chain.convertParagraph().focus().run();
+        }
+    };
+    return (React.createElement(DropdownButton, { handleOnClick: handleSelect, isDisabled: !enabled, isActive: active.paragraph(), label: "Paragraph" },
+        React.createElement("p", null, "Paragraph")));
+};
+export default ParagraphButton;

package/lib/EditorToolbar/Tools/TextType/Preformatted/PreformattedButton.d.ts

@@ -0,0 +1,2 @@
+declare const PreformattedButton: () => JSX.Element;
+export default PreformattedButton;

package/lib/EditorToolbar/Tools/TextType/Preformatted/PreformattedButton.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { useCommands, useActive } from '@remirror/react';
+import DropdownButton from '../../../../ui/DropdownButton/DropdownButton';
+const PreformattedButton = () => {
+    const { togglePreformatted } = useCommands();
+    const active = useActive();
+    const enabled = togglePreformatted.enabled();
+    const handleSelect = () => {
+        if (togglePreformatted.enabled()) {
+            togglePreformatted();
+        }
+    };
+    return (React.createElement(DropdownButton, { handleOnClick: handleSelect, isDisabled: !enabled, isActive: active.preformatted(), label: "Preformatted" },
+        React.createElement("pre", null, "Preformatted")));
+};
+export default PreformattedButton;

package/lib/EditorToolbar/Tools/TextType/TextTypeDropdown.d.ts

@@ -0,0 +1,2 @@
+declare const TextTypeDropdown: () => JSX.Element;
+export default TextTypeDropdown;

package/lib/EditorToolbar/Tools/TextType/TextTypeDropdown.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import HeadingButton from './Heading/HeadingButton';
+import ParagraphButton from './Paragraph/ParagraphButton';
+import PreformattedButton from './Preformatted/PreformattedButton';
+import ToolbarDropdown from '../../../ui/ToolbarDropdown/ToolbarDropdown';
+import { useActive, VerticalDivider } from '@remirror/react';
+const TextTypeDropdown = () => {
+    const active = useActive();
+    const activeLabel = () => {
+        // Determine if preformatted is active
+        if (active.preformatted()) {
+            return 'Preformatted';
+        }
+        // Determine if a heading is active
+        for (let i = 1; i <= 6; i++) {
+            if (active.heading({ level: i })) {
+                return `Heading ${i}`;
+            }
+        }
+        // Default to paragraph
+        return 'Paragraph';
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement(ToolbarDropdown, { label: activeLabel() },
+            React.createElement(ParagraphButton, null),
+            React.createElement(HeadingButton, { level: 1 }),
+            React.createElement(HeadingButton, { level: 2 }),
+            React.createElement(HeadingButton, { level: 3 }),
+            React.createElement(HeadingButton, { level: 4 }),
+            React.createElement(HeadingButton, { level: 5 }),
+            React.createElement(HeadingButton, { level: 6 }),
+            React.createElement(PreformattedButton, null)),
+        React.createElement(VerticalDivider, { className: "editor-divider" })));
+};
+export default TextTypeDropdown;

package/lib/extensions/PreformattedExtension/PreformattedExtension.d.ts

@@ -0,0 +1,10 @@
+import { ApplySchemaAttributes, CommandFunction, NodeExtension, NodeExtensionSpec, NodeSpecOverride } from '@remirror/core';
+export declare class PreformattedExtension extends NodeExtension {
+    get name(): "preformatted";
+    createTags(): ("formattingNode" | "block" | "textBlock")[];
+    createNodeSpec(extra: ApplySchemaAttributes, override: NodeSpecOverride): NodeExtensionSpec;
+    /**
+     * Toggle the <pre> for the current block.
+     */
+    togglePreformatted(): CommandFunction;
+}

package/lib/extensions/PreformattedExtension/PreformattedExtension.js

@@ -0,0 +1,46 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { command, extension, ExtensionTag, NodeExtension, toggleBlockItem, } from '@remirror/core';
+let PreformattedExtension = class PreformattedExtension extends NodeExtension {
+    get name() {
+        return 'preformatted';
+    }
+    createTags() {
+        return [ExtensionTag.Block, ExtensionTag.TextBlock, ExtensionTag.FormattingNode];
+    }
+    createNodeSpec(extra, override) {
+        return {
+            content: 'inline*',
+            defining: true,
+            draggable: false,
+            ...override,
+            attrs: {
+                ...extra.defaults(),
+            },
+            parseDOM: [...(override.parseDOM ?? [])],
+            toDOM: (node) => {
+                return [`pre`, extra.dom(node), 0];
+            },
+        };
+    }
+    /**
+     * Toggle the <pre> for the current block.
+     */
+    togglePreformatted() {
+        return toggleBlockItem({
+            type: this.type,
+            toggleType: 'paragraph',
+        });
+    }
+};
+__decorate([
+    command()
+], PreformattedExtension.prototype, "togglePreformatted", null);
+PreformattedExtension = __decorate([
+    extension({})
+], PreformattedExtension);
+export { PreformattedExtension };

package/lib/index.css

@@ -3835,3 +3835,30 @@ button:active .remirror-menu-pane-shortcut,
 .toolbar-button:active {
   @apply text-blue-300 bg-blue-100;
 }
+.toolbar-dropdown {
+  align-self: center;
+}
+.toolbar-dropdown .toolbar-dropdown__button {
+  @apply font-base text-md font-semibold text-gray-600;
+  height: 2rem;
+  padding-left: 0.5rem;
+}
+.toolbar-dropdown .toolbar-dropdown__button:active,
+.toolbar-dropdown .toolbar-dropdown__button:hover,
+.toolbar-dropdown .toolbar-dropdown__button:focus {
+  background-color: rgba(0, 0, 0, 0.04);
+}
+.toolbar-dropdown .toolbar-dropdown__button .toolbar-dropdown__label {
+  padding-right: 0.25rem;
+}
+.toolbar-dropdown .toolbar-dropdown__button .toolbar-dropdown__icon {
+  width: 1rem;
+  height: 1.5rem;
+}
+.dropdown-button {
+  height: 2.5rem;
+  padding: 0.25rem 0.5rem;
+  justify-content: space-between;
+  border-radius: 0;
+  width: 100%;
+}

package/lib/ui/DropdownButton/DropdownButton.d.ts

@@ -0,0 +1,9 @@
+type DropdownButtonProps = {
+    children?: JSX.Element;
+    handleOnClick: () => void;
+    isDisabled: boolean;
+    isActive: boolean;
+    label: string;
+};
+declare const DropdownButton: ({ children, handleOnClick, isDisabled, isActive, label }: DropdownButtonProps) => JSX.Element;
+export default DropdownButton;

package/lib/ui/DropdownButton/DropdownButton.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import CheckIcon from '@mui/icons-material/Check';
+const DropdownButton = ({ children, handleOnClick, isDisabled, isActive, label }) => {
+    return (React.createElement("button", { "aria-label": label, title: label, type: "button", onClick: handleOnClick, disabled: isDisabled, className: `btn dropdown-button ${isActive ? 'is-active' : ''}` },
+        children || label,
+        isActive && React.createElement(CheckIcon, { className: "dropdown-button-icon" })));
+};
+export default DropdownButton;

package/lib/ui/ToolbarDropdown/ToolbarDropdown.d.ts

@@ -0,0 +1,6 @@
+type ToolbarDropdownProps = {
+    children: JSX.Element | JSX.Element[];
+    label: string;
+};
+declare const ToolbarDropdown: ({ children, label }: ToolbarDropdownProps) => JSX.Element;
+export default ToolbarDropdown;

package/lib/ui/ToolbarDropdown/ToolbarDropdown.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Menu } from '@headlessui/react';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+const ToolbarDropdown = ({ children, label }) => {
+    return (React.createElement(Menu, { as: "div", className: "toolbar-dropdown" },
+        React.createElement("div", null,
+            React.createElement(Menu.Button, { className: "toolbar-dropdown__button" },
+                React.createElement("span", { className: "toolbar-dropdown__label" }, label),
+                React.createElement(ExpandMoreIcon, { className: "toolbar-dropdown__icon", "aria-hidden": "true" }))),
+        React.createElement(Menu.Items, { className: "fixed left-20 z-10 mt-2 w-56 origin-top-right rounded-md bg-white shadow-md " },
+            React.createElement("div", { className: "py-1" }, children))));
+};
+export default ToolbarDropdown;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squiz/formatted-text-editor",
-  "version": "1.12.0-alpha.27",
+  "version": "1.12.0-alpha.32",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "scripts": {
@@ -16,6 +16,7 @@
     "test:e2e": "vite build && vite preview --port 8080 & cypress open"
   },
   "dependencies": {
+    "@headlessui/react": "^1.7.10",
     "@mui/icons-material": "5.11.0",
     "@remirror/react": "2.0.25"
   },
@@ -60,5 +61,5 @@
   "volta": {
     "node": "16.19.0"
   },
-  "gitHead": "ff692c1b6cea88887d9f3bb67c54658408e03037"
+  "gitHead": "527320f3d27039e18f96135807a9b09e3a19e305"
 }

package/src/Editor/Editor.spec.tsx

@@ -85,4 +85,144 @@ describe('Formatted text editor', () => {
     fireEvent.click(justifyAlignButton);
     expect(baseElement.querySelector('p[data-node-text-align="justify"]')).toBeTruthy();
   });
+
+  it('Applies Heading 1 styling to text when clicked', () => {
+    const { baseElement } = render(<Editor />);
+    expect(baseElement).toBeTruthy();
+
+    expect(baseElement.querySelector('div.remirror-editor h1')).toBeFalsy();
+
+    const headingDropdown = baseElement.querySelector('.toolbar-dropdown button') as HTMLButtonElement;
+    expect(headingDropdown).toBeTruthy();
+    fireEvent.click(headingDropdown);
+
+    const h1Button = baseElement.querySelector('button[title="Heading 1"]') as HTMLButtonElement;
+    expect(h1Button).toBeTruthy();
+    fireEvent.click(h1Button);
+
+    expect(baseElement.querySelector('div.remirror-editor h1')).toBeTruthy();
+  });
+
+  it('Applies Heading 2 styling to text when clicked', () => {
+    const { baseElement } = render(<Editor />);
+    expect(baseElement).toBeTruthy();
+
+    expect(baseElement.querySelector('div.remirror-editor h2')).toBeFalsy();
+
+    const headingDropdown = baseElement.querySelector('.toolbar-dropdown button') as HTMLButtonElement;
+    expect(headingDropdown).toBeTruthy();
+    fireEvent.click(headingDropdown);
+
+    const h2Button = baseElement.querySelector('button[title="Heading 2"]') as HTMLButtonElement;
+    expect(h2Button).toBeTruthy();
+    fireEvent.click(h2Button);
+
+    expect(baseElement.querySelector('div.remirror-editor h2')).toBeTruthy();
+  });
+
+  it('Applies Heading 3 styling to text when clicked', () => {
+    const { baseElement } = render(<Editor />);
+    expect(baseElement).toBeTruthy();
+
+    expect(baseElement.querySelector('div.remirror-editor h3')).toBeFalsy();
+
+    const headingDropdown = baseElement.querySelector('.toolbar-dropdown button') as HTMLButtonElement;
+    expect(headingDropdown).toBeTruthy();
+    fireEvent.click(headingDropdown);
+
+    const h3Button = baseElement.querySelector('button[title="Heading 3"]') as HTMLButtonElement;
+    expect(h3Button).toBeTruthy();
+    fireEvent.click(h3Button);
+
+    expect(baseElement.querySelector('div.remirror-editor h3')).toBeTruthy();
+  });
+
+  it('Applies Heading 4 styling to text when clicked', () => {
+    const { baseElement } = render(<Editor />);
+    expect(baseElement).toBeTruthy();
+
+    expect(baseElement.querySelector('div.remirror-editor h4')).toBeFalsy();
+
+    const headingDropdown = baseElement.querySelector('.toolbar-dropdown button') as HTMLButtonElement;
+    expect(headingDropdown).toBeTruthy();
+    fireEvent.click(headingDropdown);
+
+    const h4Button = baseElement.querySelector('button[title="Heading 4"]') as HTMLButtonElement;
+    expect(h4Button).toBeTruthy();
+    fireEvent.click(h4Button);
+
+    expect(baseElement.querySelector('div.remirror-editor h4')).toBeTruthy();
+  });
+
+  it('Applies Heading 5 styling to text when clicked', () => {
+    const { baseElement } = render(<Editor />);
+    expect(baseElement).toBeTruthy();
+
+    expect(baseElement.querySelector('div.remirror-editor h5')).toBeFalsy();
+
+    const headingDropdown = baseElement.querySelector('.toolbar-dropdown button') as HTMLButtonElement;
+    expect(headingDropdown).toBeTruthy();
+    fireEvent.click(headingDropdown);
+
+    const h5Button = baseElement.querySelector('button[title="Heading 5"]') as HTMLButtonElement;
+    expect(h5Button).toBeTruthy();
+    fireEvent.click(h5Button);
+
+    expect(baseElement.querySelector('div.remirror-editor h5')).toBeTruthy();
+  });
+
+  it('Applies Heading 6 styling to text when clicked', () => {
+    const { baseElement } = render(<Editor />);
+    expect(baseElement).toBeTruthy();
+
+    expect(baseElement.querySelector('div.remirror-editor h6')).toBeFalsy();
+
+    const headingDropdown = baseElement.querySelector('.toolbar-dropdown button') as HTMLButtonElement;
+    expect(headingDropdown).toBeTruthy();
+    fireEvent.click(headingDropdown);
+
+    const h6Button = baseElement.querySelector('button[title="Heading 6"]') as HTMLButtonElement;
+    expect(h6Button).toBeTruthy();
+    fireEvent.click(h6Button);
+
+    expect(baseElement.querySelector('div.remirror-editor h6')).toBeTruthy();
+  });
+
+  it('Applies Preformatted styling to text when clicked', () => {
+    const { baseElement } = render(<Editor />);
+    expect(baseElement).toBeTruthy();
+
+    expect(baseElement.querySelector('div.remirror-editor pre')).toBeFalsy();
+
+    const headingDropdown = baseElement.querySelector('.toolbar-dropdown button') as HTMLButtonElement;
+    expect(headingDropdown).toBeTruthy();
+    fireEvent.click(headingDropdown);
+
+    const preButton = baseElement.querySelector('button[title="Preformatted"]') as HTMLButtonElement;
+    expect(preButton).toBeTruthy();
+    fireEvent.click(preButton);
+
+    expect(baseElement.querySelector('div.remirror-editor pre')).toBeTruthy();
+  });
+
+  it('Applies Paragraph styling to text when clicked', () => {
+    const { baseElement } = render(<Editor />);
+    expect(baseElement).toBeTruthy();
+
+    expect(baseElement.querySelectorAll('div.remirror-editor p')).toHaveLength(1);
+
+    const headingDropdown = baseElement.querySelector('.toolbar-dropdown button') as HTMLButtonElement;
+    expect(headingDropdown).toBeTruthy();
+    fireEvent.click(headingDropdown);
+
+    const preButton = baseElement.querySelector('button[title="Preformatted"]') as HTMLButtonElement;
+    expect(preButton).toBeTruthy();
+    fireEvent.click(preButton);
+
+    const paragraphButton = baseElement.querySelector('button[title="Paragraph"]') as HTMLButtonElement;
+    expect(paragraphButton).toBeTruthy();
+    fireEvent.click(paragraphButton);
+
+    expect(baseElement.querySelectorAll('div.remirror-editor p')).toHaveLength(2);
+  });
 });

package/src/Editor/Editor.tsx

@@ -1,8 +1,10 @@
 import React from 'react';
 import {
   BoldExtension,
+  HeadingExtension,
   ItalicExtension,
   NodeFormattingExtension,
+  ParagraphExtension,
   UnderlineExtension,
   HistoryExtension,
   wysiwygPreset,
@@ -10,6 +12,7 @@ import {
 import { EditorComponent, Remirror, useRemirror } from '@remirror/react';
 import { RemirrorContentType, Extension } from '@remirror/core';
 import { EditorToolbar } from '../EditorToolbar/EditorToolbar';
+import { PreformattedExtension } from '../extensions/PreformattedExtension/PreformattedExtension';
 
 type EditorProps = {
   content?: RemirrorContentType;
@@ -20,8 +23,11 @@ const Editor = ({ content }: EditorProps) => {
     extensions: () => [
       ...(wysiwygPreset() as Extension[]),
       new BoldExtension(),
+      new HeadingExtension(),
       new ItalicExtension(),
       new NodeFormattingExtension(),
+      new ParagraphExtension(),
+      new PreformattedExtension(),
       new UnderlineExtension(),
       new HistoryExtension(),
     ],

package/src/EditorToolbar/EditorToolbar.tsx

@@ -7,6 +7,7 @@ import BoldButton from './Tools/Bold/BoldButton';
 import TextAlignButtons from './Tools/TextAlign/TextAlignButtons';
 import UndoButton from './Tools/Undo/UndoButton';
 import RedoButton from './Tools/Redo/RedoButton';
+import TextTypeDropdown from './Tools/TextType/TextTypeDropdown';
 
 type EditorToolbarProps = {
   manager: RemirrorManager<any>;
@@ -32,6 +33,7 @@ export const EditorToolbar = ({ manager, isPopover }: EditorToolbarProps) => {
               <VerticalDivider className="editor-divider" />
             </>
           )}
+          {extensionNames.heading && extensionNames.paragraph && extensionNames.preformatted && <TextTypeDropdown />}
           {extensionNames.bold && <BoldButton />}
           {extensionNames.italic && <ItalicButton />}
           {extensionNames.underline && <UnderlineButton />}

package/src/EditorToolbar/Tools/TextType/Heading/HeadingButton.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { useCommands, useChainedCommands, useActive } from '@remirror/react';
+import { HeadingExtension } from '@remirror/extension-heading';
+import DropdownButton from '../../../../ui/DropdownButton/DropdownButton';
+
+type HeadingButtonProps = {
+  level: number;
+};
+
+const HeadingButton = ({ level }: HeadingButtonProps) => {
+  const { toggleHeading } = useCommands<HeadingExtension>();
+  const chain = useChainedCommands();
+
+  const active = useActive<HeadingExtension>();
+  const enabled = toggleHeading.enabled({ level });
+
+  const handleSelect = () => {
+    if (toggleHeading.enabled({ level })) {
+      chain.toggleHeading({ level }).focus().run();
+    }
+  };
+
+  const headingContent = () => {
+    switch (level) {
+      case 1:
+        return <h1>Heading 1</h1>;
+      case 2:
+        return <h2>Heading 2</h2>;
+      case 3:
+        return <h3>Heading 3</h3>;
+      case 4:
+        return <h4>Heading 4</h4>;
+      case 5:
+        return <h5>Heading 5</h5>;
+      case 6:
+        return <h6>Heading 6</h6>;
+    }
+  };
+
+  return (
+    <DropdownButton
+      handleOnClick={handleSelect}
+      isDisabled={!enabled}
+      isActive={active.heading({ level })}
+      label={`Heading ${level}`}
+    >
+      {headingContent()}
+    </DropdownButton>
+  );
+};
+
+export default HeadingButton;

package/src/EditorToolbar/Tools/TextType/Paragraph/ParagraphButton.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { useCommands, useChainedCommands, useActive } from '@remirror/react';
+import { ParagraphExtension } from '@remirror/extension-paragraph';
+import DropdownButton from '../../../../ui/DropdownButton/DropdownButton';
+
+const ParagraphButton = () => {
+  const { convertParagraph } = useCommands<ParagraphExtension>();
+  const chain = useChainedCommands();
+
+  const active = useActive<ParagraphExtension>();
+  const enabled = convertParagraph.enabled();
+
+  const handleSelect = () => {
+    if (convertParagraph.enabled()) {
+      chain.convertParagraph().focus().run();
+    }
+  };
+
+  return (
+    <DropdownButton handleOnClick={handleSelect} isDisabled={!enabled} isActive={active.paragraph()} label="Paragraph">
+      <p>Paragraph</p>
+    </DropdownButton>
+  );
+};
+
+export default ParagraphButton;

package/src/EditorToolbar/Tools/TextType/Preformatted/PreformattedButton.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { useCommands, useActive } from '@remirror/react';
+import { PreformattedExtension } from '../../../../extensions/PreformattedExtension/PreformattedExtension';
+import DropdownButton from '../../../../ui/DropdownButton/DropdownButton';
+
+const PreformattedButton = () => {
+  const { togglePreformatted } = useCommands<PreformattedExtension>();
+
+  const active = useActive<PreformattedExtension>();
+  const enabled = togglePreformatted.enabled();
+
+  const handleSelect = () => {
+    if (togglePreformatted.enabled()) {
+      togglePreformatted();
+    }
+  };
+
+  return (
+    <DropdownButton
+      handleOnClick={handleSelect}
+      isDisabled={!enabled}
+      isActive={active.preformatted()}
+      label="Preformatted"
+    >
+      <pre>Preformatted</pre>
+    </DropdownButton>
+  );
+};
+
+export default PreformattedButton;

package/src/EditorToolbar/Tools/TextType/TextTypeDropdown.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import HeadingButton from './Heading/HeadingButton';
+import ParagraphButton from './Paragraph/ParagraphButton';
+import PreformattedButton from './Preformatted/PreformattedButton';
+import ToolbarDropdown from '../../../ui/ToolbarDropdown/ToolbarDropdown';
+import { useActive, VerticalDivider } from '@remirror/react';
+import { PreformattedExtension } from '../../../extensions/PreformattedExtension/PreformattedExtension';
+
+const TextTypeDropdown = () => {
+  const active = useActive<PreformattedExtension>();
+
+  const activeLabel = () => {
+    // Determine if preformatted is active
+    if (active.preformatted()) {
+      return 'Preformatted';
+    }
+    // Determine if a heading is active
+    for (let i = 1; i <= 6; i++) {
+      if (active.heading({ level: i })) {
+        return `Heading ${i}`;
+      }
+    }
+    // Default to paragraph
+    return 'Paragraph';
+  };
+
+  return (
+    <>
+      <ToolbarDropdown label={activeLabel()}>
+        <ParagraphButton />
+        <HeadingButton level={1} />
+        <HeadingButton level={2} />
+        <HeadingButton level={3} />
+        <HeadingButton level={4} />
+        <HeadingButton level={5} />
+        <HeadingButton level={6} />
+        <PreformattedButton />
+      </ToolbarDropdown>
+      <VerticalDivider className="editor-divider" />
+    </>
+  );
+};
+
+export default TextTypeDropdown;

package/src/extensions/PreformattedExtension/PreformattedExtension.tsx

@@ -0,0 +1,50 @@
+import {
+  ApplySchemaAttributes,
+  command,
+  CommandFunction,
+  extension,
+  ExtensionTag,
+  NodeExtension,
+  NodeExtensionSpec,
+  NodeSpecOverride,
+  ProsemirrorNode,
+  toggleBlockItem,
+} from '@remirror/core';
+
+@extension({})
+export class PreformattedExtension extends NodeExtension {
+  get name() {
+    return 'preformatted' as const;
+  }
+
+  createTags() {
+    return [ExtensionTag.Block, ExtensionTag.TextBlock, ExtensionTag.FormattingNode];
+  }
+
+  createNodeSpec(extra: ApplySchemaAttributes, override: NodeSpecOverride): NodeExtensionSpec {
+    return {
+      content: 'inline*',
+      defining: true,
+      draggable: false,
+      ...override,
+      attrs: {
+        ...extra.defaults(),
+      },
+      parseDOM: [...(override.parseDOM ?? [])],
+      toDOM: (node: ProsemirrorNode) => {
+        return [`pre`, extra.dom(node), 0];
+      },
+    };
+  }
+
+  /**
+   * Toggle the <pre> for the current block.
+   */
+  @command()
+  togglePreformatted(): CommandFunction {
+    return toggleBlockItem({
+      type: this.type,
+      toggleType: 'paragraph',
+    });
+  }
+}

package/src/index.scss

@@ -11,3 +11,5 @@
 @import './EditorToolbar/editor-toolbar';
 
 @import './ui/ToolbarButton/toolbar-button';
+@import './ui/ToolbarDropdown/toolbar-dropdown';
+@import './ui/DropdownButton/dropdown-button';

package/src/ui/DropdownButton/DropdownButton.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import CheckIcon from '@mui/icons-material/Check';
+
+type DropdownButtonProps = {
+  children?: JSX.Element;
+  handleOnClick: () => void;
+  isDisabled: boolean;
+  isActive: boolean;
+  label: string;
+};
+
+const DropdownButton = ({ children, handleOnClick, isDisabled, isActive, label }: DropdownButtonProps) => {
+  return (
+    <button
+      aria-label={label}
+      title={label}
+      type="button"
+      onClick={handleOnClick}
+      disabled={isDisabled}
+      className={`btn dropdown-button ${isActive ? 'is-active' : ''}`}
+    >
+      {children || label}
+      {isActive && <CheckIcon className="dropdown-button-icon" />}
+    </button>
+  );
+};
+
+export default DropdownButton;

package/src/ui/DropdownButton/_dropdown-button.scss

@@ -0,0 +1,7 @@
+.dropdown-button {
+  height: 2.5rem;
+  padding: 0.25rem 0.5rem;
+  justify-content: space-between;
+  border-radius: 0;
+  width: 100%;
+}

package/src/ui/ToolbarButton/ToolbarButton.tsx

@@ -7,6 +7,7 @@ type ToolbarButtonProps = {
   icon: ReactElement;
   label: string;
 };
+
 const ToolbarButton = ({ handleOnClick, isDisabled, isActive, icon, label }: ToolbarButtonProps) => {
   return (
     <button

package/src/ui/ToolbarDropdown/ToolbarDropdown.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Menu } from '@headlessui/react';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+
+type ToolbarDropdownProps = {
+  children: JSX.Element | JSX.Element[];
+  label: string;
+};
+
+const ToolbarDropdown = ({ children, label }: ToolbarDropdownProps) => {
+  return (
+    <Menu as="div" className="toolbar-dropdown">
+      <div>
+        <Menu.Button className="toolbar-dropdown__button">
+          <span className="toolbar-dropdown__label">{label}</span>
+          <ExpandMoreIcon className="toolbar-dropdown__icon" aria-hidden="true" />
+        </Menu.Button>
+      </div>
+
+      <Menu.Items className="fixed left-20 z-10 mt-2 w-56 origin-top-right rounded-md bg-white shadow-md ">
+        <div className="py-1">{children}</div>
+      </Menu.Items>
+    </Menu>
+  );
+};
+
+export default ToolbarDropdown;

package/src/ui/ToolbarDropdown/_toolbar-dropdown.scss

@@ -0,0 +1,25 @@
+.toolbar-dropdown {
+  align-self: center;
+
+  .toolbar-dropdown__button {
+    @apply font-base text-md font-semibold text-gray-600;
+
+    height: 2rem;
+    padding-left: 0.5rem;
+
+    &:active,
+    &:hover,
+    &:focus {
+      background-color: rgba(black, 0.04);
+    }
+
+    .toolbar-dropdown__label {
+      padding-right: 0.25rem;
+    }
+
+    .toolbar-dropdown__icon {
+      width: 1rem;
+      height: 1.5rem;
+    }
+  }
+}

package/tailwind.config.cjs

@@ -7,12 +7,21 @@ module.exports = {
         DEFAULT: '4px',
         md: '6px',
       },
+      fontFamily: {
+        base: 'Open Sans, Arial, sans-serif',
+      },
       fontWeight: {
         normal: '400',
         medium: '500',
         semibold: '600',
         bold: '700',
       },
+      fontSize: {
+        xlg: '1.125rem',
+        lg: '1rem',
+        md: '0.875rem',
+        sm: '0.8125rem',
+      },
       boxShadow: {
         outline: '0 0 0 1px rgba(0,0,0,0.10)',
         sm: '0 0 0 1px rgba(0,0,0,0.04), 0 1px 4px 2px rgba(0,0,0,0.08)',

package/tsconfig.json

@@ -2,6 +2,7 @@
   "compilerOptions": {
     "target": "ESNext",
     "useDefineForClassFields": true,
+    "experimentalDecorators": true,
     "lib": ["DOM", "DOM.Iterable", "ESNext"],
     "allowJs": false,
     "skipLibCheck": true,

package/vite.config.ts

@@ -7,5 +7,13 @@ export default defineConfig({
   build: {
     outDir: 'build/demo',
   },
-  plugins: [react()],
+  plugins: [
+    react({
+      babel: {
+        parserOpts: {
+          plugins: ['decorators-legacy'],
+        },
+      },
+    }),
+  ],
 });