Execcommand() is now obsolete, what's the alternative?

javascript

web-development

accessibility

best-practices

byAnton Shumikhin·Oct 27, 2024

To replace document.execCommand(), use classList or style for text styling and the Clipboard API for clipboard operations.

Text styling example:

// Toggle the 'bold' class on the parent element of the focused node
// Like a boss turning 'bold' mode on and off 😉
document.getSelection().focusNode.parentElement.classList.toggle('bold');

Clipboard action example:

async function copyText(text) {
  // Try copying text to the clipboard, Log any errors
  // Remember, with great power comes great responsibility!
  await navigator.clipboard.writeText(text).catch(console.error);
}

Given the obsolescence of document.execCommand(), no perfect "one-size-fits-all" alternative exists. However, specific modern web APIs can serve some of the same functionalities depending on the use-case.

Navigating browser diversity and IME nuances

Despite being obsolete, document.execCommand() still enjoys cross-browser compatibility. This wide support still guarantees its utility, especially when dealing with IME input and caret movement across diverse environments.

Even in an obsoleted state, execCommand() is needed to deal with many IME nuisances. Proper IME input is crucial to maintain functionalities, like typing and word suggestions on mobile keypads, such as Android's GBoard.

Crafting custom WYSIWYG editors

Replacing execCommand() while building a custom WYSIWYG editor involves many APIs, such as Input Events Level 2 and .cloneNode method, complemented by cautious usage of semantic HTML tags like <em>, <strong> rather than <span> and rigorous cross-browser testing, especially for Gecko-based browsers.

Code hints for modern APIs

Check out the following examples to see how you can implement modern API alternatives:

Use navigator.clipboard.writeText() for text copying and navigator.clipboard.readText() for pasting, using Clipboard API.
Achieve rich text editing using document.createRange() and Range.surroundContents() techniques.
Utilize powerful DOM manipulations with methods like insertBefore() and replaceChild().

These replacements facilitate cleaner scriptwriting and adherence to modern web standards.

Creating accessible web functionalities

As a developer, prioritize accessibility. Ensure manipulations to the DOM are communicated to screen readers and other assistive technologies effectively.

Visualising the shift in web APIs

Comparing old and new tools for web text manipulation:

Old Toolset: [🖌️ (execCommand)]
New Toolset: [✂️ (Clipboard API), 📝 (ContentEditable), 🎨 (Input Events), 🔒 (Document.execCommand for content security)]

Each tool in the new toolset specializes in a particular function.

Continuing with persistent frameworks

Creating a custom editor requires persistence and preparedness to navigate complexity. The use of frameworks can both aid and potentially obstruct maintainability. Stay updated on new standards and test across various platforms to avoid hidden browser quirks.

explain-codes / Javascript / Execcommand() is now obsolete, what's the alternative?

Linked

`` vs. ``. Which to use?



How to export JavaScript array info to csv (on client side)?



Input type button - label vs value



Input type="submit" Vs button tag are they interchangeable?



Why shouldn't `'` be used to escape single quotes?

