@squiz/formatted-text-editor 1.12.0-alpha.8 → 1.12.1-alpha.0

package/src/EditorToolbar/Tools/Link/LinkButton.spec.tsx

@@ -0,0 +1,277 @@
+import '@testing-library/jest-dom';
+import { act, screen, fireEvent, waitForElementToBeRemoved } from '@testing-library/react';
+import React from 'react';
+import { renderWithEditor, select } from '../../../../tests';
+import LinkButton from './LinkButton';
+
+describe('LinkButton', () => {
+  const openModal = async () => {
+    fireEvent.click(screen.getByRole('button', { name: 'Link (cmd+K)' }));
+    await screen.findByRole('button', { name: 'Apply' });
+  };
+
+  it('Adds a new link', async () => {
+    const { editor, getJsonContent } = await renderWithEditor(<LinkButton />, { content: '[start][end]' });
+
+    // move the cursor to between the start and end tags.
+    await act(() => editor.selectText(8));
+
+    // open the modal and add a link.
+    await openModal();
+    fireEvent.change(screen.getByLabelText('URL'), { target: { value: 'https://www.squiz.net/link-button' } });
+    fireEvent.change(screen.getByLabelText('Text'), { target: { value: 'Link text' } });
+    fireEvent.change(screen.getByLabelText('Title'), { target: { value: 'Link title' } });
+    select(screen.getByLabelText('Target'), 'New window');
+    fireEvent.click(screen.getByRole('button', { name: 'Apply' }));
+
+    await waitForElementToBeRemoved(() => screen.getByRole('button', { name: 'Apply' }));
+
+    expect(getJsonContent()).toEqual({
+      type: 'paragraph',
+      attrs: expect.any(Object),
+      content: [
+        { type: 'text', text: '[start]' },
+        {
+          type: 'text',
+          text: 'Link text',
+          marks: [
+            {
+              type: 'link',
+              attrs: { auto: false, href: 'https://www.squiz.net/link-button', target: '_blank', title: 'Link title' },
+            },
+          ],
+        },
+        { type: 'text', text: '[end]' },
+      ],
+    });
+  });
+
+  it('Updates the attributes of an existing link', async () => {
+    const { editor, getJsonContent } = await renderWithEditor(<LinkButton />, {
+      content: '<a href="https://www.example.org/my-link">Sample link</a> with some other content.',
+    });
+
+    // jump to the middle of the link.
+    await act(() => editor.selectText(3));
+
+    // open the modal and update the link.
+    await openModal();
+    fireEvent.change(screen.getByLabelText('URL'), { target: { value: 'https://www.example.org/updated-link' } });
+    fireEvent.change(screen.getByLabelText('Text'), { target: { value: 'Updated sample link' } });
+    fireEvent.click(screen.getByRole('button', { name: 'Apply' }));
+
+    await waitForElementToBeRemoved(() => screen.getByRole('button', { name: 'Apply' }));
+
+    // cursor should be positioned after the link and the text should be updated.
+    expect(editor.from).toBe(20);
+    expect(editor.to).toBe(20);
+    expect(getJsonContent()).toEqual({
+      type: 'paragraph',
+      attrs: expect.any(Object),
+      content: [
+        {
+          type: 'text',
+          text: 'Updated sample link',
+          marks: [
+            {
+              type: 'link',
+              attrs: { auto: false, href: 'https://www.example.org/updated-link', target: null, title: null },
+            },
+          ],
+        },
+        { type: 'text', text: ' with some other content.' },
+      ],
+    });
+  });
+
+  it('Removes the link when the URL is cleared', async () => {
+    const { editor, getJsonContent } = await renderWithEditor(<LinkButton />, {
+      content: '<a href="https://www.example.org/my-link">Sample link</a> with some other content.',
+    });
+
+    // jump to the middle of the link.
+    await act(() => editor.selectText(3));
+
+    // open the modal and clear the link.
+    await openModal();
+    fireEvent.change(screen.getByLabelText('URL'), { target: { value: '' } });
+    fireEvent.click(screen.getByRole('button', { name: 'Apply' }));
+
+    await waitForElementToBeRemoved(() => screen.getByRole('button', { name: 'Apply' }));
+
+    // cursor should be positioned after the link and the link should be removed.
+    expect(editor.from).toBe(12);
+    expect(editor.to).toBe(12);
+    expect(getJsonContent()).toEqual({
+      type: 'paragraph',
+      attrs: expect.any(Object),
+      content: [{ type: 'text', text: 'Sample link with some other content.' }],
+    });
+  });
+
+  it('Removes the content when the text is cleared', async () => {
+    const { editor, getJsonContent } = await renderWithEditor(<LinkButton />, {
+      content: '<a href="https://www.example.org/my-link">Sample link</a> with some other content.',
+    });
+
+    // jump to the middle of the link.
+    await act(() => editor.selectText(3));
+
+    // open the modal and clear the text.
+    await openModal();
+    fireEvent.change(screen.getByLabelText('Text'), { target: { value: '' } });
+    fireEvent.click(screen.getByRole('button', { name: 'Apply' }));
+
+    await waitForElementToBeRemoved(() => screen.getByRole('button', { name: 'Apply' }));
+
+    // cursor should be positioned where the link was and the link+text should be removed.
+    expect(editor.from).toBe(1);
+    expect(editor.to).toBe(1);
+    expect(getJsonContent()).toEqual({
+      type: 'paragraph',
+      attrs: expect.any(Object),
+      content: [{ type: 'text', text: ' with some other content.' }],
+    });
+  });
+
+  it.each([
+    ['Link fully selected', 1, 12, 'Sample link'],
+    ['Link partially selected', 2, 4, 'Sample link'],
+    ['Link partially selected along with other content', 8, 15, 'Sample link wi'],
+  ])(
+    'Expands selection when a link is partially selected - %s',
+    async (description: string, from: number, to: number, expectedSelection: string) => {
+      const { editor, getSelectedText } = await renderWithEditor(<LinkButton />, {
+        content: '<a href="https://www.example.org/my-link">Sample link</a> <strong>with</strong> some other content.',
+      });
+
+      await act(() => editor.selectText({ from, to }));
+      await openModal();
+
+      expect(getSelectedText()).toBe(expectedSelection);
+    },
+  );
+
+  it('Updates full selection when it is expanded from what was initially selected', async () => {
+    const { editor, getJsonContent } = await renderWithEditor(<LinkButton />, {
+      content: '<a href="https://www.example.org/my-link">Sample link</a> <strong>with</strong> some other content.',
+    });
+
+    // jump to the middle of the link and select some of the text after it.
+    await act(() => editor.selectText({ from: 3, to: 22 }));
+
+    // open the modal and apply the link to the selection.
+    await openModal();
+    fireEvent.click(screen.getByRole('button', { name: 'Apply' }));
+
+    await waitForElementToBeRemoved(() => screen.getByRole('button', { name: 'Apply' }));
+
+    // link should be applied to the additional selected text ("with some"), formatting should be preserved.
+    expect(editor.from).toBe(22);
+    expect(editor.to).toBe(22);
+    expect(getJsonContent()).toEqual({
+      type: 'paragraph',
+      attrs: expect.any(Object),
+      content: [
+        {
+          type: 'text',
+          text: 'Sample link ',
+          marks: [
+            {
+              type: 'link',
+              attrs: { auto: false, href: 'https://www.example.org/my-link', target: null, title: null },
+            },
+          ],
+        },
+        {
+          type: 'text',
+          text: 'with',
+          marks: [
+            {
+              type: 'link',
+              attrs: { auto: false, href: 'https://www.example.org/my-link', target: null, title: null },
+            },
+            { type: 'bold' },
+          ],
+        },
+        {
+          type: 'text',
+          text: ' some',
+          marks: [
+            {
+              type: 'link',
+              attrs: { auto: false, href: 'https://www.example.org/my-link', target: null, title: null },
+            },
+          ],
+        },
+        { type: 'text', text: ' other content.' },
+      ],
+    });
+  });
+
+  it('Updates text and formatting when selection has a mixture of formatting', async () => {
+    const { editor, getJsonContent } = await renderWithEditor(<LinkButton />, {
+      content: '<a href="https://www.example.org/my-link">Sample link</a> <strong>with</strong> some other content.',
+    });
+
+    // jump to the middle of the link and select some of the text after it.
+    await act(() => editor.selectText({ from: 3, to: 22 }));
+
+    // open the modal and apply the link to the selection.
+    await openModal();
+    fireEvent.change(screen.getByLabelText('Text'), { target: { value: 'Updated sample link and' } });
+    fireEvent.click(screen.getByRole('button', { name: 'Apply' }));
+
+    await waitForElementToBeRemoved(() => screen.getByRole('button', { name: 'Apply' }));
+
+    // link should be applied and text should be updated.
+    expect(editor.from).toBe(24);
+    expect(editor.to).toBe(24);
+    expect(getJsonContent()).toEqual({
+      type: 'paragraph',
+      attrs: expect.any(Object),
+      content: [
+        {
+          type: 'text',
+          text: 'Updated sample link and',
+          marks: [
+            {
+              type: 'link',
+              attrs: { auto: false, href: 'https://www.example.org/my-link', target: null, title: null },
+            },
+          ],
+        },
+        { type: 'text', text: ' other content.' },
+      ],
+    });
+  });
+
+  it('Opens the modal when clicking the keyboard shortcut', async () => {
+    const { editor, elements } = await renderWithEditor(<LinkButton />, {
+      content: '<a href="https://www.example.org/my-link">Sample link</a> with some other content.',
+    });
+
+    // jump to the middle of the link.
+    await act(() => editor.selectText(5));
+
+    // press the keyboard shortcut.
+    fireEvent.keyDown(elements.editor, { key: 'k', ctrlKey: true });
+
+    // verify the modal opens and has populated with where the link details where our cursor is positioned.
+    expect(await screen.findByLabelText('URL')).toHaveValue('https://www.example.org/my-link');
+    expect(await screen.findByLabelText('Text')).toHaveValue('Sample link');
+  });
+
+  it('Closes the modal when clicking on the cancel button', async () => {
+    await renderWithEditor(<LinkButton />);
+
+    // open the modal and assert it is visible.
+    await openModal();
+    const modalHeading = screen.getByRole('heading', { name: 'Link' });
+    expect(modalHeading).toBeInTheDocument();
+
+    // close the modal and assert it has disappeared.
+    fireEvent.click(screen.getByRole('button', { name: 'Cancel' }));
+    expect(modalHeading).not.toBeInTheDocument();
+  });
+});

