@squiz/formatted-text-editor 1.40.1-alpha.2 → 1.40.1-alpha.21

package/lib/EditorToolbar/Toolbar.js

@@ -18,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)();
@@ -31,6 +32,7 @@ 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.listItem && react_1.default.createElement(ListButtons_1.default, null),
         extensionNames.link && (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement(LinkButton_1.default, null),
             react_1.default.createElement(RemoveLinkButton_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/Lists/UnorderedList/UnorderedListButton.d.ts

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

package/lib/EditorToolbar/Tools/Lists/UnorderedList/UnorderedListButton.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 FormatListBulletedRounded_1 = __importDefault(require("@mui/icons-material/FormatListBulletedRounded"));
+const UnorderedListButton = () => {
+    const { toggleBulletList } = (0, react_2.useCommands)();
+    const chain = (0, react_2.useChainedCommands)();
+    const active = (0, react_2.useActive)();
+    const enabled = toggleBulletList.enabled();
+    const handleSelect = () => {
+        if (toggleBulletList.enabled()) {
+            chain.toggleBulletList().focus().run();
+        }
+    };
+    return (react_1.default.createElement(Button_1.default, { handleOnClick: handleSelect, isDisabled: !enabled, isActive: active.bulletList(), icon: react_1.default.createElement(FormatListBulletedRounded_1.default, null), label: "Unordered list" }));
+};
+exports.default = UnorderedListButton;

package/lib/Extensions/Extensions.js

@@ -48,6 +48,9 @@ const createExtensions = (context) => {
             }),
             new UnsupportedNodeExtension_1.UnsupportedNodeExtension(),
             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;
@@ -709,6 +713,15 @@
   padding-top: 0.75rem;
   padding-bottom: 0.75rem;
 }
+.squiz-fte-scope .remirror-editor ul,
+.squiz-fte-scope .remirror-editor ol {
+  list-style-type: disc;
+  padding: 0 0 0 2.5rem;
+  margin: 1rem 0;
+}
+.squiz-fte-scope .remirror-editor ol {
+  list-style-type: decimal;
+}
 .squiz-fte-scope .squiz-fte-form-group {
   display: flex;
   flex-direction: column;

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

@@ -19,6 +19,9 @@ const getNodeType = (node) => {
         img: 'image',
         pre: 'preformatted',
         p: 'paragraph',
+        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.2",
+  "version": "1.40.1-alpha.21",
   "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.2",
-    "@squiz/resource-browser": "1.40.1-alpha.2",
+    "@squiz/dx-json-schema-lib": "1.40.1-alpha.21",
+    "@squiz/resource-browser": "1.40.1-alpha.21",
     "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": "191b8aed0a7898d6bc6d21596633c0de2c2e7995"
+  "gitHead": "9b861f79139fdad14ec243b54c05874c5155dcc7"
 }

package/src/EditorToolbar/Toolbar.tsx

@@ -12,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 = {
@@ -38,6 +39,7 @@ export const Toolbar = ({ isVisible }: ToolbarProps) => {
       {extensionNames.italic && <ItalicButton />}
       {extensionNames.underline && <UnderlineButton />}
       {extensionNames.nodeFormatting && <TextAlignButtons />}
+      {extensionNames.listItem && <ListButtons />}
       {extensionNames.link && (
         <>
           <LinkButton />

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/Lists/UnorderedList/UnorderedList.spec.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import '@testing-library/jest-dom';
+import { render, screen, fireEvent } from '@testing-library/react';
+import Editor from '../../../../Editor/Editor';
+
+describe('Unordered list button', () => {
+  it('Renders the unordered list button', () => {
+    render(<Editor />);
+    expect(screen.getByRole('button', { name: 'Unordered list' })).toBeInTheDocument();
+  });
+
+  it('Activates the button if clicked', () => {
+    render(<Editor />);
+    expect(screen.getByRole('button', { name: 'Unordered list' }).classList.contains('squiz-fte-btn')).toBeTruthy();
+    const ul = screen.getByRole('button', { name: 'Unordered list' });
+    fireEvent.click(ul);
+    expect(ul.classList.contains('squiz-fte-btn--is-active')).toBeTruthy();
+  });
+});

package/src/EditorToolbar/Tools/Lists/UnorderedList/UnorderedListButton.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { useCommands, useActive, useChainedCommands } from '@remirror/react';
+import { BulletListExtension } from 'remirror/extensions';
+import Button from '../../../../ui/Button/Button';
+import FormatListBulletedRoundedIcon from '@mui/icons-material/FormatListBulletedRounded';
+
+const UnorderedListButton = () => {
+  const { toggleBulletList } = useCommands();
+  const chain = useChainedCommands();
+
+  const active = useActive<BulletListExtension>();
+  const enabled = toggleBulletList.enabled();
+  const handleSelect = () => {
+    if (toggleBulletList.enabled()) {
+      chain.toggleBulletList().focus().run();
+    }
+  };
+
+  return (
+    <Button
+      handleOnClick={handleSelect}
+      isDisabled={!enabled}
+      isActive={active.bulletList()}
+      icon={<FormatListBulletedRoundedIcon />}
+      label="Unordered list"
+    />
+  );
+};
+
+export default UnorderedListButton;

package/src/Extensions/Extensions.ts

@@ -6,6 +6,9 @@ import {
   ParagraphExtension,
   UnderlineExtension,
   HistoryExtension,
+  OrderedListExtension,
+  BulletListExtension,
+  ListItemExtension,
 } from 'remirror/extensions';
 import { Extension } from '@remirror/core';
 import { PreformattedExtension } from './PreformattedExtension/PreformattedExtension';
@@ -56,6 +59,9 @@ export const createExtensions = (context: EditorContextOptions) => {
       }),
       new UnsupportedNodeExtension(),
       new ClearFormattingExtension(),
+      new BulletListExtension(),
+      new ListItemExtension(),
+      new OrderedListExtension(),
     ];
   };
 };

package/src/ui/_typography.scss

@@ -1,9 +1,14 @@
+// Add any formatting we want the editor to have for the tools we have added - all default styling has been removed by the reset
 .remirror-editor {
   a {
     @apply text-blue-300;
     text-decoration: underline;
   }
 
+  p {
+    margin-block-end: 0.8rem;
+  }
+
   h1 {
     font-size: 1.625rem;
     font-weight: 600;
@@ -71,4 +76,15 @@
       padding-bottom: 0.75rem;
     }
   }
+
+  ul,
+  ol {
+    list-style-type: disc;
+    padding: 0 0 0 2.5rem;
+    margin: 1rem 0;
+  }
+
+  ol {
+    list-style-type: decimal;
+  }
 }

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

