WYSIWYG MODE

The WYSIWYG mode extension allows users to edit blocks in it's readable, rendered state!

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("roamjs-wysiwyg-mode");
if (!existing) {
  var extension = document.createElement("script");
  extension.src = "https://roamjs.com/wysiwyg-mode.js";
  extension.id = "roamjs-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.

Demo

Contributors

This extension is brought to you by RoamJS! If you are facing any issues reach out to support@roamjs.com or click on the chat button on the bottom right. If you get value from using this extension, consider sponsoring RoamJS by clicking on the button below!

Other Extensions