@squiz/formatted-text-editor 1.67.0 → 1.68.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Change Log
 
+## 1.68.0
+
+### Minor Changes
+
+- 4d3dbba: Updated FTE shortcuts to change tooltips depending on OS
+
+## 1.67.1
+
+### Patch Changes
+
+- 928cc88: Made children optional for formatted text nodes/tags
+- Updated dependencies [928cc88]
+  - @squiz/dx-json-schema-lib@1.65.1
+
 ## 1.67.0
 
 ### Minor Changes

package/cypress/e2e/bold.spec.cy.ts

@@ -7,11 +7,11 @@ describe('The formatted text editor renders', () => {
       .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.findAllByRole('button', { name: 'Bold (Ctrl+B)' }).first().click();
 
     cy.get('strong').should('include.text', 'best of times');
 
-    cy.findAllByRole('button', { name: 'Bold (cmd+B)' }).first().click();
+    cy.findAllByRole('button', { name: 'Bold (Ctrl+B)' }).first().click();
 
     cy.get('strong').should('not.exist');
   });

package/lib/EditorToolbar/Tools/Bold/BoldButton.js

@@ -7,6 +7,7 @@ const react_1 = __importDefault(require("react"));
 const react_2 = require("@remirror/react");
 const Button_1 = __importDefault(require("../../../ui/Button/Button"));
 const FormatBoldRounded_1 = __importDefault(require("@mui/icons-material/FormatBoldRounded"));
+const getShortcutSymbol_1 = require("../../../utils/getShortcutSymbol");
 const BoldButton = () => {
     const { toggleBold } = (0, react_2.useCommands)();
     const chain = (0, react_2.useChainedCommands)();
@@ -17,6 +18,6 @@ const BoldButton = () => {
             chain.toggleBold().focus().run();
         }
     };
-    return (react_1.default.createElement(Button_1.default, { handleOnClick: handleSelect, isDisabled: !enabled, isActive: active.bold(), icon: react_1.default.createElement(FormatBoldRounded_1.default, null), label: "Bold (cmd+B)" }));
+    return (react_1.default.createElement(Button_1.default, { handleOnClick: handleSelect, isDisabled: !enabled, isActive: active.bold(), icon: react_1.default.createElement(FormatBoldRounded_1.default, null), label: `Bold (${(0, getShortcutSymbol_1.getShortcutSymbol)()}+B)` }));
 };
 exports.default = BoldButton;

package/lib/EditorToolbar/Tools/ClearFormatting/ClearFormattingButton.js

@@ -31,6 +31,7 @@ const react_2 = require("@remirror/react");
 const react_components_1 = require("@remirror/react-components");
 const FormatClearRounded_1 = __importDefault(require("@mui/icons-material/FormatClearRounded"));
 const Button_1 = __importDefault(require("../../../ui/Button/Button"));
+const getShortcutSymbol_1 = require("../../../utils/getShortcutSymbol");
 const ClearFormattingButton = () => {
     const { clearFormatting } = (0, react_2.useCommands)();
     const { selection } = (0, react_2.useEditorState)();
@@ -51,6 +52,6 @@ const ClearFormattingButton = () => {
     (0, react_2.useKeymap)('Mod-\\', handleShortcut);
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(react_components_1.VerticalDivider, null),
-        react_1.default.createElement(Button_1.default, { handleOnClick: handleSelect, isDisabled: false, isActive: false, icon: react_1.default.createElement(FormatClearRounded_1.default, null), label: `${contentSelected ? 'Clear formatting from selection' : 'Clear all formatting'} (cmd+\\)` })));
+        react_1.default.createElement(Button_1.default, { handleOnClick: handleSelect, isDisabled: false, isActive: false, icon: react_1.default.createElement(FormatClearRounded_1.default, null), label: `${contentSelected ? 'Clear formatting from selection' : 'Clear all formatting'} (${(0, getShortcutSymbol_1.getShortcutSymbol)()}+\\)` })));
 };
 exports.default = ClearFormattingButton;

package/lib/EditorToolbar/Tools/Image/ImageButton.js

@@ -32,6 +32,7 @@ const ImageRounded_1 = __importDefault(require("@mui/icons-material/ImageRounded
 const ImageModal_1 = __importDefault(require("./ImageModal"));
 const Button_1 = __importDefault(require("../../../ui/Button/Button"));
 const Extensions_1 = require("../../../Extensions/Extensions");
+const getShortcutSymbol_1 = require("../../../utils/getShortcutSymbol");
 const ImageButton = ({ inPopover = false }) => {
     const [showModal, setShowModal] = (0, react_1.useState)(false);
     const { insertImage, insertAssetImage } = (0, react_2.useCommands)();
@@ -69,7 +70,7 @@ const ImageButton = ({ inPopover = false }) => {
         (0, react_2.useKeymap)('Mod-l', disabled ? () => false : handleShortcut);
     }
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(Button_1.default, { handleOnClick: handleClick, isActive: active.image() || active.assetImage(), icon: react_1.default.createElement(ImageRounded_1.default, null), label: "Image (cmd+L)", isDisabled: disabled }),
+        react_1.default.createElement(Button_1.default, { handleOnClick: handleClick, isActive: active.image() || active.assetImage(), icon: react_1.default.createElement(ImageRounded_1.default, null), label: `Image (${(0, getShortcutSymbol_1.getShortcutSymbol)()}+L)`, isDisabled: disabled }),
         showModal && react_1.default.createElement(ImageModal_1.default, { onCancel: () => setShowModal(false), onSubmit: handleSubmit })));
 };
 exports.default = ImageButton;

package/lib/EditorToolbar/Tools/Italic/ItalicButton.js

