Editor

A rich text editor built on Tiptap, using Prose for typographic styles.

Installation

import { Editor } from "@o/pipeline/experimental/components/editor";

Hooks, extensions, and utilities have their own entry points:

import { useCurrentEditor } from "@o/pipeline/experimental/components/editor/hooks";
import { createMentionExtension } from "@o/pipeline/experimental/components/editor/extensions";
import { plainTextToTipTapJson } from "@o/pipeline/experimental/components/editor/utils";

Usage

Editor.LinkPopover adds, edits, opens, copies and removes links. Click a link for a toolbar to edit, open, copy or remove it. Edit opens a dialog for the link’s text and URL. ⌘K opens the same dialog for the link under the caret or to link the selected text; with neither, the shortcut is left to the page. Editor.Bubble gains a Link button that does the same for the selected text.

Prose

Under-the-hood, Editor uses Prose for typographic styles.

Editor supports all Prose props, with the following constraints:

  • render is not supported
  • maxWidth defaults to false (rather than true as it does in Prose)