@squiz/formatted-text-editor 1.21.1-alpha.7 → 1.22.0

package/demo/App.tsx

@@ -1,13 +1,26 @@
 import React, { useState } from 'react';
-import FormattedTextEditor from '../src/FormattedTextEditor';
+import { Editor, EditorContext, remirrorNodeToSquizNode, squizNodeToRemirrorNode } from '../src';
 import { RemirrorEventListener, Extension } from '@remirror/core';
+import ReactDiffViewer from 'react-diff-viewer-continued';
 
 function App() {
-  const [doc, setDoc] = useState(null as any);
+  const [doc, setDoc] = useState('');
+  const [squizDoc, setSquizDoc] = useState('');
+  const [reconvertedDoc, setReconvertedDoc] = useState('');
+  const [error, setError] = useState<unknown>(null);
   const [editable, setEditable] = useState(true);
+
   const handleEditorChange: RemirrorEventListener<Extension> = (parameter) => {
-    if (doc !== parameter.state.doc) {
-      setDoc(parameter.state.doc);
+    try {
+      setDoc(JSON.stringify(parameter.state.doc, null, 2));
+
+      const newSquizDoc = remirrorNodeToSquizNode(parameter.state.doc);
+      const newReconvertedDoc = parameter.state.schema.nodeFromJSON(squizNodeToRemirrorNode(newSquizDoc));
+
+      setSquizDoc(JSON.stringify(newSquizDoc, null, 2));
+      setReconvertedDoc(JSON.stringify(newReconvertedDoc, null, 2));
+    } catch (e) {
+      setError(e);
     }
   };
 
@@ -22,15 +35,44 @@ function App() {
       </div>
       <h1>Editor</h1>
       <div className="page-section">
-        <FormattedTextEditor
-          editable={editable}
-          content={`<p>Hello <a href="https://www.google.com"><strong>Mr Bean</strong></a>, nice to <a href="https://www.google.com">meet you</a>.</p>`}
-          onChange={handleEditorChange}
-        />
+        <EditorContext.Provider
+          value={{
+            matrix: {
+              matrixDomain: 'https://matrix-domain.squiz.net',
+              matrixIdentifier: 'matrix-api-identifier',
+              resolveMatrixAsset: (assetId: string) => {
+                return new Promise((resolve) => {
+                  setTimeout(() => {
+                    if (assetId.match(/invalid/i)) {
+                      resolve(null);
+                    } else {
+                      resolve({
+                        id: assetId,
+                        type: assetId.match(/(image)/i)?.[0] || 'unknown',
+                      });
+                    }
+                  }, 200);
+                });
+              },
+            },
+          }}
+        >
+          <Editor
+            editable={editable}
+            content={`<p>Hello <a href="https://www.google.com"><strong>Mr Bean</strong></a>, nice to <a href="https://www.google.com">meet you</a>.<img src="https://media2.giphy.com/media/3o6ozsIxg5legYvggo/giphy.gif" height="150" width="200"/></p>`}
+            onChange={handleEditorChange}
+          />
+        </EditorContext.Provider>
       </div>
       <h1>Document</h1>
       <div className="page-section">
-        <code>{JSON.stringify(doc, null, 2)}</code>
+        {error instanceof Error && (
+          <div className="error">An error occurred when transforming the document: {error.message}</div>
+        )}
+        <div className="code-section">
+          <ReactDiffViewer oldValue={doc} newValue={reconvertedDoc} splitView={false} showDiffOnly={false} />
+          <ReactDiffViewer oldValue={squizDoc} newValue={squizDoc} splitView={false} showDiffOnly={false} />
+        </div>
       </div>
     </div>
   );

package/demo/index.scss

@@ -22,19 +22,20 @@ h1 {
   align-items: center;
 }
 
-code {
-  padding: 8px;
-  display: block;
-  white-space: pre;
-  background-color: #eee;
-  font-size: 0.8rem;
-  height: 40vh;
-  max-height: 40vh;
+.code-section {
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  height: 35vh;
   overflow: scroll;
 }
 
 .remirror-editor {
-  height: 40vh;
-  max-height: 40vh;
+  height: 35vh;
+  max-height: 35vh;
   overflow: scroll;
 }
+
+.error {
+  color: red;
+}

package/jest.config.ts

@@ -22,8 +22,6 @@ export default {
   moduleNameMapper: {
     '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|css|scss)$':
       '<rootDir>/file-transformer.js',
-    '^react($|/.+)': '<rootDir>/node_modules/react$1',
-    '^react-dom($|/.+)': '<rootDir>/node_modules/react-dom$1',
   },
   setupFilesAfterEnv: ['<rootDir>/jest.bootstrap.ts'],
 };

package/lib/Editor/Editor.js

@@ -1,15 +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 EditorToolbar_1 = require("../EditorToolbar");
+const EditorContext_1 = require("./EditorContext");
 const Extensions_1 = require("../Extensions/Extensions");
-const Editor = ({ content, editable, onChange }) => {
+const clsx_1 = __importDefault(require("clsx"));
+const WrappedEditor = () => {
+    const preventImagePaste = (0, react_1.useCallback)((event) => {
+        const { clipboardData } = event;
+        const pastedData = clipboardData?.files[0];
+        if (pastedData?.type && pastedData?.type.startsWith('image/')) {
+            event.preventDefault();
+        }
+        // Allow other paste event handlers to be run.
+        return false;
+    }, []);
+    (0, react_2.useEditorEvent)('paste', preventImagePaste);
+    return react_1.default.createElement(react_2.EditorComponent, null);
+};
+const Editor = ({ content, editable = true, onChange }) => {
     const { manager, state, setState } = (0, react_2.useRemirror)({
-        extensions: Extensions_1.Extensions,
+        extensions: (0, Extensions_1.createExtensions)((0, react_1.useContext)(EditorContext_1.EditorContext)),
         content,
         selection: 'start',
         stringHandler: 'html',
@@ -19,10 +57,10 @@ const Editor = ({ content, editable, onChange }) => {
         onChange?.(parameter);
     };
     return (react_1.default.createElement("div", { className: "squiz-fte-scope" },
-        react_1.default.createElement("div", { className: "remirror-theme formatted-text-editor editor-wrapper" },
+        react_1.default.createElement("div", { className: (0, clsx_1.default)('remirror-theme formatted-text-editor', !editable && 'formatted-text-editor--is-disabled') },
             react_1.default.createElement(react_2.Remirror, { manager: manager, state: state, editable: editable, onChange: handleChange, placeholder: "Write something", label: "Text editor" },
-                react_1.default.createElement(EditorToolbar_1.Toolbar, null),
-                react_1.default.createElement(react_2.EditorComponent, null),
-                react_1.default.createElement(EditorToolbar_1.FloatingToolbar, null)))));
+                editable && react_1.default.createElement(EditorToolbar_1.Toolbar, null),
+                react_1.default.createElement(WrappedEditor, null),
+                editable && react_1.default.createElement(EditorToolbar_1.FloatingToolbar, null)))));
 };
 exports.default = Editor;

package/lib/Editor/EditorContext.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+export type MatrixAsset = {
+    id: string;
+    type: string | 'image';
+};
+export type MatrixAssetResolver = (assetId: string) => Promise<MatrixAsset | null>;
+export type EditorContextOptions = {
+    matrix: {
+        matrixIdentifier: string;
+        matrixDomain: string;
+        resolveMatrixAsset: MatrixAssetResolver;
+    };
+};
+export declare const defaultEditorContext: EditorContextOptions;
+export declare const EditorContext: React.Context<EditorContextOptions>;

package/lib/Editor/EditorContext.js

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EditorContext = exports.defaultEditorContext = void 0;
+const react_1 = __importDefault(require("react"));
+exports.defaultEditorContext = {
+    matrix: {
+        matrixIdentifier: '',
+        matrixDomain: '',
+        resolveMatrixAsset: () => Promise.resolve(null),
+    },
+};
+exports.EditorContext = react_1.default.createContext(exports.defaultEditorContext);

package/lib/EditorToolbar/FloatingToolbar.js

@@ -37,22 +37,28 @@ const LinkButton_1 = __importDefault(require("./Tools/Link/LinkButton"));
 const react_2 = require("@remirror/react");
 const react_components_1 = require("@remirror/react-components");
 const createToolbarPositioner_1 = require("../utils/createToolbarPositioner");
-// The editor main toolbar
+const ImageButton_1 = __importDefault(require("./Tools/Image/ImageButton"));
+const Extensions_1 = require("../Extensions/Extensions");
 const FloatingToolbar = () => {
+    const watchedMarks = [Extensions_1.MarkName.Link, Extensions_1.MarkName.AssetLink];
     const extensionNames = (0, hooks_1.useExtensionNames)();
-    const positioner = (0, react_1.useMemo)(() => (0, createToolbarPositioner_1.createToolbarPositioner)({ types: ['link'] }), []);
-    const { data } = (0, react_2.usePositioner)(positioner, []);
+    const positioner = (0, react_1.useMemo)(() => (0, createToolbarPositioner_1.createToolbarPositioner)({ types: watchedMarks }), []);
+    const active = (0, react_2.useActive)();
+    const { data: { marks }, } = (0, react_2.usePositioner)(positioner, []);
     let buttons = [
         extensionNames.bold && react_1.default.createElement(BoldButton_1.default, { key: "bold" }),
         extensionNames.italic && react_1.default.createElement(ItalicButton_1.default, { key: "italic" }),
         extensionNames.underline && react_1.default.createElement(UnderlineButton_1.default, { key: "underline" }),
     ];
-    if (data.marks?.link.isExclusivelyActive) {
+    if (active.image() || active.assetImage()) {
+        buttons = [react_1.default.createElement(ImageButton_1.default, { key: "add-image", inPopover: true })];
+    }
+    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" })];
     }
-    else if (!data.marks?.link.isActive) {
+    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.
         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 }));
     }

package/lib/EditorToolbar/Tools/Image/Form/ImageForm.d.ts

@@ -1,17 +1,18 @@
 import { ReactElement } from 'react';
 import { SubmitHandler } from 'react-hook-form';
 import { ImageAttributes } from '@remirror/extension-image/dist-types/image-extension';
-export type UpdateImageOptions = ImageAttributes & {
-    src: string;
-    alt: string;
-    width: number;
-    height: number;
+import { NodeName } from '../../../../Extensions/Extensions';
+import { AssetImageAttributes } from '../../../../Extensions/ImageExtension/AssetImageExtension';
+import { DeepPartial } from '../../../../types';
+export type ImageFormData = {
+    imageType: NodeName;
+    image: Pick<ImageAttributes, 'src' | 'alt' | 'width' | 'height'>;
+    assetImage: AssetImageAttributes;
 };
-export type ImageFormData = Pick<UpdateImageOptions, 'src' | 'alt' | 'width' | 'height'>;
 export type FormProps = {
-    data: Partial<ImageFormData>;
+    data: DeepPartial<ImageFormData>;
     onSubmit: SubmitHandler<ImageFormData>;
 };
-export type Dimensions = 'width' | 'height';
+export type Dimensions = 'image.width' | 'image.height';
 declare const ImageForm: ({ data, onSubmit }: FormProps) => ReactElement;
 export default ImageForm;

package/lib/EditorToolbar/Tools/Image/Form/ImageForm.js

@@ -33,34 +33,53 @@ const react_image_size_1 = require("react-image-size");
 const Button_1 = __importDefault(require("../../../../ui/Button/Button"));
 const LinkOff_1 = __importDefault(require("@mui/icons-material/LinkOff"));
 const InsertLinkRounded_1 = __importDefault(require("@mui/icons-material/InsertLinkRounded"));
+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 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 } = (0, react_hook_form_1.useForm)({
+    const { register, handleSubmit, setValue, watch, formState: { errors }, } = (0, react_hook_form_1.useForm)({
         defaultValues: data,
     });
+    const imageType = watch('imageType') || Extensions_1.NodeName.Image;
+    const context = (0, react_1.useContext)(EditorContext_1.EditorContext);
     const [aspectRatioFromWidth, setAspectRatioFromWidth] = (0, react_1.useState)(9 / 16);
     const [aspectRatioFromHeight, setAspectRatioFromHeight] = (0, react_1.useState)(16 / 9);
     const [aspectRatioLocked, setAspectRatioLocked] = (0, react_1.useState)(true);
-    const setDimensionsFromURL = (e) => {
-        // get the new url, calculate the width and height and set those fields
-        (0, react_image_size_1.getImageSize)(e.target.value)
-            .then(({ width, height }) => {
-            setValue('width', width);
-            setValue('height', height);
+    const setDimensionsFromURL = async (e) => {
+        try {
+            const { width, height } = await (0, react_image_size_1.getImageSize)(e.target.value);
+            setValue('image.width', width);
+            setValue('image.height', height);
             setAspectRatioFromWidth(height / width);
             setAspectRatioFromHeight(width / height);
-        })
-            .catch((errorMessage) => {
-            // TODO: we will use this when we add validation in a follow-up ticket
-            console.log(errorMessage);
-        });
+        }
+        catch (error) {
+            // swallow the error for fetching the image size, will occur if the URL does not point to an image.
+            // will be handled by validation when attempting to add the image.
+        }
+    };
+    const validateIsNotImage = async (src) => {
+        try {
+            await (0, react_image_size_1.getImageSize)(src);
+            return false;
+        }
+        catch (error) {
+            return true;
+        }
     };
-    const calculateDimensions = () => {
+    const calculateDimensions = (event) => {
         if (aspectRatioLocked) {
             const currentTarget = event?.target;
             const type = currentTarget.name;
             const currentValue = currentTarget.value;
-            const otherValue = type === 'width' ? 'height' : 'width';
-            const aspectRatio = type === 'width' ? aspectRatioFromWidth : aspectRatioFromHeight;
+            const otherValue = type === 'image.width' ? 'image.height' : 'image.width';
+            const aspectRatio = type === 'image.width' ? aspectRatioFromWidth : aspectRatioFromHeight;
             const newValue = Math.round(aspectRatio * Number(currentValue) * 100) / 100;
             setValue(otherValue, newValue);
         }
@@ -70,15 +89,64 @@ const ImageForm = ({ data, onSubmit }) => {
     };
     return (react_1.default.createElement("form", { className: "squiz-fte-form", onSubmit: handleSubmit(onSubmit) },
         react_1.default.createElement("div", { className: "squiz-fte-form-group mb-2" },
-            react_1.default.createElement(Input_1.Input, { label: "Source", ...register('src'), onBlur: setDimensionsFromURL })),
-        react_1.default.createElement("div", { className: "squiz-fte-form-group mb-2" },
-            react_1.default.createElement(Input_1.Input, { label: "Alternative description", ...register('alt') })),
-        react_1.default.createElement("div", { className: "flex flex-row items-end" },
+            react_1.default.createElement(Select_1.Select, { name: "imageType", label: "Type", value: imageType, options: imageTypeOptions, onChange: (value) => setValue('imageType', value) })),
+        imageType === Extensions_1.NodeName.Image && (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement("div", { className: "squiz-fte-form-group mb-2" },
+                react_1.default.createElement(Input_1.Input, { label: "Source", required: true, error: errors?.image?.src?.message, ...register('image.src', {
+                        onChange: setDimensionsFromURL,
+                        required: 'Source is required',
+                        validate: {
+                            isValidImage: async (value) => {
+                                if (value && regexDataURI.test(value)) {
+                                    return 'Must not be a data URI';
+                                }
+                                if (value && (await validateIsNotImage(value))) {
+                                    return 'Must be a valid image URL';
+                                }
+                            },
+                        },
+                    }) })),
             react_1.default.createElement("div", { className: "squiz-fte-form-group mb-2" },
-                react_1.default.createElement(Input_1.Input, { label: "Width", ...register('width'), type: "number", name: "width", onChange: calculateDimensions })),
-            react_1.default.createElement("div", { className: "flex mx-1 mb-2" },
-                react_1.default.createElement(Button_1.default, { handleOnClick: toggleAspectRatio, isActive: false, icon: aspectRatioLocked ? react_1.default.createElement(InsertLinkRounded_1.default, null) : react_1.default.createElement(LinkOff_1.default, null), label: "Constrain properties", isDisabled: false })),
+                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("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', {
+                            onChange: calculateDimensions,
+                            required: 'Width is required',
+                            validate: {
+                                isValidWidth: (value) => {
+                                    if (value && !(value > 0)) {
+                                        return 'Must be higher than 0';
+                                    }
+                                },
+                            },
+                        }) })),
+                react_1.default.createElement("div", { className: "flex mx-1 mb-2" },
+                    react_1.default.createElement(Button_1.default, { handleOnClick: toggleAspectRatio, isActive: false, icon: aspectRatioLocked ? react_1.default.createElement(InsertLinkRounded_1.default, null) : react_1.default.createElement(LinkOff_1.default, null), label: "Constrain properties", isDisabled: false, className: (0, clsx_1.default)('my-auto', !errors?.image?.height && !errors?.image?.width && 'mb-0') })),
+                react_1.default.createElement("div", { className: "squiz-fte-form-group mb-2" },
+                    react_1.default.createElement(Input_1.Input, { label: "Height", type: "number", required: true, error: errors?.image?.height?.message, ...register('image.height', {
+                            onChange: calculateDimensions,
+                            required: 'Height is required',
+                            validate: {
+                                isValidHeight: (value) => {
+                                    if (value && !(value > 0)) {
+                                        return 'Must be higher than 0';
+                                    }
+                                },
+                            },
+                        }) }))))),
+        imageType === Extensions_1.NodeName.AssetImage && (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement("div", { className: "squiz-fte-form-group mb-2" },
-                react_1.default.createElement(Input_1.Input, { label: "Height", ...register('height'), type: "number", name: "height", onChange: calculateDimensions })))));
+                react_1.default.createElement(Input_1.Input, { label: "Asset ID", required: true, error: errors?.assetImage?.matrixAssetId?.message, ...register('assetImage.matrixAssetId', {
+                        required: 'Asset ID is required',
+                        validate: {
+                            isImage: async (assetId) => {
+                                const asset = await context.matrix.resolveMatrixAsset(assetId);
+                                if (asset?.type !== 'image') {
+                                    return 'Asset ID is invalid or not an image';
+                                }
+                            },
+                        },
+                    }) }))))));
 };
 exports.default = ImageForm;

