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

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/Image/Form/ImageForm.js

@@ -37,11 +37,11 @@ const clsx_1 = __importDefault(require("clsx"));
 const Extensions_1 = require("../../../../Extensions/Extensions");
 const Select_1 = require("../../../../ui/Fields/Select/Select");
 const EditorContext_1 = require("../../../../Editor/EditorContext");
+const validation_1 = require("../../../../utils/validation");
 const imageTypeOptions = {
     [Extensions_1.NodeName.Image]: { label: 'External image' },
     [Extensions_1.NodeName.AssetImage]: { label: 'Asset image' },
 };
-const regexDataURI = /^data:([a-z]+\/[a-z0-9-+.]+(;[a-z-]+=[a-z0-9-]+)?)?(;base64)?,([a-z0-9!$&',()*+;=\-._~:@/?%\s]*)$/i;
 const ImageForm = ({ data, onSubmit }) => {
     const { register, handleSubmit, setValue, watch, formState: { errors }, } = (0, react_hook_form_1.useForm)({
         defaultValues: data,
@@ -97,17 +97,23 @@ const ImageForm = ({ data, onSubmit }) => {
                         required: 'Source is required',
                         validate: {
                             isValidImage: async (value) => {
-                                if (value && regexDataURI.test(value)) {
+                                if (value && validation_1.regexDataURI.test(value)) {
                                     return 'Must not be a data URI';
                                 }
                                 if (value && (await validateIsNotImage(value))) {
                                     return 'Must be a valid image URL';
                                 }
                             },
+                            noEmptySpaces: validation_1.noEmptySpacesValidation,
                         },
                     }) })),
             react_1.default.createElement("div", { className: "squiz-fte-form-group mb-2" },
-                react_1.default.createElement(Input_1.Input, { label: "Alternative description", required: true, error: errors?.image?.alt?.message, ...register('image.alt', { required: 'Alternative description is required' }) })),
+                react_1.default.createElement(Input_1.Input, { label: "Alternative description", required: true, error: errors?.image?.alt?.message, ...register('image.alt', {
+                        required: 'Alternative description is required',
+                        validate: {
+                            noEmptySpaces: validation_1.noEmptySpacesValidation,
+                        },
+                    }) })),
             react_1.default.createElement("div", { className: "flex flex-row" },
                 react_1.default.createElement("div", { className: "squiz-fte-form-group mb-2" },
                     react_1.default.createElement(Input_1.Input, { label: "Width", type: "number", required: true, error: errors?.image?.width?.message, ...register('image.width', {
@@ -146,6 +152,7 @@ const ImageForm = ({ data, onSubmit }) => {
                                     return 'Asset ID is invalid or not an image';
                                 }
                             },
+                            noEmptySpaces: validation_1.noEmptySpacesValidation,
                         },
                     }) }))))));
 };

package/lib/EditorToolbar/Tools/Link/Form/LinkForm.js

@@ -35,6 +35,7 @@ const Select_1 = require("../../../../ui/Fields/Select/Select");
 const common_1 = require("../../../../Extensions/LinkExtension/common");
 const EditorContext_1 = require("../../../../Editor/EditorContext");
 const Extensions_1 = require("../../../../Extensions/Extensions");
