@zuilib/text-editor 0.3.0 → 0.4.0

package/CHANGELOG.md

@@ -1,5 +1,40 @@
 # Changelog — @zuilib/text-editor
 
+## 0.4.0
+
+- **Table density**, Slab-style: the floating table toolbar (caret in a
+  table) gains *compact* / *comfortable* (default) / *spacious* row padding
+  and font size, next to the width toggle
+- The settings comment above a GFM table now lists every non-default
+  setting, e.g. `<!-- width: content; density: compact -->`; the 0.3.1
+  `<!-- width: content -->` form is unchanged for width-only tables
+- `useMarkdownEditor()` gains `tableDensity` / `setTableDensity`
+- New exports: `TableDensity`, `TableSettings`, `DEFAULT_TABLE_SETTINGS`,
+  `$getTableSettings` / `$setTableSettings`, `$getTableDensity` /
+  `$setTableDensity`, `parseTableSettingsMarker` /
+  `formatTableSettingsMarker`. `TABLE_WIDTH_MARKER` is deprecated in favour
+  of `formatTableSettingsMarker`
+
+## 0.3.1
+
+- **Block width** for tables and drawings: switch any table or drawing
+  between *full width* (spans the editor, the previous behaviour) and
+  *content width* (shrinks to fit its columns / shapes, left-aligned with
+  the text), Slab-style
+  - Tables: a floating toggle docks to the top-right of the table the caret
+    is in; content width sizes columns by their content. Persisted as a
+    `<!-- width: content -->` line directly above the GFM table (hidden by
+    other markdown renderers)
+  - Drawings: toggle at the right end of the canvas toolbar; content width
+    fits the rightmost shape and grows as shapes move. Persisted as a
+    top-level `"width":"content"` field in the ```drawing payload
+    (`DrawingData.width`, `DRAWING_DATA_JSON_SCHEMA` updated; omitted when
+    full, so existing payloads are unchanged)
+  - `useMarkdownEditor()` gains `tableWidth` / `setTableWidth` for custom
+    toolbars
+  - New exports: `BlockWidth`, `$getTableWidth`, `$setTableWidth`,
+    `$getSelectedTable`, `TABLE_WIDTH_MARKER`
+
 ## 0.3.0
 
 - **Custom toolbars**

package/DRAWING_FORMAT.md

@@ -22,8 +22,12 @@ degrades to an empty canvas (invalid shapes are dropped individually).
 
 - Origin `(0,0)` is the canvas's top-left; x grows right, y grows down.
 - Units are CSS pixels.
-- The canvas is as wide as the editor (fluid). Keep shapes within roughly
-  x ∈ [0, 700] to be safe on typical layouts.
+- The canvas is as wide as the editor by default (`width` omitted or
+  `"full"`). Keep shapes within roughly x ∈ [0, 700] to be safe on typical
+  layouts.
+- `"width":"content"` instead sizes the canvas to fit the rightmost shape
+  (plus a margin, never narrower than 240px), left-aligned with the text —
+  use it for small diagrams that shouldn't stretch across the page.
 - `height` is the canvas height in pixels (minimum 80; 300–400 is typical).
 
 ## Top-level object
@@ -32,6 +36,7 @@ degrades to an empty canvas (invalid shapes are dropped individually).
 |-----------|-----------|-----------------------------------------|
 | `version` | `1`       | Literal `1`                             |
 | `height`  | `number`  | Canvas height in px                     |
+| `width`   | `"full"` \| `"content"` | Optional; default `"full"`. `"content"` fits the shapes' extent |
 | `shapes`  | `Shape[]` | Render order: later shapes draw on top  |
 
 ## Shape object

package/README.md

@@ -13,6 +13,8 @@ document outline, and collapsible sections.
   blockquotes, links, fenced code (with syntax highlighting), tables
 - **Tables**: GFM pipe tables, edited in place (tab between cells, ranges,
   inline formatting), styled like Claude artifacts
+- **Table settings**: full/content width and row density per table;
+  diagrams switch between full and content width too — Slab-style
 - **Diagrams**: a drawing canvas embedded in the document — cards with
   attached text slots, bound arrows that follow their cards, elbow and
   multi-waypoint routing, labels, color palettes, dark mode
@@ -96,6 +98,34 @@ 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`.
 
