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

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Text Formatting

Name: tessl/npm-milkdown--preset-commonmark
Author: tessl

Inline formatting capabilities for text content including emphasis, strong text, links, and inline code. Marks are applied to text ranges and can be combined with each other.

Capabilities

Emphasis

Italic text formatting for emphasis.

/**
 * HTML attributes for emphasis marks
 */
const emphasisAttr: $markAttr<'emphasis'>;

/**
 * Schema for emphasis marks with marker attribute
 * Stores the original markdown marker (* or _) used
 */
const emphasisSchema: $markSchema<'emphasis'>;

/**
 * Command to toggle emphasis on current selection
 */
const toggleEmphasisCommand: $command<'ToggleEmphasis'>;

/**
 * Input rule for creating emphasis using *text* syntax
 */
const emphasisStarInputRule: $inputRule;

/**
 * Input rule for creating emphasis using _text_ syntax
 */
const emphasisUnderscoreInputRule: $inputRule;

/**
 * Keyboard shortcuts for emphasis operations
 * - Mod-i: Toggle emphasis
 */
const emphasisKeymap: $useKeymap;

Usage Examples:

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

// Toggle emphasis programmatically
editor.action((ctx) => {
  const cmd = ctx.get(toggleEmphasisCommand.key);
  cmd(); // Toggles emphasis on current selection
});

Strong

Bold text formatting for strong emphasis.

/**
 * HTML attributes for strong marks
 */
const strongAttr: $markAttr<'strong'>;

/**
 * Schema for strong marks with marker attribute
 * Stores the original markdown marker (** or __) used
 */
const strongSchema: $markSchema<'strong'>;

/**
 * Command to toggle strong formatting on current selection
 */
const toggleStrongCommand: $command<'ToggleStrong'>;

/**
 * Input rule for creating strong text using **text** and __text__ syntax
 */
const strongInputRule: $inputRule;

/**
 * Keyboard shortcuts for strong formatting operations
 * - Mod-b: Toggle strong
 */
const strongKeymap: $useKeymap;

Inline Code

Monospace text formatting for code snippets within text.

/**
 * HTML attributes for inline code marks
 */
const inlineCodeAttr: $markAttr<'inlineCode'>;

/**
 * Schema definition for inline code marks
 */
const inlineCodeSchema: $markSchema<'inlineCode'>;

/**
 * Command to toggle inline code formatting on current selection
 */
const toggleInlineCodeCommand: $command<'ToggleInlineCode'>;

/**
 * Input rule for creating inline code using `code` syntax
 */
const inlineCodeInputRule: $inputRule;

/**
 * Keyboard shortcuts for inline code operations
 * - Mod-e: Toggle inline code
 */
const inlineCodeKeymap: $useKeymap;

Links

Hyperlink formatting with URL and optional title attributes.

/**
 * HTML attributes for link marks
 */
const linkAttr: $markAttr<'link'>;

/**
 * Schema for link marks with href and title attributes
 */
const linkSchema: $markSchema<'link'>;

/**
 * Command payload interface for link operations
 */
interface UpdateLinkCommandPayload {
  href?: string;
  title?: string;
}

/**
 * Command to toggle link mark on current selection
 * Creates new link or removes existing link
 */
const toggleLinkCommand: $command<'ToggleLink'>;

/**
 * Command to update properties of existing link
 * Updates href and/or title of selected link
 */
const updateLinkCommand: $command<'UpdateLink'>;

Usage Examples:

import { 
  toggleLinkCommand, 
  updateLinkCommand,
  UpdateLinkCommandPayload 
} from "@milkdown/preset-commonmark";

// Create or toggle link
editor.action((ctx) => {
  const toggleCmd = ctx.get(toggleLinkCommand.key);
  toggleCmd({
    href: "https://example.com",
    title: "Example Website"
  });
});

// Update existing link
editor.action((ctx) => {
  const updateCmd = ctx.get(updateLinkCommand.key);
  updateCmd({
    href: "https://newurl.com",
    title: "Updated Title"
  });
});

Mark Combination Examples

Marks can be combined to create rich text formatting:

// Multiple marks can be applied simultaneously
// This creates bold italic code text
import { 
  toggleStrongCommand,
  toggleEmphasisCommand,
  toggleInlineCodeCommand 
} from "@milkdown/preset-commonmark";

editor.action((ctx) => {
  const strongCmd = ctx.get(toggleStrongCommand.key);
  const emphasisCmd = ctx.get(toggleEmphasisCommand.key);
  const codeCmd = ctx.get(toggleInlineCodeCommand.key);
  
  // Apply multiple marks to selection
  strongCmd();     // Make bold
  emphasisCmd();   // Add italic
  codeCmd();       // Add code formatting
});

Input Rule Behavior

All marks support automatic conversion from markdown syntax:

*italic* or _italic_ → emphasis
**bold** or __bold__ → strong
`code` → inline code
[text](url) → link (handled by input rules in the broader system)

The input rules activate when you type the closing marker, automatically converting the preceding text to the appropriate mark.

Types

// Mark attribute types
type $markAttr<T> = any; // Mark HTML attribute configuration
type $markSchema<T> = any; // Mark schema definition
type $command<T> = any; // Command type
type $inputRule = any; // Input rule type
type $useKeymap = any; // Keymap configuration type

// Link command payload
interface UpdateLinkCommandPayload {
  href?: string;
  title?: string;
}