Editor

The Editor is a React rich-text editor built with Tiptap. It supports formatted text, structured blocks, links, color, tables, task lists, images, and YouTube embeds. The toolbar preset can be chosen to suit the space and workflow where the editor appears.

The component is controlled by an initial HTML value and reports both HTML and plain text as the content changes. It is part of the nausikaa package and requires React plus the Tiptap extensions that the package lists as optional peer dependencies.

Large editor

The large preset includes the full toolbar and a contextual toolbar when text is selected. It exposes block styles, alignment, table editing, media insertion, text and highlight colors, and link controls.

import { useState } from "react";
import Editor from "nausikaa/editor";

const [content, setContent] = useState({
  html: "<p>Start writing.</p>",
  text: "",
});

<Editor
  editorSize="large"
  initState={content}
  updateState={setContent}
  placeholder="Write something…"
/>;

Toolbar presets

editorSize selects which controls appear. These presets change the toolbar; they do not set a fixed editor height.

Preset	Controls
`large`	Full toolbar, contextual selection toolbar, block and alignment menus, tables, media, and color controls.
`medium`	Formatting and block menus, alignment, tables, media, and color controls. Link editing is in the additional-options menu; no contextual selection toolbar.
`small`	Bold, italic, underline, link, and image insertion.
`mini`	No toolbar. Enter is handled as a sync action rather than inserting a new paragraph.

Medium

Small

Mini

Content and synchronization

initState must contain an html string. updateState receives { html, text } after editor changes. Store both if the application needs formatted output and a plain-text version.

syncState is called with the same content object when a non-mini editor loses focus. In mini mode, it is called when Enter is pressed. externalState can replace the editor contents when outside state changes; it accepts html and an optional version value to signal updates. A truthy resetState clears the editor.

const [content, setContent] = useState({ html: "<p></p>", text: "" });
const [remoteContent, setRemoteContent] = useState({ html: "", version: 0 });

<Editor
  editorSize="medium"
  initState={content}
  updateState={setContent}
  syncState={saveDraft}
  externalState={remoteContent}
  resetState={resetCounter}
  placeholder="Add a note…"
/>;

Formatting and media

Block styles include paragraphs, three heading levels, ordered and unordered lists, blockquotes, and code blocks. Inline formatting includes bold, italic, underline, strikethrough, inline code, links, text color, and highlighted text. The color chooser includes the named palette provided by the editor.

Tables can be inserted and edited with row and column controls, header rows, cell merging, and background colors. Task lists can be inserted from the media menu. Images can be inserted from a URL or uploaded to the configurable imageUploadUrl, which defaults to /api/uploads/images. The host should provide a PUT endpoint that returns either { src } or { fileName, folderLocation }. Change the URL for your own backend:

<Editor
  editorSize="large"
  initState={content}
  updateState={setContent}
  imageUploadUrl="/your-api/media/images"
/>;

YouTube videos can be embedded from a video link.

Props

Prop	Type	Description
`editorSize`	`"large"`, `"medium"`, `"small"` or `"mini"`	The toolbar preset. Always set this; without it the editor has no toolbar.
`initState`	`{ html }`	The content the editor starts with.
`updateState`	`({ html, text }) => void`	Called after every change with the HTML and a plain-text version.
`syncState`	`({ html, text }) => void`	Called when the editor loses focus, or when Enter is pressed in the mini preset. A good moment to save.
`externalState`	`{ html, version }`	Replaces the content when it changes, for example when another user edited the same text. Increase `version` to apply the same HTML again.
`resetState`	any	Clears the editor whenever this changes to a new truthy value. A counter that you increase works well.
`placeholder`	`string`	Shown while the editor is empty. Defaults to “Write something...”.
`imageUploadUrl`	`string`	Where uploaded and pasted images are sent with a `PUT` request, as a form field named `file`. Defaults to `/api/uploads/images`.
`icons`	`string`	Where the icon file is served. Defaults to `/images/icons.svg`.

Classes

The styles of the editor are part of the Nausikaä stylesheet, so the component needs no stylesheet of its own. It writes the markup below; the classes are listed here for when you want to adjust the editor, or show the same frame around something else.

Class	Styling
`editor-wrapper`	The frame around the whole editor, drawn like an input field: the same border, background and focus style.
`editor-toolbar`	The row of buttons above the text. It wraps onto more lines when it runs out of room. A `divider` draws a line between groups of buttons.
`editor-content`	The text itself. Headings, lists, quotes, code, tables, task lists and images inside it each have their own styling.
`editor-tooltip`	The small toolbar that floats above selected text in the large preset.
`editor-color-picker`	The dialog with a grid of text and highlight colors.
`image-dialog`, `youtube-dialog`	The dialogs for adding an image or a video.

The wrapper also takes the classes active and invalid and the attribute readonly, with the same result as on an input field.