I remember a time when there were whole libraries dedicated to clipboard management.

Turns out in browsers released after ~2020 you can do it with one line:

navigator.clipboard.writeText(text).then(console.log).catch(console.error);

Some caveats:

• this only works in a secure context (which mostly means either “a site served over HTTPS” or localhost).
• the user needs to have interacted with the page before you can actually call the method.
• this was only added to certain browsers in 2020, so it's new enough that it might cause problems if your constituents have older devices or don't update often.

Usually when I do this I'm implementing something like a “copy to clipboard” button:

<span id='copy-target'>This text is going into a clipboard</span>
<button onclick='copyToClipboard("copy-target")'>Copy</button>
<script>
    const copyToClipboard = (target) => {
        const element = document.getElementById(target);
        const value = element?.innerText
        if (value) {
            navigator.clipboard.writeText(value).then(console.log).catch(console.error);
        }
    }
</script>

I was working on a custom element today that replaces a textarea with CodeMirror in the UI while still updating the textarea in the background so that it can be submitted in a form. I ran across a wild footgun in custom elements.

StackOverflow eventually provided the solution. There's a solution on stack overflow, but Danny Engleman wrote up a more thorough explanation.

When you're creating a custom element you do most of your setup in a method called connectedCallback. Here you can read the content of the custom element, replace it with different elements, set up callback handlers, etc.

Or so I thought.

You can read the attributes of the node just fine, but if you try to read its contents you'll find they aren't there. The reason is that the connectedCallback fires when the opening tag of the custom element is parsed, so the contents aren't in the DOM yet.

The solution is breathtakingly simple and silly: call setTimeout to defer initialization until after the DOM has been fully parsed.

export class MyCustomElement extends HTMLElement {
  initialize () {
    // Fancy custom element stuff goes here; you can safely access
    // `this.innerHTML` and stuff.
  }

  connectedCallback() {
    // Be sure to use an arrow function here or 'this' will be
    // messed up in `initialize.
    setTimeout(() => this.initialize(), 0)
  }
}

When you write an HTML form, textarea is the standard way to support multi-line input, but it's not suitable for every application. CodeMirror describes itself as a “code editor component for the web”, and might be a suitable replacement for a textarea if you want something more like a code editor.

This article describes how to replace a textarea with a CodeMirror editor in under 30 lines of code and (hopefully) under 30 minutes of effort. It uses some very basic tooling to create an artifact that's no harder to deploy than vanilla JavaScript and HTML.

You can also jump straight to the source code if you prefer.

Tooling

In the spirit of A simple stack for today's web hacks (which was part of the inspiration for this guide) we'll try to keep our tooling to a minimum:

• npm to get the pieces we'll need
• esbuild to put the pieces together for us

We'll even install esbuild using npm, so that's all you'll need in order to get started (there are many ways to install it; I happen to like Volta).

Dependencies

In the project you want to add your CodeMirror editor to, run

npm init
npm add codemirror
npm add --save-dev esbuild

This will let you set up a very basic editor and bundle it so it's easy to deploy. If you want to add features (syntax highlighting, Vim or Emacs keybindings, integration with Vue or Svelte, etc.) there are many extensions (both first party and community developed). They can also be installed with npm add and added to the editor initialization script below. For this example, we'll add markdown syntax highlighting

npm add @codemirror/lang-markdown

Code

Once your packages are installed its time to set up the editor. Create a file with these contents (I called my main.js).

import { basicSetup, EditorView } from "codemirror"
import { markdown } from "@codemirror/lang-markdown"

// Hide the existing textarea
let textarea = document.querySelector('textarea');
textarea.style.display = "none";

// Create a CodeMirror editor with the textarea's contents
let view = new EditorView({
    doc: textarea.value,
    extensions: [
        basicSetup,
        markdown({}),
    ],
});
// Insert the editor into the document
textarea.insertAdjacentElement("afterend", view.dom);

// When submitting the form, update the textarea with the editor's
// contents so that they're included with the form submission.
textarea.parentElement.onsubmit = function () {
    textarea.value = view.state.doc;
}

This is what we're going to “build” with esbuild and eventually add to our web page.

Build

To create the final JavaScript file that we're going to include on our web page, run

npm run esbuild --minify --bundle main.js --outfile=editor.js

npm run is a helper command that executes programs installed with NPM, so really we're running esbuild --minify --bundle main.js --outfile=editor.js.

• esbuild will parse the JavaScript module we wrote, find the code it depends on (that we installed with npm) and pull it all together
• the --minify flag tells esbuild to minify our code
• the --bundle flag tells esbuild to concatenate all the packages (in our case, codemirror and any plugins we installed) into a single file
• main.js is the name of our script
• --outfile=editor.js tells esbuild where to put all this code once it's compiled

Publish

Finally, let's publish our editor. Here's a basic HTML file to load it:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CodeMirror in 30</title>
</head>

<body>
    <form action="">
        <label for="editor">Editor Input</label>
        <textarea name="editor"></textarea>
    </form>
    <script src="editor.js"></script>
    </form>
</body>

</html>

This document has:

• a form with a textarea that we're going to submit
• the editor.js script that esbuild built for us

When the page is first loaded, we mark the textarea as hidden and append a CodeMirror editor to the form. As the form gets submitted, we copy the contents of the editor into the textarea so that it gets sent along with the rest of the form.