package/src/EditorToolbar/Tools/Link/LinkButton.tsx

@@ -0,0 +1,56 @@
+import React, { useCallback, useState } from 'react';
+import InsertLinkRoundedIcon from '@mui/icons-material/InsertLinkRounded';
+import LinkModal from './LinkModal';
+import { LinkFormData } from './Form/LinkForm';
+import ToolbarButton from '../../../ui/ToolbarButton/ToolbarButton';
+import { useActive, useCommands, useExtensionEvent } from '@remirror/react';
+import { LinkExtension } from '../../../Extensions/LinkExtension/LinkExtension';
+
+type LinkButtonProps = {
+  inPopover?: boolean;
+};
+
+const LinkButton = ({ inPopover = false }: LinkButtonProps) => {
+  const [showModal, setShowModal] = useState(false);
+  const { selectLink, updateLink } = useCommands<LinkExtension>();
+  const active = useActive<LinkExtension>();
+  const handleClick = () => {
+    if (!showModal) {
+      selectLink();
+
+      // form element are uncontrolled, let the event loop run to
+      // update the selected text in state before showing the modal.
+      requestAnimationFrame(() => {
+        setShowModal(true);
+      });
+    }
+  };
+  const handleSubmit = (data: LinkFormData) => {
+    updateLink(data);
+    setShowModal(false);
+  };
+
+  if (!inPopover) {
+    // when Ctrl+K is pressed show the modal, only registered in the toolbar button instance to avoid the key press
+    // being double handled.
+    useExtensionEvent(
+      LinkExtension,
+      'onShortcut',
+      useCallback(() => handleClick(), []),
+    );
+  }
+
+  return (
+    <>
+      <ToolbarButton
+        handleOnClick={handleClick}
+        isActive={active.link()}
+        icon={<InsertLinkRoundedIcon />}
+        label="Link (cmd+K)"
+      />
+      {showModal && <LinkModal onCancel={() => setShowModal(false)} onSubmit={handleSubmit} />}
+    </>
+  );
+};
+
+export default LinkButton;

