Mendix Block Note
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 css.
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 css. The editor is wrapped by the css classes below:
- .blocknote-mendix-wrapper
- .blocknote-mx-dark (for dark mode only)
Usage
- Create a database entity to store the JSON configuration of the Block Note.
- Add a dataview to a page and fetch the aforementioned configuration.
- Inside the dataview, add the block-note widget.
- Set it as editable (Yes) or Read-only (No), set the theme (light or dark), and add a Save action. There's two different inputs for configurations, in case you want to load an initial configuration different than the attribute where you want to save it to.
Demo project
Issues, suggestions and feature requests
No known issues at the moment. 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.