@zuilib/text-editor 0.9.0 → 0.10.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # Changelog — @zuilib/text-editor
 
+## 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 from a hover rail, toolbar or 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,6 +105,36 @@ 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
+
+Click into a table and a slim **row rail** appears along its left edge. A
+bar marks the row the caret is in, and a `+` handle rests under the last row:
+click it to append a row. Move the pointer over the rail and the handle snaps
+to the nearest row boundary — hovering it previews the insertion as a line
+across the table, clicking inserts there and moves the caret into the new
+row. The floating toolbar at the table's top-right corner has **insert row
+above**, **insert row below** and **delete row** for the caret's row.
+
+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) and deleting the
+header row makes the next row the header. The last remaining row can't be
+deleted.
+
+Programmatic access: `useMarkdownEditor().tableRow` (`{ index, column,
+count, hasHeader }` or `null`), `insertTableRow('above' | 'below')` and
+`deleteTableRow()`; or, inside `editor.update`, `$insertTableRowAt(table,
+index)`, `$deleteTableRowAt(table, index)`, `$insertTableRowNear(table,
+position)` and `$deleteSelectedTableRow(table)`.
+
 ### Table density
 
 Place the caret in a table and a small toolbar floats at its top-right
@@ -272,7 +303,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), `tableRow` / `insertTableRow` / `deleteTableRow` (see
+[Rows](#rows)), `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,57 @@ declare function parseTableSettingsMarker(text: string): Partial<TableSettings>
  */
 declare function formatTableSettingsMarker(settings: TableSettings, options?: TableSettingsOptions): string | null;
 
+/**
+ * Row operations for GFM tables. Markdown tables have no merged cells and
+ * exactly one header row (the first), so these helpers work on plain row
+ * indices and keep that invariant: a row can't be inserted above the
+ * header, and deleting the header promotes the row below it.
+ */
+/** Position of the selection inside its table */
+type TableRowPosition = Readonly<{
+    /** Row index of the caret (or the anchor cell of a cell range) */
+    index: number;
+    /** Column index of that cell */
+    column: number;
+    /** Number of rows in the table */
+    count: 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 $getTableRowPosition(): TableRowPosition | null;
+/**
+ * The row boundaries a new row may be inserted at: `0..count`, minus `0`
+ * when the first row is a header (a table's header is always its first row).
+ */
+declare function insertableRowIndices(position: Pick<TableRowPosition, 'count' | 'hasHeader'>): number[];
+/** A row can be removed as long as one row stays */
+declare function canDeleteRow(position: Pick<TableRowPosition, 'count'>): boolean;
+/**
+ * Insert an empty row so that it becomes row `index` (`0` = first,
+ * `count` = last). Column header state is copied from the neighbouring
+ * row; the header row itself is never displaced, so `index` is clamped to
+ * `1` when the table has a header. Returns the new row, selected at its
+ * `column`-th cell (default: the first).
+ */
+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. Selection moves to the same column of the row that
+ * takes the removed row's place (or the last row).
+ */
+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;
+
 type MarkdownEditorApi = Readonly<{
     /** The underlying Lexical editor, for dispatching your own commands */
     editor: LexicalEditor;
@@ -310,6 +361,19 @@ 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 row in its table (index, column, row count); `null` outside tables */
+    tableRow: TableRowPosition | 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;
     canUndo: boolean;
     canRedo: boolean;
     undo: () => void;
@@ -1302,4 +1366,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, $deleteSelectedTableRow, $deleteTableRowAt, $getSelectedTable, $getSelectedTableCell, $getTableDensity, $getTableRowPosition, $getTableSettings, $getTableWidth, $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 TableDensity, type TableRowPosition, type TableSettings, type TableSettingsOptions, type TextField, Toolbar, ToolbarButton, ToolbarDivider, type ToolbarItems, anchorPoint, bindEndpoints, boxOutline, canDeleteRow, codeTokenizer, connectorPoints, drawingToMermaid, expandSkeleton, findBoxAt, fixedPointFor, formatTableSettingsMarker, getCodeLanguages, hasCodeLanguage, inkAmplitude, inkFillOffset, inkStroke, insertableRowIndices, isBlockWidth, isDrawingSkeleton, makeBinding, normalizeDrawingData, parseDrawingData, parseDrawingSkeleton, parseTableSettingsMarker, registerCodeBlockHighlighting, registerCodeLanguage, resolveBindings, resolveCodeLanguage, roundedPolyline, roundedRectPolygon, routeElbow, seedFrom, serializeDrawingData, tokenizeCode, useMarkdownEditor };