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

package/README.md

@@ -1,39 +1,44 @@
 # DXP Formatted text editor component
 
-This repo contains the necessary code to develop and publish an NPM package for creating formatted text editors for use in Squiz products.
+The Squiz DXP formatted text editor, built using [Remirror](https://remirror.io/) React library.
 
-The formatted text editor is using the [Remirror](https://remirror.io/) React library.
+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.
 
 ### Requirements
 
-- [Volta](https://volta.sh/)
-- [Node/NPM](https://nodejs.org/en/)
+There are no tools that you need locally that are specific to this repo. Please refer to the monorepo README for more information.
 
-### Working locally
+### Optional tools
 
-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.
+- [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.
 
-Now run the following commands from the `packages/formatted-text-editor/` directory.
+## Working locally
 
-```sh
-npm i
-```
+### Installation
+
+Please refer to the monorepo README for getting up and running.
+
+### 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 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
-
-## Testing
+### 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:
 
@@ -51,9 +56,7 @@ Or if you'd like to "watch" for changes:
 npm run test:watch
 ```
 
-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
+#### End to end testing
 
 This package uses [Cypress](https://docs.cypress.io/) for end to end testing.
 
@@ -62,3 +65,38 @@ 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/lib/Editor/Editor.js

@@ -1,10 +1,16 @@
 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';
-import { Extensions } from '../Extensions/Extensions';
 const Editor = ({ content }) => {
     const { manager, state, setState } = useRemirror({
-        extensions: Extensions,
+        extensions: () => [
+            ...wysiwygPreset(),
+            new BoldExtension(),
+            new ItalicExtension(),
+            new NodeFormattingExtension(),
+            new UnderlineExtension(),
+        ],
         content,
         selection: 'start',
         stringHandler: 'html',
@@ -12,7 +18,7 @@ const Editor = ({ content }) => {
     const handleChange = (parameter) => {
         setState(parameter.state);
     };
-    return (React.createElement(Remirror, { manager: manager, state: state, onChange: handleChange, placeholder: "Write something", label: "Text editor" },
+    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 })));

package/lib/EditorToolbar/EditorToolbar.js

@@ -1,12 +1,9 @@
 import React from 'react';
-import { Toolbar, FloatingToolbar, VerticalDivider } from '@remirror/react-components';
+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';
-import UndoButton from './Tools/Undo/UndoButton';
-import RedoButton from './Tools/Redo/RedoButton';
-import TextTypeDropdown from './Tools/TextType/TextTypeDropdown';
 // The editor main toolbar
 export const EditorToolbar = ({ manager, isPopover }) => {
     const extensionNames = {};
@@ -14,11 +11,6 @@ export const EditorToolbar = ({ manager, isPopover }) => {
         extensionNames[extension.name] = true;
     });
     return (React.createElement(React.Fragment, null, !isPopover ? (React.createElement(Toolbar, { className: "remirror-toolbar editor-toolbar" },
-        extensionNames.history && (React.createElement(React.Fragment, null,
-            React.createElement(UndoButton, null),
-            React.createElement(RedoButton, null),
-            React.createElement(VerticalDivider, { className: "editor-divider" }))),
-        extensionNames.heading && extensionNames.paragraph && extensionNames.preformatted && React.createElement(TextTypeDropdown, null),
         extensionNames.bold && React.createElement(BoldButton, null),
         extensionNames.italic && React.createElement(ItalicButton, null),
         extensionNames.underline && React.createElement(UnderlineButton, null),