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

package/README.md

@@ -1,37 +1,102 @@
 # 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.
+
+### 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
+
+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`.
+
+
+## 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.
 
-## WIP: Contributing
+We may manually publish this repo following these steps (please note that you should only ever do this from the `develop` branch):
 
-### WIP: Testing
+1. Run a clean, CI install, compile and publish from the root directory
 
-## Publish package to NPM
+```
+npm run clean:all
+npm ci
+npm run compile
+npx lerna publish -y --conventional-commits --ci --exact --conventional-prerelease
+```
 
-This package will automatically be compiled and published to NPM as part of the monorepo CI publishing processes.
+2. Move into the editor directory and check that the lib directory looks correct for publishing
 
-It is possible to manually compile the package using `npm run compile`. This will not publish the package to NPM.
+```
+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.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;

package/lib/FormattedTextEditor.js

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