rich-markdown-editor VS Monaco Editor

Thanks! We forked this version of ProseMirror built by the Outline team which was the closest to what we wanted for our product

https://github.com/outline/rich-markdown-editor

Outline's rich-markdown-editor (https://github.com/outline/rich-markdown-editor) package is pretty nice. I have used it to make some custom MD editor/CMS experiment.

Good eye! This is indeed based on ProseMirror. I didn't create it myself though, I'm using this: https://github.com/outline/rich-markdown-editor

Ah yes, I found the library I was using for the editor (rich-markdown-editor) to insert a lot of \ newlines when they weren't needed. I'll take a look at this sometime!

The outline editor is open source https://github.com/outline/rich-markdown-editor

It runs a mult-tenant SaaS app with very low memory/cpu requirements (https://getoutline.com/)

Building a good code editor is hard. Our editor is based on Monaco, the code editor that powers VS Code. We took Monaco and started on a journey towards building the best possible editor experience in a spreadsheet.

Monaco editor by Microsoft @monaco-editor/react Happy coding! 😃

Let's start with the most simple Monaco setup. I will use vanilla TS with Vite and Bun as package manager, so I hope it will be simple to extrapolate into different frameworks. You can also find similar example written with React in the official repo.

On top of that, I learned about Monaco Editor (the same editor that powers Visual Studio Code) and decided to integrate it to provide real-time syntax highlighting for my DSL. I had to learn how to add a custom language to it, and it was incredibly satisfying when the editor correctly highlighted valid input and flagged errors. Each new piece of complexity taught me something new, things I would not have learned if I had taken the "easy" route.

VS Code Editor which is based on Electron, is really fast, even with large codebase & many open tabs. Their monaco engine (https://microsoft.github.io/monaco-editor/) uses custom, virtual code processor that is optimized for surgically updating underlying DOM. It also uses WebGL + canvas rendering to show minimap of the file.

Similar approach (custom virtual processor) is leveraged by Google docs/sheets.

Canvas rendering may be the last resort when nothing worked.

Fyi, if you are ever looking for a fun project you might be able to implement this. The vscode editor source is available as a library https://microsoft.github.io/monaco-editor/

VScode uses the monaco-editor to display all editor screens in vscode including the markdown editor. A simple solution is to use the in built markdown file editor and call it a day.

visual studio is open source: https://github.com/microsoft/vscode

i remember using their monaco editor as well (https://github.com/microsoft/monaco-editor), a really powerful editor & the very same used by VS Code (i think you can even get at the AST for TypeScript, for example, in the browser if you poke around deep enough)

crazy cool stuff, and most definitely OSS!!!

So lets say the project consists of two packages Lib and App in which Lib is a library and App is the frontend app which depends on Lib. Now I want to display a monaco powered code editor in App which has has access to all types of Lib. This means that I have to somehow read the *.d.ts file of Lib as a string to set it as "extra lib" for monaco.

WebView webView = new WebView(); webView.getEngine().load("https://microsoft.github.io/monaco-editor/");