WYSIWYG

A rich-text editor whose stored value is Markdown. The operator edits formatted text — bold is bold, a table is a table — and what lands on the component's value, and in whatever it is bound to, is plain Markdown, so it is bindable and usable as a form field.

Reach for it when you need:

• Authoring a shift report or work instruction on-screen
• A rich-text field inside a Form

Component name: WYSIWYG · Category: Input

In the palette: Rich Markdown editor (true WYSIWYG, with source and preview modes). Exposes the authored markdown on its value — bindable, and usable as a form field.

Properties

Any property can be bound to a tag, another component's property, or a query.

Property	Type	Default	Description
value	string	""	The authored Markdown text. Bindable (two-way) — bind a tag/param to seed or capture the content.
mode	enum	rich	rich = WYSIWYG editing (formatted text, not markup); live = split source | preview; edit = markdown source only; preview = rendered only. Use edit/live for content with inline HTML, which rich mode converts to Markdown. Options: rich · live · edit · preview.
placeholder	string	Write Markdown…	—
title	string	WYSIWYG	—
showTitle	boolean	true	—
titleSize	number	0	Title font size (px). 0 = follows the size. 1.0.8
hideToolbar	boolean	false	Hide the formatting toolbar for a cleaner, compact editor.
disabled	boolean	false	Read-only: renders the markdown as preview, no editing.
style	style	{}	Custom CSS properties

Events

Attach event actions to these in the Event Manager.

Event	Label	Group	Payload
click	Click	Mouse	The DOM event.
dblclick	Double click	Mouse	The DOM event.
contextmenu	Right click	Mouse	The DOM event.
mouseenter	Mouse enter	Mouse	The DOM event.
mouseleave	Mouse leave	Mouse	The DOM event.

Right-click behaves differently in the Designer

contextmenu fires your configured actions at runtime only — in LiveView and in preview. On the Designer canvas the right-click is captured to open the Event Manager, so testing it there will not run your actions. Test right-click in preview.

Notes

Four modes, one value

rich is the default. Changed in 1.0.7 Until 1.0.7 the component was a split-pane Markdown source editor — the name promised something it could not do. It now edits formatted text directly. The other three modes are kept:

mode	The operator sees
rich	Formatted text, edited in place
live	Markdown source beside a rendered preview
edit	Markdown source only
preview	The rendered result, read-only

Whatever the mode, the value is Markdown text. mode only chooses where the editor opens: the view mode buttons on the toolbar switch between all four at runtime, and they stay pinned to the end of the toolbar so a narrow widget cannot scroll them out of reach. They are the way out for content the rich editor cannot edit without changing it (below).

The preview is drawn by the Markdown component itself, so what the author sees while writing is what an operator sees on a Markdown component bound to the same value.

The toolbar

Bold, italic, strikethrough, headings, bullet / numbered / task lists, link, image and emoji are on the main strip; inline code, clear formatting, quote, code block, horizontal rule, table, comment, remove link, undo and redo are under More formatting. Insert image opens the uploads picker, so the image comes from the uploads folder and works offline. Fullscreen gives a long note the whole screen.

Select some text and a formatting bubble appears over it New in 1.0.7 with the inline commands — bold, italic, strikethrough, inline code, link, clear formatting — so formatting a phrase does not mean travelling to a toolbar that, on a 200-pixel widget, may be scrolled sideways. Commands that change the structure (lists, headings, tables) stay on the toolbar, which does not move.

Tables

With the caret in a table, a table bar appears: insert and delete rows and columns, toggle the header row, and Merge cells / Split cell. New in 1.0.7 Markdown's pipe tables cannot express a merged cell, so a table that has one is stored as an HTML table instead; a table with no merged cell stays an ordinary Markdown table. The Markdown component shows such a table as a real table without allowHtml being on — but it shows each cell as plain text, so keep bold, links and code out of the cells of a table you intend to merge.

Content the rich editor cannot keep as-is

• A block of raw HTML is kept verbatim, shown as a read-only card. The Markdown component renders it only if its allowHtml is on.
• Inline HTML with no Markdown equivalent — a styled <span>, say — is converted to Markdown the first time the text is edited. The editor warns before that happens, and nothing is rewritten merely by opening the text. To change such content as written, switch to Source view, or set mode to edit or live for a component that will carry it.

As a Form field

The wysiwyg field of a Form gets the same editor, with two differences. Changed in 1.0.7 It has no view-mode buttons: the form's author chose a rich field, and whoever fills the form in should not be able to turn it into Markdown source. And it is resizable from a 180-pixel minimum, like the textarea field, where it used to be fixed at 240 pixels with toolbar and table bar inside that — under 180 pixels for the text. Every formatting command, and Fullscreen, is still there.

A toolbar that fits narrow spaces Changed in 1.0.8

When the widget is narrow — in a small grid cell, a sidebar or on a phone — its toolbar shrinks to fit rather than spilling over. It goes by the widget's own width, not the screen's, so a small widget on a large monitor shrinks too. Below full width the list buttons join More formatting. On a minimal strip the four view mode buttons become one button showing the current mode, which opens a menu of all four — enough for the widget's own 380 px default width to fit without scrolling. Link, image and emoji always stay on the strip. Nothing is taken away: every control is still there, and a shortened control keeps its full name for screen readers.

titleSize now defaults to 0, which follows the project's Control size; a number you set still wins. Changed in 1.0.8

Pair it with Markdown to display what was authored.