CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-uiw--react-md-editor

A React-based markdown editor with live preview functionality, implemented with TypeScript.

Pending
Overview
Eval results
Files

utilities.mddocs/

Utilities

Text manipulation utilities and helper functions for textarea operations, markdown formatting, and text selection management.

Capabilities

Text Area Manipulation

Classes and functions for direct textarea manipulation and text processing.

/**
 * Text manipulation API for textarea elements
 */
declare class TextAreaTextApi {
  constructor(textArea: HTMLTextAreaElement);
  
  /**
   * Replace the currently selected text with new text
   * @param text - Text to replace the selection with
   * @returns Updated text state after replacement
   */
  replaceSelection(text: string): TextState;
  
  /**
   * Set the selection range in the textarea
   * @param selection - Text range to select
   * @returns Updated text state after selection change
   */
  setSelectionRange(selection: TextRange): TextState;
}

interface TextState {
  /** Full text content of the textarea */
  text: string;
  /** Currently selected text */
  selectedText: string;
  /** Selection range information */
  selection: TextRange;
}

interface TextRange {
  /** Start position of the selection */
  start: number;
  /** End position of the selection */
  end: number;
}

Usage Examples:

// Basic text manipulation
const textArea = document.querySelector('textarea') as HTMLTextAreaElement;
const textApi = new TextAreaTextApi(textArea);

// Replace selection with bold text
const state = textApi.getState();
if (state.selectedText) {
  textApi.replaceSelection(`**${state.selectedText}**`);
}

// Set specific selection range
textApi.setSelectionRange({ start: 0, end: 10 });

Text Selection Functions

Utility functions for intelligent text selection and word boundary detection.

/**
 * Select word at the current position with intelligent boundary detection
 * @param options - Selection options including text and position
 * @returns Text range containing the selected word
 */
declare function selectWord(options: SelectWordOptions): TextRange;

interface SelectWordOptions {
  text: string;
  selection: TextRange;
}

/**
 * Select entire line containing the current position
 * @param textSection - Text section with selection information
 * @returns Text range containing the entire line
 */
declare function selectLine(textSection: TextSection): TextRange;

interface TextSection {
  text: string;
  selection: TextRange;
}

/**
 * Get word boundaries around a specific position
 * @param text - Full text content
 * @param position - Position to find word boundaries around
 * @returns Text range of the surrounding word
 */
declare function getSurroundingWord(text: string, position: number): TextRange;

Usage Examples:

// Select word at cursor position
const wordRange = selectWord({
  text: "Hello world example",
  selection: { start: 8, end: 8 } // Cursor in "world"
});
// Returns: { start: 6, end: 11 } for "world"

// Select entire line
const lineRange = selectLine({
  text: "Line 1\nLine 2\nLine 3",
  selection: { start: 8, end: 8 } // Cursor in "Line 2"
});
// Returns: { start: 7, end: 13 } for "Line 2"

// Get surrounding word boundaries
const wordBounds = getSurroundingWord("Hello world", 8);
// Returns: { start: 6, end: 11 } for "world"

Line Manipulation Functions

Functions for calculating line breaks and modifying text line by line.

/**
 * Calculate line breaks needed before a position for proper formatting
 * @param text - Full text content
 * @param startPosition - Position to check
 * @returns Number of line breaks needed before the position
 */
declare function getBreaksNeededForEmptyLineBefore(text: string, startPosition: number): number;

/**
 * Calculate line breaks needed after a position for proper formatting
 * @param text - Full text content
 * @param startPosition - Position to check
 * @returns Number of line breaks needed after the position
 */
declare function getBreaksNeededForEmptyLineAfter(text: string, startPosition: number): number;

/**
 * Insert text before each line in the selected text
 * @param selectedText - Text to modify
 * @param insertBefore - Text to insert before each line
 * @returns Object with modified text and insertion length information
 */
declare function insertBeforeEachLine(
  selectedText: string,
  insertBefore: string
): {
  modifiedText: string;
  insertionLength: number;
};

Usage Examples:

// Calculate needed line breaks
const text = "Some text\n\nMore text";
const breaksNeeded = getBreaksNeededForEmptyLineBefore(text, 15);

