@squiz/formatted-text-editor 1.40.1-alpha.6 → 1.40.1-alpha.9

package/lib/EditorToolbar/Toolbar.js

@@ -9,6 +9,7 @@ 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"));
@@ -31,7 +32,9 @@ 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.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/UnorderedList/UnorderedListButton.d.ts

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

package/lib/EditorToolbar/Tools/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,8 @@ const createExtensions = (context) => {
             }),
             new UnsupportedNodeExtension_1.UnsupportedNodeExtension(),
             new ClearFormattingExtension_1.ClearFormattingExtension(),
+            new extensions_1.BulletListExtension(),
+            new extensions_1.ListItemExtension(),
         ];
     };
 };

package/lib/index.css

@@ -709,6 +709,11 @@
   padding-top: 0.75rem;
   padding-bottom: 0.75rem;
 }
+.squiz-fte-scope .remirror-editor ul {
+  list-style-type: disc;
+  padding: 0 0 0 2.5rem;
+  margin: 1rem 0;
+}
 .squiz-fte-scope .squiz-fte-form-group {
   display: flex;
   flex-direction: column;

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

@@ -19,6 +19,8 @@ const getNodeType = (node) => {
         img: 'image',
         pre: 'preformatted',
         p: 'paragraph',
+        ul: 'bulletList',
+        li: 'listItem',
         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.6",
+  "version": "1.40.1-alpha.9",
   "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.6",
-    "@squiz/resource-browser": "1.40.1-alpha.6",
+    "@squiz/dx-json-schema-lib": "1.40.1-alpha.9",
+    "@squiz/resource-browser": "1.40.1-alpha.9",
     "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": "715c5938d3664a66719624e5c02f6421a4cc5200"
+  "gitHead": "c613b6cf103eb0e484153adecbef5d589bff872b"
 }

package/src/EditorToolbar/Toolbar.tsx

@@ -3,6 +3,7 @@ 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';
@@ -38,8 +39,10 @@ export const Toolbar = ({ isVisible }: ToolbarProps) => {
       {extensionNames.italic && <ItalicButton />}
       {extensionNames.underline && <UnderlineButton />}
       {extensionNames.nodeFormatting && <TextAlignButtons />}
+      {extensionNames.bulletList && <UnorderedListButton />}
       {extensionNames.link && (
         <>
+          <VerticalDivider />
           <LinkButton />
           <RemoveLinkButton />
         </>

package/src/EditorToolbar/Tools/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/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,8 @@ import {
   ParagraphExtension,
   UnderlineExtension,
   HistoryExtension,
+  BulletListExtension,
+  ListItemExtension,
 } from 'remirror/extensions';
 import { Extension } from '@remirror/core';
 import { PreformattedExtension } from './PreformattedExtension/PreformattedExtension';
@@ -56,6 +58,8 @@ export const createExtensions = (context: EditorContextOptions) => {
       }),
       new UnsupportedNodeExtension(),
       new ClearFormattingExtension(),
+      new BulletListExtension(),
+      new ListItemExtension(),
     ];
   };
 };

package/src/ui/_typography.scss

@@ -1,3 +1,4 @@
+// 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;
@@ -71,4 +72,10 @@
       padding-bottom: 0.75rem;
     }
   }
+
+  ul {
+    list-style-type: disc;
+    padding: 0 0 0 2.5rem;
+    margin: 1rem 0;
+  }
 }

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

@@ -425,4 +425,122 @@ describe('squizNodeToRemirrorNode', () => {
       });
     },
   );
+
+  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,8 @@ const getNodeType = (node: FormattedNodes): string => {
     img: 'image',
     pre: 'preformatted',
     p: 'paragraph',
+    ul: 'bulletList',
+    li: 'listItem',
     a: NodeName.Text,
     span: NodeName.Text,
     code: NodeName.CodeBlock,

package/src/utils/getNodeNamesByGroup.spec.ts

@@ -15,6 +15,15 @@ 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',
+    ]);
   });
 });