RichText

import { RichText, RichTextEditor } from '@envsemble/envui/rich-text';

<RichTextEditor label="Meeting notes" value={notes} onValueChange={setNotes} />
<RichText>{notes}</RichText>

RichTextEditor and RichText come from the optional @envsemble/envui/rich-text entry, which needs Tiptap and marked, installed by the application. The editor is a field with its label, description and error, and its value is Markdown: leave it uncontrolled, with defaultValue, or control it with value and onValueChange, which receives the Markdown after every edit, normalized by the editor's schema. placeholder shows in an empty document; readOnly shows it without editing, and disabled turns it off and leaves its value out of a form.

Show saved content

RichText renders the Markdown in its children, also on a server. Pass it the editor's extensions. onReferenceClick and onLinkClick open references and links; renderReference renders a reference's content, such as an avatar beside the name, in both.

Toolbar and variants

toolbar takes the commands to show, in order, or false for none; Undo and Redo, and Attach files with onUpload, follow them. variant is outline, the default, or ghost. The document is at least 10 rem tall; minRows makes it as tall as that many lines instead, such as minRows={2} for a short note in a card, and it grows with its text either way.

References and slash commands

// At module scope, so the sources stay the same between renders.
const references: RichTextReferenceSource[] = [
  { trigger: '@', label: 'People', search: searchPeople },
  { trigger: '#', label: 'Topics', search: searchTopics },
];

<RichTextEditor label="Comment" references={references} slashCommands />;

Each source has its trigger, a label and a search lookup, which receives the query and a signal that aborts when it changes. The Markdown keeps each reference's ID. slashCommands is true for heading, the lists, quote, code block and table, or an array that adds the application's commands after them. Keep references, extensions and slashCommands the same between renders: a new array starts a new session and loses undo.

Attachments and links

onUpload adds Attach files to the toolbar and uploads each chosen file, returning where it lives, null to skip it, or a promise of either; accept and multiple set what it offers. pickLink replaces the link dialog with the application's picker: it receives a MarkdownLinkRequest and returns a MarkdownLink or null, types @envsemble/envui/rich-text exports.

Commands from outside

const editorRef = useRef<RichTextEditorHandle>(null);

<RichTextEditor editorRef={editorRef} label="Reply" />
<Button
  onClick={() =>
    editorRef.current?.editor?.chain().focus('end').insertContent(' — Alex Morgan').run()
  }
>
  Add signature
</Button>

editorRef.current.editor is the Tiptap editor, and ref reaches the root element, so the application can change the document with its commands.

In a form

<form onSubmit={publish} noValidate>
  <RichTextEditor name="notes" label="Release notes" error={error} />
  <Button type="submit">Publish</Button>
</form>

With name, a native form submits the Markdown through a hidden input, and form names a form the editor sits outside of. error says what to fix.

extensions adds Tiptap extensions to the schema the editor and RichText share, such as a custom mark, which must parse and write Markdown; pass the same ones to both. createRichTextExtensions returns that shared set, with options.extensions after it, for another Tiptap integration that needs the same schema. The toolbar is the Toolbar MarkdownEditor shares; the suggestions are env-rich-text-suggestions, and the status env-editor-status.

Its popup is frosted, as every popup is: --env-popup-opacity, --env-popup-blur and --env-popup-shadow, set on a theme, change it, as Popover describes.