+### Table settings: width and density
+
+Place the caret in a table and a small toolbar floats at its top-right
+corner:
+
+- **Width** — *full* (default: columns share the editor width) or
+  *content* (the table shrinks to fit its columns, left-aligned with the
+  text, never wider than the editor).
+- **Density** — *compact*, *comfortable* (default), or *spacious* cell
+  padding and font size.
+
+Non-default settings are persisted as one HTML comment on the line directly
+above the table — other markdown renderers hide it:
+
+```md
+<!-- width: content; density: compact -->
+| Key | Value |
+| --- | --- |
+| Region | eu-west-1 |
+```
+
+Programmatic access: `useMarkdownEditor().tableWidth` / `setTableWidth` and
+`tableDensity` / `setTableDensity` (for custom toolbars), or
+`$getTableSettings(node)` / `$setTableSettings(node, { width, density })`
+inside `editor.update`. `parseTableSettingsMarker` /
+`formatTableSettingsMarker` convert between the comment line and a
+`TableSettings` object.
+
 ## Toolbar & custom toolbars
 
 In `edit-md` mode a toolbar offers inline formatting (bold, italic,
@@ -179,8 +209,10 @@ function BoldButton() {
 ```
 
 It returns `editor` (the Lexical instance), `activeFormats`,
-`toggleFormat`, `insertTable`, `insertDrawing`, `canUndo`, `canRedo`,
-`undo`, `redo`.
+`toggleFormat`, `insertTable`, `insertDrawing`, `tableWidth` /
+`setTableWidth` and `tableDensity` / `setTableDensity` (settings of the
+table containing the selection, `null` outside tables), `canUndo`,
+`canRedo`, `undo`, `redo`.
 
 ## Diagrams (drawing canvas)
 
@@ -203,6 +235,10 @@ in the markdown as a ` ```drawing ` fenced JSON block, fully specified in
   bends). One-way / two-way arrowhead toggle; midpoint **labels**.
 - **Canvas**: resizable height, dot grid, white surface that inverts
   Excalidraw-style in dark mode (`.dark` ancestor class).
+- **Width**: the toggle at the right end of the canvas toolbar switches
+  between **full width** (spans the editor) and **content width** (the
+  canvas fits the rightmost shape and grows as shapes move). Stored as
+  `"width":"content"` in the payload; omitted when full.
 
 ## Outline & section folding
 
@@ -241,6 +277,9 @@ diagrams:
 | `Toolbar`, `ToolbarButton`, `ToolbarDivider`, `FormatButtons`, `InsertButtons`, `HistoryButtons` | Toolbar primitives |
 | `@zuilib/text-editor/styles.css` | Editor chrome + theme styles (required) |
 | `TABLE` | GFM table markdown transformer |
+| `BlockWidth`, `TableDensity`, `TableSettings`, `DEFAULT_TABLE_SETTINGS` | Table setting types |
+| `$getTableSettings`, `$setTableSettings`, `$getTableWidth`, `$setTableWidth`, `$getTableDensity`, `$setTableDensity`, `$getSelectedTable` | Table setting helpers (inside `editor.update`/`read`) |
+| `parseTableSettingsMarker`, `formatTableSettingsMarker` | Marker comment ⇄ `TableSettings` |
 | `DRAWING`, `DrawingNode`, `$createDrawingNode`, `$isDrawingNode` | Drawing node + markdown transformer |
 | `FRONTMATTER`, `FrontmatterNode`, `$createFrontmatterNode`, `$isFrontmatterNode` | Frontmatter node + transformer |
 | `DrawingData`, `DrawingShape`, `DrawingShapeType` | Drawing payload types |

package/dist/index.d.ts

@@ -1,6 +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 { MultilineElementTransformer, ElementTransformer } from '@lexical/markdown';
 
 type EditorMode = 'edit-raw' | 'edit-md' | 'view';
@@ -40,6 +41,35 @@ declare function EditorContent({ placeholder, foldable, children, }: EditorConte
  */
 declare function OutlinePlugin(): ReactElement;
 
+/**
+ * Horizontal sizing of a block that would otherwise span the editor:
+ * `full` stretches to the content column, `content` shrinks to fit what is
+ * inside (table columns, drawing shapes) and left-aligns with the text.
+ */
+type BlockWidth = 'full' | 'content';
+
+/** Cell padding / font size preset */
+type TableDensity = 'compact' | 'comfortable' | 'spacious';
+type TableSettings = Readonly<{
+    width: BlockWidth;
+    density: TableDensity;
+}>;
+declare const DEFAULT_TABLE_SETTINGS: TableSettings;
+declare function $getTableSettings(table: TableNode): TableSettings;
+declare function $setTableSettings(table: TableNode, settings: Partial<TableSettings>): void;
+declare function $getTableWidth(table: TableNode): BlockWidth;
+declare function $setTableWidth(table: TableNode, width: BlockWidth): void;
+declare function $getTableDensity(table: TableNode): TableDensity;
+declare function $setTableDensity(table: TableNode, density: TableDensity): void;
+/** The table containing the current selection (caret or cell range), if any */
+declare function $getSelectedTable(): TableNode | null;
+/** @deprecated Use `formatTableSettingsMarker({ ...DEFAULT_TABLE_SETTINGS, width: 'content' })` */
+declare const TABLE_WIDTH_MARKER = "<!-- width: content -->";
+/** Settings encoded in a marker line, or null if the text is not a marker */
+declare function parseTableSettingsMarker(text: string): Partial<TableSettings> | null;
+/** Marker line for the given settings, or null when everything is default */
+declare function formatTableSettingsMarker(settings: TableSettings): string | null;
+
 type MarkdownEditorApi = Readonly<{
     /** The underlying Lexical editor, for dispatching your own commands */
     editor: LexicalEditor;
@@ -51,6 +81,14 @@ type MarkdownEditorApi = Readonly<{
         columns?: number;
     }) => void;
     insertDrawing: () => void;
+    /** Width of the table containing the selection; `null` outside tables */
+    tableWidth: BlockWidth | null;
+    /** Resize the table containing the selection; no-op outside tables */
+    setTableWidth: (width: BlockWidth) => void;
+    /** Density of the table containing the selection; `null` outside tables */
+    tableDensity: TableDensity | null;
+    /** Change the density of the table containing the selection; no-op outside tables */
+    setTableDensity: (density: TableDensity) => void;
     canUndo: boolean;
     canRedo: boolean;
     undo: () => void;
@@ -213,6 +251,11 @@ type DrawingShape = Readonly<{
 type DrawingData = Readonly<{
     version: 1;
     height: number;
+    /**
+     * Canvas width: `full` (default, omitted when serialized) spans the editor;
+     * `content` fits the shapes' horizontal extent.
+     */
+    width?: BlockWidth;
     shapes: readonly DrawingShape[];
 }>;
 declare function serializeDrawingData(data: DrawingData): string;
@@ -257,6 +300,9 @@ declare const DRAWING: MultilineElementTransformer;
  * Markdown transformer for GFM tables. Adapted from the Lexical playground.
  * Rows are matched line-by-line on import and stitched into a single
  * TableNode; the divider row promotes the row above it to a header row.
+ * A `<!-- width: content; density: compact -->` settings line directly
+ * above the table (see tableSettings.ts) is consumed on import and
+ * re-emitted on export.
  */
 declare const TABLE: ElementTransformer;
 
@@ -282,7 +328,11 @@ declare const DRAWING_DATA_JSON_SCHEMA: {
         readonly height: {
             readonly type: "number";
             readonly minimum: 80;
-            readonly description: "Canvas height in pixels (width is fluid)";
+            readonly description: "Canvas height in pixels";
+        };
+        readonly width: {
+            readonly enum: readonly ["full", "content"];
+            readonly description: "Canvas width: \"full\" (default) spans the editor; \"content\" fits the shapes' horizontal extent and left-aligns with the text";
         };
         readonly shapes: {
             readonly type: "array";
@@ -392,4 +442,4 @@ declare const DRAWING_DATA_JSON_SCHEMA: {
     };
 };
 
-export { $createDrawingNode, $createFrontmatterNode, $isDrawingNode, $isFrontmatterNode, DRAWING, DRAWING_DATA_JSON_SCHEMA, type DrawingData, DrawingNode, type DrawingShape, type DrawingShapeType, type EditorContentProps, type EditorMode, type EditorRootProps, FRONTMATTER, FormatButtons, FrontmatterNode, HistoryButtons, InsertButtons, MarkdownEditor, type MarkdownEditorApi, type Props as MarkdownEditorProps, type SerializedDrawingNode, type SerializedFrontmatterNode, TABLE, Toolbar, ToolbarButton, ToolbarDivider, type ToolbarItems, parseDrawingData, serializeDrawingData, useMarkdownEditor };
+export { $createDrawingNode, $createFrontmatterNode, $getSelectedTable, $getTableDensity, $getTableSettings, $getTableWidth, $isDrawingNode, $isFrontmatterNode, $setTableDensity, $setTableSettings, $setTableWidth, type BlockWidth, DEFAULT_TABLE_SETTINGS, DRAWING, DRAWING_DATA_JSON_SCHEMA, type DrawingData, DrawingNode, type DrawingShape, type DrawingShapeType, type EditorContentProps, type EditorMode, type EditorRootProps, FRONTMATTER, FormatButtons, FrontmatterNode, HistoryButtons, InsertButtons, MarkdownEditor, type MarkdownEditorApi, type Props as MarkdownEditorProps, type SerializedDrawingNode, type SerializedFrontmatterNode, TABLE, TABLE_WIDTH_MARKER, type TableDensity, type TableSettings, Toolbar, ToolbarButton, ToolbarDivider, type ToolbarItems, formatTableSettingsMarker, parseDrawingData, parseTableSettingsMarker, serializeDrawingData, useMarkdownEditor };