@squiz/formatted-text-editor 0.0.0-rbv2-20240530041851

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

@@ -0,0 +1,37 @@
+import { LinkForm, LinkFormData } from './Form/LinkForm';
+import React from 'react';
+import { useRemirrorContext } from '@remirror/react';
+import InsertLinkRoundedIcon from '@mui/icons-material/InsertLinkRounded';
+import FormModal from '../../../ui/Modal/FormModal';
+import { SubmitHandler } from 'react-hook-form';
+import { useExpandedSelection } from '../../../hooks';
+import { MarkName } from '../../../Extensions/Extensions';
+
+type LinkModalProps = {
+  onCancel: () => void;
+  onSubmit: SubmitHandler<LinkFormData>;
+};
+
+const LinkModal = ({ onCancel, onSubmit }: LinkModalProps) => {
+  const {
+    helpers,
+    view: { state },
+  } = useRemirrorContext();
+  const { selection, marks } = useExpandedSelection([MarkName.Link, MarkName.AssetLink]);
+  const selectedText = helpers.getTextBetween(selection.from, selection.to, state.doc);
+  const data = {
+    linkType: marks[0]?.type?.name === MarkName.Link ? MarkName.Link : MarkName.AssetLink,
+    text: selectedText,
+    link: { ...marks.find((mark) => mark.type.name === 'link')?.attrs },
+    assetLink: { ...marks.find((mark) => mark.type.name === MarkName.AssetLink)?.attrs },
+    range: { from: selection.from, to: selection.to },
+  };
+
+  return (
+    <FormModal title="Link" icon={<InsertLinkRoundedIcon />} onCancel={onCancel}>
+      <LinkForm data={data} onSubmit={onSubmit} />
+    </FormModal>
+  );
+};
+
+export default LinkModal;

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