+const validation_1 = require("../../../../utils/validation");
 const linkTypeOptions = {
     [Extensions_1.MarkName.Link]: { label: 'Link to URL' },
     [Extensions_1.MarkName.AssetLink]: { label: 'Link to asset' },
@@ -54,27 +55,49 @@ const LinkForm = ({ data, onSubmit }) => {
             react_1.default.createElement(Select_1.Select, { name: "linkType", label: "Type", value: linkType, options: linkTypeOptions, onChange: (value) => setValue('linkType', value) })),
         linkType === Extensions_1.MarkName.Link && (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement("div", { className: (0, clsx_1.default)('squiz-fte-form-group mb-2') },
-                react_1.default.createElement(Input_1.Input, { label: "URL", ...register('link.href') })),
+                react_1.default.createElement(Input_1.Input, { label: "URL", required: true, error: errors?.link?.href?.message, ...register('link.href', {
+                        required: 'URL is required',
+                        validate: {
+                            noEmptySpaces: validation_1.noEmptySpacesValidation,
+                        },
+                    }) })),
             react_1.default.createElement("div", { className: (0, clsx_1.default)('squiz-fte-form-group mb-2') },
-                react_1.default.createElement(Input_1.Input, { label: "Text", ...register('text') })),
+                react_1.default.createElement(Input_1.Input, { label: "Text", required: true, error: errors?.text?.message, ...register('text', {
+                        required: 'Text is required',
+                        validate: {
+                            noEmptySpaces: validation_1.noEmptySpacesValidation,
+                        },
+                    }) })),
             react_1.default.createElement("div", { className: (0, clsx_1.default)('squiz-fte-form-group mb-2') },
-                react_1.default.createElement(Input_1.Input, { label: "Title", ...register('link.title') })),
+                react_1.default.createElement(Input_1.Input, { label: "Title", required: true, error: errors?.link?.title?.message, ...register('link.title', {
+                        required: 'Title is required',
+                        validate: {
+                            noEmptySpaces: validation_1.noEmptySpacesValidation,
+                        },
+                    }) })),
             react_1.default.createElement("div", { className: (0, clsx_1.default)('squiz-fte-form-group mb-0') },
                 react_1.default.createElement(Select_1.Select, { name: "link.target", label: "Target", value: data?.link?.target || '_self', options: targetOptions, onChange: (value) => setValue('link.target', value) })))),
         linkType === Extensions_1.MarkName.AssetLink && (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement("div", { className: (0, clsx_1.default)('squiz-fte-form-group mb-2') },
-                react_1.default.createElement(Input_1.Input, { label: "Asset ID", error: errors?.assetLink?.matrixAssetId?.message, ...register('assetLink.matrixAssetId', {
+                react_1.default.createElement(Input_1.Input, { label: "Asset ID", required: true, error: errors?.assetLink?.matrixAssetId?.message, ...register('assetLink.matrixAssetId', {
+                        required: 'Asset ID is required',
                         validate: {
                             isValidAsset: async (assetId) => {
                                 if (assetId && !(await context.matrix.resolveMatrixAsset(assetId))) {
                                     return 'Invalid asset ID';
                                 }
                             },
+                            noEmptySpaces: validation_1.noEmptySpacesValidation,
                         },
                     }) })),
             react_1.default.createElement("div", { className: (0, clsx_1.default)('squiz-fte-form-group mb-2') },
-                react_1.default.createElement(Input_1.Input, { label: "Text", ...register('text') })),
+                react_1.default.createElement(Input_1.Input, { label: "Text", required: true, error: errors?.text?.message, ...register('text', {
+                        required: 'Text is required',
+                        validate: {
+                            noEmptySpaces: validation_1.noEmptySpacesValidation,
+                        },
+                    }) })),
             react_1.default.createElement("div", { className: (0, clsx_1.default)('squiz-fte-form-group mb-0') },
-                react_1.default.createElement(Select_1.Select, { name: "assetLink.target", label: "Target", value: data?.link?.target || '_self', options: targetOptions, onChange: (value) => setValue('assetLink.target', value) }))))));
+                react_1.default.createElement(Select_1.Select, { name: "assetLink.target", label: "Target", value: data?.assetLink?.target || '_self', options: targetOptions, onChange: (value) => setValue('assetLink.target', value) }))))));
 };
 exports.LinkForm = LinkForm;

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/lib/ui/Modal/Modal.js