package/lib/EditorToolbar/Tools/Image/ImageButton.d.ts

@@ -1,2 +1,5 @@
-declare const ImageButton: () => JSX.Element;
+type ImageButtonProps = {
+    inPopover?: boolean;
+};
+declare const ImageButton: ({ inPopover }: ImageButtonProps) => JSX.Element;
 export default ImageButton;

package/lib/EditorToolbar/Tools/Image/ImageButton.js

@@ -27,27 +27,30 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importStar(require("react"));
+const react_2 = require("@remirror/react");
 const ImageRounded_1 = __importDefault(require("@mui/icons-material/ImageRounded"));
 const ImageModal_1 = __importDefault(require("./ImageModal"));
 const Button_1 = __importDefault(require("../../../ui/Button/Button"));
-const react_2 = require("@remirror/react");
-const ImageButton = () => {
+const Extensions_1 = require("../../../Extensions/Extensions");
+const ImageButton = ({ inPopover = false }) => {
     const [showModal, setShowModal] = (0, react_1.useState)(false);
-    const { insertImage } = (0, react_2.useCommands)();
-    const active = showModal;
+    const { insertImage, insertAssetImage } = (0, react_2.useCommands)();
+    const active = (0, react_2.useActive)();
+    const selection = (0, react_2.useCurrentSelection)();
+    // if the active selection is not an image, disable the button as it means it will be text
+    const disabled = !selection.empty && !active.image() && !active.assetImage();
     const handleClick = () => {
         if (!showModal) {
-            // form element are uncontrolled, let the event loop run to
-            // update the selected text in state before showing the modal.
-            requestAnimationFrame(() => {
-                setShowModal(true);
-            });
+            setShowModal(true);
         }
     };
     const insertImageFromData = (data) => {
-        const { src, alt, width, height } = data;
-        if (src) {
-            insertImage({ src, alt, width, height });
+        const { imageType, image, assetImage } = data;
+        if (imageType === Extensions_1.NodeName.Image) {
+            insertImage(image);
+        }
+        else {
+            insertAssetImage(assetImage);
         }
     };
     const handleSubmit = (data) => {
@@ -59,9 +62,14 @@ const ImageButton = () => {
         // Prevent other key handlers being run
         return true;
     }, []);
-    (0, react_2.useKeymap)('Mod-l', handleShortcut);
+    // when Ctrl+l 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)('Mod-l', disabled ? () => false : handleShortcut);
+    }
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(Button_1.default, { handleOnClick: handleClick, isActive: active, icon: react_1.default.createElement(ImageRounded_1.default, null), label: "Image (cmd+L)", isDisabled: false }),
+        react_1.default.createElement(Button_1.default, { handleOnClick: handleClick, isActive: active.image() || active.assetImage(), icon: react_1.default.createElement(ImageRounded_1.default, null), label: "Image (cmd+L)", isDisabled: disabled }),
         showModal && react_1.default.createElement(ImageModal_1.default, { onCancel: () => setShowModal(false), onSubmit: handleSubmit })));
 };
 exports.default = ImageButton;