@@ -0,0 +1,143 @@
+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 />, {
+      context: { editor: { matrix: { matrixDomain: 'my-matrix.squiz.net' } } },
+      content: {
+        type: 'doc',
+        content: [
+          {
+            type: 'paragraph',
+            content: [
+              {
+                type: 'text',
+                text: 'Sample link',
+                marks: [
+                  {
+                    type: 'assetLink',
+                    attrs: { matrixAssetId: '123', matrixIdentifier: 'matrix-api-identifier', target: '_blank' },
+                  },
+                ],
+              },
+              { type: 'text', text: ' with ' },
+              {
+                type: 'text',
+                text: 'another link',
+                marks: [{ type: 'link', attrs: { href: 'https://www.example.org/another-link', target: '_self' } }],
+              },
+            ],
+          },
+        ],
+      },
+    });
+
+    // select all of the text.
+    await act(() => editor.selectText('all'));
+
+    // remove the links.
+    fireEvent.click(screen.getByRole('button', { name: 'Remove link (Shift+Ctrl+K)' }));
+
+    // make sure both types of link have been removed.
+    expect(getJsonContent()).toEqual({
+      type: 'paragraph',
+      attrs: expect.any(Object),
+      content: [{ type: 'text', text: 'Sample link with another link' }],
+    });
+  });
+
+  it('Removes the link when clicking the keyboard shortcut', async () => {
+    const { elements, editor, getJsonContent } = await renderWithEditor(<RemoveLinkButton />, {
+      context: { editor: { matrix: { matrixDomain: 'my-matrix.squiz.net' } } },
+      content: {
+        type: 'doc',
+        content: [
+          {
+            type: 'paragraph',
+            content: [
+              {
+                type: 'text',
+                text: 'Sample link',
+                marks: [
+                  {
+                    type: 'assetLink',
+                    attrs: { matrixAssetId: '123', matrixIdentifier: 'matrix-api-identifier', target: '_blank' },
+                  },
+                ],
+              },
+              { type: 'text', text: ' with ' },
+              {
+                type: 'text',
+                text: 'another link',
+                marks: [{ type: 'link', attrs: { href: 'https://www.example.org/another-link', target: '_self' } }],
+              },
+            ],
+          },
+        ],
+      },
+    });
+
+    // select all of the text.
+    await act(() => editor.selectText('all'));
+
+    // press the keyboard shortcut.
+    fireEvent.keyDown(elements.editor, { key: 'k', ctrlKey: true, shiftKey: true });
+
+    // make sure both types of link have been removed.
+    expect(getJsonContent()).toEqual({
+      type: 'paragraph',
+      attrs: expect.any(Object),
+      content: [{ type: 'text', text: 'Sample link with another link' }],
+    });
+  });
+
+  it('Enables the Remove link button when link text is selected', async () => {
+    const { editor } = await renderWithEditor(<RemoveLinkButton />, {
+      content: '<a href="https://www.example.org/my-link">Sample link</a> with some other content.',
+    });
+
+    // expect remove button to be disabled
+    expect(screen.getByRole('button', { name: 'Remove link (Shift+Ctrl+K)' })).toBeDisabled();
+    // jump to the middle of the link.
+    await act(() => editor.selectText(3));
+    // expect remove button to be enabled
+    expect(screen.getByRole('button', { name: 'Remove link (Shift+Ctrl+K)' })).not.toBeDisabled();
+  });
+
+  it('Enables the Remove link button when asset link text is selected', async () => {
+    const { editor } = await renderWithEditor(<RemoveLinkButton />, {
+      context: { editor: { matrix: { matrixDomain: 'my-matrix.squiz.net' } } },
+      content: {
+        type: 'doc',
+        content: [
+          {
+            type: 'paragraph',
+            content: [
+              {
+                type: 'text',
+                text: 'Sample link',
+                marks: [
+                  {
+                    type: 'assetLink',
+                    attrs: { matrixAssetId: '123', matrixIdentifier: 'matrix-api-identifier', target: '_blank' },
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      },
+    });
+
+    // expect remove button to be disabled
+    expect(screen.getByRole('button', { name: 'Remove link (Shift+Ctrl+K)' })).toBeDisabled();
+    // jump to the middle of the link.
+    await act(() => editor.selectText(3));
+    // expect remove button to be enabled
+    expect(screen.getByRole('button', { name: 'Remove link (Shift+Ctrl+K)' })).not.toBeDisabled();
+  });
+});

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

@@ -0,0 +1,42 @@
+import React, { useCallback } from 'react';
+import { useChainedCommands, useActive, useKeymap } from '@remirror/react';
+import Button from '../../../ui/Button/Button';
+import LinkOffIcon from '@mui/icons-material/LinkOff';
+import { AssetLinkExtension } from '../../../Extensions/LinkExtension/AssetLinkExtension';
+import { LinkExtension } from '../../../Extensions/LinkExtension/LinkExtension';
+import { LinkButtonProps } from './LinkButton';
+import { getShortcutSymbol } from '../../../utils/getShortcutSymbol';
+
+const RemoveLinkButton = ({ inPopover = false }: LinkButtonProps) => {
+  const chain = useChainedCommands();
+  const active = useActive<LinkExtension | AssetLinkExtension>();
+  const disabled = !active.link() && !active.assetLink();
+
+  const handleClick = () => {
+    chain.removeLink().removeAssetLink().focus().run();
+  };
+  const handleShortcut = useCallback(() => {
+    handleClick();
+    // Prevent other key handlers being run
+    return true;
+  }, []);
+
+  // when Shift+Ctrl+k is pressed show the modal, only registered in the toolbar button instance to avoid the key press
+  // being double handled.
+  if (!inPopover) {
+    // disable the shortcut if the button is disabled
+    useKeymap('Shift-Mod-k', disabled ? () => true : handleShortcut);
+  }
+
+  return (
+    <Button
+      handleOnClick={handleClick}
+      isActive={false}
+      isDisabled={disabled}
+      icon={<LinkOffIcon />}
+      label={`Remove link (Shift+${getShortcutSymbol()}+K)`}
+    />
+  );
+};
+
+export default RemoveLinkButton;

package/src/EditorToolbar/Tools/Lists/ListButtons.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import OrderedListButton from './OrderedList/OrderedListButton';
+import UnorderedListButton from './UnorderedList/UnorderedListButton';
+import { VerticalDivider } from '@remirror/react-components';
+
+const ListButtons = () => (
+  <>
+    <UnorderedListButton />
+    <OrderedListButton />
+    <VerticalDivider />
+  </>
+);
+
+export default ListButtons;

package/src/EditorToolbar/Tools/Lists/OrderedList/OrderListButton.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('Ordered list button', () => {
+  it('Renders the ordered list button', () => {
+    const { baseElement, getByRole } = render(<Editor />);
+    expect(baseElement).toBeTruthy();
+    expect(getByRole('button', { name: 'Ordered list' })).toBeTruthy();
+  });
+
+  it('Applies ordered list after selecting ordered list button', () => {
+    const { baseElement, getByRole } = render(<Editor />);
+    expect(baseElement).toBeTruthy();
+
+    const OrderedListButton = getByRole('button', { name: 'Ordered list' });
+    expect(OrderedListButton).toBeTruthy();
+    expect(OrderedListButton.classList.contains('is-active')).toBeFalsy();
+
+    fireEvent.click(OrderedListButton);
+
+    setTimeout(() => {
+      expect(OrderedListButton.classList.contains('is-active')).toBeTruthy();
+    }, 50);
+  });
+
+  it('Should apply order list to editor after clicking button', () => {
+    const { baseElement, getByRole } = render(<Editor />);
+    expect(baseElement).toBeTruthy();
+    expect(baseElement.querySelector('ol')).toBeFalsy();
+
+    const OrderedListButton = getByRole('button', { name: 'Ordered list' });
+    expect(OrderedListButton).toBeTruthy();
+    fireEvent.click(OrderedListButton);
+
+    expect(baseElement.querySelector('ol')).toBeTruthy();
+  });
+});

package/src/EditorToolbar/Tools/Lists/OrderedList/OrderedListButton.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { useCommands, useActive, useChainedCommands } from '@remirror/react';
+import { OrderedListExtension } from '@remirror/extension-list';
+import Button from '../../../../ui/Button/Button';
+import FormatListNumberedIcon from '@mui/icons-material/FormatListNumbered';
+
+const OrderedListButton = () => {
+  const { toggleOrderedList } = useCommands();
+  const chain = useChainedCommands();
+
+  const active = useActive<OrderedListExtension>();
+  const enabled = toggleOrderedList.enabled();
+  const handleSelect = () => {
+    if (toggleOrderedList.enabled()) {
+      chain.toggleOrderedList().focus().run();
+    }
+  };
+
+  return (
+    <Button
+      handleOnClick={handleSelect}
+      isDisabled={!enabled}
+      isActive={active.orderedList()}
+      icon={<FormatListNumberedIcon />}
+      label="Ordered list"
+    />
+  );
+};
+
+export default OrderedListButton;

package/src/EditorToolbar/Tools/Lists/UnorderedList/UnorderedList.spec.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import '@testing-library/jest-dom';
+import { render, screen, fireEvent } from '@testing-library/react';
+import Editor from '../../../../Editor/Editor';
+
+describe('Unordered list button', () => {
+  it('Renders the unordered list button', () => {
+    render(<Editor />);
+    expect(screen.getByRole('button', { name: 'Unordered list' })).toBeInTheDocument();
+  });
+
+  it('Activates the button if clicked', () => {
+    render(<Editor />);
+    expect(screen.getByRole('button', { name: 'Unordered list' }).classList.contains('squiz-fte-btn')).toBeTruthy();
+    const ul = screen.getByRole('button', { name: 'Unordered list' });
+    fireEvent.click(ul);
+    expect(ul.classList.contains('squiz-fte-btn--is-active')).toBeTruthy();
+  });
+});

package/src/EditorToolbar/Tools/Lists/UnorderedList/UnorderedListButton.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { useCommands, useActive, useChainedCommands } from '@remirror/react';
+import { BulletListExtension } from 'remirror/extensions';
+import Button from '../../../../ui/Button/Button';
+import FormatListBulletedRoundedIcon from '@mui/icons-material/FormatListBulletedRounded';
+
+const UnorderedListButton = () => {
+  const { toggleBulletList } = useCommands();
+  const chain = useChainedCommands();
+
+  const active = useActive<BulletListExtension>();
+  const enabled = toggleBulletList.enabled();
+  const handleSelect = () => {
+    if (toggleBulletList.enabled()) {
+      chain.toggleBulletList().focus().run();
+    }
+  };
+
+  return (
+    <Button
+      handleOnClick={handleSelect}
+      isDisabled={!enabled}
+      isActive={active.bulletList()}
+      icon={<FormatListBulletedRoundedIcon />}
+      label="Unordered list"
+    />
+  );
+};
+
+export default UnorderedListButton;

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+Ctrl+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+Ctrl+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 (Ctrl+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+Ctrl+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 (Ctrl+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+Ctrl+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,31 @@
+import React from 'react';
+import { useCommands, useHelpers } from '@remirror/react';
+import { HistoryExtension } from 'remirror/extensions';
+import Button from '../../../ui/Button/Button';
+import RedoRoundedIcon from '@mui/icons-material/RedoRounded';
+import { getShortcutSymbol } from '../../../utils/getShortcutSymbol';
+
+const RedoButton = () => {
+  const { redo } = useCommands<HistoryExtension>();
+  const { redoDepth } = useHelpers<HistoryExtension>(true);
+
+  const handleSelect = () => {
+    if (redo.enabled()) {
+      redo();
+    }
+  };
+
+  const enabled = redoDepth() > 0;
+
+  return (
+    <Button
+      handleOnClick={handleSelect}
+      isDisabled={!enabled}
+      isActive={false}
+      icon={<RedoRoundedIcon />}
+      label={`Redo (Shift+${getShortcutSymbol()}+Z)`}
+    />
+  );
+};
+
+export default RedoButton;

package/src/EditorToolbar/Tools/Table/TableButton.spec.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import '@testing-library/jest-dom';
+import { screen, fireEvent } from '@testing-library/react';
+import { renderWithEditor } from '../../../../tests';
+import TableButton from './TableButton';
+
+const defaultTableMarkup = `<div class="remirror-table-show-controllers"><table class="remirror-table remirror-table-with-controllers" data-controllers-injected="" style="min-width: 40px;"><colgroup class="remirror-table-colgroup"><col><col><col><col></colgroup><tbody class="remirror-table-tbody-with-controllers"><tr><th contenteditable="false" class="remirror-table-controller remirror-controllers-toggle selectedCell" data-controller-cell=""><div contenteditable="false" class="remirror-table-controller-wrapper"><div contenteditable="false"></div><div class="remirror-table-controller-trigger-area"></div><div class="remirror-table-controller-trigger-area"></div><div class="remirror-table-controller-mark-row-corner"></div><div class="remirror-table-controller-mark-column-corner"></div></div></th><th contenteditable="false" class="remirror-table-controller remirror-controllers-toggle" data-controller-cell=""><div contenteditable="false" class="remirror-table-controller-wrapper"><div contenteditable="false"></div><div class="remirror-table-controller-trigger-area"></div><div class="remirror-table-controller-trigger-area"></div><div class="remirror-table-controller-mark-row-corner"></div><div class="remirror-table-controller-mark-column-corner"></div></div></th><th contenteditable="false" class="remirror-table-controller remirror-controllers-toggle" data-controller-cell=""><div contenteditable="false" class="remirror-table-controller-wrapper"><div contenteditable="false"></div><div class="remirror-table-controller-trigger-area"></div><div class="remirror-table-controller-trigger-area"></div><div class="remirror-table-controller-mark-row-corner"></div><div class="remirror-table-controller-mark-column-corner"></div></div></th><th contenteditable="false" class="remirror-table-controller remirror-controllers-toggle" data-controller-cell=""><div contenteditable="false" class="remirror-table-controller-wrapper"><div contenteditable="false"></div><div class="remirror-table-controller-trigger-area"></div><div class="remirror-table-controller-trigger-area"></div><div class="remirror-table-controller-mark-row-corner"></div><div class="remirror-table-controller-mark-column-corner"></div></div></th></tr><tr><th contenteditable="false" class="remirror-table-controller remirror-controllers-toggle" data-controller-cell=""><div contenteditable="false" class="remirror-table-controller-wrapper"><div contenteditable="false"></div><div class="remirror-table-controller-trigger-area"></div><div class="remirror-table-controller-trigger-area"></div><div class="remirror-table-controller-mark-row-corner"></div><div class="remirror-table-controller-mark-column-corner"></div></div></th><td><p style=""><br class="ProseMirror-trailingBreak"></p></td><td><p style=""><br class="ProseMirror-trailingBreak"></p></td><td><p style=""><br class="ProseMirror-trailingBreak"></p></td></tr><tr><th contenteditable="false" class="remirror-table-controller remirror-controllers-toggle" data-controller-cell=""><div contenteditable="false" class="remirror-table-controller-wrapper"><div contenteditable="false"></div><div class="remirror-table-controller-trigger-area"></div><div class="remirror-table-controller-trigger-area"></div><div class="remirror-table-controller-mark-row-corner"></div><div class="remirror-table-controller-mark-column-corner"></div></div></th><td><p style=""><br class="ProseMirror-trailingBreak"></p></td><td><p style=""><br class="ProseMirror-trailingBreak"></p></td><td><p style=""><br class="ProseMirror-trailingBreak"></p></td></tr><tr><th contenteditable="false" class="remirror-table-controller remirror-controllers-toggle" data-controller-cell=""><div contenteditable="false" class="remirror-table-controller-wrapper"><div contenteditable="false"></div><div class="remirror-table-controller-trigger-area"></div><div class="remirror-table-controller-trigger-area"></div><div class="remirror-table-controller-mark-row-corner"></div><div class="remirror-table-controller-mark-column-corner"></div></div></th><td><p style=""><br class="ProseMirror-trailingBreak"></p></td><td><p style=""><br class="ProseMirror-trailingBreak"></p></td><td><p style=""><br class="ProseMirror-trailingBreak"></p></td></tr><tr><th contenteditable="false" class="remirror-table-controller remirror-controllers-toggle" data-controller-cell=""><div contenteditable="false" class="remirror-table-controller-wrapper"><div contenteditable="false"></div><div class="remirror-table-controller-trigger-area"></div><div class="remirror-table-controller-trigger-area"></div><div class="remirror-table-controller-mark-row-corner"></div><div class="remirror-table-controller-mark-column-corner"></div></div></th><td><p style=""><br class="ProseMirror-trailingBreak"></p></td><td><p style=""><br class="ProseMirror-trailingBreak"></p></td><td><p style=""><br class="ProseMirror-trailingBreak"></p></td></tr></tbody></table><div></div></div>`;
+
+describe('Table button', () => {
+  it('Renders the table button', async () => {
+    await renderWithEditor(<TableButton />, { content: 'Some nonsense content here' });
+    expect(screen.getByRole('button', { name: 'Insert table' })).toBeInTheDocument();
+  });
+
+  it('Inserts a table into the editor content after clicking button', async () => {
+    const { getHtmlContent } = await renderWithEditor(<TableButton />, {
+      content: '<p>Hello Mr Goat</p>',
+    });
+
+    const horizontalLine = screen.getByRole('button', { name: 'Insert table' });
+    fireEvent.click(horizontalLine);
+
+    expect(getHtmlContent()).toBe(defaultTableMarkup + '<p style="">Hello Mr Goat</p>');
+  });
+});

package/src/EditorToolbar/Tools/Table/TableButton.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { useCommands, useActive } from '@remirror/react';
+import { VerticalDivider } from '@remirror/react-components';
+import { TableExtension } from '@remirror/extension-react-tables';
+import Button from '../../../ui/Button/Button';
+import TableViewRoundedIcon from '@mui/icons-material/TableViewRounded';
+
+const TableButton = () => {
+  const { createTable } = useCommands();
+
+  const active = useActive<TableExtension>();
+  const enabled = createTable.enabled();
+
+  const handleSelect = () => {
+    createTable({ rowsCount: 4, columnsCount: 3, withHeaderRow: false });
+  };
+
+  return (
+    <>
+      <Button
+        handleOnClick={handleSelect}
+        isDisabled={!enabled}
+        isActive={active.table()}
+        icon={<TableViewRoundedIcon />}
+        label="Insert table"
+      />
+      <VerticalDivider />
+    </>
+  );
+};
+
+export default TableButton;

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 Button from '../../../../ui/Button/Button';
+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 (
+    <Button
+      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();
+  });
+});