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

package/.eslintignore

@@ -0,0 +1,6 @@
+node_modules/
+dist/
+.prettierrc.json
+.eslintrc.json
+src/vite-env.d.ts
+vite.config.ts

package/.eslintrc.json

@@ -0,0 +1,33 @@
+{
+  "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.
+    "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"
+  ],
+  "settings": {
+    "react": {
+      // Tells eslint-plugin-react to automatically detect the version of React to use.
+      "version": "detect"
+    },
+    // Tells eslint how to resolve imports
+    "import/resolver": {
+      "node": {
+        "paths": ["src"],
+        "extensions": [".js", ".jsx", ".ts", ".tsx"]
+      }
+    }
+  },
+  "rules": {
+    // suppress errors for missing 'import React' in files
+    "react/react-in-jsx-scope": "off"
+  }
+}

package/CHANGELOG.md

@@ -0,0 +1,48 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## [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

@@ -1,44 +1,39 @@
 # DXP Formatted text editor component
 
-The Squiz DXP formatted text editor, built using [Remirror](https://remirror.io/) React library.
+This repo contains the necessary code to develop and publish an NPM package for creating formatted text editors for use in Squiz products.
 
-It is intended that this package is used for implementing rich text editor capabilities using the DXP Content Store.
-
-## Tools and requirements
-
-Tools that relate to standards, publishing and code base health should be available from the monorepo root. Package specific tools and requirements will be listed below.
+The formatted text editor is using the [Remirror](https://remirror.io/) React library.
 
 ### Requirements
 
-There are no tools that you need locally that are specific to this repo. Please refer to the monorepo README for more information.
-
-### Optional tools
-
-- [Volta](https://volta.sh/): Provided you have `Volta` installed as soon as you are in the `formatted-text-editor` directory you should be on the correct Node version.
+- [Volta](https://volta.sh/)
+- [Node/NPM](https://nodejs.org/en/)
 
-## Working locally
+### Working locally
 
-### Installation
+Provided you have `Volta` installed as soon as you are in the `formatted-text-editor` directory you should be on the correct Node version.
+See the `package.json` for the specific version.
 
-Please refer to the monorepo README for getting up and running.
+Now run the following commands from the `packages/formatted-text-editor/` directory.
 
-### Local development
-
-You can preview the formatted text editor in your local environment by running the following command from the `packages/formatted-text-editor` directory:
+```sh
+npm i
+```
 
 ```sh
 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.
 
-### Testing
+## WIP: Contributing
+
+## Testing
 
 Tests must be written when contributing to this package. Tests are automatically run in CI and test failure will result in unmerged code.
 
-#### Unit testing
+### Unit testing
 
 This package using Jest to perform Unit testing. In addition to Jest we are using a few Testing Library utilities:
 
@@ -56,7 +51,7 @@ Or if you'd like to "watch" for changes:
 npm run test:watch
 ```
 
-#### End to end testing
+### End to end testing
 
 This package uses [Cypress](https://docs.cypress.io/) for end to end testing.
 
@@ -65,38 +60,3 @@ To run tests locally you can run:
 npm run test:e2e
 ```
 Cypress is configured to look at a preview dev environment on `http://localhost:8080`.
-
-
-## Publishing
-
-This package will be automatically compiled and published following the process defined by the monorepo. Please see the README at the root of the monorepo for more details.
-
-We may manually publish this repo following these steps (please note that you should only ever do this from the `develop` branch):
-
-1. Run a clean, CI install, compile and publish from the root directory
-
-```
-npm run clean:all
-npm ci
-npm run compile
-npx lerna publish -y --conventional-commits --ci --exact --conventional-prerelease
-```
-
-2. Move into the editor directory and check that the lib directory looks correct for publishing
-
-```
-cd packages/formatted-text-editor
-ls -la packages/formatted-text-editor/lib
-```
-
-3. Execute the NPM publishing command from the package. Watch for any errors in the console
-
-```
-npm publish
-```
-
-4. Check that the package was published and pushed to NPM
-
-```
-npm view @squiz/formatted-text-editor
-```

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/demo/App.tsx

@@ -0,0 +1,11 @@
+import FormattedTextEditor from '../src/FormattedTextEditor';
+
+function App() {
+  return (
+    <div className="App">
+      <FormattedTextEditor />
+    </div>
+  );
+}
+
+export default App;

package/demo/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon-dxp.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Formatted text editor - DXP package (SQUIZ)</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <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/demo/public/favicon-dxp.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16">
+  <path fill="#1D9BE2" fill-rule="evenodd" d="M4 0a4 4 0 0 0-4 4v8a4 4 0 0 0 4 4h8a4 4 0 0 0 4-4V4a4 4 0 0 0-4-4H4Zm-.883 5.766a4.01 4.01 0 0 0 1.66.909l5.334 1.49c.634.177 1.069-.628.574-1.062L5.532 2.59c-.829-.745-2.255-.827-3.001 0-1.078 1.342-.326 2.328.586 3.176Zm10.137-3.195c.848.761 1.05 2.188.203 2.95l-1.183.92a.903.903 0 0 1-1.134-.02l-1.091-.913a1.846 1.846 0 0 1 .137-2.937c.848-.761 2.221-.761 3.068 0Zm-2.03 6.754a4.01 4.01 0 0 1 1.66.909c.911.848 1.663 1.834.585 3.176-.746.827-2.172.745-3 0L5.314 8.897c-.495-.434-.06-1.239.574-1.061l5.334 1.49ZM2.745 13.43c-.848-.761-1.05-2.188-.203-2.95l1.183-.92a.903.903 0 0 1 1.134.02l1.091.913a1.846 1.846 0 0 1-.137 2.937c-.847.761-2.221.761-3.068 0Z" clip-rule="evenodd"/>
+</svg>

package/demo/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

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/index.css

@@ -3783,6 +3783,9 @@ button:active .remirror-menu-pane-shortcut,
 .formatted-text-editor .remirror-editor:active,
 .formatted-text-editor .remirror-editor :focus {
 }
+.formatted-text-editor .remirror-editor p {
+  display: block;
+}
 .remirror-theme .ProseMirror:active,
 .remirror-theme .ProseMirror:focus {
   box-shadow: none;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squiz/formatted-text-editor",
-  "version": "1.12.0-alpha.10",
+  "version": "1.12.0-alpha.14",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "scripts": {
@@ -15,9 +15,6 @@
     "test:watch": "jest --watch",
     "test:e2e": "vite build && vite preview --port 8080 & cypress open"
   },
-  "files": [
-    "lib/**"
-  ],
   "dependencies": {
     "@mui/icons-material": "5.11.0",
     "@remirror/react": "2.0.25"
@@ -57,5 +54,6 @@
   },
   "volta": {
     "node": "16.19.0"
-  }
-}
+  },
+  "gitHead": "76fa4ca4f3c3fa3b0a808232474df640550871cc"
+}

package/src/Editor/Editor.spec.tsx

@@ -0,0 +1,88 @@
+import React from 'react';
+import '@testing-library/jest-dom';
+import Editor from './Editor';
+import { fireEvent, render, screen } from '@testing-library/react';
+
+describe('Formatted text editor', () => {
+  it('Renders the text editor', () => {
+    render(<Editor />);
+    expect(screen.getByRole('textbox')).toBeInTheDocument();
+  });
+
+  it('Renders the placeholder if there is no content', () => {
+    render(<Editor />);
+    expect(document.querySelector(`[data-placeholder='Write something']`)).toBeInTheDocument();
+  });
+
+  it('Renders the bold button', () => {
+    render(<Editor />);
+    expect(screen.getByRole('button', { name: 'Bold (cmd+B)' })).toBeInTheDocument();
+  });
+
+  it('Renders the italic button', () => {
+    render(<Editor />);
+    expect(screen.getByRole('button', { name: 'Italic (cmd+I)' })).toBeInTheDocument();
+  });
+
+  it('Renders the underline button', () => {
+    render(<Editor />);
+    expect(screen.getByRole('button', { name: 'Underline (cmd+U)' })).toBeInTheDocument();
+  });
+
+  it('Renders the align left button', () => {
+    render(<Editor />);
+    expect(screen.getByRole('button', { name: 'Align left' })).toBeInTheDocument();
+  });
+
+  it('Applies left alignment styling to text when clicked', () => {
+    const { baseElement } = render(<Editor />);
+    expect(baseElement).toBeTruthy();
+
+    expect(baseElement.querySelector('p[data-node-text-align="left"]')).toBeFalsy();
+
+    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();
+  });
+
+  it('Applies center alignment styling to text when clicked', () => {
+    const { baseElement } = render(<Editor />);
+    expect(baseElement).toBeTruthy();
+
+    expect(baseElement.querySelector('p[data-node-text-align="center"]')).toBeFalsy();
+
+    const centerAlignButton = baseElement.querySelector('button[title="Align center"]') as HTMLButtonElement;
+    expect(centerAlignButton).toBeTruthy();
+
+    fireEvent.click(centerAlignButton);
+    expect(baseElement.querySelector('p[data-node-text-align="center"]')).toBeTruthy();
+  });
+
+  it('Applies right alignment styling to text when clicked', () => {
+    const { baseElement } = render(<Editor />);
+    expect(baseElement).toBeTruthy();
+
+    expect(baseElement.querySelector('p[data-node-text-align="right"]')).toBeFalsy();
+
+    const rightAlignButton = baseElement.querySelector('button[title="Align right"]') as HTMLButtonElement;
+    expect(rightAlignButton).toBeTruthy();
+
+    fireEvent.click(rightAlignButton);
+    expect(baseElement.querySelector('p[data-node-text-align="right"]')).toBeTruthy();
+  });
+
+  it('Applies justify alignment styling to text when clicked', () => {
+    const { baseElement } = render(<Editor />);
+    expect(baseElement).toBeTruthy();
+
+    expect(baseElement.querySelector('p[data-node-text-align="justify"]')).toBeFalsy();
+
+    const justifyAlignButton = baseElement.querySelector('button[title="Justify"]') as HTMLButtonElement;
+    expect(justifyAlignButton).toBeTruthy();
+
+    fireEvent.click(justifyAlignButton);
+    expect(baseElement.querySelector('p[data-node-text-align="justify"]')).toBeTruthy();
+  });
+});

package/src/Editor/Editor.tsx

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

package/src/Editor/editor.scss

@@ -0,0 +1,36 @@
+.formatted-text-editor {
+  &.editor-wrapper {
+    background: white;
+    border: 2px solid var(--grey-300);
+    border-radius: 4px;
+  }
+
+  .remirror-editor-wrapper {
+    padding-top: 0;
+    color: var(--grey-600);
+  }
+
+  .remirror-editor {
+    box-shadow: none;
+    background: white;
+    border-radius: 0 0 4px 4px;
+
+    &:active,
+    :focus {
+      /* some focus state */
+    }
+
+    p {
+      /* Make sure content aligned with "text-align: justify" is justified */
+      display: block;
+    }
+  }
+}
+
+/* remove existing style */
+.remirror-theme .ProseMirror {
+  &:active,
+  &:focus {
+    box-shadow: none;
+  }
+}

package/src/EditorToolbar/EditorToolbar.tsx

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

package/src/EditorToolbar/Tools/Bold/BoldButton.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('Bold button', () => {
+  it('Renders the bold button', () => {
+    render(<Editor />);
+    expect(screen.getByRole('button', { name: 'Bold (cmd+B)' })).toBeInTheDocument();
+  });
+
+  it('Activates the button if clicked', () => {
+    render(<Editor />);
+    expect(screen.getByRole('button', { name: 'Bold (cmd+B)' }).classList.contains('btn')).toBeTruthy();
+    const bold = screen.getByRole('button', { name: 'Bold (cmd+B)' });
+    fireEvent.click(bold);
+    expect(bold.classList.contains('is-active')).toBeTruthy();
+  });
+});

package/src/EditorToolbar/Tools/Bold/BoldButton.tsx

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

package/src/EditorToolbar/Tools/Italic/ItalicButton.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('Italic button', () => {
+  it('Renders the italic button', () => {
+    render(<Editor />);
+    expect(screen.getByRole('button', { name: 'Italic (cmd+I)' })).toBeInTheDocument();
+  });
+
+  it('Activates the button if clicked', () => {
+    render(<Editor />);
+    expect(screen.getByRole('button', { name: 'Italic (cmd+I)' }).classList.contains('btn')).toBeTruthy();
+    const italic = screen.getByRole('button', { name: 'Italic (cmd+I)' });
+    fireEvent.click(italic);
+    expect(italic.classList.contains('is-active')).toBeTruthy();
+  });
+});

package/src/EditorToolbar/Tools/Italic/ItalicButton.tsx

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

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.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;

package/src/EditorToolbar/Tools/TextAlign/LeftAlign/LeftAlignButton.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 FormatAlignLeftIcon from '@mui/icons-material/FormatAlignLeft';
+
+const LeftAlignButton = () => {
+  const { leftAlign } = useCommands<NodeFormattingExtension>();
+  const chain = useChainedCommands();
+
+  const handleSelect = () => {
+    if (leftAlign.enabled()) {
+      chain.leftAlign().focus().run();
+    }
+  };
+
+  const active = leftAlign.active?.() || false;
+  const enabled = leftAlign.enabled();
+
+  return (
+    <ToolbarButton
+      handleOnClick={handleSelect}
+      isDisabled={!enabled}
+      isActive={active}
+      icon={<FormatAlignLeftIcon />}
+      label="Align left"
+    />
+  );
+};
+
+export default LeftAlignButton;

package/src/EditorToolbar/Tools/TextAlign/RightAlign/RightAlignButton.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 FormatAlignRightIcon from '@mui/icons-material/FormatAlignRight';
+
+const RightAlignButton = () => {
+  const { rightAlign } = useCommands<NodeFormattingExtension>();
+  const chain = useChainedCommands();
+
+  const handleSelect = () => {
+    if (rightAlign.enabled()) {
+      chain.rightAlign().focus().run();
+    }
+  };
+
+  const active = rightAlign.active?.() || false;
+  const enabled = rightAlign.enabled();
+
+  return (
+    <ToolbarButton
+      handleOnClick={handleSelect}
+      isDisabled={!enabled}
+      isActive={active}
+      icon={<FormatAlignRightIcon />}
+      label="Align right"
+    />
+  );
+};
+
+export default RightAlignButton;

package/src/EditorToolbar/Tools/TextAlign/TextAlignButtons.tsx

@@ -0,0 +1,21 @@
+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 (
+    <>
+      <VerticalDivider className="editor-divider" />
+      <LeftAlignButton />
+      <CenterAlignButton />
+      <RightAlignButton />
+      <JustifyAlignButton />
+      <VerticalDivider className="editor-divider" />
+    </>
+  );
+};
+
+export default TextAlignButtons;

package/src/EditorToolbar/Tools/Underline/Underline.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('Underline button', () => {
+  it('Renders the underline button', () => {
+    render(<Editor />);
+    expect(screen.getByRole('button', { name: 'Underline (cmd+U)' })).toBeInTheDocument();
+  });
+
+  it('Activates the button if clicked', () => {
+    render(<Editor />);
+    expect(screen.getByRole('button', { name: 'Underline (cmd+U)' }).classList.contains('btn')).toBeTruthy();
+    const underline = screen.getByRole('button', { name: 'Underline (cmd+U)' });
+    fireEvent.click(underline);
+    expect(underline.classList.contains('is-active')).toBeTruthy();
+  });
+});

package/src/EditorToolbar/Tools/Underline/UnderlineButton.tsx

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

package/src/EditorToolbar/editor-toolbar.scss

@@ -0,0 +1,26 @@
+.formatted-text-editor .editor-toolbar {
+  border-bottom: 2px solid var(--grey-200);
+  background-color: white;
+  padding: 0.25rem;
+  border-radius: 0.25rem;
+
+  display: flex;
+  justify-items: center;
+
+  > *:not(:first-child) {
+    margin: 0 0 0 2px;
+  }
+
+  .editor-divider {
+    margin: -4px 2px -4px 4px;
+    border-width: 1px;
+  }
+}
+
+.remirror-floating-popover {
+  padding: 4px;
+  border: 1px var(--grey-200);
+  border-radius: 6px;
+  background-color: white;
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04), 0 1px 12px 4px rgba(0, 0, 0, 0.12);
+}

package/src/FormattedTextEditor.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import Editor from './Editor/Editor';
+
+const FormattedTextEditor = () => {
+  return (
+    <div className="remirror-theme formatted-text-editor editor-wrapper">
+      <Editor />
+    </div>
+  );
+};
+
+export default FormattedTextEditor;

package/src/index.scss

@@ -0,0 +1,4 @@
+@import 'remirror/styles/all.css';
+@import './Editor/editor.scss';
+@import './EditorToolbar/editor-toolbar.scss';
+@import './ui/ToolbarButton/toolbar-button.scss';

package/src/index.ts

@@ -0,0 +1,3 @@
+import FormattedTextEditor from './FormattedTextEditor';
+
+export { FormattedTextEditor };

package/src/ui/ToolbarButton/ToolbarButton.tsx

@@ -0,0 +1,25 @@
+import React, { ReactElement } from 'react';
+
+type ToolbarButtonProps = {
+  handleOnClick: () => void;
+  isDisabled: boolean;
+  isActive: boolean;
+  icon: ReactElement;
+  label: string;
+};
+const ToolbarButton = ({ handleOnClick, isDisabled, isActive, icon, label }: ToolbarButtonProps) => {
+  return (
+    <button
+      aria-label={label}
+      title={label}
+      type="button"
+      onClick={handleOnClick}
+      disabled={isDisabled}
+      className={`btn toolbar-button ${isActive ? 'is-active' : ''}`}
+    >
+      {icon}
+    </button>
+  );
+};
+
+export default ToolbarButton;

package/src/ui/ToolbarButton/toolbar-button.scss

@@ -0,0 +1,40 @@
+.btn {
+  display: flex;
+  align-items: center;
+  font-weight: 400;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  background-image: none;
+  border: 1px solid transparent;
+  border-radius: var(--border-radius);
+
+  &:active,
+  &:hover,
+  &:focus {
+    background-color: rgba(black, 0.04);
+  }
+
+  &.disabled,
+  &[disabled] {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+}
+
+.toolbar-button {
+  background-color: white;
+  color: var(--grey-600);
+  padding: 4px;
+
+  ~ .toolbar-button {
+    margin-left: 2px;
+  }
+
+  &.is-active {
+    background-color: var(--blue-100);
+    color: var(--blue-300);
+  }
+}

package/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react",
+    "declaration": true,
+    "outDir": "./lib"
+  },
+  "files": ["src/index.ts"]
+}

package/vite.config.ts

@@ -0,0 +1,11 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  root: 'demo',
+  build: {
+    outDir: 'build/demo',
+  },
+  plugins: [react()],
+});