feat(markup): convert pasted urls to images (#469)

Co-authored-by: kseniyakuzina <[email protected]>

demo/playground/Playground.tsx

@@ -188,6 +188,7 @@ export const Playground = React.memo<PlaygroundProps>((props) => {
             },
             markupConfig: {
                 extensions: markupConfigExtensions,
+                parseInsertedUrlAsImage,
             },
             extraExtensions: (builder) => {
                 builder

demo/presets/PresetDemo.tsx

@@ -97,6 +97,9 @@ export const PresetDemo = React.memo<PresetDemoProps>((props) => {
                 },
             },
         },
+        markupConfig: {
+            parseInsertedUrlAsImage,
+        },
     });
 
     useEffect(() => {

src/bundle/Editor.ts

@@ -25,6 +25,7 @@ import type {
     MarkdownEditorMdOptions,
     MarkdownEditorOptions,
     MarkdownEditorMarkupConfig as MarkupConfig,
+    ParseInsertedUrlAsImage,
     RenderPreview,
     MarkdownEditorSplitMode as SplitMode,
 } from './types';
@@ -140,6 +141,7 @@ export class EditorImpl extends SafeEventEmitter<EventMapInt> implements EditorI
     #extensions?: WysiwygEditorOptions['extensions'];
     #renderStorage: ReactRenderStorage;
     #fileUploadHandler?: FileUploadHandler;
+    #parseInsertedUrlAsImage?: ParseInsertedUrlAsImage;
     #needToSetDimensionsForUploadedImages: boolean;
     #prepareRawMarkup?: (value: MarkupString) => MarkupString;
     #beforeEditorModeChange?: (
@@ -261,6 +263,7 @@ export class EditorImpl extends SafeEventEmitter<EventMapInt> implements EditorI
                     onScroll: (event) => this.emit('cm-scroll', {event}),
                     reactRenderer: this.#renderStorage,
                     uploadHandler: this.fileUploadHandler,
+                    parseInsertedUrlAsImage: this.parseInsertedUrlAsImage,
                     needImgDimms: this.needToSetDimensionsForUploadedImages,
                     extensions: this.#markupConfig.extensions,
                     disabledExtensions: this.#markupConfig.disabledExtensions,
@@ -282,6 +285,10 @@ export class EditorImpl extends SafeEventEmitter<EventMapInt> implements EditorI
         return this.#fileUploadHandler;
     }
 
+    get parseInsertedUrlAsImage() {
+        return this.#parseInsertedUrlAsImage;
+    }
+
     get needToSetDimensionsForUploadedImages(): boolean {
         return this.#needToSetDimensionsForUploadedImages;
     }
@@ -313,6 +320,7 @@ export class EditorImpl extends SafeEventEmitter<EventMapInt> implements EditorI
 
         this.#renderStorage = opts.renderStorage;
         this.#fileUploadHandler = handlers.uploadFile;
+        this.#parseInsertedUrlAsImage = markupConfig.parseInsertedUrlAsImage;
         this.#needToSetDimensionsForUploadedImages = Boolean(
             experimental.needToSetDimensionsForUploadedImages,
         );

src/bundle/types.ts

@@ -22,6 +22,8 @@ export type RenderPreviewParams = {
 };
 export type RenderPreview = (params: RenderPreviewParams) => ReactNode;
 
