Skip to main content

Changelog

The same history ships in the package as CHANGELOG.md.

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 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. 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 row position and insertTableRow(position) / deleteTableRow(). Node-level helpers $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 as one seeded, pressure-varying pen stroke with misregistered fills and tapered connectors, and switches the canvas face to Recursive (casual axes) when the host loads it. Renderer-only: the drawing format is unchanged. Geometry helpers are exported (inkStroke, seedFrom, …)

0.8.0​

  • Syntax highlighting for fenced code blocks, driven by the package's own grammars instead of Prism: JavaScript/TypeScript, Kotlin, Java, C/C++, Python, Go, Rust, JSON, YAML, shell, SQL, CSS, HTML/XML, diff and markdown. Colours are CSS custom properties (--zui-code-<type> on .zui-code) with light and dark defaults; override them to retheme. registerCodeLanguage(grammar) adds a language from a data-only grammar; tokenizeCode and codeTokenizer are exported for reuse
  • Untagged code blocks are highlighted as plain and export as a bare fence (previously they came back as ```javascript). CODE_BLOCK is the exported transformer that does this
  • Unknown languages get the same line structure as known ones, so cursor movement and indentation behave identically

0.7.2​

  • Canvas properties are one colour setting (outline plus its matching fill on boxes: plain, black, gray, red, green, blue, orange, purple) shown inline in the tools row, only while the canvas is focused. Text on dark or borderless cards picks a readable colour automatically. The same names work as color in ```diagram skeletons
  • Table settings and the canvas share three layout presets: compact, comfortable, full; the markdown markers are unchanged
  • The floating table settings use the theme tokens (--popover, --border, --shadow-medium) instead of fixed light/dark colours

0.7.1​

  • Fix: free text shapes could not be typed into
  • Fix: selecting a shape no longer shifts the drawing (the properties row is always rendered with a fixed minimum height)
  • Fix: keyboard shortcuts keep working after committing text; Home / End work inside the inline text editor

0.7.0​

Themed drawing canvas. The canvas chrome follows the host theme instead of shipping its own look.

  • Tool row and contextual property row are a flat header in the editor's own toolbar idiom (in flow, no floating panels over the drawing)
  • Every colour, radius, shadow and font of the canvas is a --zui-drawing-* custom property defaulting to the core theme tokens, so light and dark mode come from the tokens; override them on .zui-drawing-canvas or an ancestor
  • Selection frame, handles, marquee, bind highlight and connector label plates are drawn in currentColor / theme variables; the table selection tint uses --primary too
  • --zui-drawing-dark-filter exposes the dark-mode inversion of the drawing area (none opts out)

0.6.0​

Text measure and text block width. Additive: with no configuration the layout is unchanged.

  • Measure (opt in): measure="48rem" on MarkdownEditor / MarkdownEditor.Root, or --zui-text-editor-measure: 48rem in a stylesheet. Text blocks are capped at the measure and centred; the pane itself is never capped and full-width blocks stop short of the outline
  • BlockWidth gains 'text': 'full' | 'text' | 'content'. text aligns a table or drawing with the text column; without a measure it is visually identical to full
  • Persistence: tables <!-- width: text -->; drawings and skeletons "width":"text". Unknown width values are treated as full so documents from newer versions still open
  • Insertion defaults: defaultBlockWidth={{ table?, drawing? }} applies when a new table or drawing is inserted; the chosen width is written explicitly, even full
  • UI / headless: all three widths in the floating table toolbar and the drawing toolbar; useMarkdownEditor() gains blockWidth / setBlockWidth; insertTable / insertDrawing accept a width option. tableWidth / setTableWidth keep working and are deprecated
  • CSS: zero-specificity :where() layout rules; --zui-text-editor-gutter, --zui-text-editor-bleed, per-block --zui-text-editor-block-bleed; new block classes .zui-paragraph, .zui-heading / -1 … -6, .zui-list, .zui-quote, .zui-code; .zui-drawing-canvas.is-text-width
  • New exports: BLOCK_WIDTHS, isBlockWidth, BlockWidthDefaults, TableSettingsOptions, $isTableWidthExplicit

0.5.0​

Diagram builder rewrite. The drawing canvas, its payload format and the authoring story for LLMs were rebuilt.

  • Format v2 (breaking): ```drawing payloads are now {"version":2,"canvasHeight":<px>,"canvasWidth"?:<px>,"width"?:"content","shapes":[...]}. No migration from version 1: anything that is not a version 2 payload renders as an empty canvas. triangle and pentagon are removed
  • Shapes: boxes rect, ellipse, diamond, note, cylinder, cloud, queue, actor; connectors arrow, line; free text. Palette gains purple
  • Bindings are objects: { id, fixedPoint?: [fx, fy], mode?: "orbit" | "inside" }. The side shorthand exists only in the ```diagram skeleton
  • Router: routing: "elbow" is auto-routed, leaves the box perpendicular to the attach side, avoids every box and minimises bends
  • Editor UX: multi-select (shift-click, marquee), redesigned toolbar with a "more shapes" popover, contextual property bar, Copy as Mermaid
  • ```diagram skeleton: coordinate-free JSON that the editor lays out and expands on import. New exports expandSkeleton, parseDrawingSkeleton, DRAWING_SKELETON_JSON_SCHEMA, DIAGRAM
  • Mermaid export: drawingToMermaid(data, { direction? })
  • Internal: drawing code moved into src/drawing/; shape geometry is data-driven so the router, bindings, skeleton expansion and exporters run without a DOM

0.4.0​

  • Table density: compact / comfortable (default) / spacious row padding and font size, next to the width toggle
  • The settings comment above a GFM table lists every non-default setting, e.g. <!-- width: content; density: compact -->
  • useMarkdownEditor() gains tableDensity / setTableDensity; new exports TableDensity, TableSettings, DEFAULT_TABLE_SETTINGS, $getTableSettings / $setTableSettings, $getTableDensity / $setTableDensity, parseTableSettingsMarker / formatTableSettingsMarker

0.3.1​

  • Block width for tables and drawings: full width or content width (shrink to fit). Tables persist it as <!-- width: content --> above the table; drawings as "width":"content" in the payload
  • useMarkdownEditor() gains tableWidth / setTableWidth; new exports BlockWidth, $getTableWidth, $setTableWidth, $getSelectedTable

0.3.0​

  • Custom toolbars: the toolbar prop accepts a render function; compound components MarkdownEditor.Root / .Content / .Toolbar / .Outline plus the button groups and primitives; the useMarkdownEditor() headless hook
  • Undo / redo buttons (HistoryButtons)
  • Internal: LexicalComposer is mounted in edit-raw mode too, so hooks keep working across mode switches

0.2.1​

  • DRAWING_FORMAT.md: authoritative spec of the drawing payload, written for programmatic / LLM consumption; ships in the npm package
  • New exports DRAWING_DATA_JSON_SCHEMA, parseDrawingData, serializeDrawingData

0.2.0​

  • Outline (outline prop): docked, collapsible table-of-contents sidebar
  • Section folding (foldable prop, default on): collapse everything under a heading; view-layer only

0.1.0​

  • Tables: GFM pipe tables round-trip through markdown; artifact-style rendering; in-place editing; new peer deps @lexical/table and @lexical/utils
  • Toolbar (toolbar prop, default on)
  • Drawing canvas: Excalidraw-style diagrams embedded as ```drawing fenced JSON blocks
  • Round-trip test suite

0.0.2 and earlier​

  • Markdown editor wrapping Lexical: edit-md / edit-raw / view modes, markdown shortcuts, checklists, fenced code, YAML frontmatter block, controlled value / onChange