Normally, you don't have to do anything with these variables; use update and Msg to modify the editor's state.

If emojiBox is True, then the emojiBox is visible.

If inputBox is Nothing, then the inputBox is not visible.

styling.active styles the div containing the editor in active mode (when editing), styling.passive does the same in display mode or inactive mode. Use init to set it.

tagger connects RTE Msg's with your app's own Msg type. Use init to set it.

textarea is a complicated object that you shouldn't mess with.

id must be unique.

content is the initial content of the textarea. Use [] to initialize with empty content. To initialize with saved content, use decodeContentString or decodeContentGZip (example). To convert plain text into Content, use textToContent.

fontSizeUnit defaults to "px".

highlighter runs before each view update, re-stylings the text as you see fit. See the Content type and the example.

indentUnit defaults to (50,"px").

If pasteImageLinksAsImages is True, then pasting an image link or an image (data url) into the RTE will insert the image into the text.

if pasteLinksAsLinks is True, then pasting a link (something that starts with "http://" or "https://") will create a clickable link.

selectionStyle controls the appearance of selected text. It defaults to [("background", "hsl(217,71%,53%)"), ("color", "white")].

styling.active styles the textarea div in active mode (when editing). Use update (Active True/False) to switch between modes.

tagger turns the package's own Msg type into your app's msg.

Handles keydown/keyup and mouse events and it keeps the RTE in focus (source). The RTE won't do anything unless you build this into your app's own subscriptions (example).

Use this to handle the RTE's own Msg updates (example). You can also use it to alter the RTE's state on your own (e.g. to apply a CSS class to the current paragraph via a button; example).

Convert a string into Content.

Display the edited text plus the cursor. Example

Display formatted content, without an editor (e.g. as a blog post).

content can be plain text (in which case it is turned into Content by textToContent), or it can be a json string created with encodeContentString.

fontSizeUnit defaults to "px".

Use highlighter to to re-style the text the way you want it (e.g. code highlighting). See the Content type and the example.

id must be unique.

indentUnit defaults to (50,"px").

The content of styling is attached to the div that contains the text.

Make it appear/disappear with update ToggleEmojiBox. Each x in params.emojis turns into a clickable div that triggers update AddText events. Example

A Html.select element that triggers update Font events. Example

A Html.select element that triggers update FontSize events. Example

Input box for adding hyperlinks and image links. Make it appear/disappear with update ToggleImageBox or update ToggleLinkBox. It contains an OK button that triggers update ImageAdd or update LinkAdd. Example

A switch that turns editing on/off. The params.width field controls its width in px. Example

Serialize the edited text as string.

Serialize the edited text as a gzip file (example).

Convert serialized content string back into content.

Convert gzipped serialized content back into content (example).

Checks if the editor is active.

The plain text content of the textarea.