@zuilib/text-editor 0.9.0 → 0.10.1

package/CHANGELOG.md

@@ -1,5 +1,44 @@
 # Changelog — @zuilib/text-editor
 
+## 0.10.1
+
+- **Table columns** get the same rail as rows: a strip along the table's
+  top edge with a bar on the caret's column and a `+` handle after the
+  last column that snaps to column boundaries while hovered
+- **Deleting moves onto the rails.** The handle follows the pointer: near a
+  boundary it is a `+` (insert; hover previews the line), over the middle
+  of a row / column it is a `−` that removes it (hover tints what goes).
+  The three row buttons added to the floating toolbar in 0.10.0 are gone
+- The layout toolbar now floats **above the table**, stacked over the
+  column rail at the top-right corner
+- `useMarkdownEditor()`: `tableRow` is now `tableCell` (`{ row, column,
+  rows, columns, hasHeader }`); adds `insertTableColumn(position)` and
+  `deleteTableColumn()`. Node helpers: `$getTableCellPosition` (was
+  `$getTableRowPosition`), `$insertTableColumnAt`, `$deleteTableColumnAt`,
+  `$insertTableColumnNear`, `$deleteSelectedTableColumn`,
+  `insertableColumnIndices`, `canDeleteColumn`
+
+## 0.10.0
+
+- **Table rows.** Put the caret in a table and a **row rail** appears along
+  its left edge: a bar marks the caret's row, and a `+` handle rests under
+  the last row (click to append). Move over the rail and the handle snaps
+  to the nearest row boundary; hovering it draws the insertion line across
+  the table. The floating table toolbar gains **insert row above / below**
+  and **delete row**. Keyboard: `⌘↩` / `Ctrl+Enter` inserts below,
+  `⌘⇧↩` above, `⌘⇧⌫` deletes the row, and **Tab in the last cell appends
+  a row** instead of leaving the table
+- Rows follow GFM's shape: nothing is inserted above the header row, and
+  deleting the header promotes the next row so the markdown keeps its
+  divider; the last remaining row can't be deleted
+- `useMarkdownEditor()` adds `tableRow` (index, column, count, hasHeader),
+  `insertTableRow(position)` and `deleteTableRow()`. Node-level helpers
+  `$getTableRowPosition`, `$insertTableRowAt`, `$deleteTableRowAt`,
+  `$insertTableRowNear`, `$deleteSelectedTableRow`, `insertableRowIndices`
+  and `canDeleteRow` are exported for custom toolbars
+- Rail and toolbar use the theme tokens (`--primary`, `--popover`,
+  `--border`, `--shadow-medium`); motion respects `prefers-reduced-motion`
+
 ## 0.9.0
 
 - **Ink drawing style**: `drawingStyle="ink"` on the editor renders shapes

package/README.md

@@ -12,6 +12,7 @@ document outline, and collapsible sections.
 - **Markdown shortcuts** while typing: headings, lists, checklists,
   blockquotes, links, fenced code (with syntax highlighting), tables
 - **Tables**: GFM pipe tables, edited in place (tab between cells, ranges,
+  add / remove rows and columns from hover rails or the keyboard,
   inline formatting), styled like Claude artifacts
 - **Text measure and block width**: an opt-in readable text column
   (`measure="48rem"`); each table and diagram picks *full* / *text* /
@@ -104,9 +105,42 @@ Editing is in place: Tab/arrows between cells, cell range selection, inline
 formatting inside cells. Cell content is single-line in markdown; newlines
 are escaped as `\n`.
 
+### Rows and columns
+
+Click into a table and two slim **rails** appear: one along its left edge
+for rows, one along its top edge for columns. A bar on each marks the row
+and column the caret is in, and a `+` handle rests after the last row /
+column: click it to append one. Move the pointer over a rail and the handle
+follows it — near a boundary it is a `+` that inserts there (hovering it
+previews the insertion as a line across the table), over the middle of a
+row or column it becomes a `−` that removes it (hovering tints what will
+go). The caret moves into whatever was inserted.
+
+Keyboard, inside a table:
+
+| Shortcut | Action |
+| --- | --- |
+| `⌘↩` / `Ctrl+Enter` | Insert row below |
+| `⌘⇧↩` / `Ctrl+Shift+Enter` | Insert row above |
+| `⌘⇧⌫` / `Ctrl+Shift+Backspace` | Delete row |
+| `Tab` in the last cell | Append a row |
+
+GFM tables have exactly one header row, the first, so nothing is inserted
+above it (`above` there inserts right below the header), deleting the
+header row makes the next row the header, and a new column gets a header
+cell. The last remaining row or column can't be deleted.
+
+Programmatic access: `useMarkdownEditor().tableCell` (`{ row, column,
+rows, columns, hasHeader }` or `null`), `insertTableRow('above' | 'below')`,
+`deleteTableRow()`, `insertTableColumn('before' | 'after')` and
+`deleteTableColumn()`; or, inside `editor.update`, `$insertTableRowAt(table,
+index)`, `$deleteTableRowAt(table, index)`, `$insertTableColumnAt(table,
+index)`, `$deleteTableColumnAt(table, index)` and their `*Near` /
+`$deleteSelected*` selection-relative forms.
+
 ### Table density
 
