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);
}}