package/src/EditorToolbar/Tools/Link/LinkModal.tsx

@@ -0,0 +1,29 @@
+import { getMarkRanges } from 'remirror';
+import LinkForm, { LinkFormData } from './Form/LinkForm';
+import React from 'react';
+import { useRemirrorContext, useCurrentSelection } from '@remirror/react';
+import FormModal from '../../../ui/Modal/FormModal';
+import { SubmitHandler } from 'react-hook-form';
+
+type LinkModalProps = {
+  onCancel: () => void;
+  onSubmit: SubmitHandler<LinkFormData>;
+};
+
+const LinkModal = ({ onCancel, onSubmit }: LinkModalProps) => {
+  const {
+    helpers,
+    view: { state },
+  } = useRemirrorContext();
+  const selection = useCurrentSelection();
+  const currentLink = getMarkRanges(selection, 'link')[0];
+  const selectedText = helpers.getTextBetween(selection.from, selection.to, state.doc);
+
+  return (
+    <FormModal title="Link" onCancel={onCancel}>
+      <LinkForm data={{ ...currentLink?.mark.attrs, text: selectedText }} onSubmit={onSubmit} />
+    </FormModal>
+  );
+};
+
+export default LinkModal;

package/src/EditorToolbar/Tools/Link/RemoveLinkButton.spec.tsx

