#til #webdev #javascript #clipboard

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

#til #javascript #webdev #customelements

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.

#codemirror #webdev #vanillajs #esbuild

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.