@squiz/formatted-text-editor 1.40.1-alpha.10 → 1.40.1-alpha.12

package/lib/EditorToolbar/Toolbar.js

@@ -9,7 +9,6 @@ const react_components_1 = require("@remirror/react-components");
 const clsx_1 = __importDefault(require("clsx"));
 const ItalicButton_1 = __importDefault(require("./Tools/Italic/ItalicButton"));
 const UnderlineButton_1 = __importDefault(require("./Tools/Underline/UnderlineButton"));
-const UnorderedListButton_1 = __importDefault(require("./Tools/UnorderedList/UnorderedListButton"));
 const BoldButton_1 = __importDefault(require("./Tools/Bold/BoldButton"));
 const TextAlignButtons_1 = __importDefault(require("./Tools/TextAlign/TextAlignButtons"));
 const UndoButton_1 = __importDefault(require("./Tools/Undo/UndoButton"));
@@ -19,6 +18,7 @@ const LinkButton_1 = __importDefault(require("./Tools/Link/LinkButton"));
 const ImageButton_1 = __importDefault(require("./Tools/Image/ImageButton"));
 const RemoveLinkButton_1 = __importDefault(require("./Tools/Link/RemoveLinkButton"));
 const ClearFormattingButton_1 = __importDefault(require("./Tools/ClearFormatting/ClearFormattingButton"));
+const ListButtons_1 = __importDefault(require("./Tools/Lists/ListButtons"));
 const hooks_1 = require("../hooks");
 const Toolbar = ({ isVisible }) => {
     const extensionNames = (0, hooks_1.useExtensionNames)();
@@ -32,9 +32,8 @@ const Toolbar = ({ isVisible }) => {
         extensionNames.italic && react_1.default.createElement(ItalicButton_1.default, null),
         extensionNames.underline && react_1.default.createElement(UnderlineButton_1.default, null),
         extensionNames.nodeFormatting && react_1.default.createElement(TextAlignButtons_1.default, null),
-        extensionNames.bulletList && react_1.default.createElement(UnorderedListButton_1.default, null),
+        extensionNames.listItem && react_1.default.createElement(ListButtons_1.default, null),
         extensionNames.link && (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement(react_components_1.VerticalDivider, null),
             react_1.default.createElement(LinkButton_1.default, null),
             react_1.default.createElement(RemoveLinkButton_1.default, null))),
         extensionNames.image && react_1.default.createElement(ImageButton_1.default, null),

package/lib/EditorToolbar/Tools/Lists/ListButtons.d.ts

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

package/lib/EditorToolbar/Tools/Lists/ListButtons.js

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const OrderedListButton_1 = __importDefault(require("./OrderedList/OrderedListButton"));
+const UnorderedListButton_1 = __importDefault(require("./UnorderedList/UnorderedListButton"));
+const react_components_1 = require("@remirror/react-components");
+const ListButtons = () => (react_1.default.createElement(react_1.default.Fragment, null,
+    react_1.default.createElement(UnorderedListButton_1.default, null),
+    react_1.default.createElement(OrderedListButton_1.default, null),
+    react_1.default.createElement(react_components_1.VerticalDivider, null)));
+exports.default = ListButtons;

package/lib/EditorToolbar/Tools/Lists/OrderedList/OrderedListButton.d.ts

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

package/lib/EditorToolbar/Tools/Lists/OrderedList/OrderedListButton.js

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_2 = require("@remirror/react");
+const Button_1 = __importDefault(require("../../../../ui/Button/Button"));
+const FormatListNumbered_1 = __importDefault(require("@mui/icons-material/FormatListNumbered"));
+const OrderedListButton = () => {
+    const { toggleOrderedList } = (0, react_2.useCommands)();
+    const chain = (0, react_2.useChainedCommands)();
+    const active = (0, react_2.useActive)();
+    const enabled = toggleOrderedList.enabled();
+    const handleSelect = () => {
+        if (toggleOrderedList.enabled()) {
+            chain.toggleOrderedList().focus().run();
+        }
+    };
+    return (react_1.default.createElement(Button_1.default, { handleOnClick: handleSelect, isDisabled: !enabled, isActive: active.orderedList(), icon: react_1.default.createElement(FormatListNumbered_1.default, null), label: "Ordered list" }));
+};
+exports.default = OrderedListButton;

package/lib/EditorToolbar/Tools/{UnorderedList → Lists/UnorderedList}/UnorderedListButton.js

@@ -5,7 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const react_2 = require("@remirror/react");
-const Button_1 = __importDefault(require("../../../ui/Button/Button"));
+const Button_1 = __importDefault(require("../../../../ui/Button/Button"));
 const FormatListBulletedRounded_1 = __importDefault(require("@mui/icons-material/FormatListBulletedRounded"));
 const UnorderedListButton = () => {
     const { toggleBulletList } = (0, react_2.useCommands)();

package/lib/Extensions/Extensions.js

@@ -50,6 +50,7 @@ const createExtensions = (context) => {
             new ClearFormattingExtension_1.ClearFormattingExtension(),
             new extensions_1.BulletListExtension(),
             new extensions_1.ListItemExtension(),
+            new extensions_1.OrderedListExtension(),
         ];
     };
 };

