4 ms·

CodeMirror: Extensible code editor component for the web

33 points by kaycebasques 2y ago

deleted 2y ago
[deleted]
kaycebasques 2y ago
CodeMirror is one of those workhorse projects that many people here have probably used many times but may not know by name. It powered the Chrome DevTools Console for many years for example. (It seems like the Console may still be powered by CodeMirror but I'm not familiar with that codebase anymore.)
- bhl 2y ago
  DevTools is open-source! https://github.com/ChromeDevTools/devtools-frontend/blob/main/front_end/ui/components/text_editor/config.ts https://github.com/ChromeDevTools/devtools-frontend/blob/mai...
  - kaycebasques 2y ago
    Yes I was poking around earlier today to try and confirm whether the Console is still using CodeMirror. I saw a couple instances of the name but didn't want to overstep my bounds and make an inaccurate statement.
epolanski 2y ago
I have always looked for something basic, mobile friendy that would support TypeScript types on hover. Monaco would be okay, if not for mobile..
- bhl 2y ago
  Checkout this discussion https://discuss.codemirror.net/t/codemirror-6-and-typescript-lsp/3398 https://discuss.codemirror.net/t/codemirror-6-and-typescript... or this package https://github.com/val-town/codemirror-ts https://github.com/val-town/codemirror-ts
FjordWarden 2y ago
One of my favourite JS projects to read, the module system is very well designed while at the same time it has those bit-shifting gems like splitting a 32bit number into an index and an offset to avoid allocating an extra object for that.
AlexErrant 2y ago
I've been using CodeMirror+Lezer to write a custom query language similar to GitHub's (somerepo stars:>100). It's been great (though unfortunately time-consuming), and Marijn's been incredibly responsive/helpful on the "discuss" forum (as long as your question puts in a modicum of effort, hah). He's merged some PRs I've made, and treated many discussions as feature requests and implemented them.
joatmon-snoo 2y ago
CodeMirror's been fantastic for us: as folks building a programming language, we wanted a way to create a playground for people to try it out (much like what Goland and Rust did), and we found CodeMirror super helpful for putting together https://www.promptfiddle.com/ https://www.promptfiddle.com/ It did help that we wrote our compiler in Rust and were able to transpile it to WASM :)
ivanjermakov 2y ago
I had mixed experience integrating CM6 into a programming language sandbox website. Basic actions like setting text, reading changes, setting selections and diagnostics took a lot more steps that I anticipated. Instead of setting text with a method, you need to create a transaction with text action and dispatch it to the editor instance. Some more sophisticated actions like highlight regions require creating custom plugins. In addition to that, all of these were not trivial and documentation was lacking fundamental concepts you need to understand to use its API. Footprint, performance and typescript support are great though.
indigo0086 2y ago
Question for those that have success with it. How did you handle auto complete with something like SQL where you need to query the db for table and column info while remaining performant.
- AlexErrant 2y ago
  FYI `schemaCompletionSource` exists https://github.com/codemirror/lang-sql#user-content-schemacompletionsource https://github.com/codemirror/lang-sql#user-content-schemaco... But if you want an example of async completion, I do it here https://github.com/AlexErrant/Pentive/blob/fe86a8a185e4be47045f62bfd47562312546b371/shared-dom/src/language/queryCompletion.ts#L50-L53 https://github.com/AlexErrant/Pentive/blob/fe86a8a185e4be470... which is called from here https://github.com/AlexErrant/Pentive/blob/fe86a8a185e4be47045f62bfd47562312546b371/app/src/components/queryEditor.tsx#L200-L205 https://github.com/AlexErrant/Pentive/blob/fe86a8a185e4be470... Perf isn't really a problem for me since I'm calling SQLite in the browser; it's maybe 10-20ms.

33 points by kaycebasques 2y ago

deleted 2y ago

[deleted]

CodeMirror is one of those workhorse projects that many people here have probably used many times but may not know by name. It powered the Chrome DevTools Console for many years for example. (It seems like the Console may still be powered by CodeMirror but I'm not familiar with that codebase anymore.)

bhl 2y ago
DevTools is open-source! https://github.com/ChromeDevTools/devtools-frontend/blob/main/front_end/ui/components/text_editor/config.ts https://github.com/ChromeDevTools/devtools-frontend/blob/mai...
- kaycebasques 2y ago
  Yes I was poking around earlier today to try and confirm whether the Console is still using CodeMirror. I saw a couple instances of the name but didn't want to overstep my bounds and make an inaccurate statement.

epolanski 2y ago

I have always looked for something basic, mobile friendy that would support TypeScript types on hover. Monaco would be okay, if not for mobile..

bhl 2y ago
Checkout this discussion https://discuss.codemirror.net/t/codemirror-6-and-typescript-lsp/3398 https://discuss.codemirror.net/t/codemirror-6-and-typescript... or this package https://github.com/val-town/codemirror-ts https://github.com/val-town/codemirror-ts

FjordWarden 2y ago

One of my favourite JS projects to read, the module system is very well designed while at the same time it has those bit-shifting gems like splitting a 32bit number into an index and an offset to avoid allocating an extra object for that.

AlexErrant 2y ago

I've been using CodeMirror+Lezer to write a custom query language similar to GitHub's (somerepo stars:>100). It's been great (though unfortunately time-consuming), and Marijn's been incredibly responsive/helpful on the "discuss" forum (as long as your question puts in a modicum of effort, hah). He's merged some PRs I've made, and treated many discussions as feature requests and implemented them.

joatmon-snoo 2y ago

CodeMirror's been fantastic for us: as folks building a programming language, we wanted a way to create a playground for people to try it out (much like what Goland and Rust did), and we found CodeMirror super helpful for putting together https://www.promptfiddle.com/ https://www.promptfiddle.com/ It did help that we wrote our compiler in Rust and were able to transpile it to WASM :)

ivanjermakov 2y ago

I had mixed experience integrating CM6 into a programming language sandbox website. Basic actions like setting text, reading changes, setting selections and diagnostics took a lot more steps that I anticipated. Instead of setting text with a method, you need to create a transaction with text action and dispatch it to the editor instance. Some more sophisticated actions like highlight regions require creating custom plugins. In addition to that, all of these were not trivial and documentation was lacking fundamental concepts you need to understand to use its API. Footprint, performance and typescript support are great though.

indigo0086 2y ago

Question for those that have success with it. How did you handle auto complete with something like SQL where you need to query the db for table and column info while remaining performant.

AlexErrant 2y ago
FYI `schemaCompletionSource` exists https://github.com/codemirror/lang-sql#user-content-schemacompletionsource https://github.com/codemirror/lang-sql#user-content-schemaco... But if you want an example of async completion, I do it here https://github.com/AlexErrant/Pentive/blob/fe86a8a185e4be47045f62bfd47562312546b371/shared-dom/src/language/queryCompletion.ts#L50-L53 https://github.com/AlexErrant/Pentive/blob/fe86a8a185e4be470... which is called from here https://github.com/AlexErrant/Pentive/blob/fe86a8a185e4be47045f62bfd47562312546b371/app/src/components/queryEditor.tsx#L200-L205 https://github.com/AlexErrant/Pentive/blob/fe86a8a185e4be470... Perf isn't really a problem for me since I'm calling SQLite in the browser; it's maybe 10-20ms.