@@ -0,0 +1,46 @@
+import '@testing-library/jest-dom';
+import { act, screen, fireEvent } from '@testing-library/react';
+import React from 'react';
+import { renderWithEditor } from '../../../../tests';
+import RemoveLinkButton from './RemoveLinkButton';
+
+describe('RemoveLinkButton', () => {
+  it('Removes a link', async () => {
+    const { editor, getJsonContent } = await renderWithEditor(<RemoveLinkButton />, {
+      content:
+        '<a href="https://www.example.org/my-link">Sample link</a> with some other content and ' +
+        '<a href="https://www.example.org/another-link">another link</a>.',
+    });
+
+    // move the cursor to inside of the link.
+    await act(() => editor.selectText(5));
+
+    // remove the link.
+    fireEvent.click(screen.getByRole('button', { name: 'Remove link' }));
+
+    // make sure the link has been removed.
+    expect(getJsonContent()).toEqual({
+      type: 'paragraph',
+      attrs: expect.any(Object),
+      content: [
+        { type: 'text', text: 'Sample link with some other content and ' },
+        {
+          type: 'text',
+          text: 'another link',
+          marks: [
+            {
+              type: 'link',
+              attrs: {
+                auto: false,
+                href: 'https://www.example.org/another-link',
+                target: null,
+                title: null,
+              },
+            },
+          ],
+        },
+        { type: 'text', text: '.' },
+      ],
+    });
+  });
+});

package/src/EditorToolbar/Tools/Link/RemoveLinkButton.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { useRemirrorContext, useChainedCommands } from '@remirror/react';
+import ToolbarButton from '../../../ui/ToolbarButton/ToolbarButton';
+import LinkOffIcon from '@mui/icons-material/LinkOff';
+
+const RemoveLinkButton = () => {
+  const { commands } = useRemirrorContext({ autoUpdate: true });
+  const chain = useChainedCommands();
+  const enabled = commands.removeLink.enabled();
+  const handleClick = () => {
+    if (enabled) {
+      chain.removeLink().focus().run();
+    }
+  };
+
+  return (
+    <ToolbarButton
+      handleOnClick={handleClick}
+      isActive={false}
+      isDisabled={!enabled}
+      icon={<LinkOffIcon />}
+      label="Remove link"
+    />
+  );
+};
+
+export default RemoveLinkButton;

package/src/EditorToolbar/Tools/Redo/RedoButton.spec.tsx

