How to cut, copy, paste and select all text in Ace Editor

If you are trying to implement the most basic text manipulation tasks of an editor in a project that uses Ace editor, you may now know that the library itself doesn't offer any utility to interact with the clipboard itself. In this article, I will explain you how to run the basic of text manipulation using the Clipbard API of JavaScript.

Note: in order to manipulate the Clipboard with JavaScript, we are going to use the Clipboard API. If you can't use this API, maybe because you are supporting older browsers or simply because you have better alternatives like manipulating the native API if you are developing an hybrid mobile app, is up to you how to manipulate the text that you can obtain with ACE editor, however the rest of the logic remains the same.

A. Cut Text

In order to cut the text in Ace editor, it's so easy as running the cut command or inserting an empty string in the editor as it will replace the selected text:

let editor = ace.edit("editor");

// Option A: run the cut command
editor.execCommand("cut");

// Option B: insert an empty string in the current selection
// as it's only injected when there's text selected
editor.insert("");

The only problem with this is that it succesfully provides the feeling of cutting the text as it is removed from the editor, however it won't be placed in the clipboard. So it's up to us how to place the text in the clipboard. In this case, we are going to us the same implementation of copying the text to the clipboard (check step B for isClipboardWritingAllowed implementation):

// 1. Instantiate editor
let editor = ace.edit("editor");

// 2. Store text that will be copied to clipboard
let copyText = editor.getCopyText();

// 3. Simulate Cut in the editor
editor.insert("");

// 4. Verify if clipboard writing is allowed
isClipboardWritingAllowed().then(function(allowed){

    // 5. Write to clipboard if allowed (simulating that text has been cutted from the editor)
    if(allowed){
        navigator.clipboard.writeText(copyText).then(function(){
            console.log("The text has been succesfully cutted to the clipboard!");
        });
    }
}).catch(function(err){
    console.log("Cannot copy to clipboard", err);
});

B. Copy Text

Ace editor by default doesn't provide any support for the clipboard through code. It's only possible to copy text from the editor through the regular keyboard shortcuts, however, it's possible to implement our own feature of placing the selected text to the clipboard using the Clipboard API of JavaScript. What you need to is to implement as first a method that verifies if the access to the clipboard is allowed, this can be done through a JavaScript Promise or using async/await:

// Determine whether is possible to write an image/text to the clipboard.
function isClipboardWritingAllowed(){
    return new Promise(function(resolve, reject){
        try{
            navigator.permissions.query({ name: "clipboard-write" }).then(function(status){
                // PermissionStatus object
                // {
                //  onchange: null,
                //  state: "granted" (it could be as well `denied` or `prompt`)
                // }
                console.log(status);

                resolve((status.state == "granted"));
            });
        }catch(error){
            // This could be caused because of a Browser incompatibility or security error
            // Remember that this feature works only through HTTPS
            reject(error);
        }
    });
}

The previous method will allow us to verify if it's possible to write content to the clipboard. Now, all that's left is to obtain the selected text from the editor and place it in the clipboard:

// 1. Instantiate editor
let editor = ace.edit("editor");

// 2. Store text that will be copied to clipboard
let copyText = editor.getCopyText();

// 3. Verify if clipboard writing is allowed
isClipboardWritingAllowed().then(function(allowed){
    // 4. Write to clipboard if allowed
    if(allowed){
        navigator.clipboard.writeText(copyText).then(function(){
            console.log("The text has been succesfully copied to the clipboard!");
        });
    }
}).catch(function(err){
    console.log("Cannot copy to clipboard", err);
});

C. Paste

If you want to obtain the text content from the clipboard and inserting it into a custom position in Ace editor, you need to obtain as first reading access to the clipboard (thing that you can do with the same API). The following method verifies if you have reading access to the clipboard:

// Determine whether is possible to read an image/text from the clipboard.
function isClipboardReadingAllowed(){
    return new Promise(function(resolve, reject){
        try{
            navigator.permissions.query({ name: "clipboard-read" }).then(function(status){
                // PermissionStatus object
                // {
                //  onchange: null,
                //  state: "granted" (it could be as well `denied` or `prompt`)
                // }
                console.log(status);

                resolve((status.state == "granted" || status.state == "prompt"));
            });
        }catch(error){
            // This could be caused because of a Browser incompatibility or security error
            // Remember that this feature works only through HTTPS
            reject(error);
        }
    });
}

When launching the method, the user will have to specifically grant reading access to the clipboard:

Then you can simply access the content of the clipboard, search for plain text and paste it to the current cursor position of your editor:

// 1. Instantiate editor
let editor = ace.edit("editor");

// 2. Check for reading permission of the clipboard
isClipboardReadingAllowed().then(function(isAllowed){
    if(isAllowed){

        // 3. Read the content of the clipboard
        navigator.clipboard.read().then((data) => {
            // 4. Iterate over every possible item in the clipboard
            for (let i = 0; i < data.length; i++) {
                // 5. Check if the item contains text
                if (data[i].types.includes("text/plain")) {
                    data[i].getType("text/plain").then(function(blob){
                        blob.text().then(function(text){
                            // 6. Insert text from the clipboard to the current cursor position of the editor
                            editor.session.insert(editor.getCursorPosition(), text);

                            // Or to a custom position
                            // editor.session.insert({row: 2, column: 56}, text);
                        });
                    });
                }else{
                    console.log("Not text/plain to paste into the editor");
                }
            }
        });
    }
}).catch(function(error){
    console.log("cannot read clipboard", error);
});

D. Select All Text

Lastly but not least, ace editor includes a default method to select the whole content of the editor:

// 1. Instantiate editor
let editor = ace.edit("editor");

// 2. Select the whole content of the editor
editor.selectAll();

You can do whatever you need with this text as using the Clipboard API to set its new content as the selected text.

Happy coding ❤️!