CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-milkdown--preset-commonmark

Complete CommonMark preset for Milkdown editor providing all essential plugins for standard markdown editing

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

commands.mddocs/

Editor Commands

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.

Capabilities

Selection and State Commands

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
});

Content Manipulation Commands

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)
  });
});

Node-Specific Commands

Commands specific to particular node types, organized by functionality.

Heading Commands

/**
 * 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'>;

Text Formatting Commands

/**
 * 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'>;

List Commands

/**
 * 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'>;

Block Element Commands

/**
 * 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'>;

Media Commands

/**
 * 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'>;

Command Usage Patterns

Basic Command Execution

import { toggleEmphasisCommand } from "@milkdown/preset-commonmark";

editor.action((ctx) => {
  const command = ctx.get(toggleEmphasisCommand.key);
  command(); // Execute command
});

Commands with Parameters

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"
  });
});

Command State Queries

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();
  }
});

Types

// 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;
}

docs

commands.md

index.md

marks.md

nodes.md

plugins.md

tile.json