@squiz/formatted-text-editor 1.21.1-alpha.20 → 1.21.1-alpha.22

package/lib/Editor/Editor.js

@@ -32,6 +32,19 @@ const EditorToolbar_1 = require("../EditorToolbar");
 const EditorContext_1 = require("./EditorContext");
 const Extensions_1 = require("../Extensions/Extensions");
 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: (0, Extensions_1.createExtensions)((0, react_1.useContext)(EditorContext_1.EditorContext)),
@@ -43,18 +56,11 @@ const Editor = ({ content, editable = true, onChange }) => {
         setState(parameter.state);
         onChange?.(parameter);
     };
-    const preventImagePaste = (event) => {
-        const { clipboardData } = event;
-        const pastedData = clipboardData?.items[0];
-        if (pastedData?.type && pastedData?.type.startsWith('image/')) {
-            event.preventDefault();
-        }
-    };
     return (react_1.default.createElement("div", { className: "squiz-fte-scope" },
-        react_1.default.createElement("div", { className: (0, clsx_1.default)('remirror-theme formatted-text-editor', !editable && 'formatted-text-editor--is-disabled'), onPaste: preventImagePaste },
+        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" },
                 editable && react_1.default.createElement(EditorToolbar_1.Toolbar, null),
-                react_1.default.createElement(react_2.EditorComponent, null),
+                react_1.default.createElement(WrappedEditor, null),
                 editable && react_1.default.createElement(EditorToolbar_1.FloatingToolbar, null)))));
 };
 exports.default = Editor;

package/lib/EditorToolbar/FloatingToolbar.js

@@ -51,7 +51,7 @@ const FloatingToolbar = () => {
         extensionNames.underline && react_1.default.createElement(UnderlineButton_1.default, { key: "underline" }),
     ];
     if (active.image()) {
-        buttons.push(react_1.default.createElement(react_components_1.VerticalDivider, { key: "image-divider", className: "editor-divider" }), react_1.default.createElement(ImageButton_1.default, { key: "add-image", inPopover: true }));
+        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

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

@@ -64,10 +64,11 @@ const ImageButton = ({ inPopover = false }) => {
         // Prevent other key handlers being run
         return true;
     }, []);
+    // 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) {
-        // when Ctrl+l is pressed show the modal, only registered in the toolbar button instance to avoid the key press
-        // being double handled.
-        (0, react_2.useKeymap)('Mod-l', handleShortcut);
+        // 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.image(), icon: react_1.default.createElement(ImageRounded_1.default, null), label: "Image (cmd+L)", isDisabled: disabled }),

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