@@ -48,8 +48,8 @@ const Modal = ({ children, title, onCancel, onSubmit, className }, ref) => {
     };
     // register key listeners for Enter/Escape on key up so the editor doesn't handle the event as well
     (0, react_1.useEffect)(() => {
-        window.addEventListener('keyup', keydown);
-        return () => window.removeEventListener('keyup', keydown);
+        window.addEventListener('keydown', keydown);
+        return () => window.removeEventListener('keydown', keydown);
     }, []);
     // add/remove the modal container from the DOM and focus on the first input
     (0, react_1.useEffect)(() => {

package/lib/utils/validation.d.ts

@@ -0,0 +1,2 @@
+export declare const noEmptySpacesValidation: (value: string | undefined) => Promise<"Empty space is not allowed" | undefined>;
+export declare const regexDataURI: RegExp;

package/lib/utils/validation.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.regexDataURI = exports.noEmptySpacesValidation = void 0;
+const noEmptySpacesValidation = async (value) => {
+    if (value && !(value.trim().length > 0)) {
+        return 'Empty space is not allowed';
+    }
+};
+exports.noEmptySpacesValidation = noEmptySpacesValidation;
+exports.regexDataURI = /^data:([a-z]+\/[a-z0-9-+.]+(;[a-z-]+=[a-z0-9-]+)?)?(;base64)?,([a-z0-9!$&',()*+;=\-._~:@/?%\s]*)$/i;

package/package.json

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

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/Image/Form/ImageForm.tsx

@@ -12,6 +12,7 @@ import { AssetImageAttributes } from '../../../../Extensions/ImageExtension/Asse
 import { DeepPartial } from '../../../../types';
 import { Select, SelectOptions } from '../../../../ui/Fields/Select/Select';
 import { EditorContext } from '../../../../Editor/EditorContext';
+import { noEmptySpacesValidation, regexDataURI } from '../../../../utils/validation';
 
 export type ImageFormData = {
   imageType: NodeName;
@@ -30,9 +31,6 @@ export type FormProps = {
 };
 export type Dimensions = 'image.width' | 'image.height';
 
-const regexDataURI =
-  /^data:([a-z]+\/[a-z0-9-+.]+(;[a-z-]+=[a-z0-9-]+)?)?(;base64)?,([a-z0-9!$&',()*+;=\-._~:@/?%\s]*)$/i;
-
 const ImageForm = ({ data, onSubmit }: FormProps): ReactElement => {
   const {
     register,
@@ -118,6 +116,7 @@ const ImageForm = ({ data, onSubmit }: FormProps): ReactElement => {
                       return 'Must be a valid image URL';
                     }
                   },
+                  noEmptySpaces: noEmptySpacesValidation,
                 },
               })}
             />
@@ -127,7 +126,12 @@ const ImageForm = ({ data, onSubmit }: FormProps): ReactElement => {
               label="Alternative description"
               required
               error={errors?.image?.alt?.message}
-              {...register('image.alt', { required: 'Alternative description is required' })}
+              {...register('image.alt', {
+                required: 'Alternative description is required',
+                validate: {
+                  noEmptySpaces: noEmptySpacesValidation,
+                },
+              })}
             />
           </div>
           <div className="flex flex-row">
@@ -199,6 +203,7 @@ const ImageForm = ({ data, onSubmit }: FormProps): ReactElement => {
                       return 'Asset ID is invalid or not an image';
                     }
                   },
+                  noEmptySpaces: noEmptySpacesValidation,
                 },
               })}
             />

package/src/EditorToolbar/Tools/Image/ImageButton.spec.tsx

@@ -324,4 +324,15 @@ describe('ImageButton', () => {
       expect(screen.getByText(expectedError)).toBeInTheDocument();
     },
   );
+
+  it('Shows an error if the field value is just an empty space', async () => {
+    await renderWithEditor(<ImageButton />);
+
+    await openModal();
+    fireEvent.change(screen.getByLabelText('Source'), { target: { value: ' ' } });
+    fireEvent.change(screen.getByLabelText('Alternative description'), { target: { value: ' ' } });
+    await act(() => fireEvent.click(screen.getByRole('button', { name: 'Apply' })));
+
+    expect(screen.getAllByText('Empty space is not allowed')).toHaveLength(2);
+  });
 });

package/src/EditorToolbar/Tools/Link/Form/LinkForm.tsx

@@ -10,6 +10,7 @@ import { LinkTarget } from '../../../../Extensions/LinkExtension/common';
 import { EditorContext } from '../../../../Editor/EditorContext';
 import { MarkName } from '../../../../Extensions/Extensions';
 import { DeepPartial } from '../../../../types';
