Merge pull request #8200 from ianhi/pasting_images_to_markdown_cells

No extra text when pasting image to markdown cell + insert at cursor location

packages/cells/src/widget.ts

@@ -1224,7 +1224,19 @@ export abstract class AttachmentsCell extends Cell {
    */
   private _evtPaste(event: ClipboardEvent): void {
     if (event.clipboardData) {
-      this._attachFiles(event.clipboardData.items);
+      const items = event.clipboardData.items;
+      for (let i = 0; i < items.length; i++) {
+        if (items[i].type === 'text/plain') {
+          // Skip if this text is the path to a file
+          if (i < items.length - 1 && items[i + 1].kind === 'file') {
+            continue;
+          }
+          items[i].getAsString(text => {
+            this.editor.replaceSelection?.(text);
+          });
+        }
+        this._attachFiles(event.clipboardData.items);
+      }
     }
     event.preventDefault();
   }
@@ -1385,6 +1397,9 @@ export class MarkdownCell extends AttachmentsCell {
       })
     });
 
+    // Stop codemirror handling paste
+    this.editor.setOption('handlePaste', false);
+
     // Throttle the rendering rate of the widget.
     this._monitor = new ActivityMonitor({
       signal: this.model.contentChanged,
@@ -1468,7 +1483,7 @@ export class MarkdownCell extends AttachmentsCell {
   ) {
     const textToBeAppended = `![${attachmentName}](attachment:${URI ??
       attachmentName})`;
-    this.model.value.insert(this.model.value.text.length, textToBeAppended);
+    this.editor.replaceSelection?.(textToBeAppended);
   }
 
   /**

packages/codeeditor/src/editor.ts

@@ -636,6 +636,11 @@ export namespace CodeEditor {
      */
     autoClosingBrackets: boolean;
 
+    /**
+     * Whether the editor should handle paste events.
+     */
+    handlePaste: boolean;
+
     /**
      * The column where to break text line.
      */
@@ -667,6 +672,7 @@ export namespace CodeEditor {
     insertSpaces: true,
     matchBrackets: true,
     autoClosingBrackets: true,
+    handlePaste: true,
     rulers: [],
     codeFolding: false
   };

packages/codemirror/src/editor.ts

@@ -163,6 +163,14 @@ export class CodeMirrorEditor implements CodeEditor.IEditor {
       this._lastChange = change;
     });
 
+    // Turn off paste handling in codemirror since sometimes we want to
+    // replace it with our own.
+    editor.on('paste', (instance: CodeMirror.Editor, event: any) => {
+      if (!this._config['handlePaste']) {
+        event.codemirrorIgnore = true;
+      }
+    });
+
     // Manually refresh on paste to make sure editor is properly sized.
     editor.getWrapperElement().addEventListener('paste', () => {
       if (this.hasFocus()) {