@squiz/formatted-text-editor 1.5.1-alpha.6 → 1.12.0-alpha.14

package/.eslintrc.json

@@ -1,9 +1,14 @@
 {
+  "env": {
+    "jest/globals": true,
+    "cypress/globals": true
+  },
+  "plugins": ["cypress"],
   "extends": [
     // By extending from a plugin config, we can get recommended rules without having to add them manually.
-    "eslint:recommended",
     "plugin:react/recommended",
     "plugin:jsx-a11y/recommended",
+    "plugin:cypress/recommended",
     // This disables the formatting rules in ESLint that Prettier is going to be responsible for handling.
     // Make sure it"s always the last config, so it gets the chance to override other configs.
     "eslint-config-prettier"

package/CHANGELOG.md

@@ -3,6 +3,46 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [1.5.1-alpha.5](https://gitlab.squiz.net/developer-experience/cmp/compare/v1.5.1-alpha.4...v1.5.1-alpha.5) (2023-01-31)
+## [1.6.1-alpha.5](https://gitlab.squiz.net/developer-experience/cmp/compare/v1.6.1-alpha.3...v1.6.1-alpha.5) (2023-02-02)
+
+**Note:** Version bump only for package @squiz/formatted-text-editor
+
+
+
+
+
+## [1.6.1-alpha.4](https://gitlab.squiz.net/developer-experience/cmp/compare/v1.6.1-alpha.3...v1.6.1-alpha.4) (2023-02-02)
+
+**Note:** Version bump only for package @squiz/formatted-text-editor
+
+
+
+
+
+## [1.6.1-alpha.3](https://gitlab.squiz.net/developer-experience/cmp/compare/v1.6.1-alpha.2...v1.6.1-alpha.3) (2023-02-02)
+
+**Note:** Version bump only for package @squiz/formatted-text-editor
+
+
+
+
+
+## [1.6.1-alpha.2](https://gitlab.squiz.net/developer-experience/cmp/compare/v1.6.0...v1.6.1-alpha.2) (2023-02-02)
+
+**Note:** Version bump only for package @squiz/formatted-text-editor
+
+
+
+
+
+## [1.6.1-alpha.1](https://gitlab.squiz.net/developer-experience/cmp/compare/v1.6.0...v1.6.1-alpha.1) (2023-02-02)
+
+**Note:** Version bump only for package @squiz/formatted-text-editor
+
+
+
+
+
+## [1.6.1-alpha.0](https://gitlab.squiz.net/developer-experience/cmp/compare/v1.6.0...v1.6.1-alpha.0) (2023-02-02)
 
 **Note:** Version bump only for package @squiz/formatted-text-editor

package/README.md

@@ -25,13 +25,38 @@ npm run dev
 ```
 This will expose `http://localhost:5173/` and this can be viewed in the browser.
 
+> TIP: Make sure you have already installed the node modules at the root level of the repo.
 
 ## WIP: Contributing
 
-### WIP: Testing
+## Testing
 
-## Publish package to NPM
+Tests must be written when contributing to this package. Tests are automatically run in CI and test failure will result in unmerged code.
 
-This package will automatically be compiled and published to NPM as part of the monorepo CI publishing processes.
+### Unit testing
 
-It is possible to manually compile the package using `npm run compile`. This will not publish the package to NPM.
+This package using Jest to perform Unit testing. In addition to Jest we are using a few Testing Library utilities:
+
+- [React testing library](https://testing-library.com/docs/react-testing-library/intro/) - Enables React component testing
+- [Jest DOM](https://testing-library.com/docs/ecosystem-jest-dom/) - Enables custom matchers
+
+Tests should be co-located with componentry and should strive for maximum coverage.
+
+To run tests locally you can run:
+```sh
+npm run test
+```
+Or if you'd like to "watch" for changes:
+```sh
+npm run test:watch
+```
+
+### End to end testing
+
+This package uses [Cypress](https://docs.cypress.io/) for end to end testing.
+
+To run tests locally you can run:
+```sh
+npm run test:e2e
+```
+Cypress is configured to look at a preview dev environment on `http://localhost:8080`.

package/build.js

@@ -0,0 +1,11 @@
+const esbuild = require('esbuild');
+const { sassPlugin } = require('esbuild-sass-plugin');
+
+esbuild
+  .build({
+    entryPoints: ['src/index.scss'],
+    bundle: true,
+    outdir: 'lib',
+    plugins: [sassPlugin({ type: 'css' })],
+  })
+  .catch(() => process.exit(1));

package/cypress/e2e/bold.spec.cy.ts

@@ -0,0 +1,18 @@
+describe('The formatted text editor renders', () => {
+  it('Should toggle bold on highlighted text', () => {
+    cy.visit('/');
+
+    cy.get('.ProseMirror.remirror-editor')
+      .clear()
+      .type('It was the best of times it was the worst of times.')
+      .setSelection('best of times');
+
+    cy.findAllByRole('button', { name: 'Bold (cmd+B)' }).first().click();
+
+    cy.get('strong').should('include.text', 'best of times');
+
+    cy.findAllByRole('button', { name: 'Bold (cmd+B)' }).first().click();
+
+    cy.get('strong').should('not.exist');
+  });
+});

package/cypress/global.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="cypress" />
+
+declare namespace Cypress {
+  interface Chainable {
+    // Custom command
+    selection(subject: any, fn?: any): void;
+    setSelection(subject: any, query?: any, endQuery?: any): void;
+  }
+}

package/cypress/support/commands.ts

@@ -0,0 +1,130 @@
+// eslint-disable-next-line @typescript-eslint/triple-slash-reference
+/// <reference path="../global.d.ts" />
+
+import '@testing-library/cypress/add-commands';
+
+// ***********************************************
+// This example commands.ts shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+//
+// declare global {
+//   namespace Cypress {
+//     interface Chainable {
+//       login(email: string, password: string): Chainable<void>
+//       drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
+//     }
+//   }
+// }
+
+/**
+ * Credits
+ * @Bkucera: https://github.com/cypress-io/cypress/issues/2839#issuecomment-447012818
+ * @Phrogz: https://stackoverflow.com/a/10730777/1556245
+ *
+ * Usage
+ * ```
+ * // Types "foo" and then selects "fo"
+ * cy.get('input')
+ *   .type('foo')
+ *   .setSelection('fo')
+ *
+ * // Types "foo", "bar", "baz", and "qux" on separate lines, then selects "foo", "bar", and "baz"
+ * cy.get('textarea')
+ *   .type('foo{enter}bar{enter}baz{enter}qux{enter}')
+ *   .setSelection('foo', 'baz')
+ *
+ * // Types "foo" and then sets the cursor before the last letter
+ * cy.get('input')
+ *   .type('foo')
+ *   .setCursorAfter('fo')
+ *
+ * // Types "foo" and then sets the cursor at the beginning of the word
+ * cy.get('input')
+ *   .type('foo')
+ *   .setCursorBefore('foo')
+ *
+ * // `setSelection` can alternatively target starting and ending nodes using query strings,
+ * // plus specific offsets. The queries are processed via `Element.querySelector`.
+ * cy.get('body')
+ *   .setSelection({
+ *     anchorQuery: 'ul > li > p', // required
+ *     anchorOffset: 2 // default: 0
+ *     focusQuery: 'ul > li > p:last-child', // default: anchorQuery
+ *     focusOffset: 0 // default: 0
+ *    })
+ */
+
+// Low level command reused by `setSelection` and low level command `setCursor`
+Cypress.Commands.add('selection', { prevSubject: true }, (subject, fn) => {
+  cy.wrap(subject).trigger('mousedown').then(fn).trigger('mouseup');
+
+  cy.document().trigger('selectionchange');
+  return cy.wrap(subject);
+});
+
+Cypress.Commands.add('setSelection', { prevSubject: true }, (subject, query, endQuery) => {
+  return cy.wrap(subject).selection(($el: any[]) => {
+    if (typeof query === 'string') {
+      const anchorNode = getTextNode($el[0], query);
+      const focusNode = endQuery ? getTextNode($el[0], endQuery) : anchorNode;
+      const anchorOffset = anchorNode.wholeText.indexOf(query);
+      const focusOffset = endQuery
+        ? focusNode.wholeText.indexOf(endQuery) + endQuery.length
+        : anchorOffset + query.length;
+      setBaseAndExtent(anchorNode, anchorOffset, focusNode, focusOffset);
+    } else if (typeof query === 'object') {
+      const el = $el[0];
+      const anchorNode = getTextNode(el.querySelector(query.anchorQuery));
+      const anchorOffset = query.anchorOffset || 0;
+      const focusNode = query.focusQuery ? getTextNode(el.querySelector(query.focusQuery)) : anchorNode;
+      const focusOffset = query.focusOffset || 0;
+      setBaseAndExtent(anchorNode, anchorOffset, focusNode, focusOffset);
+    }
+  });
+});
+
+// Helper functions
+function getTextNode(el: HTMLElement, match?: any) {
+  const walk = document.createTreeWalker(el, NodeFilter.SHOW_TEXT, null);
+  if (!match) {
+    return walk.nextNode();
+  }
+
+  // const nodes = [];
+  let node;
+  while ((node = walk.nextNode())) {
+    if (node.wholeText.includes(match)) {
+      return node;
+    }
+  }
+}
+
+function setBaseAndExtent(...args) {
+  const document = args[0].ownerDocument;
+  document.getSelection().removeAllRanges();
+  document.getSelection().setBaseAndExtent(...args);
+}

package/cypress/support/e2e.ts

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/e2e.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands';
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

package/cypress/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["es5", "dom"],
+    "types": ["cypress", "@testing-library/cypress", "node"]
+  },
+  "include": ["**/*.ts"]
+}

package/cypress.config.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from 'cypress';
+
+export default defineConfig({
+  e2e: {
+    baseUrl: 'http://localhost:8080',
+  },
+});

package/{src → demo}/App.tsx

@@ -1,4 +1,4 @@
-import FormattedTextEditor from './FormattedTextEditor';
+import FormattedTextEditor from '../src/FormattedTextEditor';
 
 function App() {
   return (

package/{index.html → demo/index.html}

@@ -8,6 +8,6 @@
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
+    <script type="module" src="./main.tsx"></script>
   </body>
 </html>

package/demo/index.scss

@@ -0,0 +1,11 @@
+/* Global variables */
+:root {
+  --grey-200: #ededed;
+  --grey-300: #e0e0e0;
+  --grey-600: #707070;
+  --blue-100: #e6f1fa;
+  --blue-300: #0774d2;
+  --border-radius: 4px;
+}
+
+@import '../src/index.scss';

package/demo/main.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+import './index.scss';
+
+ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);

package/file-transformer.js

@@ -0,0 +1 @@
+module.exports = {};

package/jest.config.ts

@@ -0,0 +1,27 @@
+export default {
+  preset: 'ts-jest',
+  maxWorkers: 1,
+  clearMocks: true,
+  collectCoverage: true,
+  collectCoverageFrom: ['src/**/*.{ts,tsx}'],
+  errorOnDeprecated: true,
+  fakeTimers: {
+    enableGlobally: true,
+  },
+  resetMocks: true,
+  resetModules: true,
+  testEnvironment: 'jsdom',
+  moduleNameMapper: {
+    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|css|scss)$':
+      '<rootDir>/file-transformer.js',
+  },
+  // TODO: enable once directory structure is sorted and we have tests/more complete code being written.
+  // coverageThreshold: {
+  //   global: {
+  //     branches: 90,
+  //     functions: 90,
+  //     lines: 90,
+  //     statements: 90,
+  //   },
+  // },
+};

package/lib/Editor/Editor.d.ts

@@ -0,0 +1,6 @@
+import { RemirrorContentType } from '@remirror/core';
+type EditorProps = {
+    content?: RemirrorContentType;
+};
+declare const Editor: ({ content }: EditorProps) => JSX.Element;
+export default Editor;

package/lib/Editor/Editor.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { BoldExtension, ItalicExtension, NodeFormattingExtension, UnderlineExtension, wysiwygPreset, } from 'remirror/extensions';
+import { EditorComponent, Remirror, useRemirror } from '@remirror/react';
+import { EditorToolbar } from '../EditorToolbar/EditorToolbar';
+const Editor = ({ content }) => {
+    const { manager, state, setState } = useRemirror({
+        extensions: () => [
+            ...wysiwygPreset(),
+            new BoldExtension(),
+            new ItalicExtension(),
+            new NodeFormattingExtension(),
+            new UnderlineExtension(),
+        ],
+        content,
+        selection: 'start',
+        stringHandler: 'html',
+    });
+    const handleChange = (parameter) => {
+        setState(parameter.state);
+    };
+    return (React.createElement(Remirror, { manager: manager, state: state, onChange: handleChange, placeholder: "Write something" },
+        React.createElement(EditorToolbar, { manager: manager }),
+        React.createElement(EditorComponent, null),
+        React.createElement(EditorToolbar, { manager: manager, isPopover: true })));
+};
+export default Editor;

package/lib/EditorToolbar/EditorToolbar.d.ts

@@ -0,0 +1,7 @@
+import { RemirrorManager } from 'remirror';
+type EditorToolbarProps = {
+    manager: RemirrorManager<any>;
+    isPopover?: boolean;
+};
+export declare const EditorToolbar: ({ manager, isPopover }: EditorToolbarProps) => JSX.Element;
+export {};

package/lib/EditorToolbar/EditorToolbar.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Toolbar, FloatingToolbar } from '@remirror/react-components';
+import ItalicButton from './Tools/Italic/ItalicButton';
+import UnderlineButton from './Tools/Underline/UnderlineButton';
+import BoldButton from './Tools/Bold/BoldButton';
+import TextAlignButtons from './Tools/TextAlign/TextAlignButtons';
+// The editor main toolbar
+export const EditorToolbar = ({ manager, isPopover }) => {
+    const extensionNames = {};
+    manager.extensions.forEach((extension) => {
+        extensionNames[extension.name] = true;
+    });
+    return (React.createElement(React.Fragment, null, !isPopover ? (React.createElement(Toolbar, { className: "remirror-toolbar editor-toolbar" },
+        extensionNames.bold && React.createElement(BoldButton, null),
+        extensionNames.italic && React.createElement(ItalicButton, null),
+        extensionNames.underline && React.createElement(UnderlineButton, null),
+        extensionNames.nodeFormatting && React.createElement(TextAlignButtons, null))) : (React.createElement(FloatingToolbar, { className: "remirror-floating-popover" },
+        extensionNames.bold && React.createElement(BoldButton, null),
+        extensionNames.italic && React.createElement(ItalicButton, null),
+        extensionNames.underline && React.createElement(UnderlineButton, null)))));
+};

package/lib/EditorToolbar/Tools/Bold/BoldButton.d.ts

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

package/lib/EditorToolbar/Tools/Bold/BoldButton.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { useCommands, useActive, useChainedCommands } from '@remirror/react';
+import ToolbarButton from '../../../ui/ToolbarButton/ToolbarButton';
+import FormatBoldRoundedIcon from '@mui/icons-material/FormatBoldRounded';
+const BoldButton = () => {
+    const { toggleBold } = useCommands();
+    const chain = useChainedCommands();
+    const active = useActive();
+    const enabled = toggleBold.enabled();
+    const handleSelect = () => {
+        if (toggleBold.enabled()) {
+            chain.toggleBold().focus().run();
+        }
+    };
+    return (React.createElement(ToolbarButton, { handleOnClick: handleSelect, isDisabled: !enabled, isActive: active.bold(), icon: React.createElement(FormatBoldRoundedIcon, null), label: "Bold (cmd+B)" }));
+};
+export default BoldButton;

package/lib/EditorToolbar/Tools/Italic/ItalicButton.d.ts

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

package/lib/EditorToolbar/Tools/Italic/ItalicButton.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { useCommands, useActive, useChainedCommands } from '@remirror/react';
+import ToolbarButton from '../../../ui/ToolbarButton/ToolbarButton';
+import FormatItalicRoundedIcon from '@mui/icons-material/FormatItalicRounded';
+const ItalicButton = () => {
+    const { toggleItalic } = useCommands();
+    const chain = useChainedCommands();
+    const active = useActive();
+    const enabled = toggleItalic.enabled();
+    const handleSelect = () => {
+        if (toggleItalic.enabled()) {
+            chain.toggleItalic().focus().run();
+        }
+    };
+    return (React.createElement(ToolbarButton, { handleOnClick: handleSelect, isDisabled: !enabled, isActive: active.italic(), icon: React.createElement(FormatItalicRoundedIcon, null), label: "Italic (cmd+I)" }));
+};
+export default ItalicButton;

package/lib/EditorToolbar/Tools/TextAlign/CenterAlign/CenterAlignButton.d.ts

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

package/lib/EditorToolbar/Tools/TextAlign/CenterAlign/CenterAlignButton.js

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

package/lib/EditorToolbar/Tools/TextAlign/JustifyAlign/JustifyAlignButton.d.ts

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

package/lib/EditorToolbar/Tools/TextAlign/JustifyAlign/JustifyAlignButton.js

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

package/lib/EditorToolbar/Tools/TextAlign/LeftAlign/LeftAlignButton.d.ts

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

package/lib/EditorToolbar/Tools/TextAlign/LeftAlign/LeftAlignButton.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { useCommands, useChainedCommands } from '@remirror/react';
+import ToolbarButton from '../../../../ui/ToolbarButton/ToolbarButton';
+import FormatAlignLeftIcon from '@mui/icons-material/FormatAlignLeft';
+const LeftAlignButton = () => {
+    const { leftAlign } = useCommands();
+    const chain = useChainedCommands();
+    const handleSelect = () => {
+        if (leftAlign.enabled()) {
+            chain.leftAlign().focus().run();
+        }
+    };
+    const active = leftAlign.active?.() || false;
+    const enabled = leftAlign.enabled();
+    return (React.createElement(ToolbarButton, { handleOnClick: handleSelect, isDisabled: !enabled, isActive: active, icon: React.createElement(FormatAlignLeftIcon, null), label: "Align left" }));
+};
+export default LeftAlignButton;

package/lib/EditorToolbar/Tools/TextAlign/RightAlign/RightAlignButton.d.ts

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

package/lib/EditorToolbar/Tools/TextAlign/RightAlign/RightAlignButton.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { useCommands, useChainedCommands } from '@remirror/react';
+import ToolbarButton from '../../../../ui/ToolbarButton/ToolbarButton';
+import FormatAlignRightIcon from '@mui/icons-material/FormatAlignRight';
+const RightAlignButton = () => {
+    const { rightAlign } = useCommands();
+    const chain = useChainedCommands();
+    const handleSelect = () => {
+        if (rightAlign.enabled()) {
+            chain.rightAlign().focus().run();
+        }
+    };
+    const active = rightAlign.active?.() || false;
+    const enabled = rightAlign.enabled();
+    return (React.createElement(ToolbarButton, { handleOnClick: handleSelect, isDisabled: !enabled, isActive: active, icon: React.createElement(FormatAlignRightIcon, null), label: "Align right" }));
+};
+export default RightAlignButton;

package/lib/EditorToolbar/Tools/TextAlign/TextAlignButtons.d.ts

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

package/lib/EditorToolbar/Tools/TextAlign/TextAlignButtons.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import LeftAlignButton from './LeftAlign/LeftAlignButton';
+import CenterAlignButton from './CenterAlign/CenterAlignButton';
+import RightAlignButton from './RightAlign/RightAlignButton';
+import JustifyAlignButton from './JustifyAlign/JustifyAlignButton';
+import { VerticalDivider } from '@remirror/react-components';
+const TextAlignButtons = () => {
+    return (React.createElement(React.Fragment, null,
+        React.createElement(VerticalDivider, { className: "editor-divider" }),
+        React.createElement(LeftAlignButton, null),
+        React.createElement(CenterAlignButton, null),
+        React.createElement(RightAlignButton, null),
+        React.createElement(JustifyAlignButton, null),
+        React.createElement(VerticalDivider, { className: "editor-divider" })));
+};
+export default TextAlignButtons;

package/lib/EditorToolbar/Tools/Underline/UnderlineButton.d.ts

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

package/lib/EditorToolbar/Tools/Underline/UnderlineButton.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { useCommands, useActive, useChainedCommands } from '@remirror/react';
+import ToolbarButton from '../../../ui/ToolbarButton/ToolbarButton';
+import FormatUnderlinedRoundedIcon from '@mui/icons-material/FormatUnderlinedRounded';
+const UnderlineButton = () => {
+    const { toggleUnderline } = useCommands();
+    const chain = useChainedCommands();
+    const active = useActive();
+    const enabled = toggleUnderline.enabled();
+    const handleSelect = () => {
+        if (toggleUnderline.enabled()) {
+            chain.toggleUnderline().focus().run();
+        }
+    };
+    return (React.createElement(ToolbarButton, { handleOnClick: handleSelect, isDisabled: !enabled, isActive: active.underline(), icon: React.createElement(FormatUnderlinedRoundedIcon, null), label: "Underline (cmd+U)" }));
+};
+export default UnderlineButton;

package/lib/FormattedTextEditor.d.ts

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