I have a context menu Mozilla addon which automates adding html and bbcodes, bbCodeWebEx.
The basic algorithm is:
- Read the value of the selected text in a text area of some sort.
- Perform text operations on that value, including potentially using information from the clipboard.
- Replace the value of the selected text.
When I wrote it, there was an issue: There are a number of boards that use http: as opposed to https: plain text areas for user input, and the clipboard API only works on secure (https) pages.
For the method for plain boxes without encryption is clickedElement.value, which does not work on rich text boxes, so I use document.execCommand('paste') on the rich text boxes.
I use an if statement:
let txtcont = document.activeElement.value;
if (txtcont !== undefined) {
some stuff with the http plain text box
} else {
some stuff with the https rich text boxes
}
The problem is that the new google edit box in html mode, in addition to sucking like 1000 hoovers all going at once, (no new features, it’s just a change because … Google) is a plain text area in a https page, and so does not work.
A regular text box will return value like the value of its contents, and a rich text box will return “undefined”.
Unfortunately, the google html composition box returns a document.activeElement.value of an empty string, which is what the so the text manipulations are not put back into the dialogue box.
There are some potential solutions:
Find a way to replace the text in a text box which is not dependent on the encrypted status of a page, and works in both regular and rich text boxes.
- Detect whether the page is http:// or https://, and modify the if statement to handle this.
- Find a universal solution to manipulate text in textareas and content editable page elements that is not restricted by the http-https status of the page.
I know that I have now is both ugly and twitchy, so I am looking for a better solution. (Is there a library out there that would handle this?)
Code, less the text manipulation is below:
async function CommandParse(argString) {
let txtcont = document.activeElement.value; //contents of edit box, textbox undef if content editable
if (txtcont !== undefined) {// process as text/input box
console.log("dialogue box case 1");
let selstart = clickedElement.selectionStart; // index of selection start
let selend = clickedElement.selectionEnd; //index of selection end
let selcont = sanitize(txtcont.substring(selstart, selend)); // selected text content sanitized
let firsttext = txtcont.substring(0, selstart); //stuff before the selection
let lasttext = txtcont.substring(selend); // stuff after the selection
// various string manipulations
clickedElement.value = firsttext + deSanitize(argString) + lasttext; //desanitize and insert element
} else { // for rich text and iframe edit boxes only works on https pages
console.log("dialogue box case 2");
let currentClipBoard = await navigator.clipboard.readText();
let currentSelection = window.getSelection().toString().trim(); //store current selection contents
// will give empty string if the area is just clicked in, and not selected,
let selCont = sanitize(currentSelection); // selected text content sanitized
// various string manipulations
await navigator.clipboard.writeText(deSanitize(argString));
console.log("moo");
document.execCommand('paste'); // paste to cursor location or selection
console.log("cclip",currentClipBoard);
await navigator.clipboard.writeText(currentClipBoard);
}}