package/lib/EditorToolbar/Tools/Image/ImageModal.js

@@ -3,17 +3,21 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const remirror_1 = require("remirror");
 const ImageForm_1 = __importDefault(require("./Form/ImageForm"));
 const react_1 = __importDefault(require("react"));
 const react_2 = require("@remirror/react");
 const FormModal_1 = __importDefault(require("../../../ui/Modal/FormModal"));
+const Extensions_1 = require("../../../Extensions/Extensions");
 const ImageModal = ({ onCancel, onSubmit }) => {
-    const { helpers, view: { state }, } = (0, react_2.useRemirrorContext)();
     const selection = (0, react_2.useCurrentSelection)();
-    const currentImage = (0, remirror_1.getMarkRanges)(selection, 'image')[0];
-    const selectedImage = helpers.getTextBetween(selection.from, selection.to, state.doc);
+    const currentImage = selection?.node;
+    const currentImageAttrs = { ...currentImage?.attrs };
+    const formData = {
+        imageType: currentImage?.type.name === Extensions_1.NodeName.AssetImage ? Extensions_1.NodeName.AssetImage : Extensions_1.NodeName.Image,
+        image: currentImage?.type?.name === Extensions_1.NodeName.Image ? currentImageAttrs : {},
+        assetImage: currentImage?.type?.name === Extensions_1.NodeName.AssetImage ? currentImageAttrs : {},
+    };
     return (react_1.default.createElement(FormModal_1.default, { title: "Image", onCancel: onCancel },
-        react_1.default.createElement(ImageForm_1.default, { data: { ...currentImage?.mark.attrs, src: selectedImage }, onSubmit: onSubmit })));
+        react_1.default.createElement(ImageForm_1.default, { data: formData, onSubmit: onSubmit })));
 };
 exports.default = ImageModal;

