Monaco-editor: Monaco paste event

[ghost]

Hey, is there support in Monaco for a paste event which can be used to set a custom callback?
Or should we instead add an event listener on Monaco's container element?

Cheers,
Tim

[alexdima]

@timjl What sort of thing do you want to do on the paste event?

Internally, the paste event is captured by the editor and the text inside the event.clipboardData.getData('text/plain') is "pasted" in the editor. There are also fallback cases for browsers that don't support event.clipboardData (by scanning the <textarea>).

[FrankFang]

For example, I want to support paste-to-upload in my editor. @alexandrudima

[k8w]

@FrankFang any good solution for this?

[k8w]

@alexandrudima Truly I can listen paste event on wrapper element.
But how to prevent monaco default paste action?

For example, I want to achieve when you paste AAA, and actually insert BBB

[FrankFang]

        window.addEventListener('paste', (e) => {
          if (this.editor.isFocused()) {
            let selection = this.editor.getSelection()
            let items = e.clipboardData.items
            for (let i = 0; i < items.length; i++) {
              let matches = items[i].type.match(/^image\/(png|jpg|jpeg|gif)$/i)
              if (matches) {
                var blob = items[i].getAsFile()
                const formData = new FormData()
                formData.append('file', blob);
                formData.append('token', this.$server.qiniu.image_uptoken)
                axios.post(this.$server.qiniu.uphost, formData).then((e) => {
                  let {data: {hash, key}} = e
                  this.editor.executeEdits("", [
                    {
                      range: new monaco.Range(selection.endLineNumber, selection.endColumn, selection.endLineNumber, selection.endColumn),
                      text: `![图片](//${this.$server.qiniu.host}/${key})`
                    }
                  ])
                  let {endLineNumber, endColumn} = this.editor.getSelection()
                  this.editor.setPosition({lineNumber: endLineNumber, column: endColumn})
                }, () => {
                  this.$message.error('上传失败，可能是因为文件太大')
                })
              }
            }
          }
        })

@k8w It may help.

[aceimnorstuvwxz]

"Truly I can listen paste event on wrapper element.
But how to prevent monaco default paste action?"
@k8w Have you found any solution to preventing the default action?😊

[lijialiang]

@FrankFang how to preventDefault from event ? For example, I copied a picture and paste it on the editor, found that the name was entered into the editor.

[FrankFang]

@lilijialiang It happens to me too, I have no idea how to fix it.

[lijialiang]

@FrankFang this is my way

this.editor.onDidPaste( ( e ) => {
    this.pastePosition = e;
} )

// in paste event 
const selection = this.editor.getSelection( );

const range = new monaco.Range(
    this.pastePosition.startLineNumber || selection.endLineNumber,
    this.pastePosition.startColumn || selection.endColumn,
    this.pastePosition.endLineNumber || selection.endLineNumber,
    this.pastePosition.endColumn || selection.endColumn,
);

this.editor.executeEdits( '', [ { range, text: '' } ] );

[FrankFang]

Yeah, you remove the file name...
It's better if we can prevent the default output.

[lijialiang]

@FrankFang I agree, but I have not found a feasible method :(

[wufeng87]

Ctrl+Z the output you removed will comeout again.

@FrankFang this is my way

this.editor.onDidPaste( ( e ) => {
    this.pastePosition = e;
} )

// in paste event 
const selection = this.editor.getSelection( );

const range = new monaco.Range(
    this.pastePosition.startLineNumber || selection.endLineNumber,
    this.pastePosition.startColumn || selection.endColumn,
    this.pastePosition.endLineNumber || selection.endLineNumber,
    this.pastePosition.endColumn || selection.endColumn,
);

this.editor.executeEdits( '', [ { range, text: '' } ] );

[Wulfheart]

May be linked to #791