@@ -7,6 +7,7 @@ const react_1 = __importDefault(require("react"));
 const react_2 = require("@remirror/react");
 const Button_1 = __importDefault(require("../../../ui/Button/Button"));
 const FormatItalicRounded_1 = __importDefault(require("@mui/icons-material/FormatItalicRounded"));
+const getShortcutSymbol_1 = require("../../../utils/getShortcutSymbol");
 const ItalicButton = () => {
     const { toggleItalic } = (0, react_2.useCommands)();
     const chain = (0, react_2.useChainedCommands)();
@@ -17,6 +18,6 @@ const ItalicButton = () => {
             chain.toggleItalic().focus().run();
         }
     };
-    return (react_1.default.createElement(Button_1.default, { handleOnClick: handleSelect, isDisabled: !enabled, isActive: active.italic(), icon: react_1.default.createElement(FormatItalicRounded_1.default, null), label: "Italic (cmd+I)" }));
+    return (react_1.default.createElement(Button_1.default, { handleOnClick: handleSelect, isDisabled: !enabled, isActive: active.italic(), icon: react_1.default.createElement(FormatItalicRounded_1.default, null), label: `Italic (${(0, getShortcutSymbol_1.getShortcutSymbol)()}+I)` }));
 };
 exports.default = ItalicButton;

package/lib/EditorToolbar/Tools/Link/LinkButton.js

@@ -32,6 +32,7 @@ const LinkModal_1 = __importDefault(require("./LinkModal"));
 const Button_1 = __importDefault(require("../../../ui/Button/Button"));
 const react_2 = require("@remirror/react");
 const Extensions_1 = require("../../../Extensions/Extensions");
+const getShortcutSymbol_1 = require("../../../utils/getShortcutSymbol");
 const LinkButton = ({ inPopover = false }) => {
     const [showModal, setShowModal] = (0, react_1.useState)(false);
     const { updateLink, updateAssetLink } = (0, react_2.useCommands)();
@@ -64,7 +65,7 @@ const LinkButton = ({ inPopover = false }) => {
         (0, react_2.useKeymap)('Mod-k', disabled ? () => true : handleShortcut);
     }
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(Button_1.default, { handleOnClick: handleClick, isActive: active.link() || active.assetLink(), icon: react_1.default.createElement(InsertLinkRounded_1.default, null), label: "Link (cmd+K)", isDisabled: disabled }),
+        react_1.default.createElement(Button_1.default, { handleOnClick: handleClick, isActive: active.link() || active.assetLink(), icon: react_1.default.createElement(InsertLinkRounded_1.default, null), label: `Link (${(0, getShortcutSymbol_1.getShortcutSymbol)()}+K)`, isDisabled: disabled }),
         showModal && react_1.default.createElement(LinkModal_1.default, { onCancel: () => setShowModal(false), onSubmit: handleSubmit })));
 };
 exports.default = LinkButton;

package/lib/EditorToolbar/Tools/Link/RemoveLinkButton.js

@@ -30,6 +30,7 @@ const react_1 = __importStar(require("react"));
 const react_2 = require("@remirror/react");
 const Button_1 = __importDefault(require("../../../ui/Button/Button"));
 const LinkOff_1 = __importDefault(require("@mui/icons-material/LinkOff"));
+const getShortcutSymbol_1 = require("../../../utils/getShortcutSymbol");
 const RemoveLinkButton = ({ inPopover = false }) => {
     const chain = (0, react_2.useChainedCommands)();
     const active = (0, react_2.useActive)();
@@ -48,6 +49,6 @@ const RemoveLinkButton = ({ inPopover = false }) => {
         // disable the shortcut if the button is disabled
         (0, react_2.useKeymap)('Shift-Mod-k', disabled ? () => true : handleShortcut);
     }
-    return (react_1.default.createElement(Button_1.default, { handleOnClick: handleClick, isActive: false, isDisabled: disabled, icon: react_1.default.createElement(LinkOff_1.default, null), label: "Remove link (shift+cmd+K)" }));
+    return (react_1.default.createElement(Button_1.default, { handleOnClick: handleClick, isActive: false, isDisabled: disabled, icon: react_1.default.createElement(LinkOff_1.default, null), label: `Remove link (Shift+${(0, getShortcutSymbol_1.getShortcutSymbol)()}+K)` }));
 };
 exports.default = RemoveLinkButton;

package/lib/EditorToolbar/Tools/Redo/RedoButton.js

@@ -7,6 +7,7 @@ const react_1 = __importDefault(require("react"));
 const react_2 = require("@remirror/react");
 const Button_1 = __importDefault(require("../../../ui/Button/Button"));
 const RedoRounded_1 = __importDefault(require("@mui/icons-material/RedoRounded"));
+const getShortcutSymbol_1 = require("../../../utils/getShortcutSymbol");
 const RedoButton = () => {
     const { redo } = (0, react_2.useCommands)();
     const { redoDepth } = (0, react_2.useHelpers)(true);
@@ -16,6 +17,6 @@ const RedoButton = () => {
         }
     };
     const enabled = redoDepth() > 0;
-    return (react_1.default.createElement(Button_1.default, { handleOnClick: handleSelect, isDisabled: !enabled, isActive: false, icon: react_1.default.createElement(RedoRounded_1.default, null), label: "Redo (shift+cmd+Z)" }));
+    return (react_1.default.createElement(Button_1.default, { handleOnClick: handleSelect, isDisabled: !enabled, isActive: false, icon: react_1.default.createElement(RedoRounded_1.default, null), label: `Redo (Shift+${(0, getShortcutSymbol_1.getShortcutSymbol)()}+Z)` }));
 };
 exports.default = RedoButton;

package/lib/EditorToolbar/Tools/Underline/UnderlineButton.js

