Monaco Editor
ProseMirror
Our great sponsors
Monaco Editor | ProseMirror | |
---|---|---|
113 | 43 | |
37,955 | 7,261 | |
1.9% | 1.7% | |
8.4 | 3.8 | |
2 days ago | 11 days ago | |
JavaScript | JavaScript | |
MIT License | MIT License |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
Monaco Editor
-
A structured note-taking app for personal use
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/
-
GIGO and VS-code: the Battle With Microsoft
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.
-
Show HN: Open-source alternatives to tools You pay for
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!!!
-
NPM workspace and vite - Read dependency build output (d.ts file)
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.
-
đĽâď¸ Notion-like Experience for Your GitHub Content
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.
- Vscode.dev: Local Development with Cloud Tools
-
Vrite Editor: Open-Source WYSIWYG Markdown Editor
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 đ ).
Now, thereâs still some work to be done here. Monaco editor doesnât work well for mobile, and some âoptionalâ features werenât yet optimized (like link previews or comments).
-
Kako da u JavaScriptu napravim da se kĂ´d oboji dok ga korisnik ukucava? Uspio sam napraviti da se kĂ´d oboji kad korisnik pritisne tipku, ali nisam uspio napraviti da se boja dok ga korisnik ukucava.
mozes koristiti gotovi code editor library, https://codemirror.net/ https://microsoft.github.io/monaco-editor/
- [Typia] I made realtime demo site of 20,000x faster validation (+200x faster JSON stringify)
ProseMirror
-
Eloquent JavaScript 4th edition (2024)
For those that don't know the author, Marijn Haverbeke, is the creator of CodeMirror (code editor) and later ProseMirror (text editor).
-
WYSIWYG for MDX?! Introducing Vrite's Hybrid Editor
Behind the scenes, Vrite processes the content and makes it accessible in ProseMirror-based JSON format, including the type and all the props of the Element block.
-
Vrite Editor: Open-Source WYSIWYG Markdown Editor
No good tool is built without using good tools, and Vrite Editor is no different. Before getting into WYSIWYG editors, I extensively researched available RTE frameworks, that could provide the tooling and functionality I was looking for. Ultimately, I picked TipTap and underlying ProseMirror â IMO, the best tools currently available for all kinds of WYSIWYG editors.
-
Show HN: I've built open-source, collaborative, WYSIWYG Markdown editor
A little dissapointed to see ProseMirror not mentioned.
It's an amazing rich-text editing toolkit that provides all the bits and pieces needed to write any kind of rich-text editor. Tiptap is a wrapper over ProseMirror for minimizing the vast API surface and providing simpler configurations.
The project is using TipTap and that is mentioned.
Forgot to mention underlying ProseMirror (https://prosemirror.net/) as well. It's doing "even-heavier" lifting and is necessary for implementing more complex mechanisms like the code editor integration or various side-menus.
-
How I put ChatGPT into a WYSIWYG editor
The buttons had to be absolutely positioned, which required both a custom TipTap extension and tapping deeper into the underlying ProseMirror (both libraries powering the Vrite editor).
-
Better blogging on Dev.to with Vrite - headless CMS for technical content
You might have noticed that the body_markdown property is set to the result of processContent() call. Thatâs because the Vrite API serves its content in a JSON format. Derived from the ProseMirror library powering Vrite editor, the format allows for versatile content delivery as it can be easily adapted to various needs.
-
Show HN: Hyvor Blogs â Multi-language blogging platform
Redis for cache
PHP isnât dead. It definitely has some weirdness introduced in older versions that cannot be removed due to backward compatibility promises. However, recent versions of PHP have improved performance and developer experience significantly. Also, we use strict types and PHPStan [https://phpstan.org] (max level) to ensure type safety. And, we try to have 95%+ coverage using Pest PHP [https://pestphp.com]. With those tools, writing PHP is fun. Laravel saves a lot of time by abstracting away many HTTP, queue, and CLI-related tasks. MYSQL is the single source of truth. We sync data to Meilisearch for search. Laravel Scout makes syncing effortless. Redis is used for caching and queues.
More details on the open-source software we use are available here: [https://blogs.hyvor.com/docs/oss]
Theme Development:
In Hyvor Blogs, all themes are fully customizable. We wanted to make the theme development process as friendly as possible for developers. Being a hosted software, this is quite hard. Developers arenât fond of (including me) editing a file on the browser to make something work. Providing an online web editor to create themes wasnât an option. So, we created a simple CLI tool [https://github.com/hyvor/hyvor-blogs-cli] that developers can install locally via NPM. This CLI tool listens for file changes and syncs all theme files to a development blog in our production system. So, developers can make changes in their local editor and see changes with almost no delay. This has worked pretty well so far!
Theme Structure:
We wanted to keep the theme structure simple. No Javascript frameworks - just plain old-school HTML because it works the best with search engines, minimizes the data transfer required between the server and the browser, and even provides a better experience for end users.
We obviously needed a templating language to render HTML from data. There were many options like Handlebars, Liquid, and Twig. All do the job. We went with Twig because its original package is written in PHP and managed by the Symfony team so we could trust it and easily integrate it into our system.
Another thing we cared about a lot is creating standardized theme guidelines. For example, if you take WordPress themes, most themes have their own structure and are very different from each other. This adds a learning curve to each theme. To prevent that, we created standardized theme guidelines for all published themes to follow. We also standardized how common things in blogs like color theme switching, searching, language switching, etc. work. This helps users switch between and customize their themes effortlessly.
Then, there is one important thing we realized. âThe structure of a blog is very simpleâ. First, you might think you need several stylesheets, jQuery, bootstrap, etc. NO! Just one stylesheet and barely some vanilla javascript for interactive elements like search. Realizing this helped us further improve theme performance. In our themes, the developer writes several SCSS files inside the /styles directory. This makes it easier for them to manage styles in chunks. Then, we convert all SCSS files into a single styles.css when loading it in the blog. That way, only 1 HTTP request is needed for styles - itâs super fast!
You can see more about theme development here: [https://blogs.hyvor.com/docs/themes-overview]
All official themes are free and open-source. [https://github.com/hyvor/hyvor-blogs-themes]
We have ported multiple open-source themes, and now working on a couple of original themes as well.
Caching:
We incrementally cache content using âfirst-request cachingâ. If you visit a post in the blog, the response is dynamically created and cached. Subsequent responses are served from the cache until the blogger updates the post.
This is highly efficient and scalable. Also, there is no building step involved as in Netlify or similar static hosting platforms. You can immediately see changes but also benefit from caching.
The cache is saved on a Redis server in our data centers, but we may try CDN edge caching in the future.
Multi-language support:
Multi-language support is probably the most unique selling point of Hyvor Blogs. The first version of Hyvor Blogs did not have a multi-language feature. Adding that feature took a lot of careful thought and effort, but it was totally worth it. I can safely say thereâs no other hosted blogging platform that makes managing multiple languages as easy as Hyvor Blogs does.
First, we had to figure out what data was translatable. For example, post content, description, etc. Then instead of saving that data in the `posts` table, we created a new `post_variants` table to save them linked to a specific `language_id`. The blogger can create multiple languages and each entity (`post` , `tag` , `user`) can have variants for each language.
Additionally, we integrated DeepL [https://deep.com] to let bloggers automatically translate posts into many languages.
Data API filtering:
Our Data API [https://blogs.hyvor.com/docs/api-data] returns public data of the blog. This is also internally used in themes to fetch additional data. If you think about filtering data (ex: posts), one may want to filter `published_at < {time}` while another wants `published_at > {time}`. If we went with the normal API approach, weâd need many query parameters like `published_at_greater_than`, `published_at_less_than`, etc. Thatâs ineffective. So, we wrote a little query language called FilterQ to take a single `filter` input parameter and safely convert it to the `WHERE` part of the SQL query. With it, you can call the API with `filter=published_at>{time}` param. And, itâs even possible to use `and` / `or` and grouping for complex filtering.
Library (implemented in Laravel): https://github.com/hyvor/laravel-filterq
Sub-directory hosting:
We designed a new way to host a blog in a subdirectory of a web application. Letâs say you have a Laravel application at example.com. We created Delivery API [https://blogs.hyvor.com/docs/api-delivery] to help you host your blog at example.com/blog.
This API tells you how to deliver a response for a request (hence âDeliveryâ API). For example, when your Laravel app receives a request to /blog/hello-world, your app calls the Delivery API to learn how to respond to â/hello-worldâ. The Delivery API returns a JSON with all the data needed. Your app will then use that JSON response to create an HTTP response and send back the response to the client. It will also save the response in the cache so that it doesnât have to call the Delivery API next time for the same path.
This is quite similar to a reverse proxy with caching, but the JSON API makes it easier to use it in web applications as we do not need HTTP parsing logic.
This is also similar to how our âfirst-requestâ caching works, but this time this caching happens inside your web application. To clear the cache, we use webhooks.
For now, we have developed libraries for Laravel and Symfony for sub-directory hosting, with plans to cover more frameworks in the future.
Rich Editor
This was probably the hardest part of all. We spent months testing many frameworks like Draft.js, Prosemirror, and even pre-built rich editors like TinyMCE. We wanted customizability and also ease-of-use. No framework checked all boxes.
We decided to go with ProseMirror [https://prosemirror.net]. It was complex but eventually, we came to understand the power of it. It has a steep learning curve, but itâs totally worth it. We actually enjoy writing Prosemirror plugins now to add some functionality to the Rich Editor. Also, recently the author added typescript support, which incredibly improved the experience. We created many nodes like Blockquotes, Callouts (with emoji), Images with captions, Embeds, and Bookmarks pretty easily after that. ProseMirror has quite good browser support as well.
Flashload
Iâve been a fan of InstantClick [http://instantclick.io/]. We wanted to add something similar to all blogs to add a âfake-fastâ effect. If you havenât used InstantClick before, it is a simple library that turns separate HTML pages into a single-page app. It starts loading content on the mouseoever event of a link and replaces the when clicked on it. This makes navigation super fast. We created an almost copy of Instantclick named Flashload [https://github.com/hyvor/flashload] with additional configurations and optimized caching. Feel free to use it in your projects :)
Overall, itâs been a great learning experience working on Hyvor Blogs. Weâd love to know what HN thinks about our project. I am happy to answer any questions you might have.
-
What is your goto WYSIWYG Editor?
Then comes TipTap (which is an abstraction over ProseMirror) that also comes with great defaults but better customizability and extensibility.
-
Looking for the best React Editor library
TipTap, built on top of ProseMirror, is a headless editor framework that gives full control over every single aspect of the text editor experience. Similarly to Slate, TipTap doesn't offer a fully featured Rich Text Editor; instead, it offers a lot of extensions and can be customized to incorporate new features. Let's have a look at how we can implement a TipTap editor with the image extension that will provide similar functionality to the one we implemented in the last section for the Slate editor.
What are some alternatives?
CodeMirror - In-browser code editor (version 5, legacy)
ace - Ace (Ajax.org Cloud9 Editor)
slate - A completely customizable framework for building rich text editors. (Currently in beta.)
quill - Quill is a modern WYSIWYG editor built for compatibility and extensibility.
tiptap - The headless rich text editor framework for web artisans.
TinyMCE - The world's #1 JavaScript library for rich text editing. Available for React, Vue and Angular
Draft.js - A React framework for building text editors.
Editor.js - A block-style editor with clean JSON output
rich-markdown-editor - The open source React and Prosemirror based markdown editor that powers Outline. Want to try it out? Create an account:
tauri - Build smaller, faster, and more secure desktop applications with a web frontend.