@squiz/formatted-text-editor 1.12.0-alpha.8 → 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,7 +56,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.
 
@@ -62,4 +67,36 @@ npm run test:e2e
 Cypress is configured to look at a preview dev environment on `http://localhost:8080`.
 
 
-## WIP: Publish package to NPM
+## 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/EditorToolbar/EditorToolbar.js

@@ -17,6 +17,5 @@ export const EditorToolbar = ({ manager, isPopover }) => {
         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),
-        extensionNames.nodeFormatting && React.createElement(TextAlignButtons, null)))));
+        extensionNames.underline && React.createElement(UnderlineButton, null)))));
 };

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

@@ -3,11 +3,14 @@ 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(JustifyAlignButton, null),
+        React.createElement(VerticalDivider, { className: "editor-divider" })));
 };
 export default TextAlignButtons;

package/lib/index.css

@@ -3798,6 +3798,10 @@ button:active .remirror-menu-pane-shortcut,
 .formatted-text-editor .editor-toolbar > *:not(:first-child) {
   margin: 0 0 0 2px;
 }
+.formatted-text-editor .editor-toolbar .editor-divider {
+  margin: -4px 2px -4px 4px;
+  border-width: 1px;
+}
 .remirror-floating-popover {
   padding: 4px;
   border: 1px var(--grey-200);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squiz/formatted-text-editor",
-  "version": "1.12.0-alpha.8",
+  "version": "1.12.0-alpha.9",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "scripts": {