package/lib/index.css

@@ -643,6 +643,10 @@
   color: rgb(7 116 210 / var(--tw-text-opacity));
   text-decoration: underline;
 }
+.squiz-fte-scope .remirror-editor p {
+  -webkit-margin-after: 0.8rem;
+  margin-block-end: 0.8rem;
+}
 .squiz-fte-scope .remirror-editor h1 {
   font-size: 1.625rem;
   font-weight: 600;
@@ -714,6 +718,10 @@
   padding: 0 0 0 2.5rem;
   margin: 1rem 0;
 }
+.squiz-fte-scope .remirror-editor ol {
+  list-style-type: decimal;
+  padding: 0 0 0 1rem;
+}
 .squiz-fte-scope .squiz-fte-form-group {
   display: flex;
   flex-direction: column;

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

@@ -19,8 +19,9 @@ const getNodeType = (node) => {
         img: 'image',
         pre: 'preformatted',
         p: 'paragraph',
-        ul: 'bulletList',
+        ol: 'orderedList',
         li: 'listItem',
+        ul: 'bulletList',
         a: Extensions_1.NodeName.Text,
         span: Extensions_1.NodeName.Text,
         code: Extensions_1.NodeName.CodeBlock,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squiz/formatted-text-editor",
-  "version": "1.40.1-alpha.10",
+  "version": "1.40.1-alpha.12",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "scripts": {
@@ -20,8 +20,8 @@
     "@headlessui/react": "1.7.11",
     "@mui/icons-material": "5.11.16",
     "@remirror/react": "2.0.25",
-    "@squiz/dx-json-schema-lib": "1.40.1-alpha.10",
-    "@squiz/resource-browser": "1.40.1-alpha.10",
+    "@squiz/dx-json-schema-lib": "1.40.1-alpha.12",
+    "@squiz/resource-browser": "1.40.1-alpha.12",
     "clsx": "1.2.1",
     "react-hook-form": "7.43.2",
     "react-image-size": "2.0.0",
@@ -75,5 +75,5 @@
   "volta": {
     "node": "18.15.0"
   },
-  "gitHead": "5987cf82afe866ba79320a3960966063309e5cbe"
+  "gitHead": "f1b879c8a9a73e15ee53819c41d2fd3c6ccf2b3e"
 }

package/src/EditorToolbar/Toolbar.tsx

@@ -3,7 +3,6 @@ import { Toolbar as RemirrorToolbar, VerticalDivider } from '@remirror/react-com
 import clsx from 'clsx';
 import ItalicButton from './Tools/Italic/ItalicButton';
 import UnderlineButton from './Tools/Underline/UnderlineButton';
-import UnorderedListButton from './Tools/UnorderedList/UnorderedListButton';
 import BoldButton from './Tools/Bold/BoldButton';
 import TextAlignButtons from './Tools/TextAlign/TextAlignButtons';
 import UndoButton from './Tools/Undo/UndoButton';
@@ -13,6 +12,7 @@ import LinkButton from './Tools/Link/LinkButton';
 import ImageButton from './Tools/Image/ImageButton';
 import RemoveLinkButton from './Tools/Link/RemoveLinkButton';
 import ClearFormattingButton from './Tools/ClearFormatting/ClearFormattingButton';
+import ListButtons from './Tools/Lists/ListButtons';
 import { useExtensionNames } from '../hooks';
 
 type ToolbarProps = {
@@ -39,10 +39,9 @@ export const Toolbar = ({ isVisible }: ToolbarProps) => {
       {extensionNames.italic && <ItalicButton />}
       {extensionNames.underline && <UnderlineButton />}
       {extensionNames.nodeFormatting && <TextAlignButtons />}
-      {extensionNames.bulletList && <UnorderedListButton />}
+      {extensionNames.listItem && <ListButtons />}
       {extensionNames.link && (
         <>
-          <VerticalDivider />
           <LinkButton />
           <RemoveLinkButton />
         </>

package/src/EditorToolbar/Tools/Lists/ListButtons.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import OrderedListButton from './OrderedList/OrderedListButton';
+import UnorderedListButton from './UnorderedList/UnorderedListButton';
+import { VerticalDivider } from '@remirror/react-components';
+
+const ListButtons = () => (
+  <>
+    <UnorderedListButton />
+    <OrderedListButton />
+    <VerticalDivider />
+  </>
+);
+
+export default ListButtons;

package/src/EditorToolbar/Tools/Lists/OrderedList/OrderListButton.spec.tsx

@@ -0,0 +1,39 @@
+import '@testing-library/jest-dom';
+import { render, fireEvent } from '@testing-library/react';
+import Editor from '../../../../Editor/Editor';
+import React from 'react';
+
+describe('Ordered list button', () => {
+  it('Renders the ordered list button', () => {
+    const { baseElement, getByRole } = render(<Editor />);
+    expect(baseElement).toBeTruthy();
+    expect(getByRole('button', { name: 'Ordered list' })).toBeTruthy();
+  });
+
+  it('Applies ordered list after selecting ordered list button', () => {
+    const { baseElement, getByRole } = render(<Editor />);
+    expect(baseElement).toBeTruthy();
+
+    const OrderedListButton = getByRole('button', { name: 'Ordered list' });
+    expect(OrderedListButton).toBeTruthy();
+    expect(OrderedListButton.classList.contains('is-active')).toBeFalsy();
+
+    fireEvent.click(OrderedListButton);
+
+    setTimeout(() => {
+      expect(OrderedListButton.classList.contains('is-active')).toBeTruthy();
+    }, 50);
+  });
+
+  it('Should apply order list to editor after clicking button', () => {
+    const { baseElement, getByRole } = render(<Editor />);
+    expect(baseElement).toBeTruthy();
+    expect(baseElement.querySelector('ol')).toBeFalsy();
+
+    const OrderedListButton = getByRole('button', { name: 'Ordered list' });
+    expect(OrderedListButton).toBeTruthy();
+    fireEvent.click(OrderedListButton);
+
+    expect(baseElement.querySelector('ol')).toBeTruthy();
+  });
+});

package/src/EditorToolbar/Tools/Lists/OrderedList/OrderedListButton.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { useCommands, useActive, useChainedCommands } from '@remirror/react';
+import { OrderedListExtension } from '@remirror/extension-list';
+import Button from '../../../../ui/Button/Button';
+import FormatListNumberedIcon from '@mui/icons-material/FormatListNumbered';
+
+const OrderedListButton = () => {
+  const { toggleOrderedList } = useCommands();
+  const chain = useChainedCommands();
+
+  const active = useActive<OrderedListExtension>();
+  const enabled = toggleOrderedList.enabled();
+  const handleSelect = () => {
+    if (toggleOrderedList.enabled()) {
+      chain.toggleOrderedList().focus().run();
+    }
+  };
+
+  return (
+    <Button
+      handleOnClick={handleSelect}
+      isDisabled={!enabled}
+      isActive={active.orderedList()}
+      icon={<FormatListNumberedIcon />}
+      label="Ordered list"
+    />
+  );
+};
+
+export default OrderedListButton;

package/src/EditorToolbar/Tools/{UnorderedList → Lists/UnorderedList}/UnorderedList.spec.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import '@testing-library/jest-dom';
 import { render, screen, fireEvent } from '@testing-library/react';
-import Editor from '../../../Editor/Editor';
+import Editor from '../../../../Editor/Editor';
 
 describe('Unordered list button', () => {
   it('Renders the unordered list button', () => {

package/src/EditorToolbar/Tools/{UnorderedList → Lists/UnorderedList}/UnorderedListButton.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useCommands, useActive, useChainedCommands } from '@remirror/react';
 import { BulletListExtension } from 'remirror/extensions';
-import Button from '../../../ui/Button/Button';
+import Button from '../../../../ui/Button/Button';
 import FormatListBulletedRoundedIcon from '@mui/icons-material/FormatListBulletedRounded';
 
 const UnorderedListButton = () => {

package/src/Extensions/Extensions.ts

@@ -6,6 +6,7 @@ import {
   ParagraphExtension,
   UnderlineExtension,
   HistoryExtension,
+  OrderedListExtension,
   BulletListExtension,
   ListItemExtension,
 } from 'remirror/extensions';
@@ -60,6 +61,7 @@ export const createExtensions = (context: EditorContextOptions) => {
       new ClearFormattingExtension(),
       new BulletListExtension(),
       new ListItemExtension(),
+      new OrderedListExtension(),
     ];
   };
 };

package/src/ui/_typography.scss

@@ -5,6 +5,10 @@
     text-decoration: underline;
   }
 
+  p {
+    margin-block-end: 0.8rem;
+  }
+
   h1 {
     font-size: 1.625rem;
     font-weight: 600;
@@ -78,4 +82,9 @@
     padding: 0 0 0 2.5rem;
     margin: 1rem 0;
   }
+
+  ol {
+    list-style-type: decimal;
+    padding: 0 0 0 1rem;
+  }
 }

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

@@ -426,6 +426,79 @@ describe('squizNodeToRemirrorNode', () => {
     },
   );
 
+  it('should handle ordered lists', () => {
+    const squizComponentJSON: FormattedText = [
+      {
+        type: 'tag',
+        tag: 'ol',
+        children: [
+          {
+            type: 'tag',
+            tag: 'li',
+            children: [
+              {
+                type: 'tag',
+                tag: 'p',
+                children: [
+                  {
+                    type: 'text',
+                    value: 'ddd',
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      },
+    ];
+
+    const expected: RemirrorJSON = {
+      content: [
+        {
+          attrs: { level: undefined, nodeIndent: null, nodeLineHeight: null, nodeTextAlignment: null, style: '' },
+          type: 'orderedList',
+          marks: undefined,
+          text: undefined,
+          content: [
+            {
+              attrs: { level: undefined, nodeIndent: null, nodeLineHeight: null, nodeTextAlignment: null, style: '' },
+              type: 'listItem',
+              marks: undefined,
+              text: undefined,
+              content: [
+                {
+                  attrs: {
+                    level: undefined,
+                    nodeIndent: null,
+                    nodeLineHeight: null,
+                    nodeTextAlignment: null,
+                    style: '',
+                  },
+                  marks: undefined,
+                  text: undefined,
+                  type: 'paragraph',
+                  content: [
+                    {
+                      attrs: undefined,
+                      content: undefined,
+                      marks: undefined,
+                      text: 'ddd',
+                      type: 'text',
+                    },
+                  ],
+                },
+              ],
+            },
+          ],
+        },
+      ],
+      type: 'doc',
+    };
+
+    const result = squizNodeToRemirrorNode(squizComponentJSON);
+    expect(result).toEqual(expected);
+  });
+
   it('should handle unordered lists', () => {
     const squizComponentJSON: FormattedText = [
       {

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

@@ -24,8 +24,9 @@ const getNodeType = (node: FormattedNodes): string => {
     img: 'image',
     pre: 'preformatted',
     p: 'paragraph',
-    ul: 'bulletList',
+    ol: 'orderedList',
     li: 'listItem',
+    ul: 'bulletList',
     a: NodeName.Text,
     span: NodeName.Text,
     code: NodeName.CodeBlock,

package/src/utils/getNodeNamesByGroup.spec.ts

@@ -24,6 +24,7 @@ describe('getNodeNamesByGroup', () => {
       'unsupportedNode',
       'bulletList',
       'listItem',
+      'orderedList',
     ]);
   });
 });