ajayyy / DeArrow

Crowdsourcing better titles and thumbnails on YouTube
https://dearrow.ajay.app
GNU General Public License v3.0
1.41k stars 38 forks source link

Title Input Box Shouldn't Support Formatting #109

Open MaximilianEmel opened 1 year ago

MaximilianEmel commented 1 year ago

The title input box for a new title, allows formatted text to be pasted, which shouldn't be the case, since it isn't sent off anywhere, and can therefore be confusing.

ajayyy commented 1 year ago

What do you mean by formatted text?

MaximilianEmel commented 1 year ago

firefox_lChZV15qZX (Copy-pasted from LibreOffice Writer into Firefox)

rmw4269 commented 1 year ago

While this isn’t a perfect fix, it is simple, and the problem is also not a big issue. The text input field has this (simplified) HTML <span contenteditable="true">. The contenteditable attribute is what allows the element to act as a text input. Modifying the attribute to contenteditable="plaintext-only" should allow text input without formatting. This new-ish option is only supported in about 83% of desktop browsers, and some testing needs to be done to ensure that browsers that don’t support this still allow text input (as, technically, invalid values are supposed to use the ‘inherit’ state).

I think that support can be tested like below.

try {
    let e = document.createElement("span");
    e.contentEditable = "plaintext-only";
    // supported
    // Use contenteditable="plaintext-only".
} catch (error) {
    if (! (error instanceof SyntaxError)) { throw error; }
    // not supported
    // Use contenteditable="true", and add a listener similar to below, maybe triggered when the element loses focus.
    function listener({target}) {
        target.textContent = target.textContent;
    }
}