-Place the caret in a table and a small toolbar floats at its top-right
+Place the caret in a table and a small toolbar floats above its top-right
 corner with the table's width (see [Block width and text
 measure](#block-width-and-text-measure)) and its **density** — *compact*,
 *comfortable* (default), or *spacious* cell padding and font size.
@@ -272,7 +306,8 @@ It returns `editor` (the Lexical instance), `activeFormats`,
 `toggleFormat`, `insertTable`, `insertDrawing`, `blockWidth` /
 `setBlockWidth` (width of the table or drawing containing the selection,
 `null` outside both), `tableDensity` / `setTableDensity` (`null` outside
-tables), `canUndo`, `canRedo`, `undo`, `redo`. `tableWidth` /
+tables), `tableCell` / `insertTableRow` / `deleteTableRow` / `insertTableColumn` /
+`deleteTableColumn` (see [Rows and columns](#rows-and-columns)), `canUndo`, `canRedo`, `undo`, `redo`. `tableWidth` /
 `setTableWidth` remain as deprecated aliases limited to tables.
 
 ## Diagrams (drawing canvas)

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ReactNode, ReactElement } from 'react';
 import { LexicalEditor, TextFormatType, ElementNode, NodeKey, EditorConfig, SerializedElementNode, LexicalNode, DecoratorNode, Spread, SerializedLexicalNode, DOMExportOutput, DOMConversionMap } from 'lexical';
-import { TableNode } from '@lexical/table';
+import { TableNode, TableCellNode, TableRowNode } from '@lexical/table';
 import { MultilineElementTransformer, ElementTransformer } from '@lexical/markdown';
 import { registerCodeHighlighting } from '@lexical/code';
 
@@ -265,6 +265,77 @@ declare function parseTableSettingsMarker(text: string): Partial<TableSettings>
  */
 declare function formatTableSettingsMarker(settings: TableSettings, options?: TableSettingsOptions): string | null;
 
+/**
+ * Row and column operations for GFM tables. Markdown tables have no merged
+ * cells, every row has the same number of cells and there is exactly one
+ * header row (the first), so these helpers work on plain indices and keep
+ * that shape: a row can't be inserted above the header, deleting the
+ * header promotes the row below it, and new cells in the header row are
+ * header cells.
+ */
+/** Where the selection sits in its table */
+type TableCellPosition = Readonly<{
+    /** Row index of the caret (or of the anchor cell of a cell range) */
+    row: number;
+    /** Column index of that cell */
+    column: number;
+    /** Number of rows in the table */
+    rows: number;
+    /** Number of columns in the table */
+    columns: number;
+    /** Whether the first row is a header row */
+    hasHeader: boolean;
+}>;
+/** The cell containing the selection (caret or the anchor of a cell range) */
+declare function $getSelectedTableCell(): TableCellNode | null;
+/** Where the selection sits in its table, or null outside tables */
+declare function $getTableCellPosition(): TableCellPosition | null;
+/**
+ * The row boundaries a new row may be inserted at: `0..rows`, minus `0`
+ * when the first row is a header (a table's header is always its first row).
+ */
+declare function insertableRowIndices(position: Pick<TableCellPosition, 'rows' | 'hasHeader'>): number[];
+/** A row can be removed as long as one row stays */
+declare function canDeleteRow(position: Pick<TableCellPosition, 'rows'>): boolean;
+/**
+ * Insert an empty row so that it becomes row `index` (`0` = first, `rows`
+ * = last). Column header state is copied from the row above; the header
+ * row itself is never displaced, so `index` is clamped to `1` when the
+ * table has a header. The caret moves into the new row, at `column`.
+ */
+declare function $insertTableRowAt(table: TableNode, index: number, column?: number): TableRowNode;
+/**
+ * Remove row `index`. No-op on a single-row table (see `canDeleteRow`).
+ * Removing the header row makes the next row the header so the markdown
+ * keeps its divider. The caret moves to the row that takes the removed
+ * row's place (or the last row), at `column`.
+ */
+declare function $deleteTableRowAt(table: TableNode, index: number, column?: number): boolean;
+/** Insert a row next to the selection's row. Returns the new row, or null outside tables. */
+declare function $insertTableRowNear(table: TableNode, position: 'above' | 'below'): TableRowNode | null;
+/** Remove the selection's row. Returns false when nothing was removed. */
+declare function $deleteSelectedTableRow(table: TableNode): boolean;
+/** The column boundaries a new column may be inserted at: `0..columns` */
+declare function insertableColumnIndices(position: Pick<TableCellPosition, 'columns'>): number[];
+/** A column can be removed as long as one column stays */
+declare function canDeleteColumn(position: Pick<TableCellPosition, 'columns'>): boolean;
+/**
+ * Insert an empty column so that it becomes column `index` (`0` = first,
+ * `columns` = last). Cells in the header row are header cells. The caret
+ * moves into the new column, at `row`.
+ */
+declare function $insertTableColumnAt(table: TableNode, index: number, row?: number): void;
+/**
+ * Remove column `index`. No-op on a single-column table (see
+ * `canDeleteColumn`). The caret moves to the column that takes the removed
+ * column's place (or the last column), at `row`.
+ */
+declare function $deleteTableColumnAt(table: TableNode, index: number, row?: number): boolean;
+/** Insert a column next to the selection's column; no-op outside tables. */
+declare function $insertTableColumnNear(table: TableNode, position: 'before' | 'after'): boolean;
+/** Remove the selection's column. Returns false when nothing was removed. */
+declare function $deleteSelectedTableColumn(table: TableNode): boolean;
+
 type MarkdownEditorApi = Readonly<{
     /** The underlying Lexical editor, for dispatching your own commands */
     editor: LexicalEditor;
@@ -310,6 +381,26 @@ type MarkdownEditorApi = Readonly<{
     tableDensity: TableDensity | null;
     /** Change the density of the table containing the selection; no-op outside tables */
     setTableDensity: (density: TableDensity) => void;
+    /** The selection's cell in its table (row, column, counts, header); `null` outside tables */
+    tableCell: TableCellPosition | null;
+    /**
+     * Insert an empty row next to the selection's row (default `below`) and
+     * move the caret into it; no-op outside tables. A row is never inserted
+     * above the header row: `above` there inserts right below it.
+     */
+    insertTableRow: (position?: 'above' | 'below') => void;
+    /**
+     * Remove the selection's row; no-op outside tables and on the last
+     * remaining row. Deleting the header row makes the next row the header.
+     */
+    deleteTableRow: () => void;
+    /**
+     * Insert an empty column next to the selection's column (default
+     * `after`) and move the caret into it; no-op outside tables.
+     */
+    insertTableColumn: (position?: 'before' | 'after') => void;
+    /** Remove the selection's column; no-op outside tables and on the last remaining column. */
+    deleteTableColumn: () => void;
     canUndo: boolean;
     canRedo: boolean;
     undo: () => void;
@@ -1302,4 +1393,4 @@ declare const codeTokenizer: LexicalTokenizer;
  */
 declare function registerCodeBlockHighlighting(editor: LexicalEditor): () => void;
 
-export { $createDrawingNode, $createFrontmatterNode, $getSelectedTable, $getTableDensity, $getTableSettings, $getTableWidth, $isDrawingNode, $isFrontmatterNode, $isTableWidthExplicit, $setTableDensity, $setTableSettings, $setTableWidth, BLOCK_WIDTHS, BOX_DEFINITIONS, BOX_TYPES, BUILTIN_CODE_LANGUAGES, type Binding, type BindingSide, type BlockWidth, type BlockWidthDefaults, type BoxDefinition, type BoxType, CODE_BLOCK, CODE_TOKEN_TYPES, COLOR_PRESETS, CONNECTOR_TYPES, type CodeGrammar, type CodeRule, type CodeToken, type CodeTokenType, type ColorName, type ConnectorType, DEFAULT_TABLE_SETTINGS, DIAGRAM, DRAWING, DRAWING_DATA_JSON_SCHEMA, DRAWING_SKELETON_JSON_SCHEMA, type DrawingData, DrawingNode, type DrawingShape, type DrawingShapeType, type DrawingSkeleton, type DrawingStyle, EMPTY_DRAWING, type EditorContentProps, type EditorMode, type EditorRootProps, FILL_COLORS, FRONTMATTER, FormatButtons, FrontmatterNode, HistoryButtons, type InkOptions, type InkStroke, InsertButtons, MarkdownEditor, type MarkdownEditorApi, type Props as MarkdownEditorProps, type MermaidDirection, type MermaidOptions, PLAIN_LANGUAGE, type Point, SHAPE_TYPES, SIDE_FIXED_POINTS, STROKE_COLORS, type SerializedDrawingNode, type SerializedFrontmatterNode, type SkeletonBox, type SkeletonConnector, type SkeletonEnd, type SkeletonText, TABLE, TABLE_WIDTH_MARKER, type TableDensity, type TableSettings, type TableSettingsOptions, type TextField, Toolbar, ToolbarButton, ToolbarDivider, type ToolbarItems, anchorPoint, bindEndpoints, boxOutline, codeTokenizer, connectorPoints, drawingToMermaid, expandSkeleton, findBoxAt, fixedPointFor, formatTableSettingsMarker, getCodeLanguages, hasCodeLanguage, inkAmplitude, inkFillOffset, inkStroke, isBlockWidth, isDrawingSkeleton, makeBinding, normalizeDrawingData, parseDrawingData, parseDrawingSkeleton, parseTableSettingsMarker, registerCodeBlockHighlighting, registerCodeLanguage, resolveBindings, resolveCodeLanguage, roundedPolyline, roundedRectPolygon, routeElbow, seedFrom, serializeDrawingData, tokenizeCode, useMarkdownEditor };
+export { $createDrawingNode, $createFrontmatterNode, $deleteSelectedTableColumn, $deleteSelectedTableRow, $deleteTableColumnAt, $deleteTableRowAt, $getSelectedTable, $getSelectedTableCell, $getTableCellPosition, $getTableDensity, $getTableSettings, $getTableWidth, $insertTableColumnAt, $insertTableColumnNear, $insertTableRowAt, $insertTableRowNear, $isDrawingNode, $isFrontmatterNode, $isTableWidthExplicit, $setTableDensity, $setTableSettings, $setTableWidth, BLOCK_WIDTHS, BOX_DEFINITIONS, BOX_TYPES, BUILTIN_CODE_LANGUAGES, type Binding, type BindingSide, type BlockWidth, type BlockWidthDefaults, type BoxDefinition, type BoxType, CODE_BLOCK, CODE_TOKEN_TYPES, COLOR_PRESETS, CONNECTOR_TYPES, type CodeGrammar, type CodeRule, type CodeToken, type CodeTokenType, type ColorName, type ConnectorType, DEFAULT_TABLE_SETTINGS, DIAGRAM, DRAWING, DRAWING_DATA_JSON_SCHEMA, DRAWING_SKELETON_JSON_SCHEMA, type DrawingData, DrawingNode, type DrawingShape, type DrawingShapeType, type DrawingSkeleton, type DrawingStyle, EMPTY_DRAWING, type EditorContentProps, type EditorMode, type EditorRootProps, FILL_COLORS, FRONTMATTER, FormatButtons, FrontmatterNode, HistoryButtons, type InkOptions, type InkStroke, InsertButtons, MarkdownEditor, type MarkdownEditorApi, type Props as MarkdownEditorProps, type MermaidDirection, type MermaidOptions, PLAIN_LANGUAGE, type Point, SHAPE_TYPES, SIDE_FIXED_POINTS, STROKE_COLORS, type SerializedDrawingNode, type SerializedFrontmatterNode, type SkeletonBox, type SkeletonConnector, type SkeletonEnd, type SkeletonText, TABLE, TABLE_WIDTH_MARKER, type TableCellPosition, type TableDensity, type TableSettings, type TableSettingsOptions, type TextField, Toolbar, ToolbarButton, ToolbarDivider, type ToolbarItems, anchorPoint, bindEndpoints, boxOutline, canDeleteColumn, canDeleteRow, codeTokenizer, connectorPoints, drawingToMermaid, expandSkeleton, findBoxAt, fixedPointFor, formatTableSettingsMarker, getCodeLanguages, hasCodeLanguage, inkAmplitude, inkFillOffset, inkStroke, insertableColumnIndices, insertableRowIndices, isBlockWidth, isDrawingSkeleton, makeBinding, normalizeDrawingData, parseDrawingData, parseDrawingSkeleton, parseTableSettingsMarker, registerCodeBlockHighlighting, registerCodeLanguage, resolveBindings, resolveCodeLanguage, roundedPolyline, roundedRectPolygon, routeElbow, seedFrom, serializeDrawingData, tokenizeCode, useMarkdownEditor };