Is there any documentation on how to use this?

1

Been wading through the docs for over an hour now. Don’t see any information on how to actually install and use this.

Been to Github and it say I need to install separate packages from npm, but doesn’t tell me what packages I need. Tells me to check out the website for more details.

As far as I can see the website doesn’t say anything about how to install this at all.

Seen a few examples that are barely even half-examples too. E.g. The example on Linting just demonstrates how to create the linting function, doesn’t demonstrate how you actually configure the editor to use it at all.

Don’t see a single example of setting anything up from scratch or any information on what packages I need anywhere.

2

Have you seen the example with Rollup? CodeMirror Bundling Example

You’re expected to know how to install NPM packages. As for which ones to use, you get to decide! As you say you’re unsure what to use, I’d recommend starting with the basic setup, just like the example above uses.

3

I found the instruction in the web docs to have a look at Rollup or Webpack, and I thought rather than spend my evening learning how to put that together from scratch I’ll see if there’s a Vite template that will do this.

npm create vite@latest

Select ‘Vanilla’ JS or TS as you prefer

npm install
npm install codemirror
npm run dev

With that I was able to get the basic editor using the code in CodeMirror System Guide

Currently I’m struggling to find any info on what language packages exist and how to configure them.

Nothing about that in the System Guide, or in the Example Configuration (although that does have a link to a page that describes how to write your own) and nothing about it on the list of core extensions.

It’s also taken a while to work out how to load content into the editor. There are a couple of places that demonstrate how to use a transaction to update a selection in the document, but nowhere is there any information on how to replace the content completely.

This works but seems unnecessarily laborious.

  const docLength = view.state.doc.length;
  const tx = view.state.update({ changes: { from: 0, to: docLength, insert: newContent } });
  view.dispatch(tx);

The documentation is quite painful. It’s more interested in telling me about the system architecture than how to install and use the editor, and more interested in telling me how to write a new language extension from scratch than on telling me what extensions already exist and how to install them.

Like the Linter example. It shows you how to write a linter function from scratch, but doesn’t show you how to install it!

4

CDN’s exist, and if you Google for editor solutions you’ll likely stumble across this through StackOverflow, but the CDN only exports fromTextArea and a couple of other types, which don’t appear to be documented, and nothing in the current documentation works from the CDN.

My ASP Core project has tooling to consume libraries from CDN, but not from npm. I’m loathe to add SPA style client build and bundle process to my basic multi-page web app just for this, as that’s going to polute and add complexity to my entire development, build and deployment tool pipeline.

So I guess I need some way to bundle this library that enables me to consume it from my simple web app without an SPA style build process, but at the same time that’s got to somehow handle the es6 style module references which aren’t going to work untransformed in the browser.

5

This is the code from the Bundling example.

import { basicSetup, EditorView } from 'codemirror'

let view = new EditorView({
   extensions: [
      basicSetup
   ],
   parent: document.getElementById('editor1')
});

This is the result

image
image971×455 19.1 KB

6

You have CodeMirror version 5 installed, and are trying to run version 6 code against that.

7

Don’t think so. Here’s my package.json

{
  "version": "1.0.0",
  "name": "asp.net",
  "private": true,
  "scripts": {
    "build": "npx rollup -c"
  },
  "devDependencies": {
    "rollup": "4.20.0",
    "@rollup/plugin-terser": "0.4.4",
    "@rollup/plugin-node-resolve": "15.2.3",
    "@codemirror/view": "6.32.0",
    "@codemirror/language": "6.10.2",
    "@codemirror/autocomplete": "6.18.0",
    "@codemirror/lint": "6.8.1",
    "@codemirror/lang-json": "6.0.1"
  }
}
8

The screenshot has a reference to node_modules/codemirror/lib/codemirror.js, which only exists in version 5.

9

The screenshot is from the v6 documentation.

I’ve got Rollup working and integrated into my solution. But that was painful. I can’t say I understand why an editor whose primary use case is going to be in HTML is distributed in a manner that is so incompatible with that environment.

10

I tried to replicate your setup by combining “how vite works” with “how npm works”:

  1. npm create vite@latest
  2. run through the setup, accepting the (vanilla) defaults.
  3. cd vite-project
  4. npm i
  5. install codemirror as per the examples, npm i codemirror @codemirror/lang-javascript
  6. don’t bother with rollup, because vite already bundles your code.
  7. open index.html and add a <div id="editor"><!-- to be codemirror'd --></div>
  8. open main.ts and add some code based on having read CodeMirror System Guide and the first few examples:
import { basicSetup, EditorView } from "codemirror";
import { EditorState } from "@codemirror/state";
import { javascript } from "@codemirror/lang-javascript";

// Our initial "document"
const doc = `function test() {
  console.log("blah", 1, {
    a: 'b'
  });
}
`;

// Standard setup for JS
const extensions = [basicSetup, javascript()];

// Create our editor
new EditorView({
  parent: document.querySelector(`#editor`) as HTMLElement,
  state: EditorState.create({ doc, extensions })
});
  1. run npm run dev

Done, that works fine:

image
image1299×978 40 KB

But of course step 6 is important: if you’re already using a bundler, (obviously?) don’t also separately use rollup.

That said, it would be nice if there was a “complete” example in the example section, because it does feel like that’s missing. The “bundling with rollup” and “configuration” kind of together cover what you “probably” need to do, but the first focuses on something most folks won’t need these days (given the proliferation of frameworks that already bundle) and so will ignore that, or they’re being presented an approach they won’t need until later (name, compartments) and so they might not recognize they can use the same code but without the extra wrapper.

So it feels like there’s first “basic code” example missing for showing the minimal ESM code that sets up an editor, like what’s listed above. And then the “if you need to manually bundle” and “extra config example” examples can be the second and third example.