@squiz/formatted-text-editor 1.21.1-alpha.1 → 1.21.1-alpha.2

package/.eslintrc.json

@@ -30,5 +30,12 @@
         "extensions": [".js", ".jsx", ".ts", ".tsx"]
       }
     }
+  },
+  "rules": {
+    // The rules below are listed in the order they appear on the eslint-plugin-react rules page.
+
+    // React
+    // https://github.com/yannickcr/eslint-plugin-react#list-of-supported-rules
+    "react/button-has-type": "error"
   }
 }

package/lib/EditorToolbar/FloatingToolbar.js

@@ -54,7 +54,7 @@ const FloatingToolbar = () => {
     }
     else if (!data.marks?.link.isActive) {
         // if none of the selected text is a link show the option to create a link.
-        buttons.push(react_1.default.createElement(react_components_1.VerticalDivider, { key: "link-divider", className: "link-divider" }), react_1.default.createElement(LinkButton_1.default, { key: "add-link", inPopover: true }));
+        buttons.push(react_1.default.createElement(react_components_1.VerticalDivider, { key: "link-divider", className: "editor-divider" }), react_1.default.createElement(LinkButton_1.default, { key: "add-link", inPopover: true }));
     }
     return (react_1.default.createElement(react_2.FloatingToolbar, { className: "squiz-fte-scope squiz-fte-scope__floating-popover", positioner: positioner }, buttons));
 };

package/lib/Extensions/LinkExtension/LinkExtension.js

@@ -75,18 +75,20 @@ class LinkExtension extends extensions_1.LinkExtension {
             const selectedText = tr.doc.textBetween(range.from, range.to);
             if (text !== selectedText) {
                 // update the text in the editor if it was updated, update the range to cover the length of the new text.
-                dispatch?.(tr.insertText(text));
+                tr.insertText(text);
                 range.to = range.from + text.length;
             }
             // apply the link, or remove it if no URL was provided.
             if (attrs.href.length > 0) {
-                (0, core_1.updateMark)({ type: this.type, attrs, range })(props);
+                tr.addMark(range.from, range.to, this.type.create(attrs));
             }
             else {
-                (0, core_1.removeMark)({ type: this.type, range })(props);
+                tr.removeMark(range.from, range.to, this.type);
             }
             // move the cursor to the end of the link and re-focus the editor.
-            dispatch?.(tr.setSelection((0, core_1.getTextSelection)({ from: range.to, to: range.to }, tr.doc)));
+            tr.setSelection((0, core_1.getTextSelection)({ from: range.to, to: range.to }, tr.doc));
+            // apply the transaction.
+            dispatch?.(tr);
             view?.focus();
             return true;
         };

package/lib/index.css

@@ -722,7 +722,7 @@
   letter-spacing: -0.2px;
   line-height: 1.25rem;
 }