@@ -425,4 +425,195 @@ 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 = [
+      {
+        type: 'tag',
+        tag: 'ul',
+        children: [
+          {
+            type: 'tag',
+            tag: 'li',
+            children: [
+              {
+                type: 'tag',
+                tag: 'p',
+                children: [
+                  {
+                    type: 'text',
+                    value: 'chicken',
+                  },
+                ],
+              },
+            ],
+          },
+          {
+            type: 'tag',
+            tag: 'li',
+            children: [
+              {
+                type: 'tag',
+                tag: 'p',
+                children: [
+                  {
+                    type: 'text',
+                    value: 'egg',
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      },
+    ];
+
+    const expected: RemirrorJSON = {
+      content: [
+        {
+          attrs: { level: undefined, nodeIndent: null, nodeLineHeight: null, nodeTextAlignment: null, style: '' },
+          type: 'bulletList',
+          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: 'chicken',
+                      type: 'text',
+                    },
+                  ],
+                },
+              ],
+            },
+            {
+              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: 'egg',
+                      type: 'text',
+                    },
+                  ],
+                },
+              ],
+            },
+          ],
+        },
+      ],
+      type: 'doc',
+    };
+
+    const result = squizNodeToRemirrorNode(squizComponentJSON);
+    expect(result).toEqual(expected);
+  });
 });

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

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

package/src/utils/getNodeNamesByGroup.spec.ts

@@ -15,6 +15,16 @@ describe('getNodeNamesByGroup', () => {
     // Nodes in the first array will be transformed to a paragraph when formatting is cleared.
     // Nodes in the second array will be left as-is.
     expect(formattingNodeNames).toEqual(['paragraph', 'heading', 'preformatted']);
-    expect(otherNodeNames).toEqual(['assetImage', 'doc', 'text', 'codeBlock', 'image', 'unsupportedNode']);
+    expect(otherNodeNames).toEqual([
+      'assetImage',
+      'doc',
+      'text',
+      'codeBlock',
+      'image',
+      'unsupportedNode',
+      'bulletList',
+      'listItem',
+      'orderedList',
+    ]);
   });
 });