@squiz/formatted-text-editor 1.41.1-alpha.1 → 1.41.1-alpha.13

package/lib/EditorToolbar/Toolbar.js

@@ -19,6 +19,7 @@ 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 HorizontalLineButton_1 = __importDefault(require("./Tools/HorizontalLine/HorizontalLineButton"));
 const hooks_1 = require("../hooks");
 const Toolbar = ({ isVisible }) => {
     const extensionNames = (0, hooks_1.useExtensionNames)();
@@ -33,6 +34,7 @@ const Toolbar = ({ isVisible }) => {
         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.horizontalRule && react_1.default.createElement(HorizontalLineButton_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/HorizontalLine/HorizontalLineButton.d.ts

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

package/lib/EditorToolbar/Tools/HorizontalLine/HorizontalLineButton.js

@@ -0,0 +1,25 @@
+"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 react_components_1 = require("@remirror/react-components");
+const Button_1 = __importDefault(require("../../../ui/Button/Button"));
+const HorizontalRuleRounded_1 = __importDefault(require("@mui/icons-material/HorizontalRuleRounded"));
+const HorizontalLineButton = () => {
+    const { insertHorizontalRule } = (0, react_2.useCommands)();
+    const chain = (0, react_2.useChainedCommands)();
+    const active = (0, react_2.useActive)();
+    const enabled = insertHorizontalRule.enabled();
+    const handleSelect = () => {
+        if (insertHorizontalRule.enabled()) {
+            chain.insertHorizontalRule().focus().run();
+        }
+    };
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(Button_1.default, { handleOnClick: handleSelect, isDisabled: !enabled, isActive: active.italic(), icon: react_1.default.createElement(HorizontalRuleRounded_1.default, null), label: "Horizontal line" }),
+        react_1.default.createElement(react_components_1.VerticalDivider, null)));
+};
+exports.default = HorizontalLineButton;

package/lib/Extensions/Extensions.js

@@ -52,6 +52,7 @@ const createExtensions = (context, browserContext) => {
             new extensions_1.BulletListExtension(),
             new extensions_1.ListItemExtension(),
             new extensions_1.OrderedListExtension(),
+            new extensions_1.HorizontalRuleExtension(),
             new extensions_1.PlaceholderExtension(),
             new FetchUrlExtension_1.FetchUrlExtension({
                 fetchUrl: browserContext.onRequestResource,

package/lib/index.css

@@ -722,6 +722,12 @@
 .squiz-fte-scope .remirror-editor ol {
   list-style-type: decimal;
 }
+.squiz-fte-scope .remirror-editor hr {
+  -webkit-margin-before: 0.6rem;
+  margin-block-start: 0.6rem;
+  -webkit-margin-after: 0.6rem;
+  margin-block-end: 0.6rem;
+}
 .squiz-fte-scope .squiz-fte-form-group {
   display: flex;
   flex-direction: column;

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

@@ -22,6 +22,7 @@ const getNodeType = (node) => {
         ol: 'orderedList',
         li: 'listItem',
         ul: 'bulletList',
+        hr: 'horizontalRule',
         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.41.1-alpha.1",
+  "version": "1.41.1-alpha.13",
   "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.41.1-alpha.1",
-    "@squiz/resource-browser": "1.41.1-alpha.1",
+    "@squiz/dx-json-schema-lib": "1.41.1-alpha.13",
+    "@squiz/resource-browser": "1.41.1-alpha.13",
     "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": "9846df51097ed1fa4be5e5ac69f9e1904b4fe63c"
+  "gitHead": "9e572a4de6b25e7fa91e016c3706e1b257b05b4b"
 }

package/src/EditorToolbar/Toolbar.tsx

@@ -13,6 +13,7 @@ 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 HorizontalLineButton from './Tools/HorizontalLine/HorizontalLineButton';
 import { useExtensionNames } from '../hooks';
 
 type ToolbarProps = {
@@ -40,6 +41,7 @@ export const Toolbar = ({ isVisible }: ToolbarProps) => {
       {extensionNames.underline && <UnderlineButton />}
       {extensionNames.nodeFormatting && <TextAlignButtons />}
       {extensionNames.listItem && <ListButtons />}
+      {extensionNames.horizontalRule && <HorizontalLineButton />}
       {extensionNames.link && (
         <>
           <LinkButton />

package/src/EditorToolbar/Tools/HorizontalLine/HorizontalLineButton.spec.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import '@testing-library/jest-dom';
+import { screen, fireEvent } from '@testing-library/react';
+import { renderWithEditor } from '../../../../tests';
+import HorizontalLineButton from './HorizontalLineButton';
+
+describe('Horizontal line button', () => {
+  it('Renders the horizontal line button', async () => {
+    await renderWithEditor(<HorizontalLineButton />, { content: 'Some nonsense content here' });
+    expect(screen.getByRole('button', { name: 'Horizontal line' })).toBeInTheDocument();
+  });
+
+  it('Inserts a horizontal line into the editor content after clicking button', async () => {
+    const { getHtmlContent } = await renderWithEditor(<HorizontalLineButton />, {
+      content: '<p>Hello Mr Bean</p>',
+    });
+
+    const horizontalLine = screen.getByRole('button', { name: 'Horizontal line' });
+    fireEvent.click(horizontalLine);
+
+    expect(getHtmlContent()).toBe('<hr><p style="">Hello Mr Bean</p>');
+  });
+});

package/src/EditorToolbar/Tools/HorizontalLine/HorizontalLineButton.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { useCommands, useActive, useChainedCommands } from '@remirror/react';
+import { VerticalDivider } from '@remirror/react-components';
+import { HorizontalRuleExtension } from '@remirror/extension-horizontal-rule';
+import Button from '../../../ui/Button/Button';
+import HorizontalRuleRounded from '@mui/icons-material/HorizontalRuleRounded';
+
+const HorizontalLineButton = () => {
+  const { insertHorizontalRule } = useCommands();
+  const chain = useChainedCommands();
+
+  const active = useActive<HorizontalRuleExtension>();
+  const enabled = insertHorizontalRule.enabled();
+  const handleSelect = () => {
+    if (insertHorizontalRule.enabled()) {
+      chain.insertHorizontalRule().focus().run();
+    }
+  };
+
+  return (
+    <>
+      <Button
+        handleOnClick={handleSelect}
+        isDisabled={!enabled}
+        isActive={active.italic()}
+        icon={<HorizontalRuleRounded />}
+        label="Horizontal line"
+      />
+      <VerticalDivider />
+    </>
+  );
+};
+
+export default HorizontalLineButton;

package/src/Extensions/Extensions.ts

@@ -10,6 +10,7 @@ import {
   BulletListExtension,
   ListItemExtension,
   PlaceholderExtension,
+  HorizontalRuleExtension,
 } from 'remirror/extensions';
 import { Extension } from '@remirror/core';
 import { PreformattedExtension } from './PreformattedExtension/PreformattedExtension';
@@ -64,6 +65,7 @@ export const createExtensions = (context: EditorContextOptions, browserContext:
       new BulletListExtension(),
       new ListItemExtension(),
       new OrderedListExtension(),
+      new HorizontalRuleExtension(),
       new PlaceholderExtension(),
       new FetchUrlExtension({
         fetchUrl: browserContext.onRequestResource,

package/src/ui/_typography.scss

@@ -87,4 +87,9 @@
   ol {
     list-style-type: decimal;
   }
+
+  hr {
+    margin-block-start: 0.6rem;
+    margin-block-end: 0.6rem;
+  }
 }

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

@@ -170,6 +170,36 @@ describe('remirrorNodeToSquizNode', () => {
     expect(result).toEqual(expected);
   });
 
+  it('should handle horizontal lines', async () => {
+    const content: RemirrorJSON = {
+      type: 'doc',
+      content: [
+        {
+          type: 'horizontalRule',
+          attrs: {
+            nodeIndent: null,
+            nodeTextAlignment: null,
+            nodeLineHeight: null,
+            style: '',
+          },
+        },
+      ],
+    };
+
+    const { editor } = await renderWithEditor(null, { content });
+
+    const expected: FormattedText = [
+      {
+        type: 'tag',
+        tag: 'hr',
+        children: [],
+      },
+    ];
+
+    const result = remirrorNodeToSquizNode(editor.doc);
+    expect(result).toEqual(expected);
+  });
+
   it.each([1, 2, 3, 4, 5, 6])('should handle heading %s formatting', async (level) => {
     const content: RemirrorJSON = {
       type: 'doc',

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

@@ -616,4 +616,30 @@ describe('squizNodeToRemirrorNode', () => {
     const result = squizNodeToRemirrorNode(squizComponentJSON);
     expect(result).toEqual(expected);
   });
+
+  it('should handle horizontal lines', () => {
+    const squizComponentJSON: FormattedText = [
+      {
+        type: 'tag',
+        tag: 'hr',
+        children: [],
+      },
+    ];
+
+    const expected: RemirrorJSON = {
+      content: [
+        {
+          attrs: { level: NaN, nodeIndent: null, nodeLineHeight: null, nodeTextAlignment: null, style: '' },
+          type: 'horizontalRule',
+          marks: undefined,
+          text: undefined,
+          content: undefined,
+        },
+      ],
+      type: 'doc',
+    };
+
+    const result = squizNodeToRemirrorNode(squizComponentJSON);
+    expect(result).toEqual(expected);
+  });
 });

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

@@ -27,6 +27,7 @@ const getNodeType = (node: FormattedNodes): string => {
     ol: 'orderedList',
     li: 'listItem',
     ul: 'bulletList',
+    hr: 'horizontalRule',
     a: NodeName.Text,
     span: NodeName.Text,
     code: NodeName.CodeBlock,

package/src/utils/getNodeNamesByGroup.spec.ts

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