or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

commands.mdindex.mdmarks.mdnodes.mdplugins.md
tile.json

tessl/npm-milkdown--preset-commonmark

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

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@milkdown/preset-commonmark@7.15.x

To install, run

npx @tessl/cli install tessl/npm-milkdown--preset-commonmark@7.15.0

index.mddocs/

Milkdown Preset CommonMark

The @milkdown/preset-commonmark package provides a comprehensive CommonMark preset for the Milkdown WYSIWYG markdown editor framework. It includes all essential plugins needed to support CommonMark specification features including schemas, input rules, commands, keyboard shortcuts, and utility plugins for advanced editing behaviors.

Package Information

  • Package Name: @milkdown/preset-commonmark
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @milkdown/preset-commonmark

Core Imports

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

For individual components:

import { 
  headingSchema, 
  paragraphSchema, 
  emphasisSchema,
  wrapInHeadingCommand,
  toggleEmphasisCommand
} from "@milkdown/preset-commonmark";

Basic Usage

import { Editor, rootCtx } from "@milkdown/core";
import { commonmark } from "@milkdown/preset-commonmark";

// Create editor with complete CommonMark support
const editor = await Editor.make()
  .config((ctx) => {
    ctx.set(rootCtx, document.getElementById("editor"));
  })
  .use(commonmark)
  .create();

Architecture

The preset is organized into several key modules:

  • Node Schemas: Document structure definitions (headings, paragraphs, lists, code blocks, images, etc.)
  • Mark Schemas: Inline formatting definitions (emphasis, strong, links, inline code)
  • Input Rules: Automatic markdown-to-editor transformations (typing # creates heading, *text* creates emphasis)
  • Commands: Programmatic control over editor content and formatting
  • Keyboard Shortcuts: Standard editing shortcuts for all operations
  • Utility Plugins: Advanced behaviors including remark transformers and ProseMirror plugins

Capabilities

Complete Preset

The main export that provides everything needed for a full CommonMark editing experience.

/**
 * Complete CommonMark preset with all plugins
 * Includes: schema, inputRules, markInputRules, commands, keymap, plugins
 */
const commonmark: MilkdownPlugin[];

Document Structure Nodes

Core structural elements that form the document hierarchy. Includes headings, paragraphs, lists, code blocks, blockquotes, and more.

// Document root and text nodes
const docSchema: $node;
const textSchema: $node<'text'>;
const paragraphSchema: $nodeSchema<'paragraph'>;

// Heading nodes with levels 1-6
const headingSchema: $nodeSchema<'heading'>;
const headingIdGenerator: $ctx<(node: Node) => string>;

// List structures
const bulletListSchema: $nodeSchema<'bullet_list'>;
const orderedListSchema: $nodeSchema<'ordered_list'>;
const listItemSchema: $nodeSchema<'list_item'>;

Document Nodes

Text Formatting Marks

Inline formatting capabilities including emphasis, strong text, links, and inline code.

// Basic formatting marks
const emphasisSchema: $markSchema<'emphasis'>;
const strongSchema: $markSchema<'strong'>;
const inlineCodeSchema: $markSchema<'inlineCode'>;

// Link mark with href and title attributes
const linkSchema: $markSchema<'link'>;

// Command interfaces for mark manipulation
interface UpdateLinkCommandPayload {
  href?: string;
  title?: string;
}

Text Formatting

Interactive Commands

Programmatic control over editor content including formatting, node manipulation, and cursor positioning.

// Heading commands
const wrapInHeadingCommand: $command<'WrapInHeading'>;
const downgradeHeadingCommand: $command<'DowngradeHeading'>;

// Text formatting commands
const toggleEmphasisCommand: $command<'ToggleEmphasis'>;
const toggleStrongCommand: $command<'ToggleStrong'>;
const toggleInlineCodeCommand: $command<'ToggleInlineCode'>;

// List manipulation commands
const wrapInBulletListCommand: $command<'WrapInBulletList'>;
const sinkListItemCommand: $command<'SinkListItem'>;
const liftListItemCommand: $command<'LiftListItem'>;

Editor Commands

Utility Plugins

Advanced editing behaviors including remark transformers for markdown processing and ProseMirror plugins for cursor handling and content synchronization.

// Remark plugins for markdown processing
const remarkAddOrderInListPlugin: $remark<'remarkAddOrderInList'>;
const remarkLineBreak: $remark<'remarkLineBreak'>;
const remarkInlineLinkPlugin: $remark<'remarkInlineLink'>;

// ProseMirror plugins for editor behavior
const inlineNodesCursorPlugin: $prose;
const syncHeadingIdPlugin: $prose;
const hardbreakFilterPlugin: $prose;

Utility Plugins

Composed Plugin Arrays

Pre-composed plugin arrays that combine related functionality for convenient use.

/**
 * Complete schema array with all node and mark schemas
 * Combines all commonmark nodes and marks in proper order
 */
const schema: MilkdownPlugin[];

/**
 * All node input rules for markdown syntax recognition
 * Handles automatic conversion of markdown syntax to nodes
 */
const inputRules: MilkdownPlugin[];

/**
 * All mark input rules for inline formatting syntax
 * Handles conversion of inline markdown formatting to marks
 */
const markInputRules: MilkdownPlugin[];

/**
 * Complete commands array with all available commands
 * Includes all node, mark, and utility commands
 */
const commands: MilkdownPlugin[];

/**
 * Complete keymap array with all keyboard shortcuts
 * Combines all node and mark keymaps
 */
const keymap: MilkdownPlugin[];

/**
 * Complete plugins array with all utility plugins
 * Includes remark and ProseMirror plugins for enhanced functionality
 */
const plugins: MilkdownPlugin[];

Internal Utilities

Utility functions for plugin development and content processing.

/**
 * Serialize text content from a node during markdown transformation
 * Used internally by node serializers
 */
function serializeText(state: SerializerState, node: Node): void;

/**
 * Add metadata to a plugin for identification and debugging
 * @param plugin - The plugin to add metadata to
 * @param meta - Metadata object with displayName and optional properties
 */
function withMeta<T extends MilkdownPlugin>(
  plugin: T,
  meta: Partial<Meta> & Pick<Meta, 'displayName'>
): T;

Types

// Core Milkdown types from dependencies
type MilkdownPlugin = any; // From @milkdown/core
type Node = any; // From @milkdown/prose
type MarkType = any; // From @milkdown/prose
type NodeType = any; // From @milkdown/prose
type Attrs = Record<string, any>; // From @milkdown/prose

// Utility types
type SerializerState = any; // From @milkdown/transformer
type Meta = any; // From @milkdown/utils

// Command payload interfaces
interface UpdateImageCommandPayload {
  src?: string;
  title?: string;
  alt?: string;
}

interface UpdateLinkCommandPayload {
  href?: string;
  title?: string;
}