Editor and blocks

The Cursiva editor combines free-form writing with structured blocks: you drive the narrative in rich text and insert a block whenever you need media, navigation, or interaction. Each block handles only the interaction it represents. This page explains how the editor works — the full component catalog lives in Blocks.

The fixed header

Every piece of content starts with a rigid header that the editor protects: cover, title, and description, in that order. These fields cannot be deleted, reordered, duplicated, or dragged, and the / menu is disabled inside the title and description.

Enter walks through the sequence title → description → body, and Backspace at the start of a field jumps to the end of the previous field instead of trying to merge them.

Cover

Hover over the cover to reveal the actions: Add cover uploads an image, Change swaps the current image, and Remove reverts to the default gradient. It is a single image per piece of content. The cover is the primary visual identity of the content, alongside the theme.

Writing rich text

Paragraphs, headings, lists, quotes, links, code, and tables form the main narrative. When you select text, a floating bar (bubble menu) appears with formatting actions:

Some behavioral details:

• While you edit, links don't navigate when clicked (you edit them through the bar); the learner, when reading, gets real, clickable links.
• Over a heading, the bar offers Unlocks after, which sets when that section is released — the prerequisite-based release rule used in paths. See Progress and certificates.
• Inside a table, the bar gains its own controls: insert/delete column, insert/delete row, toggle the header row, and delete the table.
• The bar does not appear in the title, in the description, inside a code block, or over a selected block (atomic blocks bring their own interface).

The block menu (/)

Type / on a body line to open the block menu, Notion-style. It lists the blocks grouped into sections, in the canonical order below:

What each block does in detail is in Blocks.

Search and navigate

As you type after the /, the list filters and reorders by relevance: the match is scored by title (full weight), by each block's search terms (lower weight), and by description (prefix/start-of-word only). An exact prefix beats a start-of-word match, which beats a subsequence match. Sections keep their canonical order; within each section, items are sorted by score.

This means synonyms work: faq finds Accordion, npm finds Code tabs, anki finds Flashcards, latex finds Math. With an empty search, the menu shows all blocks in canonical order; with no match at all, it displays No matching blocks.

The gutter: insert and reorder

When you hover over a body block, a gutter appears to its left with two controls:

• "+" — inserts a block right below the block it points to. In practice, it creates an empty paragraph, places the cursor in it, and opens the / menu automatically.
• Handle "⠿" — drag to reorder the block (native drag-and-drop).

The "+" is what makes it possible to insert between two blocks, especially between atomic blocks (quiz, diagram, poll…) that leave no text point in the middle. The gutter also recognizes the space (the margin) between two blocks, so you can aim precisely at the gap you want to fill.

The final paragraph

The document always ends with an empty paragraph. This guarantees a cursor point after the last block: without it, a piece of content that ends in an atomic block (quiz, diagram, poll) would leave you with nowhere to click or type, and no way to open the / menu. If you delete this final paragraph, the editor recreates it — it is a structural guarantee, not a content block.

Content theme

Each piece of content chooses a theme that colors the interactive components — quiz frames, Steps, Reveal, Flashcards, Slides numerals, and the like. The theme defines a triad of accent colors (--fx-a, --fx-b, --fx-c) plus a contrast color (--fx-ink) used on saturated surfaces, such as the front of a flashcard or a slide's card.

The theme is chosen in Basics → Theme and applies to the entire piece of content. It changes only the accent colors of the interactive blocks, not the body text. Because it is a setting, changing the theme goes through the top-bar save (see Save and publish).

Learner preview

From the top bar, on the content tab, you switch to the learner preview: the content is rendered as the learner sees it, without the authoring chrome — no gutter, no / menu, and with cards only where real interaction exists (quiz, flashcard, reference, media). The content theme is applied.

Preview interactions are simulated locally: quizzes and flashcards are graded in the browser, polls are tallied in memory, and nothing is saved. A notice at the top of the preview reinforces this.

Use the preview to validate the experience, not just the appearance: test clicks, keyboard, empty states, long content, and different screen sizes.

Save and publish

The editor's top bar concentrates the content's state and the save and publish actions. It shows a state badge — Draft, Unpublished changes, or Published — and the body's write status (All changes saved, Saving…, Saved, or Couldn't save).

The editorial body and the configuration screens follow different models:

On the configuration screens, when there are pending edits the top bar shows Unsaved changes with the Discard and Save buttons. None of these screens save on their own — including the content theme, which is only applied when you click Save.

Next steps