fix: don't paste url as image if shift pressed (#750)

Author: kseniya57

src/extensions/markdown/Image/imageUrlPaste/index.ts

@@ -1,5 +1,7 @@
 import {Plugin} from 'prosemirror-state';
 
+import {InputState} from 'src/utils/input-state';
+
 import type {ParseInsertedUrlAsImage} from '../../../../bundle';
 import type {ExtensionAuto} from '../../../../core';
 import {DataTransferType} from '../../../behavior/Clipboard/utils';
@@ -13,13 +15,22 @@ export type ImageUrlPasteOptions = {
 };
 
 export const imageUrlPaste: ExtensionAuto<ImageUrlPasteOptions> = (builder, opts) => {
+    const inputState = new InputState();
+
     builder.addPlugin(
         () =>
             new Plugin({
                 props: {
                     handleDOMEvents: {
+                        keydown(_view, e) {
+                            inputState.keydown(e);
+                        },
+                        keyup(_view, e) {
+                            inputState.keyup(e);
+                        },
                         paste(view, e) {
                             if (
+                                !inputState.shiftKey ||
                                 !opts.parseInsertedUrlAsImage ||
                                 !e.clipboardData ||
                                 view.state.selection.$from.parent.type.spec.code

src/extensions/yfm/ImgSize/ImagePaste/index.ts

@@ -3,6 +3,8 @@ import {Fragment, type Node, type Schema, Slice} from 'prosemirror-model';
 import {Plugin} from 'prosemirror-state';
 import {dropPoint} from 'prosemirror-transform';
 
+import {InputState} from 'src/utils/input-state';
+
 import type {ParseInsertedUrlAsImage} from '../../../../bundle';
 import {type ExtensionAuto, getLoggerFromState} from '../../../../core';
 import {isFunction} from '../../../../lodash';
@@ -37,11 +39,19 @@ export const ImagePaste: ExtensionAuto<ImagePasteOptions> = (builder, opts) => {
             } is not a function`,
         );
 
+    const inputState = new InputState();
+
     builder.addPlugin(
         () =>
             new Plugin({
                 props: {
                     handleDOMEvents: {
+                        keydown(_view, e) {
+                            inputState.keydown(e);
+                        },
+                        keyup(_view, e) {
+                            inputState.keyup(e);
+                        },
                         paste(view, e) {
                             const logger = getLoggerFromState(view.state).nested({
                                 plugin: 'image-paste',
@@ -60,7 +70,7 @@ export const ImagePaste: ExtensionAuto<ImagePasteOptions> = (builder, opts) => {
                                     opts,
                                 ).run();
                                 return true;
-                            } else if (parseInsertedUrlAsImage) {
+                            } else if (!inputState.shiftKey && parseInsertedUrlAsImage) {
                                 const {imageUrl, title} =
                                     parseInsertedUrlAsImage(
                                         e.clipboardData?.getData(DataTransferType.Text) ?? '',

src/markup/codemirror/create.ts

@@ -17,6 +17,8 @@ import {
     placeholder,
 } from '@codemirror/view';
 
+import {InputState} from 'src/utils/input-state';
+
 import type {ParseInsertedUrlAsImage} from '../../bundle';
 import type {EventMap} from '../../bundle/Editor';
 import {ActionName} from '../../bundle/config/action-names';
@@ -121,6 +123,8 @@ export function createCodemirror(params: CreateCodemirrorParams) {
         extensions.push(history());
     }
 
+    const inputState = new InputState();
+
     extensions.push(
         syntaxHighlighting(gravityHighlightStyle),
         LoggerFacet.of(logger),
@@ -177,6 +181,12 @@ export function createCodemirror(params: CreateCodemirrorParams) {
             scroll(event) {
                 onScroll(event);
             },
+            keydown(event) {
+                inputState.keydown(event);
+            },
+            keyup(event) {
+                inputState.keyup(event);
+            },
             paste(event, editor) {
                 if (!event.clipboardData) return false;
 
@@ -235,7 +245,7 @@ export function createCodemirror(params: CreateCodemirrorParams) {
                     }
                 }
 
-                if (parseInsertedUrlAsImage) {
+                if (!inputState.shiftKey && parseInsertedUrlAsImage) {
                     const linkMatches = currentLine.matchAll(linkRegex);
                     const cursorPositionInCurrentLine = from - line.from;
                     const isInsertedInsideLink = linkMatches.some(

src/utils/input-state.ts

@@ -0,0 +1,15 @@
+export class InputState {
+    #shiftKey = false;
+
+    get shiftKey() {
+        return this.#shiftKey;
+    }
+
+    keydown(e: KeyboardEvent) {
+        this.#shiftKey = e.code.startsWith('Shift') || e.shiftKey;
+    }
+
+    keyup(e: KeyboardEvent) {
+        if (e.code.startsWith('Shift')) this.#shiftKey = false;
+    }
+}