@@ -31,7 +31,6 @@ const InsertLinkRounded_1 = __importDefault(require("@mui/icons-material/InsertL
 const LinkModal_1 = __importDefault(require("./LinkModal"));
 const Button_1 = __importDefault(require("../../../ui/Button/Button"));
 const react_2 = require("@remirror/react");
-const LinkExtension_1 = require("../../../Extensions/LinkExtension/LinkExtension");
 const Extensions_1 = require("../../../Extensions/Extensions");
 const LinkButton = ({ inPopover = false }) => {
     const [showModal, setShowModal] = (0, react_1.useState)(false);
@@ -44,6 +43,11 @@ const LinkButton = ({ inPopover = false }) => {
             setShowModal(true);
         }
     };
+    const handleShortcut = (0, react_1.useCallback)(() => {
+        handleClick();
+        // Prevent other key handlers being run
+        return true;
+    }, []);
     const handleSubmit = (data) => {
         if (data.linkType === Extensions_1.MarkName.AssetLink) {
             updateAssetLink({ text: data.text, attrs: data.assetLink, range: data.range });
@@ -53,10 +57,11 @@ const LinkButton = ({ inPopover = false }) => {
         }
         setShowModal(false);
     };
+    // when Ctrl+K is pressed show the modal, only registered in the toolbar button instance to avoid the key press
+    // being double handled.
     if (!inPopover) {
-        // when Ctrl+K is pressed show the modal, only registered in the toolbar button instance to avoid the key press
-        // being double handled.
-        (0, react_2.useExtensionEvent)(LinkExtension_1.LinkExtension, 'onShortcut', (0, react_1.useCallback)(() => handleClick(), []));
+        // disable the shortcut if the button is disabled
+        (0, react_2.useKeymap)('Mod-k', disabled ? () => true : handleShortcut);
     }
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(Button_1.default, { handleOnClick: handleClick, isActive: active.link() || active.assetLink(), icon: react_1.default.createElement(InsertLinkRounded_1.default, null), label: "Link (cmd+K)", isDisabled: disabled }),

package/lib/index.css

@@ -737,6 +737,9 @@
   --tw-border-opacity: 1;
   border-color: rgb(7 116 210 / var(--tw-border-opacity));
 }
+.squiz-fte-scope .formatted-text-editor img {
+  display: inline;
+}
 .squiz-fte-scope .editor-toolbar,
 .squiz-fte-scope__floating-popover {
   border-bottom-width: 2px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squiz/formatted-text-editor",
-  "version": "1.21.1-alpha.20",
+  "version": "1.21.1-alpha.22",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "scripts": {
@@ -72,5 +72,5 @@
   "volta": {
     "node": "18.15.0"
   },
-  "gitHead": "83f7b471dd6dd239c5b25233dcb5696fa96267e7"
+  "gitHead": "82a7818468c6bcc2eee98748a0962d233c35f55e"
 }

package/src/Editor/Editor.tsx

@@ -1,10 +1,11 @@
-import React, { ClipboardEvent, useContext } from 'react';
-import { EditorComponent, Remirror, useRemirror } from '@remirror/react';
+import React, { useContext, useCallback } from 'react';
+import { EditorComponent, Remirror, useRemirror, useEditorEvent } from '@remirror/react';
 import { RemirrorContentType, RemirrorEventListener, Extension } from '@remirror/core';
 import { Toolbar, FloatingToolbar } from '../EditorToolbar';
 import { EditorContext } from './EditorContext';
 import { createExtensions } from '../Extensions/Extensions';
 import clsx from 'clsx';
+import { ClipboardEventHandler } from '@remirror/extension-events/dist-types/events-extension';
 
 type EditorProps = {
   content?: RemirrorContentType;
@@ -12,6 +13,22 @@ type EditorProps = {
   editable?: boolean;
 };
 
+const WrappedEditor = () => {
+  const preventImagePaste = 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;
+  }, []) as ClipboardEventHandler;
+
+  useEditorEvent('paste', preventImagePaste);
+  return <EditorComponent />;
+};
+
 const Editor = ({ content, editable = true, onChange }: EditorProps) => {
   const { manager, state, setState } = useRemirror({
     extensions: createExtensions(useContext(EditorContext)),
@@ -25,20 +42,9 @@ const Editor = ({ content, editable = true, onChange }: EditorProps) => {
     onChange?.(parameter);
   };
 
-  const preventImagePaste = (event: ClipboardEvent<HTMLDivElement>) => {
-    const { clipboardData } = event;
-    const pastedData = clipboardData?.items[0];
-    if (pastedData?.type && pastedData?.type.startsWith('image/')) {
-      event.preventDefault();
-    }
-  };
-
   return (
     <div className="squiz-fte-scope">
-      <div
-        className={clsx('remirror-theme formatted-text-editor', !editable && 'formatted-text-editor--is-disabled')}
-        onPaste={preventImagePaste}
-      >
+      <div className={clsx('remirror-theme formatted-text-editor', !editable && 'formatted-text-editor--is-disabled')}>
         <Remirror
           manager={manager}
           state={state}
@@ -48,7 +54,7 @@ const Editor = ({ content, editable = true, onChange }: EditorProps) => {
           label="Text editor"
         >
           {editable && <Toolbar />}
-          <EditorComponent />
+          <WrappedEditor />
           {editable && <FloatingToolbar />}
         </Remirror>
       </div>

package/src/Editor/_editor.scss

@@ -39,7 +39,13 @@
     content: attr(data-placeholder);
     @apply text-gray-500;
   }
+
   .ProseMirror-selectednode {
     @apply border-blue-300 border-2 border-solid;
   }
+
+  // match the Remirror node
+  img {
+    display: inline;
+  }
 }

package/src/EditorToolbar/FloatingToolbar.tsx

@@ -28,10 +28,7 @@ export const FloatingToolbar = () => {
   ];
 
   if (active.image()) {
-    buttons.push(
-      <VerticalDivider key="image-divider" className="editor-divider" />,
-      <ImageButton key="add-image" inPopover={true} />,
-    );
+    buttons = [<ImageButton key="add-image" inPopover={true} />];
   } 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.

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

@@ -48,10 +48,11 @@ const ImageButton = ({ inPopover = false }: ImageButtonProps) => {
     return true;
   }, []);
 
+  // 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) {
-    // when Ctrl+l is pressed show the modal, only registered in the toolbar button instance to avoid the key press
-    // being double handled.
-    useKeymap('Mod-l', handleShortcut);
+    // disable the shortcut if the button is disabled
+    useKeymap('Mod-l', disabled ? () => false : handleShortcut);
   }
 
   return (

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

@@ -3,7 +3,7 @@ import InsertLinkRoundedIcon from '@mui/icons-material/InsertLinkRounded';
 import LinkModal from './LinkModal';
 import { LinkFormData } from './Form/LinkForm';
 import Button from '../../../ui/Button/Button';
-import { useActive, useCommands, useExtensionEvent } from '@remirror/react';
+import { useActive, useCommands, useKeymap } from '@remirror/react';
 import { LinkExtension } from '../../../Extensions/LinkExtension/LinkExtension';
 import { CommandsExtension } from '../../../Extensions/CommandsExtension/CommandsExtension';
 import { AssetLinkExtension } from '../../../Extensions/LinkExtension/AssetLinkExtension';
@@ -25,6 +25,12 @@ const LinkButton = ({ inPopover = false }: LinkButtonProps) => {
       setShowModal(true);
     }
   };
+  const handleShortcut = useCallback(() => {
+    handleClick();
+    // Prevent other key handlers being run
+    return true;
+  }, []);
+
   const handleSubmit = (data: LinkFormData) => {
     if (data.linkType === MarkName.AssetLink) {
       updateAssetLink({ text: data.text, attrs: data.assetLink, range: data.range });
@@ -35,14 +41,11 @@ const LinkButton = ({ inPopover = false }: LinkButtonProps) => {
     setShowModal(false);
   };
 
+  // when Ctrl+K is pressed show the modal, only registered in the toolbar button instance to avoid the key press
+  // being double handled.
   if (!inPopover) {
-    // when Ctrl+K is pressed show the modal, only registered in the toolbar button instance to avoid the key press
-    // being double handled.
-    useExtensionEvent(
-      LinkExtension,
-      'onShortcut',
-      useCallback(() => handleClick(), []),
-    );
+    // disable the shortcut if the button is disabled
+    useKeymap('Mod-k', disabled ? () => true : handleShortcut);
   }
 
   return (