@zuilib/text-editor 0.3.1 → 0.4.0

package/CHANGELOG.md

@@ -2,6 +2,21 @@
 
 ## 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

package/README.md

@@ -13,8 +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
+- **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
@@ -98,26 +98,33 @@ 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
+### Table settings: width and density
 
-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:
+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 -->
+<!-- width: content; density: compact -->
 | 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`.
+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
 
@@ -203,8 +210,9 @@ function BoldButton() {
 
 It returns `editor` (the Lexical instance), `activeFormats`,
 `toggleFormat`, `insertTable`, `insertDrawing`, `tableWidth` /
-`setTableWidth` (width of the table containing the selection, `null`
-outside tables), `canUndo`, `canRedo`, `undo`, `redo`.
+`setTableWidth` and `tableDensity` / `setTableDensity` (settings of the
+table containing the selection, `null` outside tables), `canUndo`,
+`canRedo`, `undo`, `redo`.
 
 ## Diagrams (drawing canvas)
 
@@ -269,7 +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`, `$getTableWidth`, `$setTableWidth`, `$getSelectedTable`, `TABLE_WIDTH_MARKER` | Table full/content width helpers |
+| `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,8 +1,8 @@
 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';
+import { MultilineElementTransformer, ElementTransformer } from '@lexical/markdown';
 
 type EditorMode = 'edit-raw' | 'edit-md' | 'view';
 type EditorRootProps = Readonly<{
@@ -48,6 +48,28 @@ declare function OutlinePlugin(): ReactElement;
  */
 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;
@@ -63,6 +85,10 @@ type MarkdownEditorApi = Readonly<{
     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;
@@ -274,23 +300,12 @@ 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.
+ * 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;
 
-/**
- * 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.
  *
@@ -427,4 +442,4 @@ declare const DRAWING_DATA_JSON_SCHEMA: {
     };
 };
 
-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 };
+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 };

package/dist/index.js

@@ -2046,7 +2046,7 @@ import {
   TableRowNode
 } from "@lexical/table";
 
-// src/transformers/tableWidth.ts
+// src/transformers/tableSettings.ts
 import {
   $getNodeByKey as $getNodeByKey3,
   $getSelection as $getSelection2,
@@ -2054,15 +2054,89 @@ import {
 } from "lexical";
 import { $findMatchingParent } from "@lexical/utils";
 import { $isTableNode, $isTableSelection } from "@lexical/table";
-var TABLE_WIDTH_MARKER = "<!-- width: content -->";
-var TABLE_WIDTH_MARKER_REG_EXP = /^<!--\s*width:\s*content\s*-->\s*$/;
-var CONTENT_WIDTH_STYLE = "width: auto; table-layout: auto";
-var CONTENT_WIDTH_REG_EXP = /(^|;)\s*width:\s*auto\s*(;|$)/;
+var DEFAULT_TABLE_SETTINGS = {
+  width: "full",
+  density: "comfortable"
+};
+var OPTION_DECLARATIONS = {
+  width: {
+    full: {},
+    content: { width: "auto", "table-layout": "auto" }
+  },
+  density: {
+    comfortable: {},
+    compact: {
+      "--zui-table-cell-padding": "0.25rem 0.5rem",
+      "--zui-table-font-size": "0.8125rem"
+    },
+    spacious: {
+      "--zui-table-cell-padding": "0.875rem 1rem",
+      "--zui-table-font-size": "0.9375rem"
+    }
+  }
+};
+var SETTING_KEYS = Object.keys(OPTION_DECLARATIONS);
+function parseStyle(style) {
+  const declarations = /* @__PURE__ */ new Map();
+  for (const part of style.split(";")) {
+    const index = part.indexOf(":");
+    if (index === -1) continue;
+    const key = part.slice(0, index).trim();
+    const value = part.slice(index + 1).trim();
+    if (key && value) declarations.set(key, value);
+  }
+  return declarations;
+}
+function serializeStyle(declarations) {
+  return [...declarations].map(([key, value]) => `${key}: ${value}`).join("; ");
+}
+function optionsOf(setting) {
+  return Object.entries(OPTION_DECLARATIONS[setting]);
+}
+function readSetting(declarations, setting) {
+  for (const [option, decls] of optionsOf(setting)) {
+    const entries = Object.entries(decls);
+    if (entries.length === 0) continue;
+    if (entries.every(([key, value]) => declarations.get(key) === value)) {
+      return option;
+    }
+  }
+  return DEFAULT_TABLE_SETTINGS[setting];
+}
+function writeSetting(declarations, setting, option) {
+  for (const [, decls] of optionsOf(setting)) {
+    for (const key of Object.keys(decls)) declarations.delete(key);
+  }
+  for (const [key, value] of Object.entries(OPTION_DECLARATIONS[setting][option])) {
+    declarations.set(key, value);
+  }
+}
+function $getTableSettings(table) {
+  const declarations = parseStyle(table.getStyle());
+  return {
+    width: readSetting(declarations, "width"),
+    density: readSetting(declarations, "density")
+  };
+}
+function $setTableSettings(table, settings) {
+  const declarations = parseStyle(table.getStyle());
+  for (const key of SETTING_KEYS) {
+    const option = settings[key];
+    if (option !== void 0) writeSetting(declarations, key, option);
+  }
+  table.setStyle(serializeStyle(declarations));
+}
 function $getTableWidth(table) {
-  return CONTENT_WIDTH_REG_EXP.test(table.getStyle()) ? "content" : "full";
+  return $getTableSettings(table).width;
 }
 function $setTableWidth(table, width) {
-  table.setStyle(width === "content" ? CONTENT_WIDTH_STYLE : "");
+  $setTableSettings(table, { width });
+}
+function $getTableDensity(table) {
+  return $getTableSettings(table).density;
+}
+function $setTableDensity(table, density) {
+  $setTableSettings(table, { density });
 }
 function $getSelectedTable() {
   const selection = $getSelection2();
@@ -2077,14 +2151,36 @@ function $getSelectedTable() {
   );
   return $isTableNode(table) ? table : null;
 }
+var MARKER_REG_EXP = /^<!--\s*([a-z]+\s*:\s*[a-z]+(?:\s*;\s*[a-z]+\s*:\s*[a-z]+)*)\s*;?\s*-->\s*$/;
+function isOption(setting, value) {
+  return value in OPTION_DECLARATIONS[setting];
+}
+var TABLE_WIDTH_MARKER = "<!-- width: content -->";
+function parseTableSettingsMarker(text) {
+  const match = MARKER_REG_EXP.exec(text);
+  if (!match) return null;
+  const settings = {};
+  for (const pair of match[1].split(";")) {
+    const [key, value] = pair.split(":").map((s) => s.trim());
+    if (key === "width" && isOption("width", value)) settings.width = value;
+    if (key === "density" && isOption("density", value)) settings.density = value;
+  }
+  return Object.keys(settings).length > 0 ? settings : null;
+}
+function formatTableSettingsMarker(settings) {
+  const pairs = SETTING_KEYS.filter(
+    (key) => settings[key] !== DEFAULT_TABLE_SETTINGS[key]
+  ).map((key) => `${key}: ${settings[key]}`);
+  return pairs.length > 0 ? `<!-- ${pairs.join("; ")} -->` : null;
+}
 
 // src/transformers/tableTransformer.ts
 var TABLE_ROW_REG_EXP = /^\|(.+)\|\s?$/;
 var TABLE_ROW_DIVIDER_REG_EXP = /^(\| ?:?-*:? ?)+\|\s?$/;
-function $isTableWidthMarker(node) {
-  if (!$isParagraphNode2(node) || node.getChildrenSize() !== 1) return false;
+function $getMarkerSettings(node) {
+  if (!$isParagraphNode2(node) || node.getChildrenSize() !== 1) return null;
   const child = node.getFirstChild();
-  return $isTextNode(child) && TABLE_WIDTH_MARKER_REG_EXP.test(child.getTextContent());
+  return $isTextNode(child) ? parseTableSettingsMarker(child.getTextContent()) : null;
 }
 function getTableColumnsSize(table) {
   const row = table.getFirstChild();
@@ -2106,7 +2202,8 @@ var TABLE = {
   export: (node) => {
     if (!$isTableNode2(node)) return null;
     const output = [];
-    if ($getTableWidth(node) === "content") output.push(TABLE_WIDTH_MARKER);
+    const marker = formatTableSettingsMarker($getTableSettings(node));
+    if (marker) output.push(marker);
     for (const row of node.getChildren()) {
       if (!$isTableRowNode(row)) continue;
       const rowOutput = [];
@@ -2172,8 +2269,9 @@ var TABLE = {
       previousSibling.append(...table.getChildren());
       parentNode.remove();
     } else {
-      if ($isTableWidthMarker(previousSibling)) {
-        $setTableWidth(table, "content");
+      const markerSettings = $getMarkerSettings(previousSibling);
+      if (markerSettings) {
+        $setTableSettings(table, markerSettings);
         previousSibling?.remove();
       }
       parentNode.replace(table);
@@ -2521,7 +2619,7 @@ function FoldingPlugin() {
   )) });
 }
 
-// src/plugins/TableWidthPlugin.tsx
+// src/plugins/TableSettingsPlugin.tsx
 import { useCallback as useCallback5, useEffect as useEffect9, useState as useState5 } from "react";
 import { useLexicalComposerContext as useLexicalComposerContext9 } from "@lexical/react/LexicalComposerContext";
 import { useLexicalEditable as useLexicalEditable2 } from "@lexical/react/useLexicalEditable";
@@ -2555,13 +2653,13 @@ function useMarkdownEditor() {
   );
   const [canUndo, setCanUndo] = useState4(false);
   const [canRedo, setCanRedo] = useState4(false);
-  const [tableWidth, setTableWidthState] = useState4(null);
+  const [tableSettings, setTableSettingsState] = useState4(null);
   useEffect8(
     () => mergeRegister(
       editor.registerUpdateListener(({ editorState }) => {
         editorState.read(() => {
           const table = $getSelectedTable();
-          setTableWidthState(table ? $getTableWidth(table) : null);
+          setTableSettingsState(table ? $getTableSettings(table) : null);
           const selection = $getSelection4();
           if (!$isRangeSelection4(selection)) {
             setActiveFormats(/* @__PURE__ */ new Set());
@@ -2614,15 +2712,23 @@ function useMarkdownEditor() {
       $insertNodeToNearestRoot($createDrawingNode());
     });
   }, [editor]);
-  const setTableWidth = useCallback4(
-    (width) => {
+  const updateTableSettings = useCallback4(
+    (settings) => {
       editor.update(() => {
         const table = $getSelectedTable();
-        if (table) $setTableWidth(table, width);
+        if (table) $setTableSettings(table, settings);
       });
     },
     [editor]
   );
+  const setTableWidth = useCallback4(
+    (width) => updateTableSettings({ width }),
+    [updateTableSettings]
+  );
+  const setTableDensity = useCallback4(
+    (density) => updateTableSettings({ density }),
+    [updateTableSettings]
+  );
   const undo = useCallback4(() => {
     editor.dispatchCommand(UNDO_COMMAND, void 0);
   }, [editor]);
@@ -2635,8 +2741,10 @@ function useMarkdownEditor() {
     toggleFormat,
     insertTable,
     insertDrawing,
-    tableWidth,
+    tableWidth: tableSettings?.width ?? null,
     setTableWidth,
+    tableDensity: tableSettings?.density ?? null,
+    setTableDensity,
     canUndo,
     canRedo,
     undo,
@@ -2765,12 +2873,45 @@ function HistoryButtons() {
   ] });
 }
 
-// src/plugins/TableWidthPlugin.tsx
-import { jsx as jsx7 } from "react/jsx-runtime";
-function TableWidthPlugin() {
+// src/plugins/TableSettingsPlugin.tsx
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+var DENSITY_OPTIONS = [
+  {
+    density: "compact",
+    label: "Compact rows",
+    icon: /* @__PURE__ */ jsx7("path", { d: "M3 4.5h14M3 8.17h14M3 11.83h14M3 15.5h14" })
+  },
+  {
+    density: "comfortable",
+    label: "Comfortable rows",
+    icon: /* @__PURE__ */ jsx7("path", { d: "M3 4.5h14M3 10h14M3 15.5h14" })
+  },
+  {
+    density: "spacious",
+    label: "Spacious rows",
+    icon: /* @__PURE__ */ jsx7("path", { d: "M3 5h14M3 15h14" })
+  }
+];
+function Icon2({ children }) {
+  return /* @__PURE__ */ jsx7(
+    "svg",
+    {
+      viewBox: "0 0 20 20",
+      width: "16",
+      height: "16",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.6",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children
+    }
+  );
+}
+function TableSettingsPlugin() {
   const [editor] = useLexicalComposerContext9();
   const isEditable = useLexicalEditable2();
-  const { tableWidth, setTableWidth } = useMarkdownEditor();
+  const { tableWidth, setTableWidth, tableDensity, setTableDensity } = useMarkdownEditor();
   const [anchor, setAnchor] = useState5(null);
   const sync = useCallback5(() => {
     const tableKey = editor.getEditorState().read(() => $getSelectedTable()?.getKey());
@@ -2798,43 +2939,43 @@ function TableWidthPlugin() {
       observer?.disconnect();
     };
   }, [editor, sync]);
-  if (!isEditable || !anchor || !tableWidth) return null;
-  return /* @__PURE__ */ jsx7(
+  if (!isEditable || !anchor || !tableWidth || !tableDensity) return null;
+  return /* @__PURE__ */ jsxs5(
     "div",
     {
-      className: "zui-table-width",
-      role: "group",
-      "aria-label": "Table width",
+      className: "zui-table-settings",
+      role: "toolbar",
+      "aria-label": "Table settings",
       style: { top: anchor.top, right: anchor.right },
-      children: BLOCK_WIDTH_OPTIONS.map(({ width, label, icon }) => /* @__PURE__ */ jsx7(
-        ToolbarButton,
-        {
-          label,
-          active: tableWidth === width,
-          onClick: () => setTableWidth(width),
-          children: /* @__PURE__ */ jsx7(
-            "svg",
-            {
-              viewBox: "0 0 20 20",
-              width: "16",
-              height: "16",
-              fill: "none",
-              stroke: "currentColor",
-              strokeWidth: "1.6",
-              strokeLinecap: "round",
-              strokeLinejoin: "round",
-              children: icon
-            }
-          )
-        },
-        width
-      ))
+      children: [
+        BLOCK_WIDTH_OPTIONS.map(({ width, label, icon }) => /* @__PURE__ */ jsx7(
+          ToolbarButton,
+          {
+            label,
+            active: tableWidth === width,
+            onClick: () => setTableWidth(width),
+            children: /* @__PURE__ */ jsx7(Icon2, { children: icon })
+          },
+          width
+        )),
+        /* @__PURE__ */ jsx7(ToolbarDivider, {}),
+        DENSITY_OPTIONS.map(({ density, label, icon }) => /* @__PURE__ */ jsx7(
+          ToolbarButton,
+          {
+            label,
+            active: tableDensity === density,
+            onClick: () => setTableDensity(density),
+            children: /* @__PURE__ */ jsx7(Icon2, { children: icon })
+          },
+          density
+        ))
+      ]
     }
   );
 }
 
 // src/EditorContent.tsx
-import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 function EditorContent({
   placeholder = "Start writing...",
   foldable = true,
@@ -2855,8 +2996,8 @@ function EditorContent({
       }
     );
   }
-  return /* @__PURE__ */ jsxs5("div", { className: "zui-text-editor-body", children: [
-    /* @__PURE__ */ jsxs5("div", { className: "zui-text-editor-main", children: [
+  return /* @__PURE__ */ jsxs6("div", { className: "zui-text-editor-body", children: [
+    /* @__PURE__ */ jsxs6("div", { className: "zui-text-editor-main", children: [
       /* @__PURE__ */ jsx8(
         RichTextPlugin,
         {
@@ -2872,7 +3013,7 @@ function EditorContent({
         }
       ),
       foldable && /* @__PURE__ */ jsx8(FoldingPlugin, {}),
-      /* @__PURE__ */ jsx8(TableWidthPlugin, {})
+      /* @__PURE__ */ jsx8(TableSettingsPlugin, {})
     ] }),
     children
   ] });
@@ -2884,7 +3025,7 @@ import { useLexicalComposerContext as useLexicalComposerContext10 } from "@lexic
 import {
   TableOfContentsPlugin
 } from "@lexical/react/LexicalTableOfContentsPlugin";
-import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
 var INDENT_PER_LEVEL = {
   h1: 0,
   h2: 1,
@@ -2940,7 +3081,7 @@ function OutlinePlugin() {
     for (const [key] of entries) {
       editor.getElementByKey(key)?.setAttribute("data-outline-key", key);
     }
-    return /* @__PURE__ */ jsxs6(
+    return /* @__PURE__ */ jsxs7(
       "div",
       {
         className: `zui-text-editor-outline ${collapsed ? "is-collapsed" : ""}`,
@@ -2969,7 +3110,7 @@ function OutlinePlugin() {
               )
             }
           ),
-          !collapsed && /* @__PURE__ */ jsxs6("nav", { className: "zui-text-editor-outline-list", "aria-label": "Table of contents", children: [
+          !collapsed && /* @__PURE__ */ jsxs7("nav", { className: "zui-text-editor-outline-list", "aria-label": "Table of contents", children: [
             entries.length === 0 && /* @__PURE__ */ jsx9("div", { className: "zui-text-editor-outline-empty", children: "No headings" }),
             entries.map(([key, text, tag]) => /* @__PURE__ */ jsx9(
               "button",
@@ -2992,7 +3133,7 @@ function OutlinePlugin() {
 }
 
 // src/MarkdownEditor.tsx
-import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
 var DEFAULT_ITEMS = {
   format: /* @__PURE__ */ jsx10(FormatButtons, {}),
   insert: /* @__PURE__ */ jsx10(InsertButtons, {}),
@@ -3013,7 +3154,7 @@ function MarkdownEditor({
   foldable = true,
   ...rootProps
 }) {
-  return /* @__PURE__ */ jsxs7(EditorRoot, { ...rootProps, children: [
+  return /* @__PURE__ */ jsxs8(EditorRoot, { ...rootProps, children: [
     toolbar === true && /* @__PURE__ */ jsx10(EditorToolbar, {}),
     typeof toolbar === "function" && toolbar(DEFAULT_ITEMS),
     /* @__PURE__ */ jsx10(EditorContent, { placeholder, foldable, children: outline && /* @__PURE__ */ jsx10(OutlinePlugin, {}) })
@@ -3147,10 +3288,15 @@ export {
   $createDrawingNode,
   $createFrontmatterNode,
   $getSelectedTable,
+  $getTableDensity,
+  $getTableSettings,
   $getTableWidth,
   $isDrawingNode,
   $isFrontmatterNode,
+  $setTableDensity,
+  $setTableSettings,
   $setTableWidth,
+  DEFAULT_TABLE_SETTINGS,
   DRAWING,
   DRAWING_DATA_JSON_SCHEMA,
   DrawingNode,
@@ -3165,7 +3311,9 @@ export {
   Toolbar,
   ToolbarButton,
   ToolbarDivider,
+  formatTableSettingsMarker,
   parseDrawingData,
+  parseTableSettingsMarker,
   serializeDrawingData,
   useMarkdownEditor
 };

package/dist/styles.css

@@ -282,12 +282,13 @@
   border: 1px solid color-mix(in srgb, currentColor 15%, transparent);
   border-radius: 0.625rem;
   overflow: hidden;
-  font-size: 0.875rem;
+  /* Density presets set these custom properties inline (tableSettings.ts) */
+  font-size: var(--zui-table-font-size, 0.875rem);
   table-layout: fixed;
 }
 
 .zui-table-cell {
-  padding: 0.5rem 0.75rem;
+  padding: var(--zui-table-cell-padding, 0.5rem 0.75rem);
   border-bottom: 1px solid color-mix(in srgb, currentColor 10%, transparent);
   border-right: 1px solid color-mix(in srgb, currentColor 10%, transparent);
   vertical-align: top;
@@ -319,13 +320,13 @@
 }
 
 /*
- * Floating full-width / content-width toggle, straddling the top-right corner
+ * Floating table settings (width, density), straddling the top-right corner
  * of the table the caret is in (positioned within .zui-text-editor-main). It
  * stays inside the table's own top margin so it never covers the previous
- * paragraph. Content width itself is an inline style on the <table> (see
- * tableWidth.ts).
+ * paragraph. The settings themselves are an inline style on the <table>
+ * (see tableSettings.ts).
  */
-.zui-table-width {
+.zui-table-settings {
   position: absolute;
   z-index: 5;
   display: flex;
@@ -338,7 +339,7 @@
   transform: translateY(-70%);
 }
 
-.dark .zui-table-width {
+.dark .zui-table-settings {
   background: #232329;
   border-color: rgba(255, 255, 255, 0.1);
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zuilib/text-editor",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "description": "ZUI — A markdown editor component wrapping Lexical",
   "type": "module",
   "main": "./dist/index.js",