+export type ParseInsertedUrlAsImage = (text: string) => {imageUrl: string; title?: string} | null;
+
 export type MarkdownEditorMdOptions = {
     html?: boolean;
     breaks?: boolean;
@@ -98,6 +100,10 @@ export type MarkdownEditorMarkupConfig = {
     languageData?: YfmLangOptions['languageData'];
     /** Config for @codemirror/autocomplete https://codemirror.net/docs/ref/#autocomplete.autocompletion%5Econfig */
     autocompletion?: CreateCodemirrorParams['autocompletion'];
+    /**
+     * The function, used to determine if the pasted text is the image url and should be inserted as an image
+     */
+    parseInsertedUrlAsImage?: ParseInsertedUrlAsImage;
 };
 
 // do not export this type

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

@@ -1,5 +1,6 @@
 import {Plugin} from 'prosemirror-state';
 
+import type {ParseInsertedUrlAsImage} from '../../../../bundle';
 import {ExtensionAuto} from '../../../../core';
 import {DataTransferType} from '../../../behavior/Clipboard/utils';
 import {imageType} from '../ImageSpecs';
@@ -8,7 +9,7 @@ export type ImageUrlPasteOptions = {
     /**
      * The function, used to determine if the pasted text is the image url and should be inserted as an image
      */
-    parseInsertedUrlAsImage?: (text: string) => {imageUrl: string; title?: string} | null;
+    parseInsertedUrlAsImage?: ParseInsertedUrlAsImage;
 };
 
 export const imageUrlPaste: ExtensionAuto<ImageUrlPasteOptions> = (builder, opts) => {

src/extensions/markdown/Image/index.ts

@@ -28,6 +28,7 @@ export const Image: ExtensionAuto<ImageOptions | undefined> = (builder, opts) =>
 declare global {
     namespace WysiwygEditor {
         interface Actions {
+            // @ts-expect-error
             [addImageAction]: Action<AddImageAttrs>;
         }
     }

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

@@ -3,6 +3,7 @@ import {Fragment, Node, Schema, Slice} from 'prosemirror-model';
 import {Plugin} from 'prosemirror-state';
 import {dropPoint} from 'prosemirror-transform';
 
+import type {ParseInsertedUrlAsImage} from '../../../../bundle';
 import {ExtensionAuto} from '../../../../core';
 import {isFunction} from '../../../../lodash';
 import {FileUploadHandler} from '../../../../utils/upload';
@@ -20,7 +21,7 @@ export type ImagePasteOptions = Pick<CreateImageNodeOptions, 'needDimmensions'>
     /**
      * The function, used to determine if the pasted text is the image url and should be inserted as an image
      */
-    parseInsertedUrlAsImage?: (text: string) => {imageUrl: string; title?: string} | null;
+    parseInsertedUrlAsImage?: ParseInsertedUrlAsImage;
 };
 
 export const ImagePaste: ExtensionAuto<ImagePasteOptions> = (builder, opts) => {

src/extensions/yfm/ImgSize/index.ts

@@ -40,7 +40,6 @@ export const ImgSize: ExtensionAuto<ImgSizeOptions> = (builder, opts) => {
 declare global {
     namespace WysiwygEditor {
         interface Actions {
-            // @ts-expect-error
             [addImageAction]: Action<AddImageAttrs>;
         }
     }

src/markup/codemirror/create.ts

@@ -11,13 +11,16 @@ import {syntaxHighlighting} from '@codemirror/language';
 import type {Extension, StateCommand} from '@codemirror/state';
 import {EditorView, EditorViewConfig, KeyBinding, keymap, placeholder} from '@codemirror/view';
 
+import type {ParseInsertedUrlAsImage} from '../../bundle';
 import {EventMap} from '../../bundle/Editor';
 import {ActionName} from '../../bundle/config/action-names';
 import {ReactRenderStorage} from '../../extensions';
+import {DataTransferType} from '../../extensions/behavior/Clipboard/utils';
 import {logger} from '../../logger';
 import {Action as A, formatter as f} from '../../shortcuts';
 import {Receiver} from '../../utils';
 import {
+    insertImages,
     insertLink,
     toH1,
     toH2,
@@ -56,6 +59,7 @@ export type CreateCodemirrorParams = {
     onScroll: (event: Event) => void;
     reactRenderer: ReactRenderStorage;
     uploadHandler?: FileUploadHandler;
+    parseInsertedUrlAsImage?: ParseInsertedUrlAsImage;
     needImgDimms?: boolean;
     extensions?: Extension[];
     disabledExtensions?: {
@@ -83,6 +87,7 @@ export function createCodemirror(params: CreateCodemirrorParams) {
         extensions: extraExtensions,
         placeholder: placeholderContent,
         autocompletion: autocompletionConfig,
+        parseInsertedUrlAsImage,
     } = params;
 
     const extensions: Extension[] = [gravityTheme, placeholder(placeholderContent)];
@@ -145,6 +150,28 @@ export function createCodemirror(params: CreateCodemirrorParams) {
             scroll(event) {
                 onScroll(event);
             },
+            paste(event, editor) {
+                if (event.clipboardData && parseInsertedUrlAsImage) {
+                    const {imageUrl, title} =
+                        parseInsertedUrlAsImage(
+                            event.clipboardData.getData(DataTransferType.Text) ?? '',
+                        ) || {};
+
+                    if (!imageUrl) {
+                        return;
+                    }
+
+                    event.preventDefault();
+
+                    insertImages([
+                        {
+                            url: imageUrl,
+                            alt: title,
+                            title,
+                        },
+                    ])(editor);
+                }
+            },
         }),
         SearchPanelPlugin({
             anchorSelector: '.g-md-search-anchor',