Scrubbable Codemirror

I often write SVGs by hand for my pages instead of using a GUI tool like Inkscape. If I want to tweak something, I’ll change a number in the text editor, then reload the page. I decided I could improve that process by making the numbers editable on the page itself. I used CodeMirror with the codemirror-interact extension^[1] , which lets you alt-drag numbers to change them (scrubbing interface):

I put this into my /mjs folder, and then I can use it:

<script type="module">
  import {attachEditorToElement} from "/mjs/scrubbable-codemirror.js";
  for (let el of document.querySelectorAll("svg")) attachEditorToElement(el);
</script>

I made this a bookmarklet so that I could use it on any of my pages:

javascript:(async function(){const {attachEditorToElement} = await import ("https://www.redblobgames.com/mjs/scrubbable-codemirror.js");for (let el of document.querySelectorAll("svg")) attachEditorToElement(el)})()

 1  Implementation#

I started by setting up CodeMirror using https://codemirror.net/examples/basic/^[2] and https://codemirror.net/docs/guide/^[3]. It took some time to figure out how to connect the parts to make a minimal working example where I could read the text out, not just initialize it.

pnpm install @codemirror/state @codemirror/view @codemirror/commands @codemirror/language @codemirror/lang-xml @replit/codemirror-interact 

Once I had CodeMirror working, I added the ingredients step by step:

1. Add syntax highlighting.
2. Add the scrubble number extension.
3. Read the initial value from the outerHTML of an element
4. Write any changes back to the outerHTML of the element. This was a little tricky because writing to the outerHTML invalidates the previous references to that element.

Source: scrubbable-codemirror.js