@@ -0,0 +1,59 @@
+import '@testing-library/jest-dom';
+import { render, screen, fireEvent } from '@testing-library/react';
+import Editor from '../../../Editor/Editor';
+import React from 'react';
+
+describe('Redo button', () => {
+  it('Renders the redo button', () => {
+    render(<Editor />);
+    expect(screen.getByRole('button', { name: 'Redo (shift+cmd+Z)' })).toBeInTheDocument();
+  });
+
+  it('Renders a disabled button if you have not made any changes yet', () => {
+    render(<Editor />);
+    const redo = screen.getByRole('button', { name: 'Redo (shift+cmd+Z)' });
+    expect(redo).toBeDisabled();
+  });
+
+  it('Enables the button when you perform an action and then revert it', () => {
+    const { baseElement } = render(<Editor />);
+
+    // perform some action
+    const leftAlignButton = baseElement.querySelector('button[title="Align left"]') as HTMLButtonElement;
+    expect(leftAlignButton).toBeTruthy();
+    fireEvent.click(leftAlignButton);
+    expect(baseElement.querySelector('p[data-node-text-align="left"]')).toBeTruthy();
+
+    // Revert this action
+    const undo = screen.getByRole('button', { name: 'Undo (cmd+Z)' });
+    fireEvent.click(undo);
+    expect(baseElement.querySelector('p[data-node-text-align="left"]')).toBeFalsy();
+
+    // Check that this enables the redo button
+    const redo = screen.getByRole('button', { name: 'Redo (shift+cmd+Z)' });
+    expect(redo).not.toBeDisabled();
+  });
+
+  it('Reverts this action when clicked', () => {
+    const { baseElement } = render(<Editor />);
+
+    // perform some action
+    const leftAlignButton = baseElement.querySelector('button[title="Align left"]') as HTMLButtonElement;
+    expect(leftAlignButton).toBeTruthy();
+    fireEvent.click(leftAlignButton);
+    expect(baseElement.querySelector('p[data-node-text-align="left"]')).toBeTruthy();
+
+    // Revert this action
+    const undo = screen.getByRole('button', { name: 'Undo (cmd+Z)' });
+    fireEvent.click(undo);
+    expect(baseElement.querySelector('p[data-node-text-align="left"]')).toBeFalsy();
+
+    // Check that this enables the redo button
+    const redo = screen.getByRole('button', { name: 'Redo (shift+cmd+Z)' });
+    expect(redo).not.toBeDisabled();
+
+    // Click the redo button and check that this has reverted the previous action
+    fireEvent.click(redo);
+    expect(baseElement.querySelector('p[data-node-text-align="left"]')).toBeTruthy();
+  });
+});

package/src/EditorToolbar/Tools/Redo/RedoButton.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { useCommands, useHelpers } from '@remirror/react';
+import { HistoryExtension } from 'remirror/extensions';
+import ToolbarButton from '../../../ui/ToolbarButton/ToolbarButton';
+import RedoRoundedIcon from '@mui/icons-material/RedoRounded';
+
+const RedoButton = () => {
+  const { redo } = useCommands<HistoryExtension>();
+  const { redoDepth } = useHelpers<HistoryExtension>(true);
+
+  const handleSelect = () => {
+    if (redo.enabled()) {
+      redo();
+    }
+  };
+
+  const enabled = redoDepth() > 0;
+
+  return (
+    <ToolbarButton
+      handleOnClick={handleSelect}
+      isDisabled={!enabled}
+      isActive={false}
+      icon={<RedoRoundedIcon />}
+      label="Redo (shift+cmd+Z)"
+    />
+  );
+};
+
+export default RedoButton;

package/src/EditorToolbar/Tools/TextAlign/CenterAlign/CenterAlignButton.spec.tsx

@@ -0,0 +1,39 @@
+import '@testing-library/jest-dom';
+import { render, fireEvent } from '@testing-library/react';
+import Editor from '../../../../Editor/Editor';
+import React from 'react';
+
+describe('Center align button', () => {
+  it('Renders the center align button', () => {
+    const { baseElement, getByRole } = render(<Editor />);
+    expect(baseElement).toBeTruthy();
+    expect(getByRole('button', { name: 'Align center' })).toBeTruthy();
+  });
+
+  it('Applies active status after selecting center align button', () => {
+    const { baseElement, getByRole } = render(<Editor />);
+    expect(baseElement).toBeTruthy();
+
+    const centerAlignButton = getByRole('button', { name: 'Align center' });
+    expect(centerAlignButton).toBeTruthy();
+    expect(centerAlignButton.classList.contains('is-active')).toBeFalsy();
+
+    fireEvent.click(centerAlignButton);
+
+    setTimeout(() => {
+      expect(centerAlignButton.classList.contains('is-active')).toBeTruthy();
+    }, 50);
+  });
+
+  it('Should apply center alignment to editor after clicking button', () => {
+    const { baseElement, getByRole } = render(<Editor />);
+    expect(baseElement).toBeTruthy();
+    expect(baseElement.querySelector('p[data-node-text-align="center"]')).toBeFalsy();
+
+    const centerAlignButton = getByRole('button', { name: 'Align center' });
+    expect(centerAlignButton).toBeTruthy();
+    fireEvent.click(centerAlignButton);
+
+    expect(baseElement.querySelector('p[data-node-text-align="center"]')).toBeTruthy();
+  });
+});

