A React-based markdown editor with live preview functionality, implemented with TypeScript.
—
Text manipulation utilities and helper functions for textarea operations, markdown formatting, and text selection management.
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 });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"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);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**");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", "- ");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, "- [ ] ");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