WYSIWYG MODE
The WYSIWYG mode extension allows users to edit blocks in it's readable, rendered state! The name of the script is wysiwyg-mode.
Installation
You could use the Copy Extension button below to individually install this extension. To install, just paste anywhere in your Roam graph and click "Yes, I Know What I'm Doing".
Manual Installation
If instead you prefer to manually install, first create a block with the text {{[[roam/js]]}} on any page in your Roam DB. Then, copy and paste this code block as a child of the block.
var existing = document.getElementById("wysiwyg-mode");
if (!existing) {
var extension = document.createElement("script");
extension.src = "https://roamjs.com/wysiwyg-mode.js";
extension.id = "wysiwyg-mode";
extension.async = true;
extension.type = "text/javascript";
document.getElementsByTagName("head")[0].appendChild(extension);
}Usage
The feature set of this extension is very limited and is still experimental. Use at your own risk. Currently, only the following stylings are supported:
- Bolding (CTRL+b/CMD+b)
- Italics (CTRL+i/CMD+i)
To edit a block in WYSIWYG (what you see is what you get) mode, hold on the ALT key while clicking on it. Now you should be able to edit the content just like how it will be when rendered!
While in a block, you could hit ALT+w to toggle the block to and from WYSIWYG mode.
Playground
The text area below is meant to act as a Roam block. Hit ALT+w to toggle to and from WYSIWYG Mode. Removing focus from WYSIWYG will also toggle back to the Roam block textarea.