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

package/.eslintrc.json

@@ -0,0 +1,34 @@
+{
+  "env": {
+    "jest/globals": true,
+    "cypress/globals": true
+  },
+  "plugins": ["cypress"],
+  "extends": [
+    "plugin:react/recommended",
+    "plugin:jsx-a11y/recommended",
+    "plugin:cypress/recommended",
+    "plugin:jest/style",
+    "plugin:jest/recommended"
+  ],
+  "overrides": [
+    {
+      // Cypress use different assertion methods. Don't validate that tests have assertions.
+      "files": ["**/*.spec.cy.ts"],
+      "rules": { "jest/expect-expect": "off" }
+    }
+  ],
+  "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"]
+      }
+    }
+  }
+}

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,9 @@ Or if you'd like to "watch" for changes:
 npm run test:watch
 ```
 
-#### End to end testing
+When testing text input in the text editor, it is recommended to use the `<MockEditor />` component, which is a simple wrapper around the Remirror component that provides additional functionality for testing (supplying text into the editor).
+
+### End to end testing
 
 This package uses [Cypress](https://docs.cypress.io/) for end to end testing.
 
@@ -65,38 +62,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,21 @@
+const esbuild = require('esbuild');
+const { sassPlugin } = require('esbuild-sass-plugin');
+const postcss = require('postcss');
+const postcssConfig = require('./postcss.config').plugins;
+
+esbuild
+  .build({
+    entryPoints: ['src/index.scss'],
+    bundle: true,
+    outdir: 'lib',
+    plugins: [
+      sassPlugin({
+        type: 'css',
+        transform: async (source) => {
+          const { css } = postcss(postcssConfig).process(source);
+          return 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,39 @@
+import React, { useState } from 'react';
+import FormattedTextEditor from '../src/FormattedTextEditor';
+import { RemirrorEventListener, Extension } from '@remirror/core';
+
+function App() {
+  const [doc, setDoc] = useState(null as any);
+  const [editable, setEditable] = useState(true);
+  const handleEditorChange: RemirrorEventListener<Extension> = (parameter) => {
+    if (doc !== parameter.state.doc) {
+      setDoc(parameter.state.doc);
+    }
+  };
+
+  return (
+    <div className="app">
+      <h1>Options</h1>
+      <div className="page-section">
+        <div className="form-group">
+          <label htmlFor="editable">Editable</label>&nbsp;
+          <input id="editable" type="checkbox" onChange={() => setEditable(!editable)} checked={editable} />
+        </div>
+      </div>
+      <h1>Editor</h1>
+      <div className="page-section">
+        <FormattedTextEditor
+          editable={editable}
+          content={`<p>Hello <a href="https://www.google.com"><strong>Mr Bean</strong></a>, nice to <a href="https://www.google.com">meet you</a>.</p>`}
+          onChange={handleEditorChange}
+        />
+      </div>
+      <h1>Document</h1>
+      <div className="page-section">
+        <code>{JSON.stringify(doc, null, 2)}</code>
+      </div>
+    </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,40 @@
+@import '../src/index.scss';
+
+body {
+  font-family: 'Open Sans';
+}
+
+h1 {
+  font-weight: 600;
+  font-size: 1.5rem;
+}
+
+.app {
+  padding: 8px;
+}
+
+.page-section {
+  margin-bottom: 8px;
+}
+
+.form-group {
+  display: flex;
+  align-items: center;
+}
+
+code {
+  padding: 8px;
+  display: block;
+  white-space: pre;
+  background-color: #eee;
+  font-size: 0.8rem;
+  height: 40vh;
+  max-height: 40vh;
+  overflow: scroll;
+}
+
+.remirror-editor {
+  height: 40vh;
+  max-height: 40vh;
+  overflow: scroll;
+}

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.bootstrap.ts

@@ -0,0 +1,3 @@
+import { jsdomPolyfill } from 'jest-remirror';
+
+jsdomPolyfill();

package/jest.config.ts

@@ -0,0 +1,30 @@
+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',
+    '^react($|/.+)': '<rootDir>/node_modules/react$1',
+    '^react-dom($|/.+)': '<rootDir>/node_modules/react-dom$1',
+  },
+  setupFilesAfterEnv: ['<rootDir>/jest.bootstrap.ts'],
+  // 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

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

package/lib/Editor/Editor.js

@@ -1,26 +1,23 @@
 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 }) => {
+import { Toolbar, FloatingToolbar } from '../EditorToolbar';
+import { Extensions } from '../Extensions/Extensions';
+const Editor = ({ content, editable, onChange }) => {
     const { manager, state, setState } = useRemirror({
-        extensions: () => [
-            ...wysiwygPreset(),
-            new BoldExtension(),
-            new ItalicExtension(),
-            new NodeFormattingExtension(),
-            new UnderlineExtension(),
-        ],
+        extensions: Extensions,
         content,
         selection: 'start',
         stringHandler: 'html',
     });
     const handleChange = (parameter) => {
         setState(parameter.state);
+        onChange?.(parameter);
     };
-    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 })));
+    return (React.createElement("div", { className: "squiz-fte-scope" },
+        React.createElement("div", { className: "remirror-theme formatted-text-editor editor-wrapper" },
+            React.createElement(Remirror, { manager: manager, state: state, editable: editable, onChange: handleChange, placeholder: "Write something", label: "Text editor" },
+                React.createElement(Toolbar, null),
+                React.createElement(EditorComponent, null),
+                React.createElement(FloatingToolbar, null)))));
 };
 export default Editor;

package/lib/EditorToolbar/FloatingToolbar.d.ts

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

package/lib/EditorToolbar/FloatingToolbar.js

@@ -0,0 +1,31 @@
+import React, { useMemo } from 'react';
+import ItalicButton from './Tools/Italic/ItalicButton';
+import UnderlineButton from './Tools/Underline/UnderlineButton';
+import BoldButton from './Tools/Bold/BoldButton';
+import { useExtensionNames } from '../hooks';
+import RemoveLinkButton from './Tools/Link/RemoveLinkButton';
+import LinkButton from './Tools/Link/LinkButton';
+import { FloatingToolbar as RemirrorFloatingToolbar, usePositioner } from '@remirror/react';
+import { VerticalDivider } from '@remirror/react-components';
+import { createToolbarPositioner } from '../utils/createToolbarPositioner';
+// The editor main toolbar
+export const FloatingToolbar = () => {
+    const extensionNames = useExtensionNames();
+    const positioner = useMemo(() => createToolbarPositioner({ types: ['link'] }), []);
+    const { data } = usePositioner(positioner, []);
+    let buttons = [
+        extensionNames.bold && React.createElement(BoldButton, { key: "bold" }),
+        extensionNames.italic && React.createElement(ItalicButton, { key: "italic" }),
+        extensionNames.underline && React.createElement(UnderlineButton, { key: "underline" }),
+    ];
+    if (data.marks?.link.isExclusivelyActive) {
+        // if all of the selected text is a link show the options to update/remove the link instead of the regular
+        // formatting options.
+        buttons = [React.createElement(LinkButton, { key: "update-link", inPopover: true }), React.createElement(RemoveLinkButton, { key: "remove-link" })];
+    }
+    else if (!data.marks?.link.isActive) {
+        // if none of the selected text is a link show the option to create a link.
+        buttons.push(React.createElement(VerticalDivider, { key: "link-divider", className: "link-divider" }), React.createElement(LinkButton, { key: "add-link", inPopover: true }));
+    }
+    return (React.createElement(RemirrorFloatingToolbar, { className: "squiz-fte-scope squiz-fte-scope__floating-popover", positioner: positioner }, buttons));
+};

package/lib/EditorToolbar/Toolbar.d.ts

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