feat: Initial clean release of CHM

packages/editor/CodeMirror/editorCommands/tableCommands.ts

@@ -0,0 +1,412 @@
+// Table editing commands for the CodeMirror Markdown editor.
+// These commands use the syntax tree to detect tables and manipulate them
+// using the pure utility functions from tableUtils.ts.
+
+import { EditorView } from '@codemirror/view';
+import { EditorState } from '@codemirror/state';
+import { syntaxTree } from '@codemirror/language';
+import { parseTable, serializeTable, addRow, addColumn, deleteRow, deleteColumn } from '../utils/markdown/tableUtils';
+
+// Check if a pipe at position `i` in `text` is unescaped.
+// A pipe is escaped if preceded by an odd number of backslashes.
+const isUnescapedPipe = (text: string, i: number): boolean => {
+	if (text[i] !== '|') return false;
+	let backslashes = 0;
+	let j = i - 1;
+	while (j >= 0 && text[j] === '\\') {
+		backslashes++;
+		j--;
+	}
+	return backslashes % 2 === 0;
+};
+
+// ---------------------------------------------------------------------------
+// Table context detection
+// ---------------------------------------------------------------------------
+
+export interface TableRange {
+	// Start position of the table in the document
+	from: number;
+	// End position of the table in the document
+	to: number;
+	// Raw table text
+	text: string;
+}
+
+export interface CellLocation {
+	// Row index (0 = header, 1+ = body rows)
+	row: number;
+	// Column index (0-based)
+	col: number;
+}
+
+// Find the full table range if the cursor is inside a table.
+// Walks up the syntax tree to find TableHeader, TableRow, or TableDelimiter,
+// then expands to cover the entire table.
+export const getTableRangeAtCursor = (state: EditorState): TableRange | null => {
+	const pos = state.selection.main.head;
+	const tree = syntaxTree(state);
+	let node = tree.resolveInner(pos, -1);
+
+	// Walk up to find a table-related node
+	while (node) {
+		if (node.name === 'Table') break;
+		if (node.name === 'TableHeader' || node.name === 'TableRow' || node.name === 'TableDelimiter') {
+			// Go to parent Table node
+			if (node.parent && node.parent.name === 'Table') {
+				node = node.parent;
+				break;
+			}
+		}
+		if (!node.parent || node.parent.name === 'Document') return null;
+		node = node.parent;
+	}
+
+	if (node.name !== 'Table') return null;
+
+	return {
+		from: node.from,
+		to: node.to,
+		text: state.doc.sliceString(node.from, node.to),
+	};
+};
+
+// Determine which cell (row, col) the cursor is in within a table.
+// Row 0 = header row, row 1+ = body rows (skipping the delimiter row).
+export const getCellAtCursor = (state: EditorState, tableRange: TableRange): CellLocation | null => {
+	const pos = state.selection.main.head;
+	const tableText = tableRange.text;
+	const lines = tableText.split('\n');
+
+	let currentPos = tableRange.from;
+	for (let lineIdx = 0; lineIdx < lines.length; lineIdx++) {
+		const lineStart = currentPos;
+		const lineEnd = currentPos + lines[lineIdx].length;
+
+		if (pos >= lineStart && pos <= lineEnd) {
+			// Skip the delimiter line (line index 1)
+			if (lineIdx === 1) return null;
+
+			// Map lineIdx to row: 0 → header (row 0), 2+ → body (row 1+)
+			const row = lineIdx === 0 ? 0 : lineIdx - 1;
+
+			// Find which column the cursor is in by counting unescaped pipes
+			const offsetInLine = pos - lineStart;
+			const lineText = lines[lineIdx];
+			const hasLeadingPipe = lineText.trimStart().startsWith('|');
+
+			// If the line has a leading pipe, cursor before it is col -1 (not in a cell yet).
+			// If no leading pipe, cursor starts in col 0 (already in the first cell).
+			let col = hasLeadingPipe ? -1 : 0;
+
+			for (let i = 0; i < offsetInLine; i++) {
+				if (isUnescapedPipe(lineText, i)) {
+					col++;
+				}
+			}
+
+			if (col < 0) col = 0;
+
+			// Count total columns: number of unescaped pipes + 1 if no leading pipe,
+			// or pipes - 1 if there are leading/trailing pipes
+			let totalPipes = 0;
+			for (let i = 0; i < lineText.length; i++) {
+				if (isUnescapedPipe(lineText, i)) {
+					totalPipes++;
+				}
+			}
+			const hasTrailingPipe = lineText.trimEnd().endsWith('|');
+			let totalCols: number;
+			if (hasLeadingPipe && hasTrailingPipe) {
+				totalCols = Math.max(1, totalPipes - 1);
+			} else if (!hasLeadingPipe && !hasTrailingPipe) {
+				totalCols = totalPipes + 1;
+			} else {
+				totalCols = totalPipes;
+			}
+			if (col >= totalCols) col = totalCols - 1;
+
+			return { row, col };
+		}
+
+		// +1 for the newline character
+		currentPos = lineEnd + 1;
+	}
+
+	return null;
+};
+
+// Find the document offset for the content of a specific cell.
+// Returns the position right after the leading space inside the cell.
+export const getCellContentPosition = (
+	_state: EditorState,
+	tableRange: TableRange,
+	row: number,
+	col: number,
+): number | null => {
+	const lines = tableRange.text.split('\n');
+
+	// Map row to line index: row 0 → line 0, row 1+ → line (row+1), skipping delimiter
+	const lineIdx = row === 0 ? 0 : row + 1;
+	if (lineIdx >= lines.length) return null;
+
+	const lineText = lines[lineIdx];
+	const hasLeadingPipe = lineText.trimStart().startsWith('|');
+	let charIdx = 0;
+
+	if (hasLeadingPipe) {
+		// Standard format: | A | B | — find the (col)th pipe and skip past it
+		let pipeCount = 0;
+		for (; charIdx < lineText.length; charIdx++) {
+			if (isUnescapedPipe(lineText, charIdx)) {
+				if (pipeCount === col) {
+					charIdx++;
+					while (charIdx < lineText.length && lineText[charIdx] === ' ') charIdx++;
+					break;
+				}
+				pipeCount++;
+			}
+		}
+	} else {
+		// No leading pipe: A | B — cells are separated by pipes
+		if (col === 0) {
+			// First cell starts at the beginning of the line (skip whitespace)
+			while (charIdx < lineText.length && lineText[charIdx] === ' ') charIdx++;
+		} else {
+			// Find the (col-1)th pipe separator and skip past it
+			let pipeCount = 0;
+			for (; charIdx < lineText.length; charIdx++) {
+				if (isUnescapedPipe(lineText, charIdx)) {
+					if (pipeCount === col - 1) {
+						charIdx++;
+						while (charIdx < lineText.length && lineText[charIdx] === ' ') charIdx++;
+						break;
+					}
+					pipeCount++;
+				}
+			}
+		}
+	}
+
+	// Calculate absolute position
+	let lineStart = tableRange.from;
+	for (let i = 0; i < lineIdx; i++) {
+		lineStart += lines[i].length + 1; // +1 for newline
+	}
+
+	return lineStart + charIdx;
+};
+
+// Get the total number of rows and columns in a table.
+const getTableDimensions = (tableRange: TableRange): { rows: number; cols: number } | null => {
+	const table = parseTable(tableRange.text);
+	if (!table) return null;
+
+	return {
+		rows: 1 + table.body.length, // header + body rows
+		cols: table.header.cells.length,
+	};
+};
+
+// ---------------------------------------------------------------------------
+// Table editing commands
+// ---------------------------------------------------------------------------
+
+// Replace the table text in the document with new table text,
+// and move the cursor to the specified cell.
+const replaceTableAndMoveCursor = (
+	view: EditorView,
+	tableRange: TableRange,
+	newTableText: string,
+	targetRow: number,
+	targetCol: number,
+): boolean => {
+	view.dispatch({
+		changes: {
+			from: tableRange.from,
+			to: tableRange.to,
+			insert: newTableText,
+		},
+	});
+
+	// After dispatching, find the new cell position
+	const newRange: TableRange = {
+		from: tableRange.from,
+		to: tableRange.from + newTableText.length,
+		text: newTableText,
+	};
+
+	const cellPos = getCellContentPosition(view.state, newRange, targetRow, targetCol);
+	if (cellPos !== null) {
+		view.dispatch({
+			selection: { anchor: cellPos, head: cellPos },
+		});
+	}
+
+	return true;
+};
+
+// Add a row below the current cursor position.
+export const tableAddRow = (view: EditorView): boolean => {
+	const tableRange = getTableRangeAtCursor(view.state);
+	if (!tableRange) return false;
+
+	const table = parseTable(tableRange.text);
+	if (!table) return false;
+
+	const cell = getCellAtCursor(view.state, tableRange);
+	if (!cell) return false;
+
+	// Determine which body row to insert after
+	// row 0 = header → insert at body index 0 (afterIndex = -1)
+	// row 1 = first body row → insert after body index 0
+	const bodyRowIndex = cell.row === 0 ? -1 : cell.row - 1;
+	const newTable = addRow(table, bodyRowIndex);
+	const newText = serializeTable(newTable);
+
+	// Move cursor to the new row
+	const newRowIndex = cell.row === 0 ? 1 : cell.row + 1;
+	return replaceTableAndMoveCursor(view, tableRange, newText, newRowIndex, 0);
+};
+
+// Add a column to the right of the current cursor position.
+export const tableAddColumn = (view: EditorView): boolean => {
+	const tableRange = getTableRangeAtCursor(view.state);
+	if (!tableRange) return false;
+
+	const table = parseTable(tableRange.text);
+	if (!table) return false;
+
+	const cell = getCellAtCursor(view.state, tableRange);
+	if (!cell) return false;
+
+	const newTable = addColumn(table, cell.col);
+	const newText = serializeTable(newTable);
+
+	return replaceTableAndMoveCursor(view, tableRange, newText, cell.row, cell.col + 1);
+};
+
+// Delete the current row.
+// If the cursor is on the header row, the entire table is deleted.
+// If deleting the row would leave no body rows, the table is still valid (header only).
+export const tableDeleteRow = (view: EditorView): boolean => {
+	const tableRange = getTableRangeAtCursor(view.state);
+	if (!tableRange) return false;
+
+	const table = parseTable(tableRange.text);
+	if (!table) return false;
+
+	const cell = getCellAtCursor(view.state, tableRange);
+	if (!cell) return false;
+
+	if (cell.row === 0) {
+		// Delete entire table when on header row
+		view.dispatch({
+			changes: { from: tableRange.from, to: tableRange.to, insert: '' },
+		});
+		return true;
+	}
+
+	const bodyRowIndex = cell.row - 1;
+	const newTable = deleteRow(table, bodyRowIndex);
+	if (!newTable) return false;
+
+	const newText = serializeTable(newTable);
+
+	// Move cursor to previous row or header
+	const newRow = Math.min(cell.row, newTable.body.length);
+	return replaceTableAndMoveCursor(view, tableRange, newText, newRow, cell.col);
+};
+
+// Delete the current column.
+// Returns false (no-op) if it would delete the last column.
+export const tableDeleteColumn = (view: EditorView): boolean => {
+	const tableRange = getTableRangeAtCursor(view.state);
+	if (!tableRange) return false;
+
+	const table = parseTable(tableRange.text);
+	if (!table) return false;
+
+	const cell = getCellAtCursor(view.state, tableRange);
+	if (!cell) return false;
+
+	const newTable = deleteColumn(table, cell.col);
+	if (!newTable) return false;
+
+	const newText = serializeTable(newTable);
+
+	// Move cursor to previous column or stay at same position
+	const newCol = Math.min(cell.col, newTable.header.cells.length - 1);
+	return replaceTableAndMoveCursor(view, tableRange, newText, cell.row, newCol);
+};
+
+// Move the cursor to the next cell (Tab behavior).
+// If at the last cell of the last row, add a new row.
+export const tableNextCell = (view: EditorView): boolean => {
+	const tableRange = getTableRangeAtCursor(view.state);
+	if (!tableRange) return false;
+
+	const dims = getTableDimensions(tableRange);
+	if (!dims) return false;
+
+	const cell = getCellAtCursor(view.state, tableRange);
+	if (!cell) return false;
+
+	let nextRow = cell.row;
+	let nextCol = cell.col + 1;
+
+	if (nextCol >= dims.cols) {
+		nextCol = 0;
+		nextRow++;
+	}
+
+	// If we've gone past the last row, add a new row
+	if (nextRow >= dims.rows) {
+		const table = parseTable(tableRange.text);
+		if (!table) return false;
+
+		const newTable = addRow(table, table.body.length - 1);
+		const newText = serializeTable(newTable);
+		return replaceTableAndMoveCursor(view, tableRange, newText, nextRow, 0);
+	}
+
+	// Move cursor to the target cell
+	const cellPos = getCellContentPosition(view.state, tableRange, nextRow, nextCol);
+	if (cellPos === null) return false;
+
+	view.dispatch({
+		selection: { anchor: cellPos, head: cellPos },
+	});
+	return true;
+};
+
+// Move the cursor to the previous cell (Shift+Tab behavior).
+export const tablePreviousCell = (view: EditorView): boolean => {
+	const tableRange = getTableRangeAtCursor(view.state);
+	if (!tableRange) return false;
+
+	const dims = getTableDimensions(tableRange);
+	if (!dims) return false;
+
+	const cell = getCellAtCursor(view.state, tableRange);
+	if (!cell) return false;
+
+	let prevRow = cell.row;
+	let prevCol = cell.col - 1;
+
+	if (prevCol < 0) {
+		prevRow--;
+		prevCol = dims.cols - 1;
+	}
+
+	// Can't go before the first cell of the header
+	if (prevRow < 0) return false;
+
+	const cellPos = getCellContentPosition(view.state, tableRange, prevRow, prevCol);
+	if (cellPos === null) return false;
+
+	view.dispatch({
+		selection: { anchor: cellPos, head: cellPos },
+	});
+	return true;
+};