@squiz/formatted-text-editor 1.22.1-alpha.0 → 1.22.1-alpha.2

package/lib/EditorToolbar/FloatingToolbar.js

@@ -56,7 +56,10 @@ const FloatingToolbar = () => {
     else if (marks?.[Extensions_1.MarkName.Link].isExclusivelyActive || marks?.[Extensions_1.MarkName.AssetLink].isExclusivelyActive) {
         // if all of the selected text is a link show the options to update/remove the link instead of the regular
         // formatting options.
-        buttons = [react_1.default.createElement(LinkButton_1.default, { key: "update-link", inPopover: true }), react_1.default.createElement(RemoveLinkButton_1.default, { key: "remove-link" })];
+        buttons = [
+            react_1.default.createElement(LinkButton_1.default, { key: "update-link", inPopover: true }),
+            react_1.default.createElement(RemoveLinkButton_1.default, { key: "remove-link", inPopover: true }),
+        ];
     }
     else if (!marks?.[Extensions_1.MarkName.Link].isActive && !marks?.[Extensions_1.MarkName.AssetLink].isActive) {
         // if none of the selected text is a link show the option to create a link.

package/lib/EditorToolbar/Toolbar.js

@@ -16,6 +16,7 @@ const TextTypeDropdown_1 = __importDefault(require("./Tools/TextType/TextTypeDro
 const hooks_1 = require("../hooks");
 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 Toolbar = () => {
     const extensionNames = (0, hooks_1.useExtensionNames)();
     return (react_1.default.createElement(react_components_1.Toolbar, { className: "remirror-toolbar editor-toolbar" },
@@ -28,7 +29,9 @@ const Toolbar = () => {
         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.link && react_1.default.createElement(LinkButton_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))),
         extensionNames.image && react_1.default.createElement(ImageButton_1.default, null)));
 };
 exports.Toolbar = Toolbar;

package/lib/EditorToolbar/Tools/Link/LinkButton.d.ts

@@ -1,4 +1,4 @@
-type LinkButtonProps = {
+export type LinkButtonProps = {
     inPopover?: boolean;
 };
 declare const LinkButton: ({ inPopover }: LinkButtonProps) => JSX.Element;

package/lib/EditorToolbar/Tools/Link/RemoveLinkButton.d.ts

@@ -1,2 +1,3 @@
-declare const RemoveLinkButton: () => JSX.Element;
+import { LinkButtonProps } from './LinkButton';
+declare const RemoveLinkButton: ({ inPopover }: LinkButtonProps) => JSX.Element;
 export default RemoveLinkButton;

package/lib/EditorToolbar/Tools/Link/RemoveLinkButton.js

@@ -1,14 +1,53 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 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_1 = __importStar(require("react"));
 const react_2 = require("@remirror/react");
 const Button_1 = __importDefault(require("../../../ui/Button/Button"));
 const LinkOff_1 = __importDefault(require("@mui/icons-material/LinkOff"));
-const RemoveLinkButton = () => {
+const RemoveLinkButton = ({ inPopover = false }) => {
     const chain = (0, react_2.useChainedCommands)();
-    return (react_1.default.createElement(Button_1.default, { handleOnClick: () => chain.removeLink().removeAssetLink().focus().run(), isActive: false, icon: react_1.default.createElement(LinkOff_1.default, null), label: "Remove link" }));
+    const active = (0, react_2.useActive)();
+    const disabled = !active.link();
+    const handleClick = () => {
+        chain.removeLink().removeAssetLink().focus().run();
+    };
+    const handleShortcut = (0, react_1.useCallback)(() => {
+        handleClick();
+        // Prevent other key handlers being run
+        return true;
+    }, []);
+    // when Shift+Ctrl+k is pressed show the modal, only registered in the toolbar button instance to avoid the key press
+    // being double handled.
+    if (!inPopover) {
+        // disable the shortcut if the button is disabled
+        (0, react_2.useKeymap)('Shift-Mod-k', disabled ? () => true : handleShortcut);
+    }
+    return (react_1.default.createElement(Button_1.default, { handleOnClick: handleClick, isActive: false, isDisabled: disabled, icon: react_1.default.createElement(LinkOff_1.default, null), label: "Remove link (shift+cmd+K)" }));
 };
 exports.default = RemoveLinkButton;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squiz/formatted-text-editor",
-  "version": "1.22.1-alpha.0",
+  "version": "1.22.1-alpha.2",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "scripts": {
@@ -74,5 +74,5 @@
   "volta": {
     "node": "18.15.0"
   },
-  "gitHead": "3956b5c40acb9eaac651518b03c4c30ca1dee273"
+  "gitHead": "a37688f9211c9c1a5294c85a749cf4e630271ce5"
 }

package/src/EditorToolbar/FloatingToolbar.spec.tsx

@@ -13,7 +13,7 @@ describe('FloatingToolbar', () => {
     ['Regular text + link selected', 3, 17, ['Bold (cmd+B)', 'Italic (cmd+I)', 'Underline (cmd+U)']],
     ['Nothing selected, positioned directly on the left of a link', 12, 12, []],
     ['Nothing selected, positioned directly on the right of a link', 19, 19, []],
-    ['Nothing selected, positioned within a link', 13, 13, ['Link (cmd+K)', 'Remove link']],
+    ['Nothing selected, positioned within a link', 13, 13, ['Link (cmd+K)', 'Remove link (shift+cmd+K)']],
   ])(
     'Renders formatting buttons when text is selected - %s',
     async (description: string, from: number, to: number, expectedButtons: string[]) => {

package/src/EditorToolbar/FloatingToolbar.tsx

@@ -32,7 +32,10 @@ export const FloatingToolbar = () => {
   } else if (marks?.[MarkName.Link].isExclusivelyActive || marks?.[MarkName.AssetLink].isExclusivelyActive) {
     // if all of the selected text is a link show the options to update/remove the link instead of the regular
     // formatting options.
-    buttons = [<LinkButton key="update-link" inPopover={true} />, <RemoveLinkButton key="remove-link" />];
+    buttons = [
+      <LinkButton key="update-link" inPopover={true} />,
+      <RemoveLinkButton key="remove-link" inPopover={true} />,
+    ];
   } else if (!marks?.[MarkName.Link].isActive && !marks?.[MarkName.AssetLink].isActive) {
     // if none of the selected text is a link show the option to create a link.
     buttons.push(

package/src/EditorToolbar/Toolbar.tsx

@@ -10,6 +10,7 @@ import TextTypeDropdown from './Tools/TextType/TextTypeDropdown';
 import { useExtensionNames } from '../hooks';
 import LinkButton from './Tools/Link/LinkButton';
 import ImageButton from './Tools/Image/ImageButton';
+import RemoveLinkButton from './Tools/Link/RemoveLinkButton';
 
 export const Toolbar = () => {
   const extensionNames = useExtensionNames();
@@ -28,7 +29,12 @@ export const Toolbar = () => {
       {extensionNames.italic && <ItalicButton />}
       {extensionNames.underline && <UnderlineButton />}
       {extensionNames.nodeFormatting && <TextAlignButtons />}
-      {extensionNames.link && <LinkButton />}
+      {extensionNames.link && (
+        <>
+          <LinkButton />
+          <RemoveLinkButton />
+        </>
+      )}
       {extensionNames.image && <ImageButton />}
     </RemirrorToolbar>
   );

package/src/EditorToolbar/Tools/Link/LinkButton.tsx

@@ -10,7 +10,7 @@ import { AssetLinkExtension } from '../../../Extensions/LinkExtension/AssetLinkE
 import { MarkName } from '../../../Extensions/Extensions';
 import { ImageExtension } from '../../../Extensions/ImageExtension/ImageExtension';
 
-type LinkButtonProps = {
+export type LinkButtonProps = {
   inPopover?: boolean;
 };
 

package/src/EditorToolbar/Tools/Link/RemoveLinkButton.spec.tsx

@@ -35,7 +35,7 @@ describe('RemoveLinkButton', () => {
     await act(() => editor.selectText('all'));
 
     // remove the links.
-    fireEvent.click(screen.getByRole('button', { name: 'Remove link' }));
+    fireEvent.click(screen.getByRole('button', { name: 'Remove link (shift+cmd+K)' }));
 
     // make sure both types of link have been removed.
     expect(getJsonContent()).toEqual({
@@ -44,4 +44,57 @@ describe('RemoveLinkButton', () => {
       content: [{ type: 'text', text: 'Sample link with another link' }],
     });
   });
+
+  it('Removes the link when clicking the keyboard shortcut', async () => {
+    const { elements, editor, getJsonContent } = await renderWithEditor(<RemoveLinkButton />, {
+      context: { matrix: { matrixDomain: 'my-matrix.squiz.net' } },
+      content: {
+        type: 'doc',
+        content: [
+          {
+            type: 'paragraph',
+            content: [
+              {
+                type: 'text',
+                text: 'Sample link',
+                marks: [{ type: 'assetLink', attrs: { matrixAssetId: '123', target: '_blank' } }],
+              },
+              { type: 'text', text: ' with ' },
+              {
+                type: 'text',
+                text: 'another link',
+                marks: [{ type: 'link', attrs: { href: 'https://www.example.org/another-link', target: '_self' } }],
+              },
+            ],
+          },
+        ],
+      },
+    });
+
+    // select all of the text.
+    await act(() => editor.selectText('all'));
+
+    // press the keyboard shortcut.
+    fireEvent.keyDown(elements.editor, { key: 'k', ctrlKey: true, shiftKey: true });
+
+    // make sure both types of link have been removed.
+    expect(getJsonContent()).toEqual({
+      type: 'paragraph',
+      attrs: expect.any(Object),
+      content: [{ type: 'text', text: 'Sample link with another link' }],
+    });
+  });
+
+  it('Enables the Remove link button when link text is selected', async () => {
+    const { editor } = await renderWithEditor(<RemoveLinkButton />, {
+      content: '<a href="https://www.example.org/my-link">Sample link</a> with some other content.',
+    });
+
+    // expect remove button to be disabled
+    expect(screen.getByRole('button', { name: 'Remove link (shift+cmd+K)' })).toBeDisabled();
+    // jump to the middle of the link.
+    await act(() => editor.selectText(3));
+    // expect remove button to be enabled
+    expect(screen.getByRole('button', { name: 'Remove link (shift+cmd+K)' })).not.toBeDisabled();
+  });
 });

package/src/EditorToolbar/Tools/Link/RemoveLinkButton.tsx

@@ -1,17 +1,38 @@
-import React from 'react';
-import { useChainedCommands } from '@remirror/react';
+import React, { useCallback } from 'react';
+import { useChainedCommands, useActive, useKeymap } from '@remirror/react';
 import Button from '../../../ui/Button/Button';
 import LinkOffIcon from '@mui/icons-material/LinkOff';
+import { LinkExtension } from '../../../Extensions/LinkExtension/LinkExtension';
+import { LinkButtonProps } from './LinkButton';
 
-const RemoveLinkButton = () => {
+const RemoveLinkButton = ({ inPopover = false }: LinkButtonProps) => {
   const chain = useChainedCommands();
+  const active = useActive<LinkExtension>();
+  const disabled = !active.link();
+
+  const handleClick = () => {
+    chain.removeLink().removeAssetLink().focus().run();
+  };
+  const handleShortcut = useCallback(() => {
+    handleClick();
+    // Prevent other key handlers being run
+    return true;
+  }, []);
+
+  // when Shift+Ctrl+k is pressed show the modal, only registered in the toolbar button instance to avoid the key press
+  // being double handled.
+  if (!inPopover) {
+    // disable the shortcut if the button is disabled
+    useKeymap('Shift-Mod-k', disabled ? () => true : handleShortcut);
+  }
 
   return (
     <Button
-      handleOnClick={() => chain.removeLink().removeAssetLink().focus().run()}
+      handleOnClick={handleClick}
       isActive={false}
+      isDisabled={disabled}
       icon={<LinkOffIcon />}
-      label="Remove link"
+      label="Remove link (shift+cmd+K)"
     />
   );
 };