// Insert prefix before each line (useful for quote blocks, lists)
const result = insertBeforeEachLine("Line 1\nLine 2\nLine 3", "> ");
// Returns: { modifiedText: "> Line 1\n> Line 2\n> Line 3", insertionLength: 2 }

// Create quote block
const selectedText = "This is a quote\nWith multiple lines";
const { modifiedText } = insertBeforeEachLine(selectedText, "> ");
textApi.replaceSelection(modifiedText);

Command Execution Functions

High-level functions for executing text formatting commands and inserting text.

/**
 * Execute a text formatting command with proper state management
 * @param options - Command execution options
 */
declare function executeCommand(options: ExecuteCommandOptions): void;

interface ExecuteCommandOptions {
  command: ICommand;
  state: ContextStore;
  textApi: TextAreaTextApi;
  dispatch?: React.Dispatch<ContextStore>;
}

/**
 * Insert text at the current cursor position in a textarea
 * @param input - Textarea element to insert text into
 * @param text - Text to insert
 */
declare function insertTextAtPosition(input: HTMLTextAreaElement, text: string): void;

Usage Examples:

// Execute a formatting command
executeCommand({
  command: commands.bold,
  state: editorState,
  textApi: new TextAreaTextApi(textArea),
  dispatch: stateDispatcher
});

// Insert text at cursor
const textArea = document.querySelector('textarea') as HTMLTextAreaElement;
insertTextAtPosition(textArea, "**Bold text**");

Markdown Utilities Namespace

Namespace containing all markdown-related utility functions.

/**
 * Namespace containing markdown utility functions
 */
declare namespace MarkdownUtil {
  export function selectWord(options: SelectWordOptions): TextRange;
  export function selectLine(textSection: TextSection): TextRange;
  export function getSurroundingWord(text: string, position: number): TextRange;
  export function getBreaksNeededForEmptyLineBefore(text: string, startPosition: number): number;
  export function getBreaksNeededForEmptyLineAfter(text: string, startPosition: number): number;
  export function insertBeforeEachLine(selectedText: string, insertBefore: string): {
    modifiedText: string;
    insertionLength: number;
  };
  export function executeCommand(options: ExecuteCommandOptions): void;
  export function insertTextAtPosition(input: HTMLTextAreaElement, text: string): void;
}

Usage Example:

import { MarkdownUtil } from "@uiw/react-md-editor";

// Use utilities through namespace
const wordRange = MarkdownUtil.selectWord({
  text: "Hello world",
  selection: { start: 8, end: 8 }
});

const { modifiedText } = MarkdownUtil.insertBeforeEachLine("Line 1\nLine 2", "- ");

List Operations

Utility function for creating and managing list formatting in markdown text.

/**
 * Apply list formatting to selected text with proper line break handling
 * @param state - Current execution state
 * @param api - Text API for manipulation
 * @param insertBefore - Text to insert before each line or function to transform lines
 */
declare function makeList(
  state: ExecuteState, 
  api: TextAreaTextApi, 
  insertBefore: string | AlterLineFunction
): void;

type AlterLineFunction = (line: string, index: number) => string;

Usage Examples:

import { makeList } from "@uiw/react-md-editor";

// Create unordered list
makeList(state, textApi, "- ");

// Create ordered list with function
makeList(state, textApi, (line, index) => `${index + 1}. `);

// Create checklist
makeList(state, textApi, "- [ ] ");

Context Management

State management utilities for the editor context.

/**
 * Get current state from textarea element
 * @param textArea - Textarea element to extract state from
 * @returns Current text state with selection information
 */
declare function getStateFromTextArea(textArea: HTMLTextAreaElement): TextState;

/**
 * Context reducer for managing editor state
 * @param state - Current context state
 * @param action - Action containing state updates
 * @returns Updated context state
 */
declare function reducer(state: ContextStore, action: ContextStore): ContextStore;

Usage Examples:

import { getStateFromTextArea, reducer } from "@uiw/react-md-editor";

// Get current textarea state
const textArea = document.querySelector('textarea') as HTMLTextAreaElement;
const currentState = getStateFromTextArea(textArea);

// Use reducer for state management
const newState = reducer(currentState, { markdown: "new content" });

Install with Tessl CLI

npx tessl i tessl/npm-uiw--react-md-editor

docs

command-system.md

editor-component.md

index.md

utilities.md

tile.json