package/lib/EditorToolbar/Tools/Link/Form/LinkForm.d.ts

@@ -1,10 +1,19 @@
 import { ReactElement } from 'react';
 import { SubmitHandler } from 'react-hook-form';
-import { UpdateLinkOptions } from '../../../../Extensions/LinkExtension/LinkExtension';
-export type LinkFormData = Pick<UpdateLinkOptions, 'href' | 'target' | 'title' | 'text'>;
+import { FromToProps } from 'remirror';
+import { UpdateLinkProps } from '../../../../Extensions/LinkExtension/LinkExtension';
+import { UpdateAssetLinkProps } from '../../../../Extensions/LinkExtension/AssetLinkExtension';
+import { MarkName } from '../../../../Extensions/Extensions';
+import { DeepPartial } from '../../../../types';
+export type LinkFormData = {
+    linkType: MarkName;
+    text: string;
+    link: UpdateLinkProps['attrs'];
+    assetLink: UpdateAssetLinkProps['attrs'];
+    range: FromToProps;
+};
 export type FormProps = {
-    data: Partial<LinkFormData>;
+    data?: DeepPartial<LinkFormData>;
     onSubmit: SubmitHandler<LinkFormData>;
 };
-declare const LinkForm: ({ data, onSubmit }: FormProps) => ReactElement;
-export default LinkForm;
+export declare const LinkForm: ({ data, onSubmit }: FormProps) => ReactElement;