Overview

Block-Based React rich text editor. Easily add a modern text editing experience to your app.

Features Include:

• Animations;

• Helpful Placeholders;

• Drag and Drop Blocks;

• Nesting / indentation with tab and shift+tab;

• Slash (/) menu;

• Format menu;

• Ctrl+Z, Ctrl+Y to undo and redo, respectively;

• Editable and View-only modes;

• Resizable/responsive;

• Option to preload and save content (JSON);

• Customize scss.

Documentation

BlockNote Mendix Pluggable Widget

BlockNote 📒 is an "open source Block-Based React rich text editor. Easily add a modern text editing experience to your app.". All credits for the library go to BlockNote's contributors.

The Block Note is used by Docs, a joint effort from the French 🇫🇷 and German 🇩🇪 governments, described as a way to "Collaborate and write in real time, without layout constraints". It is an alternative to Notion, Confluence, Google Docs, among others.

Now, BlockNote is available as a Mendix Widget 🚀, allowing you to bring the minimalistic, yet powerful editor to your Mendix Web applications.

Features

Mendix pluggable widget where you can simply add an editor to your web application. From BlockNote (Github README), we can see all of the features and components provided by the editor. Some of them are:

• Animations;

• Helpful Placeholders;

• Drag and Drop Blocks;

• Nesting / indentation with tab and shift+tab;

• Slash (/) menu;

• Format menu;

• Ctrl+Z, Ctrl+Y to undo and redo, respectively;

• Editable and View-only modes;

• Resizable/responsive;

• Option to preload and save content (JSON);

• Customize scss. The editor is wrapped by the css classes below:

  • .blocknote-mendix-wrapper
  • .blocknote-mx-dark (for dark mode only)

Usage

1. Create a database entity to store the JSON configuration of the Block Note.
2. Add a dataview to a page and fetch the aforementioned configuration.
3. Inside the dataview, add the block-note widget.
4. Set it as editable (Yes) or Read-only (No), set the theme (light or dark), and add a Save action. There's also an attribute configuration, to load an initial configuration and save it afterwards.

Demo project

• Mendix app running on the cloud
• Mendix demo module (.mpk)
• Mendix demo scss (.scss)

Issues, suggestions and feature requests

Minor issue with the Code Block, where the code is all coloured black, so there's no colour to distinguish different parts of a code snippet. We are working in improving it and adding features to make this widget more flexible for different purposes. Feel free to suggest us new features and report issues.

License

BlockNote (the library upon this widget is based on) is licensed under the MPL 2.0 license, which allows you to use BlockNote in commercial (and closed-source) applications. If you make changes to the BlockNote source files, you are expected to publish these changes, so that the rest of the community can benefit as well.

⚠️ If you download this widget from the Mendix Marketplace and change the Block Note's source code, not the widget's code itself, you are expected to publish them here, as per the license mentioned above.

The widget itself is under MIT.