@zuilib/text-editor 0.3.0 → 0.3.1

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # Changelog — @zuilib/text-editor
 
+## 0.4.0
+
+- **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
+- **Block width**: tables and diagrams switch between full width and
+  content width, 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,27 @@ 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`.
 
+### Full width vs content width
+
+Tables span the editor by default. Place the caret in a table and a small
+toggle floats at its top-right corner: **full width** (columns share the
+editor width) or **content width** (the table shrinks to fit its columns,
+left-aligned with the text, never wider than the editor). The setting is
+persisted as an HTML comment on the line directly above the table — other
+markdown renderers hide it:
+
+```md
+<!-- width: content -->
+| Key | Value |
+| --- | --- |
+| Region | eu-west-1 |
+```
+
+Programmatic access: `useMarkdownEditor().tableWidth` / `setTableWidth`
+(for custom toolbars), or `$getTableWidth(node)` / `$setTableWidth(node,
+width)` inside `editor.update`. The marker string is exported as
+`TABLE_WIDTH_MARKER`.
+
 ## Toolbar & custom toolbars
 
 In `edit-md` mode a toolbar offers inline formatting (bold, italic,
@@ -179,8 +202,9 @@ function BoldButton() {
 ```
 
 It returns `editor` (the Lexical instance), `activeFormats`,
-`toggleFormat`, `insertTable`, `insertDrawing`, `canUndo`, `canRedo`,
-`undo`, `redo`.
+`toggleFormat`, `insertTable`, `insertDrawing`, `tableWidth` /
+`setTableWidth` (width of the table containing the selection, `null`
+outside tables), `canUndo`, `canRedo`, `undo`, `redo`.
 
 ## Diagrams (drawing canvas)
 
@@ -203,6 +227,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 +269,7 @@ 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`, `$getTableWidth`, `$setTableWidth`, `$getSelectedTable`, `TABLE_WIDTH_MARKER` | Table full/content width helpers |
 | `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

@@ -2,6 +2,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 { MultilineElementTransformer, ElementTransformer } from '@lexical/markdown';
+import { TableNode } from '@lexical/table';
 
 type EditorMode = 'edit-raw' | 'edit-md' | 'view';
 type EditorRootProps = Readonly<{
@@ -40,6 +41,13 @@ 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';
+
 type MarkdownEditorApi = Readonly<{
     /** The underlying Lexical editor, for dispatching your own commands */
     editor: LexicalEditor;
@@ -51,6 +59,10 @@ 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;
     canUndo: boolean;
     canRedo: boolean;
     undo: () => void;
@@ -213,6 +225,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,9 +274,23 @@ 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 -->` line directly above the table marks it as
+ * content-width (see tableWidth.ts); it is consumed on import and re-emitted
+ * on export.
  */
 declare const TABLE: ElementTransformer;
 
+/**
+ * A content-width table is persisted in markdown as a GFM table preceded by
+ * this HTML comment on its own line. Renderers that don't know the marker
+ * simply hide the comment.
+ */
+declare const TABLE_WIDTH_MARKER = "<!-- width: content -->";
+declare function $getTableWidth(table: TableNode): BlockWidth;
+declare function $setTableWidth(table: TableNode, width: BlockWidth): void;
+/** The table containing the current selection (caret or cell range), if any */
+declare function $getSelectedTable(): TableNode | null;
+
 /**
  * JSON Schema (draft-07) for the payload of a ```drawing fenced block.
  *
@@ -282,7 +313,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 +427,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, $getTableWidth, $isDrawingNode, $isFrontmatterNode, $setTableWidth, type BlockWidth, 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, Toolbar, ToolbarButton, ToolbarDivider, type ToolbarItems, parseDrawingData, serializeDrawingData, useMarkdownEditor };