Markdown emoji previewing

Is it possible to turn emojis (:1234:) into images?

For example, turning :lober: into an image of a plush lobster (

) inside the editor.

Yes that can be implemented via “replacing decorations”, see Example: Decorations.

Is there a vanilla JS way to do this?

Yes of course. If you look at the Atomic Ranges example there isn’t even really any TypeScript magic there … you can just leave out the type annotations and it works fine in JavaScript. (But you should really do yourself a favor and use TypeScript … it’s much less error-prone than writing JavaScript without any help).

Where should I find the view thing? I can’t find anything on codemirror - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers and I don’t know how or if I can use import.

Yeah cdnjs does not serve the other @codemirror/* packages as far as I know … you could use a CDN like Skypack, e.g. the following should work:

<script type=module>
import {EditorView, Decoration} from "https://cdn.skypack.dev/@codemirror/view";
</script>

Note however that this really isn’t a good idea. Users of your website will have to download many script files … it’s better to bundle them up using either a Node.js-based bundler like Rollup, as explained in the documentation or by using TypeScript and Deno.

:face_with_spiral_eyes::face_with_spiral_eyes::face_with_spiral_eyes::face_with_spiral_eyes::face_with_spiral_eyes:

Argh…

Yes the DecorationSet is only a type alias. You don’t need it at all.

It’s easier to use Node. All the examples use it. CodeMirror Examples

I suggest using vite, but any node dev tool is fine.