CodeMirror 6

• codemirror-promql

  1 36 5.6 TypeScript

  Discontinued PromQL support for the CodeMirror code editor

  

I'm using CodeMirror 6 for promlens.com and together with the lezer parser generator, it was great for developing syntax highlighting, contextual autocompletion, and inline linting for PromQL (that part is OSS actually, in https://github.com/prometheus-community/codemirror-promql, much of it built by Augustin Hudson, some by myself).

• dev

  34 5,254 4.7 JavaScript

  Development repository for the CodeMirror editor project

  

"This means that you, as user, may choose one of these licenses to abide by. I.e. if complying with the GPL is problematic for you, you can choose the more liberal MIT license." https://github.com/codemirror/codemirror.next/commit/8a8dc87...

• SurveyJS

  surveyjs.io featured

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

• use-prosemirror

  2 352 1.8 TypeScript

  ProseMirror + React made easy

  

> I'm guessing the integration will be basically a wrapper component with a ref of a DOM node where CodeMirror will do its thing.

Pretty much. This is how my React ProseMirror integration works: https://github.com/dminkovsky/use-prosemirror/blob/main/src/.... I believe CodeMirror would be the same. Makes me think I should expand support.

• HyperMD

  2 1,454 0.0 TypeScript

  A WYSIWYG Markdown Editor for browsers. Break the Wall between writing and previewing.

You can do some interesting non-code things with CodeMirror.

HyperMD[0] is probably the craziest (in a good way) thing I've seen done with CodeMirror.

[0] https://laobubu.net/HyperMD/#./docs/zh-CN/README.md and https://github.com/laobubu/HyperMD

• Monaco Editor

  113 38,427 8.4 JavaScript

  A browser based code editor

  

I'm sorry. What I meant was this:

"Please note that this repository contains no source code for the code editor, it only contains the scripts to package everything together and ship the monaco-editor npm module."

https://github.com/microsoft/monaco-editor

• rich-markdown-editor

  11 2,570 9.2 TypeScript

  Discontinued The open source React and Prosemirror based markdown editor that powers Outline. Want to try it out? Create an account:

  

I had a similar experience starting out with ProseMirror; I wanted to make something similar to the editors in Dropbox Paper and Notion, and found an out-of-the-box rich text editor called tiptap built onto of it.

They already had nodes for images and embeds [1, 2] which made development easy (I would recommend checking out the source code; its about a hundred lines of code for each, and simple). But as I made more custom nodes, I learned pretty well the internals of tiptap and how it used ProseMirror. And over time, I've come to appreciate knowing its api.

So if there's any advice for people trying to get started with ProseMirror, I would say to look at libraries which built upon it as example code such as tiptap or the outline rich-markdown-editor [3].

[1] https://github.com/ueberdosis/tiptap/blob/main/packages/tipt...

[2] https://github.com/ueberdosis/tiptap/blob/main/examples/Comp...

[3] https://github.com/outline/rich-markdown-editor

Suggest a related project