+import { noEmptySpacesValidation } from '../../../../utils/validation';
 
 export type LinkFormData = {
   linkType: MarkName;
@@ -62,13 +63,44 @@ export const LinkForm = ({ data, onSubmit }: FormProps): ReactElement => {
       {linkType === MarkName.Link && (
         <>
           <div className={clsx('squiz-fte-form-group mb-2')}>
-            <Input label="URL" {...register('link.href')} />
+            <Input
+              label="URL"
+              required
+              error={errors?.link?.href?.message}
+              {...register('link.href', {
+                required: 'URL is required',
+                validate: {
+                  noEmptySpaces: noEmptySpacesValidation,
+                },
+              })}
+            />
           </div>
+
           <div className={clsx('squiz-fte-form-group mb-2')}>
-            <Input label="Text" {...register('text')} />
+            <Input
+              label="Text"
+              required
+              error={errors?.text?.message}
+              {...register('text', {
+                required: 'Text is required',
+                validate: {
+                  noEmptySpaces: noEmptySpacesValidation,
+                },
+              })}
+            />
           </div>
           <div className={clsx('squiz-fte-form-group mb-2')}>
-            <Input label="Title" {...register('link.title')} />
+            <Input
+              label="Title"
+              required
+              error={errors?.link?.title?.message}
+              {...register('link.title', {
+                required: 'Title is required',
+                validate: {
+                  noEmptySpaces: noEmptySpacesValidation,
+                },
+              })}
+            />
           </div>
           <div className={clsx('squiz-fte-form-group mb-0')}>
             <Select
@@ -87,26 +119,39 @@ export const LinkForm = ({ data, onSubmit }: FormProps): ReactElement => {
           <div className={clsx('squiz-fte-form-group mb-2')}>
             <Input
               label="Asset ID"
+              required
               error={errors?.assetLink?.matrixAssetId?.message}
               {...register('assetLink.matrixAssetId', {
+                required: 'Asset ID is required',
                 validate: {
                   isValidAsset: async (assetId: string | undefined) => {
                     if (assetId && !(await context.matrix.resolveMatrixAsset(assetId))) {
                       return 'Invalid asset ID';
                     }
                   },
+                  noEmptySpaces: noEmptySpacesValidation,
                 },
               })}
             />
           </div>
           <div className={clsx('squiz-fte-form-group mb-2')}>
-            <Input label="Text" {...register('text')} />
+            <Input
+              label="Text"
+              required
+              error={errors?.text?.message}
+              {...register('text', {
+                required: 'Text is required',
+                validate: {
+                  noEmptySpaces: noEmptySpacesValidation,
+                },
+              })}
+            />
           </div>
           <div className={clsx('squiz-fte-form-group mb-0')}>
             <Select
               name="assetLink.target"
               label="Target"
-              value={data?.link?.target || '_self'}
+              value={data?.assetLink?.target || '_self'}
               options={targetOptions}
               onChange={(value) => setValue('assetLink.target', value as LinkTarget)}
             />

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

@@ -48,7 +48,8 @@ describe('LinkButton', () => {
 
   it('Updates the attributes of an existing link', async () => {
     const { editor, getJsonContent } = await renderWithEditor(<LinkButton />, {
-      content: '<a href="https://www.example.org/my-link">Sample link</a> with some other content.',
+      content:
+        '<a href="https://www.example.org/my-link" title="Sample title">Sample link</a> with some other content.',
     });
 
     // jump to the middle of the link.
@@ -58,6 +59,7 @@ describe('LinkButton', () => {
     await openModal();
     fireEvent.change(screen.getByLabelText('URL'), { target: { value: 'https://www.example.org/updated-link' } });
     fireEvent.change(screen.getByLabelText('Text'), { target: { value: 'Updated sample link' } });
+    fireEvent.change(screen.getByLabelText('Title'), { target: { value: 'Updated sample title' } });
 
     // verify the content matches what was initially set prior to applying.
     expect(getJsonContent()).toEqual({
@@ -70,7 +72,7 @@ describe('LinkButton', () => {
           marks: [
             {
               type: 'link',
-              attrs: { href: 'https://www.example.org/my-link', target: '_self', title: null },
+              attrs: { href: 'https://www.example.org/my-link', target: '_self', title: 'Sample title' },
             },
           ],
         },
@@ -96,7 +98,7 @@ describe('LinkButton', () => {
           marks: [
             {
               type: 'link',
-              attrs: { href: 'https://www.example.org/updated-link', target: '_self', title: null },
+              attrs: { href: 'https://www.example.org/updated-link', target: '_self', title: 'Updated sample title' },
             },
           ],
         },
@@ -105,59 +107,10 @@ describe('LinkButton', () => {
     });
   });
 
-  it('Removes the link when the URL is cleared', async () => {
-    const { editor, getJsonContent } = await renderWithEditor(<LinkButton />, {
-      content: '<a href="https://www.example.org/my-link">Sample link</a> with some other content.',
-    });
-
-    // jump to the middle of the link.
-    await act(() => editor.selectText(3));
-
-    // open the modal and clear the link.
-    await openModal();
-    fireEvent.change(screen.getByLabelText('URL'), { target: { value: '' } });
-    fireEvent.click(screen.getByRole('button', { name: 'Apply' }));
-
-    await waitForElementToBeRemoved(() => screen.getByRole('button', { name: 'Apply' }));
-
-    // cursor should be positioned after the link and the link should be removed.
-    expect(editor.from).toBe(12);
-    expect(editor.to).toBe(12);
-    expect(getJsonContent()).toEqual({
-      type: 'paragraph',
-      attrs: expect.any(Object),
-      content: [{ type: 'text', text: 'Sample link with some other content.' }],
-    });
-  });
-
-  it('Removes the content when the text is cleared', async () => {
-    const { editor, getJsonContent } = await renderWithEditor(<LinkButton />, {
-      content: '<a href="https://www.example.org/my-link">Sample link</a> with some other content.',
-    });
-
-    // jump to the middle of the link.
-    await act(() => editor.selectText(3));
-
-    // open the modal and clear the text.
-    await openModal();
-    fireEvent.change(screen.getByLabelText('Text'), { target: { value: '' } });
-    fireEvent.click(screen.getByRole('button', { name: 'Apply' }));
-
-    await waitForElementToBeRemoved(() => screen.getByRole('button', { name: 'Apply' }));
-
-    // cursor should be positioned where the link was and the link+text should be removed.
-    expect(editor.from).toBe(1);
-    expect(editor.to).toBe(1);
-    expect(getJsonContent()).toEqual({
-      type: 'paragraph',
-      attrs: expect.any(Object),
-      content: [{ type: 'text', text: ' with some other content.' }],
-    });
-  });
-
   it('Updates unselected part of link when link is partially selected', async () => {
     const { editor, getJsonContent } = await renderWithEditor(<LinkButton />, {
-      content: '<a href="https://www.example.org/my-link">Sample link</a> <strong>with</strong> some other content.',
+      content:
+        '<a href="https://www.example.org/my-link" title="Sample title">Sample link</a> <strong>with</strong> some other content.',
     });
 
     // jump to the middle of the link and select some of the text after it.
@@ -182,7 +135,7 @@ describe('LinkButton', () => {
           marks: [
             {
               type: 'link',
-              attrs: { href: 'https://www.example.org/my-link', target: '_self', title: null },
+              attrs: { href: 'https://www.example.org/my-link', target: '_self', title: 'Sample title' },
             },
           ],
         },
@@ -192,7 +145,7 @@ describe('LinkButton', () => {
           marks: [
             {
               type: 'link',
-              attrs: { href: 'https://www.example.org/my-link', target: '_self', title: null },
+              attrs: { href: 'https://www.example.org/my-link', target: '_self', title: 'Sample title' },
             },
             { type: 'bold' },
           ],
@@ -203,7 +156,7 @@ describe('LinkButton', () => {
           marks: [
             {
               type: 'link',
-              attrs: { href: 'https://www.example.org/my-link', target: '_self', title: null },
+              attrs: { href: 'https://www.example.org/my-link', target: '_self', title: 'Sample title' },
             },
           ],
         },
@@ -214,7 +167,8 @@ describe('LinkButton', () => {
 
   it('Updates text and formatting when selection has a mixture of formatting', async () => {
     const { editor, getJsonContent } = await renderWithEditor(<LinkButton />, {
-      content: '<a href="https://www.example.org/my-link">Sample link</a> <strong>with</strong> some other content.',
+      content:
+        '<a href="https://www.example.org/my-link" title="Sample title">Sample link</a> <strong>with</strong> some other content.',
     });
 
     // jump to the middle of the link and select some of the text after it.
@@ -240,7 +194,7 @@ describe('LinkButton', () => {
           marks: [
             {
               type: 'link',
-              attrs: { href: 'https://www.example.org/my-link', target: '_self', title: null },
+              attrs: { href: 'https://www.example.org/my-link', target: '_self', title: 'Sample title' },
             },
           ],
         },
@@ -385,4 +339,30 @@ describe('LinkButton', () => {
     expect(screen.getByText('Invalid asset ID')).toBeInTheDocument();
     expect(resolveMatrixAsset).toHaveBeenCalledWith('invalid-asset-id');
   });
+
+  it('Shows an error if a required field is not provided', async () => {
+    await renderWithEditor(<LinkButton />);
+
+    await openModal();
+    fireEvent.change(screen.getByLabelText('URL'), { target: { value: '' } });
+    fireEvent.change(screen.getByLabelText('Text'), { target: { value: '' } });
+    fireEvent.change(screen.getByLabelText('Title'), { target: { value: '' } });
+    await act(() => fireEvent.click(screen.getByRole('button', { name: 'Apply' })));
+
+    expect(screen.getByText('URL is required')).toBeInTheDocument();
+    expect(screen.getByText('Text is required')).toBeInTheDocument();
+    expect(screen.getByText('Title is required')).toBeInTheDocument();
+  });
+
+  it('Shows an error if the field value is just an empty space', async () => {
+    await renderWithEditor(<LinkButton />);
+
+    await openModal();
+    fireEvent.change(screen.getByLabelText('URL'), { target: { value: ' ' } });
+    fireEvent.change(screen.getByLabelText('Text'), { target: { value: ' ' } });
+    fireEvent.change(screen.getByLabelText('Title'), { target: { value: ' ' } });
+    await act(() => fireEvent.click(screen.getByRole('button', { name: 'Apply' })));
+
+    expect(screen.getAllByText('Empty space is not allowed')).toHaveLength(3);
+  });
 });

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)"
     />
   );
 };

package/src/ui/Modal/Modal.spec.tsx

@@ -82,7 +82,7 @@ describe('Modal', () => {
       </Modal>,
     );
 
-    fireEvent.keyUp(screen.getByText('Modal content'), { key: 'Enter' });
+    fireEvent.keyDown(screen.getByText('Modal content'), { key: 'Enter' });
 
     expect(mockOnSubmit).toHaveBeenCalled();
   });
@@ -94,7 +94,7 @@ describe('Modal', () => {
       </Modal>,
     );
 
-    fireEvent.keyUp(screen.getByText('Modal content'), { key: 'Escape' });
+    fireEvent.keyDown(screen.getByText('Modal content'), { key: 'Escape' });
 
     expect(mockOnCancel).toHaveBeenCalled();
   });

package/src/ui/Modal/Modal.tsx

@@ -33,8 +33,8 @@ const Modal = (
 
   // register key listeners for Enter/Escape on key up so the editor doesn't handle the event as well
   useEffect(() => {
-    window.addEventListener('keyup', keydown);
-    return () => window.removeEventListener('keyup', keydown);
+    window.addEventListener('keydown', keydown);
+    return () => window.removeEventListener('keydown', keydown);
   }, []);
 
   // add/remove the modal container from the DOM and focus on the first input

package/src/utils/validation.ts

@@ -0,0 +1,8 @@
+export const noEmptySpacesValidation = async (value: string | undefined) => {
+  if (value && !(value.trim().length > 0)) {
+    return 'Empty space is not allowed';
+  }
+};
+
+export const regexDataURI =
+  /^data:([a-z]+\/[a-z0-9-+.]+(;[a-z-]+=[a-z0-9-]+)?)?(;base64)?,([a-z0-9!$&',()*+;=\-._~:@/?%\s]*)$/i;