Complete CommonMark preset for Milkdown editor providing all essential plugins for standard markdown editing
—
Pending
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
Pending
The risk profile of this skill
Programmatic control over editor content including formatting, node manipulation, and cursor positioning. Commands provide a consistent API for all editor operations and can be triggered programmatically or via keyboard shortcuts.
Commands for querying and manipulating the current selection state.
/**
* Check if a specific mark is currently selected/active at cursor position
* @param markType - Optional mark type to check, defaults to checking any mark
* @returns boolean indicating if mark is active
*/
const isMarkSelectedCommand: $command<'IsMarkSelected'>;
/**
* Check if a specific node type is currently selected
* @param nodeType - Optional node type to check, defaults to checking any node
* @returns boolean indicating if node is selected
* Note: Actual command key is 'IsNoteSelected' (typo in source code)
*/
const isNodeSelectedCommand: $command<'IsNoteSelected'>;
/**
* Select text near a specific position in the document
* @param pos - Position in document (required, command returns false if not provided)
*/
const selectTextNearPosCommand: $command<'SelectTextNearPos'>;Usage Examples:
import {
isMarkSelectedCommand,
isNodeSelectedCommand
} from "@milkdown/preset-commonmark";
// Check if emphasis is currently active
editor.action((ctx) => {
const isMarkSelected = ctx.get(isMarkSelectedCommand.key);
const emphasisActive = isMarkSelected(); // Check current mark state
});Commands for modifying document content and structure.
/**
* Clear all text content in the current block node
* Preserves block structure while removing text
*/
const clearTextInCurrentBlockCommand: $command<'ClearTextInCurrentBlock'>;
/**
* Set the type of the current block to a specific node type
* @param nodeType - Target node type to convert to
* @param attrs - Optional attributes for the new node
*/
const setBlockTypeCommand: $command<'SetBlockType'>;
/**
* Wrap the current selection in a specific block type
* @param nodeType - Node type to wrap selection with
* @param attrs - Optional attributes for the wrapper node
*/
const wrapInBlockTypeCommand: $command<'WrapInBlockType'>;
/**
* Add a new block of specified type at the cursor position
* @param nodeType - Node type or Node instance to insert
* @param attrs - Optional attributes for the new node
*/
const addBlockTypeCommand: $command<'AddBlockType'>;Usage Examples:
import {
setBlockTypeCommand,
wrapInBlockTypeCommand,
addBlockTypeCommand
} from "@milkdown/preset-commonmark";
// Convert current block to heading
editor.action((ctx) => {
const setBlockType = ctx.get(setBlockTypeCommand.key);
setBlockType({
nodeType: ctx.get(headingSchema.type),
attrs: { level: 2 }
});
});
// Wrap selection in blockquote
editor.action((ctx) => {
const wrapInBlockType = ctx.get(wrapInBlockTypeCommand.key);
wrapInBlockType({
nodeType: ctx.get(blockquoteSchema.type)
});
});Commands specific to particular node types, organized by functionality.
/**
* Wrap current selection or line in heading of specified level
* @param level - Heading level (1-6), defaults to 1
*/
const wrapInHeadingCommand: $command<'WrapInHeading'>;
/**
* Downgrade current heading by one level (h1 -> h2, etc.)
* Does nothing if not in a heading or already at h6
*/
const downgradeHeadingCommand: $command<'DowngradeHeading'>;/**
* Toggle emphasis (italic) formatting on current selection
*/
const toggleEmphasisCommand: $command<'ToggleEmphasis'>;
/**
* Toggle strong (bold) formatting on current selection
*/
const toggleStrongCommand: $command<'ToggleStrong'>;
/**
* Toggle inline code formatting on current selection
*/
const toggleInlineCodeCommand: $command<'ToggleInlineCode'>;
/**
* Toggle link mark on current selection
* @param payload - Link properties (href, title)
*/
const toggleLinkCommand: $command<'ToggleLink'>;
/**
* Update properties of existing link at cursor position
* @param payload - Updated link properties
*/
const updateLinkCommand: $command<'UpdateLink'>;/**
* Wrap current selection in bullet list
*/
const wrapInBulletListCommand: $command<'WrapInBulletList'>;
/**
* Wrap current selection in ordered (numbered) list
*/
const wrapInOrderedListCommand: $command<'WrapInOrderedList'>;
/**
* Indent current list item to deeper nesting level
*/
const sinkListItemCommand: $command<'SinkListItem'>;
/**
* Unindent current list item to shallower nesting level
*/
const liftListItemCommand: $command<'LiftListItem'>;
/**
* Split current list item at cursor position
*/
const splitListItemCommand: $command<'SplitListItem'>;
/**
* Lift first list item out of its containing list
*/
const liftFirstListItemCommand: $command<'LiftFirstListItem'>;/**
* Wrap current selection in blockquote
*/
const wrapInBlockquoteCommand: $command<'WrapInBlockquote'>;
/**
* Create code block at cursor position
* @param language - Optional programming language for syntax highlighting
*/
const createCodeBlockCommand: $command<'CreateCodeBlock'>;
/**
* Update language of existing code block
* @param pos - Position of code block to update
* @param language - New language identifier
*/
const updateCodeBlockLanguageCommand: $command<'UpdateCodeBlockLanguage'>;
/**
* Convert current block to paragraph
*/
const turnIntoTextCommand: $command<'TurnIntoText'>;/**
* Insert image at cursor position
* @param payload - Image properties (src, alt, title)
*/
const insertImageCommand: $command<'InsertImage'>;
/**
* Update properties of selected image
* @param payload - Updated image properties
*/
const updateImageCommand: $command<'UpdateImage'>;
/**
* Insert hard break (line break) at cursor position
*/
const insertHardbreakCommand: $command<'InsertHardbreak'>;
/**
* Insert horizontal rule at cursor position
*/
const insertHrCommand: $command<'InsertHr'>;import { toggleEmphasisCommand } from "@milkdown/preset-commonmark";
editor.action((ctx) => {
const command = ctx.get(toggleEmphasisCommand.key);
command(); // Execute command
});import {
wrapInHeadingCommand,
createCodeBlockCommand,
insertImageCommand
} from "@milkdown/preset-commonmark";
editor.action((ctx) => {
// Heading with level
const headingCmd = ctx.get(wrapInHeadingCommand.key);
headingCmd({ level: 3 });
// Code block with language
const codeCmd = ctx.get(createCodeBlockCommand.key);
codeCmd({ language: "typescript" });
// Image with properties
const imageCmd = ctx.get(insertImageCommand.key);
imageCmd({
src: "/path/to/image.png",
alt: "Description",
title: "Image Title"
});
});import { isMarkSelectedCommand, isNodeSelectedCommand } from "@milkdown/preset-commonmark";
editor.action((ctx) => {
const isMarkSelected = ctx.get(isMarkSelectedCommand.key);
const isNodeSelected = ctx.get(isNodeSelectedCommand.key);
// Check current state
const hasEmphasis = isMarkSelected(); // Any mark active
const inHeading = isNodeSelected(); // Any node selected
// Use state for conditional logic
if (!hasEmphasis) {
const toggleCmd = ctx.get(toggleEmphasisCommand.key);
toggleCmd();
}
});// Command types
type $command<T> = any; // Command definition type
// Node and mark types from ProseMirror
type NodeType = any;
type MarkType = any;
type Node = any;
type Attrs = Record<string, any>;
// Command parameter interfaces
interface SetBlockTypeCommandPayload {
nodeType: NodeType;
attrs?: Attrs;
}
interface WrapInBlockTypeCommandPayload {
nodeType: NodeType;
attrs?: Attrs;
}
interface AddBlockTypeCommandPayload {
nodeType: NodeType | Node;
attrs?: Attrs;
}
interface SelectTextNearPosCommandPayload {
pos?: number;
}
interface WrapInHeadingCommandPayload {
level?: number;
}
interface CreateCodeBlockCommandPayload {
language?: string;
}
interface UpdateCodeBlockLanguageCommandPayload {
pos: number;
language: string;
}
interface UpdateImageCommandPayload {
src?: string;
title?: string;
alt?: string;
}
interface UpdateLinkCommandPayload {
href?: string;
title?: string;
}