package/src/EditorToolbar/Tools/TextAlign/CenterAlign/CenterAlignButton.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { useCommands, useChainedCommands } from '@remirror/react';
+import { NodeFormattingExtension } from '@remirror/extension-node-formatting';
+import ToolbarButton from '../../../../ui/ToolbarButton/ToolbarButton';
+import FormatAlignCenterIcon from '@mui/icons-material/FormatAlignCenter';
+
+const CenterAlignButton = () => {
+  const { centerAlign } = useCommands<NodeFormattingExtension>();
+  const chain = useChainedCommands();
+
+  const handleSelect = () => {
+    if (centerAlign.enabled()) {
+      chain.centerAlign().focus().run();
+    }
+  };
+
+  const active = centerAlign.active?.() || false;
+  const enabled = centerAlign.enabled();
+
+  return (
+    <ToolbarButton
+      handleOnClick={handleSelect}
+      isDisabled={!enabled}
+      isActive={active}
+      icon={<FormatAlignCenterIcon />}
+      label="Align center"
+    />
+  );
+};
+
+export default CenterAlignButton;

package/src/EditorToolbar/Tools/TextAlign/JustifyAlign/JustifyAlignButton.spec.tsx

@@ -0,0 +1,39 @@
+import '@testing-library/jest-dom';
+import { render, fireEvent } from '@testing-library/react';
+import Editor from '../../../../Editor/Editor';
+import React from 'react';
+
+describe('Justify align button', () => {
+  it('Renders the justify align button', () => {
+    const { baseElement, getByRole } = render(<Editor />);
+    expect(baseElement).toBeTruthy();
+    expect(getByRole('button', { name: 'Justify' })).toBeTruthy();
+  });
+
+  it('Applies active status after selecting justify align button', () => {
+    const { baseElement, getByRole } = render(<Editor />);
+    expect(baseElement).toBeTruthy();
+
+    const justifyAlignButton = getByRole('button', { name: 'Justify' });
+    expect(justifyAlignButton).toBeTruthy();
+    expect(justifyAlignButton.classList.contains('is-active')).toBeFalsy();
+
+    fireEvent.click(justifyAlignButton);
+
+    setTimeout(() => {
+      expect(justifyAlignButton.classList.contains('is-active')).toBeTruthy();
+    }, 50);
+  });
+
+  it('Should apply justify alignment to editor after clicking button', () => {
+    const { baseElement, getByRole } = render(<Editor />);
+    expect(baseElement).toBeTruthy();
+    expect(baseElement.querySelector('p[data-node-text-align="justify"]')).toBeFalsy();
+
+    const justifyAlignButton = getByRole('button', { name: 'Justify' });
+    expect(justifyAlignButton).toBeTruthy();
+    fireEvent.click(justifyAlignButton);
+
+    expect(baseElement.querySelector('p[data-node-text-align="justify"]')).toBeTruthy();
+  });
+});

package/src/EditorToolbar/Tools/TextAlign/JustifyAlign/JustifyAlignButton.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { useCommands, useChainedCommands } from '@remirror/react';
+import { NodeFormattingExtension } from '@remirror/extension-node-formatting';
+import ToolbarButton from '../../../../ui/ToolbarButton/ToolbarButton';
+import FormatAlignJustifyIcon from '@mui/icons-material/FormatAlignJustify';
+
+const JustifyAlignButton = () => {
+  const { justifyAlign } = useCommands<NodeFormattingExtension>();
+  const chain = useChainedCommands();
+
+  const handleSelect = () => {
+    if (justifyAlign.enabled()) {
+      chain.justifyAlign().focus().run();
+    }
+  };
+
+  const active = justifyAlign.active?.() || false;
+  const enabled = justifyAlign.enabled();
+
+  return (
+    <ToolbarButton
+      handleOnClick={handleSelect}
+      isDisabled={!enabled}
+      isActive={active}
+      icon={<FormatAlignJustifyIcon />}
+      label="Justify"
+    />
+  );
+};
+
+export default JustifyAlignButton;