-.squiz-fte-scope .formatted-text-editor .editor-toolbar {
+.squiz-fte-scope .editor-toolbar {
   border-bottom-width: 2px;
   border-style: solid;
   --tw-border-opacity: 1;
@@ -733,10 +733,10 @@
   display: flex;
   justify-items: center;
 }
-.squiz-fte-scope .formatted-text-editor .editor-toolbar > *:not(:first-child) {
+.squiz-fte-scope .editor-toolbar > *:not(:first-child, .editor-divider) {
   margin: 0 0 0 2px;
 }
-.squiz-fte-scope .formatted-text-editor .editor-toolbar .editor-divider {
+.squiz-fte-scope .editor-divider {
   margin-top: -0.25rem;
   margin-bottom: -0.25rem;
   margin-left: 0.25rem;

package/lib/ui/Modal/Modal.js

@@ -65,7 +65,7 @@ const Modal = ({ children, title, onCancel, onSubmit, className }, ref) => {
                     react_1.default.createElement("div", { className: "squiz-fte-modal" },
                         react_1.default.createElement("div", { className: "squiz-fte-modal-header p-6 pb-2" },
                             react_1.default.createElement("h2", { className: "font-semibold text-gray-900 text-heading-2" }, title),
-                            react_1.default.createElement("button", { className: "ml-auto -mr-3 -mt-3 bg-transparent border-0 text-gray-600 font-semibold outline-none focus:outline-none hover:text-color-gray-800", onClick: onCancel, "aria-label": "Close" },
+                            react_1.default.createElement("button", { type: "button", className: "ml-auto -mr-3 -mt-3 bg-transparent border-0 text-gray-600 font-semibold outline-none focus:outline-none hover:text-color-gray-800", onClick: onCancel, "aria-label": "Close" },
                                 react_1.default.createElement(CloseRounded_1.default, null))),
                         react_1.default.createElement("div", { className: "squiz-fte-modal-content" }, children),
                         react_1.default.createElement("div", { className: "squiz-fte-modal-footer p-6 pt-3" },

package/lib/ui/ToolbarDropdown/ToolbarDropdown.js

@@ -39,7 +39,7 @@ const ToolbarDropdown = ({ children, label }) => {
         }
     };
     return (react_1.default.createElement("div", { className: "toolbar-dropdown", onBlur: handleBlur },
-        react_1.default.createElement("button", { id: "dropdownHoverButton", className: "toolbar-dropdown__button", onClick: handleDropDown },
+        react_1.default.createElement("button", { id: "dropdownHoverButton", className: "toolbar-dropdown__button", type: "button", onClick: handleDropDown },
             react_1.default.createElement("span", { className: "toolbar-dropdown__label" }, label),
             react_1.default.createElement(ExpandMore_1.default, { className: "toolbar-dropdown__icon", "aria-hidden": "true" })),
         react_1.default.createElement("div", { id: "dropdown", className: `toolbar-dropdown__menu z-10 ${isOpen ? 'block' : 'hidden'} bg-white divide-y w-169` },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squiz/formatted-text-editor",
-  "version": "1.21.1-alpha.1",
+  "version": "1.21.1-alpha.2",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "scripts": {
@@ -67,5 +67,5 @@
   "volta": {
     "node": "16.19.0"
   },
-  "gitHead": "d6ff878afb2bd1c4d3b03b0882e5238b0f6a674e"
+  "gitHead": "094356f01a017174820505681d5dfc4a2ee9428b"
 }

package/src/EditorToolbar/FloatingToolbar.tsx

@@ -27,7 +27,7 @@ export const FloatingToolbar = () => {
   } else if (!data.marks?.link.isActive) {
     // if none of the selected text is a link show the option to create a link.
     buttons.push(
-      <VerticalDivider key="link-divider" className="link-divider" />,
+      <VerticalDivider key="link-divider" className="editor-divider" />,
       <LinkButton key="add-link" inPopover={true} />,
     );
   }

package/src/EditorToolbar/_toolbar.scss

@@ -1,16 +1,16 @@
-.formatted-text-editor .editor-toolbar {
+.editor-toolbar {
   @apply bg-white border-gray-200 border-b-2 border-solid p-1;
 
   display: flex;
   justify-items: center;
 
-  > *:not(:first-child) {
+  > *:not(:first-child, .editor-divider) {
     margin: 0 0 0 2px;
   }
+}
 
-  .editor-divider {
-    @apply -my-1 mx-1 border;
-    margin-right: 2px;
-    height: auto;
-  }
+.editor-divider {
+  @apply -my-1 mx-1 border;
+  margin-right: 2px;
+  height: auto;
 }

package/src/Extensions/LinkExtension/LinkExtension.ts

@@ -1,5 +1,5 @@
 import { ApplySchemaAttributes, getMarkRanges, isElementDomNode, MarkExtensionSpec, MarkSpecOverride } from 'remirror';
-import { getTextSelection, getMarkRange, KeyBindingProps, updateMark, removeMark } from '@remirror/core';
+import { getTextSelection, getMarkRange, KeyBindingProps } from '@remirror/core';
 import { CommandFunction } from '@remirror/pm';
 import { LinkAttributes as RemirrorLinkAttributes, LinkExtension as RemirrorLinkExtension } from 'remirror/extensions';
 
@@ -95,19 +95,22 @@ export class LinkExtension extends RemirrorLinkExtension {
 
       if (text !== selectedText) {
         // update the text in the editor if it was updated, update the range to cover the length of the new text.
-        dispatch?.(tr.insertText(text));
+        tr.insertText(text);
         range.to = range.from + text.length;
       }
 
       // apply the link, or remove it if no URL was provided.
       if (attrs.href.length > 0) {
-        updateMark({ type: this.type, attrs, range })(props);
+        tr.addMark(range.from, range.to, this.type.create(attrs));
       } else {
-        removeMark({ type: this.type, range })(props);
+        tr.removeMark(range.from, range.to, this.type);
       }
 
       // move the cursor to the end of the link and re-focus the editor.
-      dispatch?.(tr.setSelection(getTextSelection({ from: range.to, to: range.to }, tr.doc)));
+      tr.setSelection(getTextSelection({ from: range.to, to: range.to }, tr.doc));
+
+      // apply the transaction.
+      dispatch?.(tr);
       view?.focus();
 
       return true;

package/src/ui/Modal/Modal.tsx

@@ -56,6 +56,7 @@ const Modal = (
               <div className="squiz-fte-modal-header p-6 pb-2">
                 <h2 className="font-semibold text-gray-900 text-heading-2">{title}</h2>
                 <button
+                  type="button"
                   className="ml-auto -mr-3 -mt-3 bg-transparent border-0 text-gray-600 font-semibold outline-none focus:outline-none hover:text-color-gray-800"
                   onClick={onCancel}
                   aria-label="Close"

package/src/ui/ToolbarDropdown/ToolbarDropdown.spec.tsx

@@ -2,13 +2,14 @@ import '@testing-library/jest-dom';
 import { fireEvent, render, screen } from '@testing-library/react';
 import React from 'react';
 import ToolbarDropdown from './ToolbarDropdown';
+import ToolbarDropdownButton from '../ToolbarDropdownButton/ToolbarDropdownButton';
 
 describe('Toolbar dropdown', () => {
   const ToolbarDropdownComponent = () => {
     return (
       <ToolbarDropdown label="Test dropdown">
-        <button>Test button</button>
-        <button>Test button 2</button>
+        <ToolbarDropdownButton label="Test button" isDisabled={false} isActive={false} handleOnClick={jest.fn()} />
+        <ToolbarDropdownButton label="Test button 2" isDisabled={false} isActive={false} handleOnClick={jest.fn()} />
       </ToolbarDropdown>
     );
   };
@@ -17,6 +18,7 @@ describe('Toolbar dropdown', () => {
     render(<ToolbarDropdownComponent />);
     // Check that the supplied label renders
     const dropdownButton = screen.getByRole('button', { name: 'Test dropdown' });
+    expect(dropdownButton).toHaveAttribute('type', 'button');
     expect(dropdownButton).toBeInTheDocument();
   });
 

package/src/ui/ToolbarDropdown/ToolbarDropdown.tsx

@@ -21,7 +21,7 @@ const ToolbarDropdown = ({ children, label }: ToolbarDropdownProps) => {
 
   return (
     <div className="toolbar-dropdown" onBlur={handleBlur}>
-      <button id="dropdownHoverButton" className="toolbar-dropdown__button" onClick={handleDropDown}>
+      <button id="dropdownHoverButton" className="toolbar-dropdown__button" type="button" onClick={handleDropDown}>
         <span className="toolbar-dropdown__label">{label}</span>
         <ExpandMoreIcon className="toolbar-dropdown__icon" aria-hidden="true" />
       </button>