Overview
The Steps plugin creates numbered, step-by-step instruction blocks. Perfect for tutorials, guides, and sequential processes.
Installation
npm install @yoopta/steps
Basic Usage
import { useMemo } from 'react';
import YooptaEditor, { createYooptaEditor } from '@yoopta/editor';
import Steps from '@yoopta/steps';
const plugins = [Steps];
export default function Editor() {
const editor = useMemo(() => createYooptaEditor({ plugins, marks: [] }), []);
return <YooptaEditor editor={editor} onChange={() => {}} />;
}
Features
- Numbered Steps: Automatic step numbering
- Structured Content: Each step has a heading and content area
- Keyboard Navigation: Full keyboard support
- HTML Serialization: Clean HTML output
- Shortcuts: Type
steps to insert
Structure
The Steps block consists of nested elements:
step-container
└── step-list
└── step-list-item (multiple, props: order)
├── step-list-item-heading
└── step-list-item-content
Configuration
import Steps from '@yoopta/steps';
const plugins = [Steps];
Options
Display title in UI menus
description
string
default:"Create step-by-step instructions"
Description shown in menus
shortcuts
string[]
default:"['steps']"
Keyboard shortcuts to trigger the plugin in slash menu
Element Props
Commands
Steps commands are available via StepsCommands.
insertSteps
Insert a new Steps block.
import Steps, { StepsCommands } from '@yoopta/steps';
StepsCommands.insertSteps(editor, {
items: 3,
at: 0,
focus: true,
});
Number of step items to create initially
Index where to insert the block
Whether to focus the new block after insert
buildStepsElements
Build steps element structure (used internally).
import { StepsCommands } from '@yoopta/steps';
const stepsElement = StepsCommands.buildStepsElements(editor, {
items: 3,
});
deleteSteps
Delete a steps block.
import { StepsCommands } from '@yoopta/steps';
StepsCommands.deleteSteps(editor, blockId);
Block Operations
You can also use the generic Blocks API:
import { Blocks } from '@yoopta/editor';
// Delete
Blocks.deleteBlock(editor, { blockId });
// Update block meta
Blocks.updateBlock(editor, { blockId, meta: { align: 'left' } });
Element Operations
Use the Elements API to manipulate steps:
import { Elements } from '@yoopta/editor';
// Insert new step
Elements.insertElement(editor, {
blockId,
type: 'step-list-item',
props: { order: 4 },
at: 'next',
focus: true,
});
// Update step order
Elements.updateElement(editor, {
blockId,
type: 'step-list-item',
props: { order: 2 },
path: stepItemPath,
});
// Delete step
Elements.deleteElement(editor, {
blockId,
type: 'step-list-item',
path: stepItemPath,
});
Keyboard Behavior
- Enter in heading: moves focus to content area
- Enter in content: inserts a new step after the current one
- Backspace in empty heading: removes the step (or deletes the block if it’s the only step)
- Backspace in empty content: prevented to preserve structure
Parsers
HTML
- Deserialize:
<div> or <ol> with step structure
- Serialize: Steps block →
<div> with ordered list structure and step metadata
Email
- Serialize: Table-based layout with numbered steps for email clients
- Lists — Ordered and unordered lists
- Accordion — Collapsible sections
- Tabs — Tabbed content