Monaco Editor VS xterm.js

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/");

You’ll see a Monaco Editor-powered change editor. The content incoming from the Git repo is on the left, while the current content in Vrite is on the right. You can make changes in the editor on the right - this will ultimately become the result content. Once you’re done, click Resolve. If there are no other conflicts, you should now be able to pull the latest changes.

From googling about it seems that Azure uses monaco editor to make code in repos be colourised and what not. this appears to be the editor library for vscode, so that makes sense.

By referencing the ProseMirror docs, forwarding the editor state back and forth, and adjusting the layout, I managed to integrate Monaco Editor — the web editor extracted from VS Code — together with Prettier (for code formatting) right into the Vrite Editor (I know, that’s a lot of editors in one place 😅).

mozes koristiti gotovi code editor library, https://codemirror.net/ https://microsoft.github.io/monaco-editor/

Here is a screenshot: https://github.com/xtermjs/xterm.js/pull/4519#issue-17129655...

I'm on the VS Code team and maintain xterm.js which is what Hyper's frontend is based on. There are actually multiple developments happening in this area.

First, there's a contribution from the author of DomTerm which adds grapheme cluster support to xterm.js, which will correctly merge and size things like emoji that are called out in the post. This is currently based on Unicode 15. See https://github.com/xtermjs/xterm.js/pull/4519

Second, while Windows Terminal does seem to work with emoji sometimes, it doesn't all the time. I'm not 100% sure, but I think it may only work on Windows ptys, not in WSL for example. Last time I spoke with the team they said they're working on a rewrite which could lead to proper emoji support.

Ooh, I lack the time to play with this, but I think someone could compile the lib to WebAssembly and tie it in to https://xtermjs.org/

Then you could have a web page with static DOM elements that do this effect!

xterm is a JavaScript library that provides a web-based terminal emulator with ANSI escape sequences, Unicode characters, and other features. It is easy to use and customize, making it a popular choice for adding a terminal interface to web applications.

Setting scrollback to infinite? #518

The simpler path would be starting the WASM port using Emacs character mode running alongside an in-browser terminal emulator such as XTerm.js.

First result: http://xtermjs.org/