@@ -7,6 +7,7 @@ const react_1 = __importDefault(require("react"));
 const react_2 = require("@remirror/react");
 const Button_1 = __importDefault(require("../../../ui/Button/Button"));
 const FormatUnderlinedRounded_1 = __importDefault(require("@mui/icons-material/FormatUnderlinedRounded"));
+const getShortcutSymbol_1 = require("../../../utils/getShortcutSymbol");
 const UnderlineButton = () => {
     const { toggleUnderline } = (0, react_2.useCommands)();
     const chain = (0, react_2.useChainedCommands)();
@@ -17,6 +18,6 @@ const UnderlineButton = () => {
             chain.toggleUnderline().focus().run();
         }
     };
-    return (react_1.default.createElement(Button_1.default, { handleOnClick: handleSelect, isDisabled: !enabled, isActive: active.underline(), icon: react_1.default.createElement(FormatUnderlinedRounded_1.default, null), label: "Underline (cmd+U)" }));
+    return (react_1.default.createElement(Button_1.default, { handleOnClick: handleSelect, isDisabled: !enabled, isActive: active.underline(), icon: react_1.default.createElement(FormatUnderlinedRounded_1.default, null), label: `Underline (${(0, getShortcutSymbol_1.getShortcutSymbol)()}+U)` }));
 };
 exports.default = UnderlineButton;

package/lib/EditorToolbar/Tools/Undo/UndoButton.js

@@ -7,6 +7,7 @@ const react_1 = __importDefault(require("react"));
 const react_2 = require("@remirror/react");
 const Button_1 = __importDefault(require("../../../ui/Button/Button"));
 const UndoRounded_1 = __importDefault(require("@mui/icons-material/UndoRounded"));
+const getShortcutSymbol_1 = require("../../../utils/getShortcutSymbol");
 const UndoButton = () => {
     const { undo } = (0, react_2.useCommands)();
     const { undoDepth } = (0, react_2.useHelpers)(true);
@@ -16,6 +17,6 @@ const UndoButton = () => {
         }
     };
     const enabled = undoDepth() > 0;
-    return (react_1.default.createElement(Button_1.default, { handleOnClick: handleSelect, isDisabled: !enabled, isActive: false, icon: react_1.default.createElement(UndoRounded_1.default, null), label: "Undo (cmd+Z)" }));
+    return (react_1.default.createElement(Button_1.default, { handleOnClick: handleSelect, isDisabled: !enabled, isActive: false, icon: react_1.default.createElement(UndoRounded_1.default, null), label: `Undo (${(0, getShortcutSymbol_1.getShortcutSymbol)()}+Z)` }));
 };
 exports.default = UndoButton;

package/lib/utils/converters/remirrorNodeToSquizNode/remirrorNodeToSquizNode.js

