components editor

components/editor

Import: import { Editor } from "@tundralibs/ui/editor"

Rendered in every variant on the catalogue (deno task build:demos, then demo/index.html). Guides: Getting started · rAPId integration · Theming.

Functions

Editor

Editor(props: EditorProps): Html

Types

EditorMode

"markdown": a textarea with a formatting toolbar that inserts Markdown syntax, plus a Preview view the server renders (the previewAction route receives text and answers with HTML — this library ships no Markdown parser, and rendering user text is the server's job anyway). "html": a WYSIWYG surface (contenteditable) whose HTML is mirrored into the hidden textarea that submits.

• "markdown"
• "html"

EditorProps

Prop	Type	Required	Description
id	string	yes
name	string	yes
mode	EditorMode
value	string		Markdown source, or (html mode) trusted HTML the server already sanitised.
placeholder	string
rows	number
disabled	boolean
required	boolean
invalid	boolean
previewAction	string		Markdown only: a route that renders text (posted as a form field) to an HTML fragment for the Preview view — swapped in through rAPId's runtime. Without it (or without the runtime) Preview shows the raw text.
attrs	Attrs

Usage

Each example as the rAPId call and the HTML it renders — the markup a plain page writes by hand. Icons are inline SVG in the real output; they are shortened to <svg …>…</svg> here.

Release notes in Markdown, previewed by the server

previewAction receives text (urlencoded POST) and answers with the rendered HTML fragment.

Editor({
  id: "notes",
  name: "notes",
  mode: "markdown",
  previewAction: "/fragments/preview",
  placeholder: "Write in Markdown…",
})

<div class="editor editor--markdown" id="notes-editor" data-editor data-editor-mode="markdown" data-editor-preview="/fragments/preview">
  <div class="editor__toolbar" role="toolbar" aria-label="Formatting">
    <button type="button" class="editor__tool" data-editor-cmd="bold" aria-label="Bold" title="Bold (Ctrl+B)">
      <b>B</b>
    </button>
    <button type="button" class="editor__tool" data-editor-cmd="italic" aria-label="Italic" title="Italic (Ctrl+I)">
      <i>I</i>
    </button>
    <button type="button" class="editor__tool" data-editor-cmd="strike" aria-label="Strikethrough" title="Strikethrough">
      <s>S</s>
    </button>
    <button type="button" class="editor__tool" data-editor-cmd="heading" aria-label="Heading" title="Heading">
      <b>H</b>
    </button>
    <button type="button" class="editor__tool" data-editor-cmd="quote" aria-label="Quote" title="Quote">
      <span class="text-mono">“</span>
    </button>
    <button type="button" class="editor__tool" data-editor-cmd="code" aria-label="Code" title="Code">
      <span class="text-mono">&lt;&gt;</span>
    </button>
    <button type="button" class="editor__tool" data-editor-cmd="link" aria-label="Link" title="Link (Ctrl+K)">
      <span class="text-mono">[ ]</span>
    </button>
    <button type="button" class="editor__tool" data-editor-cmd="image" aria-label="Image" title="Image">
      <span class="text-mono">[img]</span>
    </button>
    <button type="button" class="editor__tool" data-editor-cmd="ul" aria-label="Bulleted list" title="Bulleted list">
      <svg width="15" height="15" width="2" …>…</svg>
    </button>
    <button type="button" class="editor__tool" data-editor-cmd="ol" aria-label="Numbered list" title="Numbered list">
      <span class="text-mono">1.</span>
    </button>
    <button type="button" class="editor__tool" data-editor-cmd="hr" aria-label="Horizontal rule" title="Horizontal rule">
      <span class="text-mono">—</span>
    </button>
    <button type="button" class="editor__tool" data-editor-cmd="clear" aria-label="Clear formatting" title="Clear formatting">
      <span class="text-mono">Tx</span>
    </button>
    <span class="editor__spacer"></span>
    <span class="editor__views" role="group" aria-label="View">
      <button type="button" class="editor__view" data-editor-view="write" aria-pressed="true">Write</button>
      <button type="button" class="editor__view" data-editor-view="preview" aria-pressed="false">Preview</button>
    </span>
  </div>
  <textarea class="input textarea editor__source" id="notes" name="notes" placeholder="Write in Markdown…" rows="8"></textarea>
  <div class="editor__preview" data-editor-preview-panel hidden aria-live="polite"></div>
</div>

CSS hooks

Classes defined by components/editor/editor.css — structural, token-driven; override from an unlayered stylesheet (see Theming):

.editor, .editor--disabled, .editor--html, .editor--invalid, .editor__preview, .editor__preview-note, .editor__preview-raw, .editor__source, .editor__spacer, .editor__surface, .editor__tool, .editor__toolbar, .editor__view, .editor__views, .js

Behaviour

components/editor/editor.js ships in ui.js (delegated on document, re-initialised after a rAPId swap).

Attributes it reads or writes: data-editor, data-editor-, data-editor-cmd, data-editor-mode, data-editor-preview, data-editor-preview-panel, data-editor-surface, data-editor-view.

Events: rapid:swapped.