@zuilib/text-editor 0.10.0 → 0.11.0

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # Changelog — @zuilib/text-editor
 
+## 0.11.0
+
+- Depends on **`@zuilib/tokens`** (optional peer) instead of `@zuilib/core`:
+  the editor only ever consumed the design tokens, never a component.
+  Load `@zuilib/tokens/styles.css` (or `tokens.css` without Tailwind) where
+  you previously loaded `@zuilib/core/styles.css`; without it the editor
+  falls back to its built-in defaults
+- Documented that a Tailwind host must `@source` this package for the
+  document-content classes (headings, lists, code) to be generated
+
+## 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

package/README.md

@@ -12,7 +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,
+  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* /
@@ -36,7 +36,7 @@ frontmatter as `---` blocks. Feature history: [CHANGELOG](./CHANGELOG.md).
 ## Installation
 
 ```bash
-pnpm add @zuilib/text-editor @zuilib/core \
+pnpm add @zuilib/text-editor @zuilib/tokens \
   lexical @lexical/react @lexical/markdown @lexical/rich-text \
   @lexical/code @lexical/list @lexical/link @lexical/table @lexical/utils
 ```
@@ -48,7 +48,7 @@ All `lexical`/`@lexical/*` packages are peer dependencies at `^0.35.0`;
 
 ```tsx
 import { useState } from 'react'
-import '@zuilib/core/styles.css'
+import '@zuilib/tokens/styles.css'
 import '@zuilib/text-editor/styles.css'
 import { MarkdownEditor } from '@zuilib/text-editor'
 
@@ -105,15 +105,16 @@ 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
+### Rows and columns
 
-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.
+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:
 
@@ -125,19 +126,21 @@ Keyboard, inside a table:
 | `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)`.
+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.
@@ -303,8 +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), `tableRow` / `insertTableRow` / `deleteTableRow` (see
-[Rows](#rows)), `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)
@@ -485,10 +488,22 @@ diagrams:
 </FormField>
 ```
 
-Load both CSS entry points (`@zuilib/core/styles.css`,
+Load both CSS entry points (`@zuilib/tokens/styles.css`,
 `@zuilib/text-editor/styles.css`) in the app layout. Dark mode follows the
 ZUI convention: a `dark` class on `<html>`.
 
+`@zuilib/tokens` is an optional peer: the editor's chrome reads the ZUI
+custom properties (`--primary`, `--popover`, `--border`, …) and falls back
+to its own defaults when they are unset. Document content (headings,
+lists, code blocks) is styled with Tailwind utility classes, so a Tailwind
+v4 host must scan this package for them to be generated:
+
+```css
+@import "@zuilib/tokens/styles.css";
+@source "../node_modules/@zuilib/text-editor/dist";
+@import "@zuilib/text-editor/styles.css";
+```
+
 ## Architecture notes (for extenders)
 
 - Source: `src/EditorRoot.tsx` (composer + plugins), `src/EditorContent.tsx`,
@@ -508,7 +523,8 @@ ZUI convention: a `dark` class on `<html>`.
 
 ## Related packages
 
-- `@zuilib/core` — design tokens and base styles
+- `@zuilib/tokens` — design tokens and base styles
+- `@zuilib/components` — the UI primitives (Button, Input, …)
 - `@zuilib/form` — react-hook-form wiring
 
 ## Build & release (maintainers)

package/dist/index.d.ts

@@ -266,55 +266,75 @@ 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.
+ * 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.
  */
-/** 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;
+/** 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 */
-    count: number;
+    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 $getTableRowPosition(): TableRowPosition | null;
+declare function $getTableCellPosition(): TableCellPosition | null;
 /**
- * The row boundaries a new row may be inserted at: `0..count`, minus `0`
+ * 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<TableRowPosition, 'count' | 'hasHeader'>): number[];
+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<TableRowPosition, 'count'>): boolean;
+declare function canDeleteRow(position: Pick<TableCellPosition, 'rows'>): 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).
+ * 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. Selection moves to the same column of the row that
- * takes the removed row's place (or the last row).
+ * 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.
- */
+/** 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 */
@@ -361,8 +381,8 @@ 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;
+    /** 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
@@ -374,6 +394,13 @@ type MarkdownEditorApi = Readonly<{
      * 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;
@@ -1366,4 +1393,4 @@ declare const codeTokenizer: LexicalTokenizer;
  */
 declare function registerCodeBlockHighlighting(editor: LexicalEditor): () => void;
 
-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 };
+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 };