@@ -121,7 +121,9 @@ const transformNode = (node) => {
  * @return {FormattedNode}
  */
 const wrapNodeIfNeeded = (node, wrappingNode, copyFont = true) => {
+    const wrappingNodeChildren = wrappingNode.children || [];
     if (node.type === 'tag' && wrappingNode.type === 'tag' && (node.tag === 'span' || node.tag === wrappingNode.tag)) {
+        const nodeChildren = node.children || [];
         // if the node we are wrapping with is a DOM node, and the node being wrapped is
         // a plain looking DOM node merge the 2 nodes.
         return {
@@ -141,13 +143,13 @@ const wrapNodeIfNeeded = (node, wrappingNode, copyFont = true) => {
                     ...wrappingNode.font,
                 }
                 : {}),
-            children: [...node.children, ...wrappingNode.children],
+            children: [...nodeChildren, ...wrappingNodeChildren],
         };
     }
     // if the node we are wrapping or the wrapping nodes are not compatible merge them.
     return {
         ...wrappingNode,
-        children: [node, ...wrappingNode.children],
+        children: [node, ...wrappingNodeChildren],
     };
 };
 const transformMark = (mark, node) => {

package/lib/utils/converters/squizNodeToRemirrorNode/squizNodeToRemirrorNode.js

@@ -133,7 +133,7 @@ const unwrapNodeIfNeeded = (node) => {
 const formatNode = (node) => {
     const children = [];
     if ('children' in node) {
-        node.children.forEach((child) => {
+        node.children?.forEach((child) => {
             children.push(...formatNode(child));
         });
     }

package/lib/utils/getShortcutSymbol.d.ts

@@ -0,0 +1 @@
+export declare const getShortcutSymbol: () => string;

package/lib/utils/getShortcutSymbol.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getShortcutSymbol = void 0;
+const getShortcutSymbol = () => {
+    // If we can detect Mac then we return "⌘" otherwise default to "Ctrl"
+    return window.navigator.userAgent.toLowerCase().indexOf('mac') > -1 ? '⌘' : 'Ctrl';
+};
+exports.getShortcutSymbol = getShortcutSymbol;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squiz/formatted-text-editor",
-  "version": "1.67.0",
+  "version": "1.68.0",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "private": false,
@@ -23,7 +23,7 @@
     "@headlessui/react": "1.7.11",
     "@mui/icons-material": "5.11.16",
     "@remirror/react": "2.0.25",
-    "@squiz/dx-json-schema-lib": "^1.65.0",
+    "@squiz/dx-json-schema-lib": "^1.65.1",
     "@squiz/resource-browser": "^1.66.3",
     "clsx": "1.2.1",
     "react-hook-form": "7.43.2",
@@ -35,7 +35,7 @@
     "@testing-library/jest-dom": "5.16.5",
     "@testing-library/react": "14.0.0",
     "@testing-library/user-event": "14.4.3",
-    "@types/node": "20.11.24",
+    "@types/node": "20.12.4",
     "@types/react": "^18.2.45",
     "@types/react-dom": "^18.2.18",
     "@vitejs/plugin-react": "3.0.0",

package/src/Editor/Editor.spec.tsx

@@ -23,17 +23,17 @@ describe('Formatted text editor', () => {
 
   it('Renders the bold button', () => {
     render(<Editor />);
-    expect(screen.getByRole('button', { name: 'Bold (cmd+B)' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Bold (Ctrl+B)' })).toBeInTheDocument();
   });
 
   it('Renders the italic button', () => {
     render(<Editor />);
-    expect(screen.getByRole('button', { name: 'Italic (cmd+I)' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Italic (Ctrl+I)' })).toBeInTheDocument();
   });
 
   it('Renders the underline button', () => {
     render(<Editor />);
-    expect(screen.getByRole('button', { name: 'Underline (cmd+U)' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Underline (Ctrl+U)' })).toBeInTheDocument();
   });
 
   it('Renders the align left button', () => {
@@ -296,9 +296,9 @@ describe('Formatted text editor', () => {
 
   it('Should not display the toolbar if is not editable', () => {
     render(<Editor editable={false} />);
-    expect(screen.queryByRole('button', { name: 'Bold (cmd+B)' })).not.toBeInTheDocument();
-    expect(screen.queryByRole('button', { name: 'Italic (cmd+I)' })).not.toBeInTheDocument();
-    expect(screen.queryByRole('button', { name: 'Underline (cmd+U)' })).not.toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: 'Bold (Ctrl+B)' })).not.toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: 'Italic (Ctrl+I)' })).not.toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: 'Underline (Ctrl+U)' })).not.toBeInTheDocument();
   });
 
   it('Should not display the floating toolbar if is not editable', async () => {
@@ -415,7 +415,7 @@ describe('Formatted text editor', () => {
       </ResourceBrowserContext.Provider>,
     );
 
-    await act(() => fireEvent.click(screen.getByRole('button', { name: 'Link (cmd+K)' })));
+    await act(() => fireEvent.click(screen.getByRole('button', { name: 'Link (Ctrl+K)' })));
     await act(() => fireEvent.click(screen.getByText('Choose asset')));
     await act(() => fireEvent.click(screen.getByRole('button', { name: 'Drill down to My Matrix instance children' })));
     await act(() => fireEvent.click(screen.getByRole('button', { name: 'Drill down to Folder 1 children' })));
@@ -426,7 +426,7 @@ describe('Formatted text editor', () => {
     // Toolbar (Link button) should be mounted.
     // Toolbar should be shown (.show-toolbar class).
     expect(screen.getByRole('button', { name: /My image/ })).toBeInTheDocument();
-    expect(within(document.body).getByRole('button', { name: 'Link (cmd+K)', hidden: true })).toBeInTheDocument();
+    expect(within(document.body).getByRole('button', { name: 'Link (Ctrl+K)', hidden: true })).toBeInTheDocument();
     expect(document.querySelector('.show-toolbar')).toBeInTheDocument();
   });
 });

package/src/EditorToolbar/FloatingToolbar.spec.tsx

@@ -9,11 +9,11 @@ describe('FloatingToolbar', () => {
 
   it.each([
     ['Nothing selected', 3, 3, []],
-    ['Regular text selected', 3, 4, ['Bold (cmd+B)', 'Italic (cmd+I)', 'Underline (cmd+U)', 'Link (cmd+K)']],
-    ['Regular text + link selected', 3, 17, ['Bold (cmd+B)', 'Italic (cmd+I)', 'Underline (cmd+U)']],
+    ['Regular text selected', 3, 4, ['Bold (Ctrl+B)', 'Italic (Ctrl+I)', 'Underline (Ctrl+U)', 'Link (Ctrl+K)']],
+    ['Regular text + link selected', 3, 17, ['Bold (Ctrl+B)', 'Italic (Ctrl+I)', 'Underline (Ctrl+U)']],
     ['Nothing selected, positioned directly on the left of a link', 12, 12, []],
     ['Nothing selected, positioned directly on the right of a link', 19, 19, []],
-    ['Nothing selected, positioned within a link', 13, 13, ['Link (cmd+K)', 'Remove link (shift+cmd+K)']],
+    ['Nothing selected, positioned within a link', 13, 13, ['Link (Ctrl+K)', 'Remove link (Shift+Ctrl+K)']],
   ])(
     'Renders formatting buttons when text is selected - %s',
     async (description: string, from: number, to: number, expectedButtons: string[]) => {
@@ -29,8 +29,8 @@ describe('FloatingToolbar', () => {
   );
 
   it.each([
-    ['Image selected', 1, ['Image (cmd+L)']],
-    ['Asset image selected', 2, ['Image (cmd+L)']],
+    ['Image selected', 1, ['Image (Ctrl+L)']],
+    ['Asset image selected', 2, ['Image (Ctrl+L)']],
   ])(
     'Renders formatting buttons when node is selected - %s',
     async (description: string, pos: number, expectedButtons: string[]) => {

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

@@ -6,13 +6,13 @@ import Editor from '../../../Editor/Editor';
 describe('Bold button', () => {
   it('Renders the bold button', () => {
     render(<Editor />);
-    expect(screen.getByRole('button', { name: 'Bold (cmd+B)' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Bold (Ctrl+B)' })).toBeInTheDocument();
   });
 
   it('Activates the button if clicked', () => {
     render(<Editor />);
-    expect(screen.getByRole('button', { name: 'Bold (cmd+B)' }).classList.contains('squiz-fte-btn')).toBeTruthy();
-    const bold = screen.getByRole('button', { name: 'Bold (cmd+B)' });
+    expect(screen.getByRole('button', { name: 'Bold (Ctrl+B)' }).classList.contains('squiz-fte-btn')).toBeTruthy();
+    const bold = screen.getByRole('button', { name: 'Bold (Ctrl+B)' });
     fireEvent.click(bold);
     expect(bold.classList.contains('squiz-fte-btn--is-active')).toBeTruthy();
   });

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

@@ -3,6 +3,7 @@ import { useCommands, useActive, useChainedCommands } from '@remirror/react';
 import { BoldExtension } from '@remirror/extension-bold';
 import Button from '../../../ui/Button/Button';
 import FormatBoldRoundedIcon from '@mui/icons-material/FormatBoldRounded';
+import { getShortcutSymbol } from '../../../utils/getShortcutSymbol';
 
 const BoldButton = () => {
   const { toggleBold } = useCommands();
@@ -22,7 +23,7 @@ const BoldButton = () => {
       isDisabled={!enabled}
       isActive={active.bold()}
       icon={<FormatBoldRoundedIcon />}
-      label="Bold (cmd+B)"
+      label={`Bold (${getShortcutSymbol()}+B)`}
     />
   );
 };

package/src/EditorToolbar/Tools/ClearFormatting/ClearFormattingButton.spec.tsx

@@ -7,7 +7,7 @@ import ClearFormattingButton from './ClearFormattingButton';
 describe('Clear formatting button', () => {
   it('Renders the clear formatting button', async () => {
     await renderWithEditor(<ClearFormattingButton />, { content: 'Some nonsense content here' });
-    expect(screen.getByRole('button', { name: 'Clear all formatting (cmd+\\)' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Clear all formatting (Ctrl+\\)' })).toBeInTheDocument();
   });
 
   it('Clears the formatting from editor content after clicking button', async () => {
@@ -15,7 +15,7 @@ describe('Clear formatting button', () => {
       content: '<p>Hello <strong>Mr Bean</strong></p>',
     });
 
-    const clearFormatting = screen.getByRole('button', { name: 'Clear all formatting (cmd+\\)' });
+    const clearFormatting = screen.getByRole('button', { name: 'Clear all formatting (Ctrl+\\)' });
     fireEvent.click(clearFormatting);
 
     expect(getHtmlContent()).toBe('<p style="">Hello Mr Bean</p>');

package/src/EditorToolbar/Tools/ClearFormatting/ClearFormattingButton.tsx

@@ -4,6 +4,7 @@ import { VerticalDivider } from '@remirror/react-components';
 import FormatClearRoundedIcon from '@mui/icons-material/FormatClearRounded';
 import { ClearFormattingExtension } from '../../../Extensions/ClearFormattingExtension/ClearFormattingExtension';
 import Button from '../../../ui/Button/Button';
+import { getShortcutSymbol } from '../../../utils/getShortcutSymbol';
 
 const ClearFormattingButton = () => {
   const { clearFormatting } = useCommands<ClearFormattingExtension>();
@@ -36,7 +37,9 @@ const ClearFormattingButton = () => {
         isDisabled={false}
         isActive={false}
         icon={<FormatClearRoundedIcon />}
-        label={`${contentSelected ? 'Clear formatting from selection' : 'Clear all formatting'} (cmd+\\)`}
+        label={`${
+          contentSelected ? 'Clear formatting from selection' : 'Clear all formatting'
+        } (${getShortcutSymbol()}+\\)`}
       />
     </>
   );

package/src/EditorToolbar/Tools/Image/ImageButton.spec.tsx

@@ -10,7 +10,7 @@ jest.mock('react-image-size');
 
 describe('ImageButton', () => {
   const openModal = async () => {
-    fireEvent.click(screen.getByRole('button', { name: 'Image (cmd+L)' }));
+    fireEvent.click(screen.getByRole('button', { name: 'Image (Ctrl+L)' }));
     await screen.findByRole('button', { name: 'Apply' });
     fireEvent.click(screen.getByRole('button', { name: 'From URL' }));
   };

package/src/EditorToolbar/Tools/Image/ImageButton.tsx

@@ -8,6 +8,7 @@ import { ImageExtension } from '../../../Extensions/ImageExtension/ImageExtensio
 import { NodeName } from '../../../Extensions/Extensions';
 import { AssetImageExtension } from '../../../Extensions/ImageExtension/AssetImageExtension';
 import { CodeBlockExtension } from 'remirror/dist-types/extensions';
+import { getShortcutSymbol } from '../../../utils/getShortcutSymbol';
 
 type ImageButtonProps = {
   inPopover?: boolean;
@@ -60,7 +61,7 @@ const ImageButton = ({ inPopover = false }: ImageButtonProps) => {
         handleOnClick={handleClick}
         isActive={active.image() || active.assetImage()}
         icon={<ImageRoundedIcon />}
-        label="Image (cmd+L)"
+        label={`Image (${getShortcutSymbol()}+L)`}
         isDisabled={disabled}
       />
       {showModal && <ImageModal onCancel={() => setShowModal(false)} onSubmit={handleSubmit} />}

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

@@ -6,13 +6,13 @@ import Editor from '../../../Editor/Editor';
 describe('Italic button', () => {
   it('Renders the italic button', () => {
     render(<Editor />);
-    expect(screen.getByRole('button', { name: 'Italic (cmd+I)' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Italic (Ctrl+I)' })).toBeInTheDocument();
   });
 
   it('Activates the button if clicked', () => {
     render(<Editor />);
-    expect(screen.getByRole('button', { name: 'Italic (cmd+I)' }).classList.contains('squiz-fte-btn')).toBeTruthy();
-    const italic = screen.getByRole('button', { name: 'Italic (cmd+I)' });
+    expect(screen.getByRole('button', { name: 'Italic (Ctrl+I)' }).classList.contains('squiz-fte-btn')).toBeTruthy();
+    const italic = screen.getByRole('button', { name: 'Italic (Ctrl+I)' });
     fireEvent.click(italic);
     expect(italic.classList.contains('squiz-fte-btn--is-active')).toBeTruthy();
   });

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

@@ -3,6 +3,7 @@ import { useCommands, useActive, useChainedCommands } from '@remirror/react';
 import { ItalicExtension } from '@remirror/extension-italic';
 import Button from '../../../ui/Button/Button';
 import FormatItalicRoundedIcon from '@mui/icons-material/FormatItalicRounded';
+import { getShortcutSymbol } from '../../../utils/getShortcutSymbol';
 
 const ItalicButton = () => {
   const { toggleItalic } = useCommands();
@@ -22,7 +23,7 @@ const ItalicButton = () => {
       isDisabled={!enabled}
       isActive={active.italic()}
       icon={<FormatItalicRoundedIcon />}
-      label="Italic (cmd+I)"
+      label={`Italic (${getShortcutSymbol()}+I)`}
     />
   );
 };

package/src/EditorToolbar/Tools/Link/LinkButton.spec.tsx

@@ -6,7 +6,7 @@ import LinkButton from './LinkButton';
 
 describe('LinkButton', () => {
   const openModal = async () => {
-    fireEvent.click(screen.getByRole('button', { name: 'Link (cmd+K)' }));
+    fireEvent.click(screen.getByRole('button', { name: 'Link (Ctrl+K)' }));
     await screen.findByRole('button', { name: 'Apply' });
     fireEvent.click(screen.getByRole('button', { name: 'From URL' }));
   };

package/src/EditorToolbar/Tools/Link/LinkButton.tsx

@@ -10,6 +10,7 @@ import { AssetLinkExtension } from '../../../Extensions/LinkExtension/AssetLinkE
 import { MarkName } from '../../../Extensions/Extensions';
 import { ImageExtension } from '../../../Extensions/ImageExtension/ImageExtension';
 import { CodeBlockExtension } from 'remirror/dist-types/extensions';
+import { getShortcutSymbol } from '../../../utils/getShortcutSymbol';
 
 export type LinkButtonProps = {
   inPopover?: boolean;
@@ -55,7 +56,7 @@ const LinkButton = ({ inPopover = false }: LinkButtonProps) => {
         handleOnClick={handleClick}
         isActive={active.link() || active.assetLink()}
         icon={<InsertLinkRoundedIcon />}
-        label="Link (cmd+K)"
+        label={`Link (${getShortcutSymbol()}+K)`}
         isDisabled={disabled}
       />
       {showModal && <LinkModal onCancel={() => setShowModal(false)} onSubmit={handleSubmit} />}

package/src/EditorToolbar/Tools/Link/RemoveLinkButton.spec.tsx

@@ -40,7 +40,7 @@ describe('RemoveLinkButton', () => {
     await act(() => editor.selectText('all'));
 
     // remove the links.
-    fireEvent.click(screen.getByRole('button', { name: 'Remove link (shift+cmd+K)' }));
+    fireEvent.click(screen.getByRole('button', { name: 'Remove link (Shift+Ctrl+K)' }));
 
     // make sure both types of link have been removed.
     expect(getJsonContent()).toEqual({
@@ -101,11 +101,11 @@ describe('RemoveLinkButton', () => {
     });
 
     // expect remove button to be disabled
-    expect(screen.getByRole('button', { name: 'Remove link (shift+cmd+K)' })).toBeDisabled();
+    expect(screen.getByRole('button', { name: 'Remove link (Shift+Ctrl+K)' })).toBeDisabled();
     // jump to the middle of the link.
     await act(() => editor.selectText(3));
     // expect remove button to be enabled
-    expect(screen.getByRole('button', { name: 'Remove link (shift+cmd+K)' })).not.toBeDisabled();
+    expect(screen.getByRole('button', { name: 'Remove link (Shift+Ctrl+K)' })).not.toBeDisabled();
   });
 
   it('Enables the Remove link button when asset link text is selected', async () => {
@@ -134,10 +134,10 @@ describe('RemoveLinkButton', () => {
     });
 
     // expect remove button to be disabled
-    expect(screen.getByRole('button', { name: 'Remove link (shift+cmd+K)' })).toBeDisabled();
+    expect(screen.getByRole('button', { name: 'Remove link (Shift+Ctrl+K)' })).toBeDisabled();
     // jump to the middle of the link.
     await act(() => editor.selectText(3));
     // expect remove button to be enabled
-    expect(screen.getByRole('button', { name: 'Remove link (shift+cmd+K)' })).not.toBeDisabled();
+    expect(screen.getByRole('button', { name: 'Remove link (Shift+Ctrl+K)' })).not.toBeDisabled();
   });
 });

package/src/EditorToolbar/Tools/Link/RemoveLinkButton.tsx

@@ -5,6 +5,7 @@ import LinkOffIcon from '@mui/icons-material/LinkOff';
 import { AssetLinkExtension } from '../../../Extensions/LinkExtension/AssetLinkExtension';
 import { LinkExtension } from '../../../Extensions/LinkExtension/LinkExtension';
 import { LinkButtonProps } from './LinkButton';
+import { getShortcutSymbol } from '../../../utils/getShortcutSymbol';
 
 const RemoveLinkButton = ({ inPopover = false }: LinkButtonProps) => {
   const chain = useChainedCommands();
@@ -33,7 +34,7 @@ const RemoveLinkButton = ({ inPopover = false }: LinkButtonProps) => {
       isActive={false}
       isDisabled={disabled}
       icon={<LinkOffIcon />}
-      label="Remove link (shift+cmd+K)"
+      label={`Remove link (Shift+${getShortcutSymbol()}+K)`}
     />
   );
 };

package/src/EditorToolbar/Tools/Redo/RedoButton.spec.tsx

@@ -6,12 +6,12 @@ import React from 'react';
 describe('Redo button', () => {
   it('Renders the redo button', () => {
     render(<Editor />);
-    expect(screen.getByRole('button', { name: 'Redo (shift+cmd+Z)' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Redo (Shift+Ctrl+Z)' })).toBeInTheDocument();
   });
 
   it('Renders a disabled button if you have not made any changes yet', () => {
     render(<Editor />);
-    const redo = screen.getByRole('button', { name: 'Redo (shift+cmd+Z)' });
+    const redo = screen.getByRole('button', { name: 'Redo (Shift+Ctrl+Z)' });
     expect(redo).toBeDisabled();
   });
 
@@ -25,12 +25,12 @@ describe('Redo button', () => {
     expect(baseElement.querySelector('p[data-node-text-align="left"]')).toBeTruthy();
 
     // Revert this action
-    const undo = screen.getByRole('button', { name: 'Undo (cmd+Z)' });
+    const undo = screen.getByRole('button', { name: 'Undo (Ctrl+Z)' });
     fireEvent.click(undo);
     expect(baseElement.querySelector('p[data-node-text-align="left"]')).toBeFalsy();
 
     // Check that this enables the redo button
-    const redo = screen.getByRole('button', { name: 'Redo (shift+cmd+Z)' });
+    const redo = screen.getByRole('button', { name: 'Redo (Shift+Ctrl+Z)' });
     expect(redo).not.toBeDisabled();
   });
 
@@ -44,12 +44,12 @@ describe('Redo button', () => {
     expect(baseElement.querySelector('p[data-node-text-align="left"]')).toBeTruthy();
 
     // Revert this action
-    const undo = screen.getByRole('button', { name: 'Undo (cmd+Z)' });
+    const undo = screen.getByRole('button', { name: 'Undo (Ctrl+Z)' });
     fireEvent.click(undo);
     expect(baseElement.querySelector('p[data-node-text-align="left"]')).toBeFalsy();
 
     // Check that this enables the redo button
-    const redo = screen.getByRole('button', { name: 'Redo (shift+cmd+Z)' });
+    const redo = screen.getByRole('button', { name: 'Redo (Shift+Ctrl+Z)' });
     expect(redo).not.toBeDisabled();
 
     // Click the redo button and check that this has reverted the previous action

package/src/EditorToolbar/Tools/Redo/RedoButton.tsx

@@ -3,6 +3,7 @@ import { useCommands, useHelpers } from '@remirror/react';
 import { HistoryExtension } from 'remirror/extensions';
 import Button from '../../../ui/Button/Button';
 import RedoRoundedIcon from '@mui/icons-material/RedoRounded';
+import { getShortcutSymbol } from '../../../utils/getShortcutSymbol';
 
 const RedoButton = () => {
   const { redo } = useCommands<HistoryExtension>();
@@ -22,7 +23,7 @@ const RedoButton = () => {
       isDisabled={!enabled}
       isActive={false}
       icon={<RedoRoundedIcon />}
-      label="Redo (shift+cmd+Z)"
+      label={`Redo (Shift+${getShortcutSymbol()}+Z)`}
     />
   );
 };

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

@@ -6,13 +6,13 @@ import Editor from '../../../Editor/Editor';
 describe('Underline button', () => {
   it('Renders the underline button', () => {
     render(<Editor />);
-    expect(screen.getByRole('button', { name: 'Underline (cmd+U)' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Underline (Ctrl+U)' })).toBeInTheDocument();
   });
 
   it('Activates the button if clicked', () => {
     render(<Editor />);
-    expect(screen.getByRole('button', { name: 'Underline (cmd+U)' }).classList.contains('squiz-fte-btn')).toBeTruthy();
-    const underline = screen.getByRole('button', { name: 'Underline (cmd+U)' });
+    expect(screen.getByRole('button', { name: 'Underline (Ctrl+U)' }).classList.contains('squiz-fte-btn')).toBeTruthy();
+    const underline = screen.getByRole('button', { name: 'Underline (Ctrl+U)' });
     fireEvent.click(underline);
     expect(underline.classList.contains('squiz-fte-btn--is-active')).toBeTruthy();
   });

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

@@ -3,6 +3,7 @@ import { useCommands, useActive, useChainedCommands } from '@remirror/react';
 import { UnderlineExtension } from '@remirror/extension-underline';
 import Button from '../../../ui/Button/Button';
 import FormatUnderlinedRoundedIcon from '@mui/icons-material/FormatUnderlinedRounded';
+import { getShortcutSymbol } from '../../../utils/getShortcutSymbol';
 
 const UnderlineButton = () => {
   const { toggleUnderline } = useCommands();
@@ -22,7 +23,7 @@ const UnderlineButton = () => {
       isDisabled={!enabled}
       isActive={active.underline()}
       icon={<FormatUnderlinedRoundedIcon />}
-      label="Underline (cmd+U)"
+      label={`Underline (${getShortcutSymbol()}+U)`}
     />
   );
 };

package/src/EditorToolbar/Tools/Undo/UndoButton.spec.tsx

@@ -8,12 +8,12 @@ import UndoButton from './UndoButton';
 describe('Undo button', () => {
   it('Renders the undo button', () => {
     render(<Editor />);
-    expect(screen.getByRole('button', { name: 'Undo (cmd+Z)' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Undo (Ctrl+Z)' })).toBeInTheDocument();
   });
 
   it('Renders a disabled button if you have not made any changes yet', () => {
     render(<Editor />);
-    const undo = screen.getByRole('button', { name: 'Undo (cmd+Z)' });
+    const undo = screen.getByRole('button', { name: 'Undo (Ctrl+Z)' });
     expect(undo).toBeDisabled();
   });
 
@@ -26,7 +26,7 @@ describe('Undo button', () => {
 
     fireEvent.click(leftAlignButton);
     expect(baseElement.querySelector('p[data-node-text-align="left"]')).toBeTruthy();
-    const undo = screen.getByRole('button', { name: 'Undo (cmd+Z)' });
+    const undo = screen.getByRole('button', { name: 'Undo (Ctrl+Z)' });
     expect(undo).not.toBeDisabled();
   });
 
@@ -41,7 +41,7 @@ describe('Undo button', () => {
     expect(baseElement.querySelector('p[data-node-text-align="left"]')).toBeTruthy();
 
     // Check that this enables the undo button
-    const undo = screen.getByRole('button', { name: 'Undo (cmd+Z)' });
+    const undo = screen.getByRole('button', { name: 'Undo (Ctrl+Z)' });
     expect(undo).not.toBeDisabled();
 
     // Click the undo button and check that this has reverted the previous action
@@ -60,7 +60,7 @@ describe('Undo button', () => {
       content: [{ type: 'text', text: 'Initial content... with some updated content.' }],
     });
 
-    fireEvent.click(screen.getByRole('button', { name: 'Undo (cmd+Z)' }));
+    fireEvent.click(screen.getByRole('button', { name: 'Undo (Ctrl+Z)' }));
     expect(getJsonContent()).toEqual({
       type: 'paragraph',
       attrs: expect.any(Object),

package/src/EditorToolbar/Tools/Undo/UndoButton.tsx

@@ -3,6 +3,7 @@ import { useCommands, useHelpers } from '@remirror/react';
 import { HistoryExtension } from 'remirror/extensions';
 import Button from '../../../ui/Button/Button';
 import UndoRoundedIcon from '@mui/icons-material/UndoRounded';
+import { getShortcutSymbol } from '../../../utils/getShortcutSymbol';
 
 const UndoButton = () => {
   const { undo } = useCommands<HistoryExtension>();
@@ -22,7 +23,7 @@ const UndoButton = () => {
       isDisabled={!enabled}
       isActive={false}
       icon={<UndoRoundedIcon />}
-      label="Undo (cmd+Z)"
+      label={`Undo (${getShortcutSymbol()}+Z)`}
     />
   );
 };

package/src/utils/converters/remirrorNodeToSquizNode/remirrorNodeToSquizNode.ts

@@ -13,7 +13,7 @@ type FontOptions = FormattedTextModels.v1.FormattedNodeFontProperties;
 type FormattedText = FormattedTextModels.v1.FormattedText;
 type FormattedNode = FormattedTextModels.v1.FormattedNodes;
 type FormattedNodeFontProperties = FormattedTextModels.v1.FormattedNodeFontProperties;
-type FormattedNodeWithChildren = Extract<FormattedNode, { children: FormattedNode[] }>;
+type FormattedNodeWithChildren = Extract<FormattedNode, { children?: FormattedNode[] }>;
 type RemirrorTextAlignment = Exclude<Remirror.Attributes['nodeTextAlignment'], undefined>;
 type FormattedTextAlignment = FormattingOptions['alignment'];
 
@@ -164,7 +164,11 @@ const wrapNodeIfNeeded = (
   wrappingNode: FormattedNodeWithChildren,
   copyFont: boolean = true,
 ): FormattedNode => {
+  const wrappingNodeChildren = wrappingNode.children || [];
+
   if (node.type === 'tag' && wrappingNode.type === 'tag' && (node.tag === 'span' || node.tag === wrappingNode.tag)) {
+    const nodeChildren = node.children || [];
+
     // if the node we are wrapping with is a DOM node, and the node being wrapped is
     // a plain looking DOM node merge the 2 nodes.
     return {
@@ -186,14 +190,14 @@ const wrapNodeIfNeeded = (
             }
           : {},
       ),
-      children: [...node.children, ...wrappingNode.children],
+      children: [...nodeChildren, ...wrappingNodeChildren],
     };
   }
 
   // if the node we are wrapping or the wrapping nodes are not compatible merge them.
   return {
     ...wrappingNode,
-    children: [node, ...wrappingNode.children],
+    children: [node, ...wrappingNodeChildren],
   };
 };
 

package/src/utils/converters/squizNodeToRemirrorNode/squizNodeToRemirrorNode.ts

@@ -146,7 +146,7 @@ const formatNode = (node: FormattedNodes): RemirrorJSON[] => {
   const children: RemirrorJSON[] = [];
 
   if ('children' in node) {
-    node.children.forEach((child: FormattedNodes) => {
+    node.children?.forEach((child: FormattedNodes) => {
       children.push(...formatNode(child));
     });
   }

package/src/utils/getShortcutSymbol.spec.ts

@@ -0,0 +1,27 @@
+import { getShortcutSymbol } from './getShortcutSymbol';
+
+describe('getShortcutSymbol', () => {
+  it('Returns Mac command icon if user-agent is a Mac based user-agent', () => {
+    Object.defineProperty(window, `navigator`, {
+      value: {
+        userAgent:
+          'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_2) AppleWebKit/601.3.9 (KHTML, like Gecko) Version/9.0.2 Safari/601.3.9',
+      },
+      writable: true,
+    });
+
+    expect(getShortcutSymbol()).toBe('⌘');
+  });
+
+  it('Returns Ctrl shortcut if user-agent is not a Mac based user-agent', () => {
+    Object.defineProperty(window, `navigator`, {
+      value: {
+        userAgent:
+          'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/42.0.2311.135 Safari/537.36 Edge/12.246',
+      },
+      writable: true,
+    });
+
+    expect(getShortcutSymbol()).toBe('Ctrl');
+  });
+});

package/src/utils/getShortcutSymbol.ts

@@ -0,0 +1,4 @@
+export const getShortcutSymbol = (): string => {
+  // If we can detect Mac then we return "⌘" otherwise default to "Ctrl"
+  return window.navigator.userAgent.toLowerCase().indexOf('mac') > -1 ? '⌘' : 'Ctrl';
+};