@zuilib/text-editor 0.8.0 → 0.10.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +29 -0
- package/README.md +33 -1
- package/dist/index.d.ts +213 -99
- package/dist/index.js +1270 -472
- package/dist/styles.css +126 -5
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,34 @@
|
|
|
1
1
|
# Changelog — @zuilib/text-editor
|
|
2
2
|
|
|
3
|
+
## 0.10.0
|
|
4
|
+
|
|
5
|
+
- **Table rows.** Put the caret in a table and a **row rail** appears along
|
|
6
|
+
its left edge: a bar marks the caret's row, and a `+` handle rests under
|
|
7
|
+
the last row (click to append). Move over the rail and the handle snaps
|
|
8
|
+
to the nearest row boundary; hovering it draws the insertion line across
|
|
9
|
+
the table. The floating table toolbar gains **insert row above / below**
|
|
10
|
+
and **delete row**. Keyboard: `⌘↩` / `Ctrl+Enter` inserts below,
|
|
11
|
+
`⌘⇧↩` above, `⌘⇧⌫` deletes the row, and **Tab in the last cell appends
|
|
12
|
+
a row** instead of leaving the table
|
|
13
|
+
- Rows follow GFM's shape: nothing is inserted above the header row, and
|
|
14
|
+
deleting the header promotes the next row so the markdown keeps its
|
|
15
|
+
divider; the last remaining row can't be deleted
|
|
16
|
+
- `useMarkdownEditor()` adds `tableRow` (index, column, count, hasHeader),
|
|
17
|
+
`insertTableRow(position)` and `deleteTableRow()`. Node-level helpers
|
|
18
|
+
`$getTableRowPosition`, `$insertTableRowAt`, `$deleteTableRowAt`,
|
|
19
|
+
`$insertTableRowNear`, `$deleteSelectedTableRow`, `insertableRowIndices`
|
|
20
|
+
and `canDeleteRow` are exported for custom toolbars
|
|
21
|
+
- Rail and toolbar use the theme tokens (`--primary`, `--popover`,
|
|
22
|
+
`--border`, `--shadow-medium`); motion respects `prefers-reduced-motion`
|
|
23
|
+
|
|
24
|
+
## 0.9.0
|
|
25
|
+
|
|
26
|
+
- **Ink drawing style**: `drawingStyle="ink"` on the editor renders shapes
|
|
27
|
+
as one seeded, pressure-varying pen stroke with misregistered fills and
|
|
28
|
+
tapered connectors, and switches the canvas face to Recursive (casual
|
|
29
|
+
axes) when the host loads it. Renderer-only: the drawing format is
|
|
30
|
+
unchanged. Geometry helpers are exported (`inkStroke`, `seedFrom`, …)
|
|
31
|
+
|
|
3
32
|
## 0.8.0
|
|
4
33
|
|
|
5
34
|
- **Syntax highlighting** for fenced code blocks, driven by the package's
|
package/README.md
CHANGED
|
@@ -12,6 +12,7 @@ document outline, and collapsible sections.
|
|
|
12
12
|
- **Markdown shortcuts** while typing: headings, lists, checklists,
|
|
13
13
|
blockquotes, links, fenced code (with syntax highlighting), tables
|
|
14
14
|
- **Tables**: GFM pipe tables, edited in place (tab between cells, ranges,
|
|
15
|
+
add / remove rows from a hover rail, toolbar or keyboard,
|
|
15
16
|
inline formatting), styled like Claude artifacts
|
|
16
17
|
- **Text measure and block width**: an opt-in readable text column
|
|
17
18
|
(`measure="48rem"`); each table and diagram picks *full* / *text* /
|
|
@@ -104,6 +105,36 @@ Editing is in place: Tab/arrows between cells, cell range selection, inline
|
|
|
104
105
|
formatting inside cells. Cell content is single-line in markdown; newlines
|
|
105
106
|
are escaped as `\n`.
|
|
106
107
|
|
|
108
|
+
### Rows
|
|
109
|
+
|
|
110
|
+
Click into a table and a slim **row rail** appears along its left edge. A
|
|
111
|
+
bar marks the row the caret is in, and a `+` handle rests under the last row:
|
|
112
|
+
click it to append a row. Move the pointer over the rail and the handle snaps
|
|
113
|
+
to the nearest row boundary — hovering it previews the insertion as a line
|
|
114
|
+
across the table, clicking inserts there and moves the caret into the new
|
|
115
|
+
row. The floating toolbar at the table's top-right corner has **insert row
|
|
116
|
+
above**, **insert row below** and **delete row** for the caret's row.
|
|
117
|
+
|
|
118
|
+
Keyboard, inside a table:
|
|
119
|
+
|
|
120
|
+
| Shortcut | Action |
|
|
121
|
+
| --- | --- |
|
|
122
|
+
| `⌘↩` / `Ctrl+Enter` | Insert row below |
|
|
123
|
+
| `⌘⇧↩` / `Ctrl+Shift+Enter` | Insert row above |
|
|
124
|
+
| `⌘⇧⌫` / `Ctrl+Shift+Backspace` | Delete row |
|
|
125
|
+
| `Tab` in the last cell | Append a row |
|
|
126
|
+
|
|
127
|
+
GFM tables have exactly one header row, the first, so nothing is inserted
|
|
128
|
+
above it (`above` there inserts right below the header) and deleting the
|
|
129
|
+
header row makes the next row the header. The last remaining row can't be
|
|
130
|
+
deleted.
|
|
131
|
+
|
|
132
|
+
Programmatic access: `useMarkdownEditor().tableRow` (`{ index, column,
|
|
133
|
+
count, hasHeader }` or `null`), `insertTableRow('above' | 'below')` and
|
|
134
|
+
`deleteTableRow()`; or, inside `editor.update`, `$insertTableRowAt(table,
|
|
135
|
+
index)`, `$deleteTableRowAt(table, index)`, `$insertTableRowNear(table,
|
|
136
|
+
position)` and `$deleteSelectedTableRow(table)`.
|
|
137
|
+
|
|
107
138
|
### Table density
|
|
108
139
|
|
|
109
140
|
Place the caret in a table and a small toolbar floats at its top-right
|
|
@@ -272,7 +303,8 @@ It returns `editor` (the Lexical instance), `activeFormats`,
|
|
|
272
303
|
`toggleFormat`, `insertTable`, `insertDrawing`, `blockWidth` /
|
|
273
304
|
`setBlockWidth` (width of the table or drawing containing the selection,
|
|
274
305
|
`null` outside both), `tableDensity` / `setTableDensity` (`null` outside
|
|
275
|
-
tables), `
|
|
306
|
+
tables), `tableRow` / `insertTableRow` / `deleteTableRow` (see
|
|
307
|
+
[Rows](#rows)), `canUndo`, `canRedo`, `undo`, `redo`. `tableWidth` /
|
|
276
308
|
`setTableWidth` remain as deprecated aliases limited to tables.
|
|
277
309
|
|
|
278
310
|
## Diagrams (drawing canvas)
|
package/dist/index.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
import { ReactNode, ReactElement } from 'react';
|
|
3
3
|
import { LexicalEditor, TextFormatType, ElementNode, NodeKey, EditorConfig, SerializedElementNode, LexicalNode, DecoratorNode, Spread, SerializedLexicalNode, DOMExportOutput, DOMConversionMap } from 'lexical';
|
|
4
|
-
import { TableNode } from '@lexical/table';
|
|
4
|
+
import { TableNode, TableCellNode, TableRowNode } from '@lexical/table';
|
|
5
5
|
import { MultilineElementTransformer, ElementTransformer } from '@lexical/markdown';
|
|
6
6
|
import { registerCodeHighlighting } from '@lexical/code';
|
|
7
7
|
|
|
@@ -30,6 +30,146 @@ type BlockWidthDefaults = Readonly<{
|
|
|
30
30
|
drawing?: BlockWidth;
|
|
31
31
|
}>;
|
|
32
32
|
|
|
33
|
+
/** Card-like shapes: fillable, bindable, carrying the three text slots */
|
|
34
|
+
type BoxType = 'rect' | 'ellipse' | 'diamond' | 'note' | 'cylinder' | 'cloud' | 'queue' | 'actor';
|
|
35
|
+
type ConnectorType = 'arrow' | 'line';
|
|
36
|
+
type DrawingShapeType = BoxType | ConnectorType | 'text';
|
|
37
|
+
declare const BOX_TYPES: readonly BoxType[];
|
|
38
|
+
declare const CONNECTOR_TYPES: readonly ConnectorType[];
|
|
39
|
+
declare const SHAPE_TYPES: readonly DrawingShapeType[];
|
|
40
|
+
type Point = Readonly<{
|
|
41
|
+
x: number;
|
|
42
|
+
y: number;
|
|
43
|
+
}>;
|
|
44
|
+
type BindingSide = 'top' | 'right' | 'bottom' | 'left';
|
|
45
|
+
/**
|
|
46
|
+
* Where a connector endpoint attaches to a box.
|
|
47
|
+
*
|
|
48
|
+
* `fixedPoint` is a ratio inside the box's bounding box (`[0,0]` top-left,
|
|
49
|
+
* `[1,1]` bottom-right). Omitted = the box center, which makes the endpoint
|
|
50
|
+
* auto-aim at the other end. `mode: 'inside'` pins the endpoint exactly on
|
|
51
|
+
* the fixed point; the default (`'orbit'`) projects it onto the outline with
|
|
52
|
+
* a small gap.
|
|
53
|
+
*/
|
|
54
|
+
type Binding = Readonly<{
|
|
55
|
+
id: string;
|
|
56
|
+
fixedPoint?: readonly [number, number];
|
|
57
|
+
mode?: 'orbit' | 'inside';
|
|
58
|
+
}>;
|
|
59
|
+
type DrawingShape = Readonly<{
|
|
60
|
+
id: string;
|
|
61
|
+
type: DrawingShapeType;
|
|
62
|
+
/** Top-left corner (boxes/text) or start point (connectors) */
|
|
63
|
+
x: number;
|
|
64
|
+
y: number;
|
|
65
|
+
/** Size (boxes/text) or delta to the end point (connectors) */
|
|
66
|
+
w: number;
|
|
67
|
+
h: number;
|
|
68
|
+
stroke: string;
|
|
69
|
+
fill: string;
|
|
70
|
+
strokeWidth: number;
|
|
71
|
+
/** Standalone text, main (center) content of a box, or connector label */
|
|
72
|
+
text?: string;
|
|
73
|
+
/** Small heading rendered at the top of a box */
|
|
74
|
+
label?: string;
|
|
75
|
+
/** Small line rendered at the bottom of a box */
|
|
76
|
+
footer?: string;
|
|
77
|
+
/** Connector: box the start point is attached to */
|
|
78
|
+
startBinding?: Binding;
|
|
79
|
+
/** Connector: box the end point is attached to */
|
|
80
|
+
endBinding?: Binding;
|
|
81
|
+
/** Arrow: arrowheads on both ends */
|
|
82
|
+
bidirectional?: boolean;
|
|
83
|
+
/** Connector routing: right-angled auto-routed path instead of a straight line */
|
|
84
|
+
routing?: 'elbow';
|
|
85
|
+
/**
|
|
86
|
+
* Elbow override: position of the middle segment as a fraction of the
|
|
87
|
+
* span, applied only when the routed path is a simple three-segment Z.
|
|
88
|
+
*/
|
|
89
|
+
elbow?: number;
|
|
90
|
+
/**
|
|
91
|
+
* Connector: intermediate path points between start and end (absolute
|
|
92
|
+
* canvas coordinates). Takes precedence over `routing`.
|
|
93
|
+
*/
|
|
94
|
+
waypoints?: readonly Point[];
|
|
95
|
+
}>;
|
|
96
|
+
type DrawingData = Readonly<{
|
|
97
|
+
version: 2;
|
|
98
|
+
/**
|
|
99
|
+
* Logical canvas width. When set the drawing is scaled to fit narrower
|
|
100
|
+
* layouts (SVG viewBox); when omitted the canvas is fluid and shapes are
|
|
101
|
+
* in CSS pixels.
|
|
102
|
+
*/
|
|
103
|
+
canvasWidth?: number;
|
|
104
|
+
canvasHeight: number;
|
|
105
|
+
/**
|
|
106
|
+
* Block width: `full` (default) spans the editor; `text` aligns with the
|
|
107
|
+
* text column; `content` fits the shapes' horizontal extent. The editor
|
|
108
|
+
* omits `full` unless it was written explicitly (an insertion default or
|
|
109
|
+
* the source payload); unknown values are dropped.
|
|
110
|
+
*/
|
|
111
|
+
width?: BlockWidth;
|
|
112
|
+
shapes: readonly DrawingShape[];
|
|
113
|
+
}>;
|
|
114
|
+
declare const EMPTY_DRAWING: DrawingData;
|
|
115
|
+
declare const STROKE_COLORS: readonly ["#1e1e1e", "#e03131", "#2f9e44", "#1971c2", "#f08c00", "#7048e8"];
|
|
116
|
+
declare const FILL_COLORS: readonly ["transparent", "#ffc9c9", "#b2f2bb", "#a5d8ff", "#ffec99", "#d0bfff"];
|
|
117
|
+
/** Edge midpoints, used by the ```diagram skeleton's `side` option */
|
|
118
|
+
declare const SIDE_FIXED_POINTS: Record<BindingSide, readonly [number, number]>;
|
|
119
|
+
declare function serializeDrawingData(data: DrawingData): string;
|
|
120
|
+
/**
|
|
121
|
+
* Parse a ```drawing payload. Exactly one format is accepted: version 2 as
|
|
122
|
+
* written by the editor (the ```diagram skeleton is a separate block type,
|
|
123
|
+
* see skeleton.ts). Shapes that fail validation are dropped and a malformed
|
|
124
|
+
* document yields an empty canvas. Never throws.
|
|
125
|
+
*/
|
|
126
|
+
declare function parseDrawingData(json: string): DrawingData;
|
|
127
|
+
declare function normalizeDrawingData(parsed: unknown): DrawingData;
|
|
128
|
+
|
|
129
|
+
/**
|
|
130
|
+
* "Ink" rendering: one confident pen stroke instead of a plotted outline.
|
|
131
|
+
* Every shape's centerline is resampled densely, displaced along its normal
|
|
132
|
+
* by a smooth low-frequency field (two sines, integer frequencies on closed
|
|
133
|
+
* paths so the seam is continuous) and widened by a slowly varying pressure
|
|
134
|
+
* factor. The result is a filled ring path, not an SVG stroke, so the width
|
|
135
|
+
* can breathe along the path. Everything is seeded from the shape id: the
|
|
136
|
+
* same shape draws the same way on every render, undo, export and machine.
|
|
137
|
+
*
|
|
138
|
+
* This is a renderer concern only — the drawing format never sees it.
|
|
139
|
+
*/
|
|
140
|
+
type DrawingStyle = 'clean' | 'ink';
|
|
141
|
+
type InkOptions = Readonly<{
|
|
142
|
+
closed: boolean;
|
|
143
|
+
seed: number;
|
|
144
|
+
/** Nominal stroke width; the pressure factor varies it by ±30 % */
|
|
145
|
+
width: number;
|
|
146
|
+
/** Peak displacement from the geometric path, in px */
|
|
147
|
+
amplitude: number;
|
|
148
|
+
}>;
|
|
149
|
+
type InkStroke = Readonly<{
|
|
150
|
+
/** Filled outline of the stroke (use `fillRule="evenodd"`) */
|
|
151
|
+
ring: string;
|
|
152
|
+
/** Displaced centerline, for fills */
|
|
153
|
+
center: string;
|
|
154
|
+
}>;
|
|
155
|
+
/** FNV-1a: a stable 32-bit seed from a shape id */
|
|
156
|
+
declare function seedFrom(text: string): number;
|
|
157
|
+
/** Wobble amplitude for a shape of the given smallest dimension (px) */
|
|
158
|
+
declare function inkAmplitude(size: number): number;
|
|
159
|
+
/** Fill misregistration for a shape: a seeded 2–3 px offset */
|
|
160
|
+
declare function inkFillOffset(seed: number): Point;
|
|
161
|
+
/** Ink stroke along a polyline (open) or polygon (closed) */
|
|
162
|
+
declare function inkStroke(points: readonly Point[], options: InkOptions): InkStroke;
|
|
163
|
+
/** Rectangle outline with circular corners, as a polygon */
|
|
164
|
+
declare function roundedRectPolygon(r: Readonly<{
|
|
165
|
+
x: number;
|
|
166
|
+
y: number;
|
|
167
|
+
w: number;
|
|
168
|
+
h: number;
|
|
169
|
+
}>, radius: number, segments?: number): Point[];
|
|
170
|
+
/** Polyline with its interior corners rounded (quadratic), as points */
|
|
171
|
+
declare function roundedPolyline(points: readonly Point[], cornerRadius?: number, segments?: number): Point[];
|
|
172
|
+
|
|
33
173
|
type EditorMode = 'edit-raw' | 'edit-md' | 'view';
|
|
34
174
|
|
|
35
175
|
type EditorRootProps = Readonly<{
|
|
@@ -55,6 +195,12 @@ type EditorRootProps = Readonly<{
|
|
|
55
195
|
* insertion — markdown without a width marker always means `full`.
|
|
56
196
|
*/
|
|
57
197
|
defaultBlockWidth?: BlockWidthDefaults;
|
|
198
|
+
/**
|
|
199
|
+
* `clean` (default) draws crisp geometry; `ink` draws every shape as a
|
|
200
|
+
* single pen stroke with pressure and slightly misregistered fills, and
|
|
201
|
+
* sets the casual face (Recursive, if the host loads it).
|
|
202
|
+
*/
|
|
203
|
+
drawingStyle?: DrawingStyle;
|
|
58
204
|
children: ReactNode;
|
|
59
205
|
}>;
|
|
60
206
|
/**
|
|
@@ -62,7 +208,7 @@ type EditorRootProps = Readonly<{
|
|
|
62
208
|
* beneath it (`Content`, `Toolbar`, `Outline`, or your own components using
|
|
63
209
|
* `useMarkdownEditor`) shares the same editor instance.
|
|
64
210
|
*/
|
|
65
|
-
declare function EditorRoot({ value, onChange, readOnly, className, mode, autoFocus, measure, defaultBlockWidth, children, }: EditorRootProps): ReactElement;
|
|
211
|
+
declare function EditorRoot({ value, onChange, readOnly, className, mode, autoFocus, measure, defaultBlockWidth, drawingStyle, children, }: EditorRootProps): ReactElement;
|
|
66
212
|
|
|
67
213
|
type EditorContentProps = Readonly<{
|
|
68
214
|
placeholder?: string;
|
|
@@ -119,6 +265,57 @@ declare function parseTableSettingsMarker(text: string): Partial<TableSettings>
|
|
|
119
265
|
*/
|
|
120
266
|
declare function formatTableSettingsMarker(settings: TableSettings, options?: TableSettingsOptions): string | null;
|
|
121
267
|
|
|
268
|
+
/**
|
|
269
|
+
* Row operations for GFM tables. Markdown tables have no merged cells and
|
|
270
|
+
* exactly one header row (the first), so these helpers work on plain row
|
|
271
|
+
* indices and keep that invariant: a row can't be inserted above the
|
|
272
|
+
* header, and deleting the header promotes the row below it.
|
|
273
|
+
*/
|
|
274
|
+
/** Position of the selection inside its table */
|
|
275
|
+
type TableRowPosition = Readonly<{
|
|
276
|
+
/** Row index of the caret (or the anchor cell of a cell range) */
|
|
277
|
+
index: number;
|
|
278
|
+
/** Column index of that cell */
|
|
279
|
+
column: number;
|
|
280
|
+
/** Number of rows in the table */
|
|
281
|
+
count: number;
|
|
282
|
+
/** Whether the first row is a header row */
|
|
283
|
+
hasHeader: boolean;
|
|
284
|
+
}>;
|
|
285
|
+
/** The cell containing the selection (caret or the anchor of a cell range) */
|
|
286
|
+
declare function $getSelectedTableCell(): TableCellNode | null;
|
|
287
|
+
/** Where the selection sits in its table, or null outside tables */
|
|
288
|
+
declare function $getTableRowPosition(): TableRowPosition | null;
|
|
289
|
+
/**
|
|
290
|
+
* The row boundaries a new row may be inserted at: `0..count`, minus `0`
|
|
291
|
+
* when the first row is a header (a table's header is always its first row).
|
|
292
|
+
*/
|
|
293
|
+
declare function insertableRowIndices(position: Pick<TableRowPosition, 'count' | 'hasHeader'>): number[];
|
|
294
|
+
/** A row can be removed as long as one row stays */
|
|
295
|
+
declare function canDeleteRow(position: Pick<TableRowPosition, 'count'>): boolean;
|
|
296
|
+
/**
|
|
297
|
+
* Insert an empty row so that it becomes row `index` (`0` = first,
|
|
298
|
+
* `count` = last). Column header state is copied from the neighbouring
|
|
299
|
+
* row; the header row itself is never displaced, so `index` is clamped to
|
|
300
|
+
* `1` when the table has a header. Returns the new row, selected at its
|
|
301
|
+
* `column`-th cell (default: the first).
|
|
302
|
+
*/
|
|
303
|
+
declare function $insertTableRowAt(table: TableNode, index: number, column?: number): TableRowNode;
|
|
304
|
+
/**
|
|
305
|
+
* Remove row `index`. No-op on a single-row table (see `canDeleteRow`).
|
|
306
|
+
* Removing the header row makes the next row the header so the markdown
|
|
307
|
+
* keeps its divider. Selection moves to the same column of the row that
|
|
308
|
+
* takes the removed row's place (or the last row).
|
|
309
|
+
*/
|
|
310
|
+
declare function $deleteTableRowAt(table: TableNode, index: number, column?: number): boolean;
|
|
311
|
+
/**
|
|
312
|
+
* Insert a row next to the selection's row. Returns the new row, or null
|
|
313
|
+
* outside tables.
|
|
314
|
+
*/
|
|
315
|
+
declare function $insertTableRowNear(table: TableNode, position: 'above' | 'below'): TableRowNode | null;
|
|
316
|
+
/** Remove the selection's row. Returns false when nothing was removed. */
|
|
317
|
+
declare function $deleteSelectedTableRow(table: TableNode): boolean;
|
|
318
|
+
|
|
122
319
|
type MarkdownEditorApi = Readonly<{
|
|
123
320
|
/** The underlying Lexical editor, for dispatching your own commands */
|
|
124
321
|
editor: LexicalEditor;
|
|
@@ -164,6 +361,19 @@ type MarkdownEditorApi = Readonly<{
|
|
|
164
361
|
tableDensity: TableDensity | null;
|
|
165
362
|
/** Change the density of the table containing the selection; no-op outside tables */
|
|
166
363
|
setTableDensity: (density: TableDensity) => void;
|
|
364
|
+
/** The selection's row in its table (index, column, row count); `null` outside tables */
|
|
365
|
+
tableRow: TableRowPosition | null;
|
|
366
|
+
/**
|
|
367
|
+
* Insert an empty row next to the selection's row (default `below`) and
|
|
368
|
+
* move the caret into it; no-op outside tables. A row is never inserted
|
|
369
|
+
* above the header row: `above` there inserts right below it.
|
|
370
|
+
*/
|
|
371
|
+
insertTableRow: (position?: 'above' | 'below') => void;
|
|
372
|
+
/**
|
|
373
|
+
* Remove the selection's row; no-op outside tables and on the last
|
|
374
|
+
* remaining row. Deleting the header row makes the next row the header.
|
|
375
|
+
*/
|
|
376
|
+
deleteTableRow: () => void;
|
|
167
377
|
canUndo: boolean;
|
|
168
378
|
canRedo: boolean;
|
|
169
379
|
undo: () => void;
|
|
@@ -285,102 +495,6 @@ declare function $isFrontmatterNode(node: LexicalNode | null | undefined): node
|
|
|
285
495
|
*/
|
|
286
496
|
declare const FRONTMATTER: MultilineElementTransformer;
|
|
287
497
|
|
|
288
|
-
/** Card-like shapes: fillable, bindable, carrying the three text slots */
|
|
289
|
-
type BoxType = 'rect' | 'ellipse' | 'diamond' | 'note' | 'cylinder' | 'cloud' | 'queue' | 'actor';
|
|
290
|
-
type ConnectorType = 'arrow' | 'line';
|
|
291
|
-
type DrawingShapeType = BoxType | ConnectorType | 'text';
|
|
292
|
-
declare const BOX_TYPES: readonly BoxType[];
|
|
293
|
-
declare const CONNECTOR_TYPES: readonly ConnectorType[];
|
|
294
|
-
declare const SHAPE_TYPES: readonly DrawingShapeType[];
|
|
295
|
-
type Point = Readonly<{
|
|
296
|
-
x: number;
|
|
297
|
-
y: number;
|
|
298
|
-
}>;
|
|
299
|
-
type BindingSide = 'top' | 'right' | 'bottom' | 'left';
|
|
300
|
-
/**
|
|
301
|
-
* Where a connector endpoint attaches to a box.
|
|
302
|
-
*
|
|
303
|
-
* `fixedPoint` is a ratio inside the box's bounding box (`[0,0]` top-left,
|
|
304
|
-
* `[1,1]` bottom-right). Omitted = the box center, which makes the endpoint
|
|
305
|
-
* auto-aim at the other end. `mode: 'inside'` pins the endpoint exactly on
|
|
306
|
-
* the fixed point; the default (`'orbit'`) projects it onto the outline with
|
|
307
|
-
* a small gap.
|
|
308
|
-
*/
|
|
309
|
-
type Binding = Readonly<{
|
|
310
|
-
id: string;
|
|
311
|
-
fixedPoint?: readonly [number, number];
|
|
312
|
-
mode?: 'orbit' | 'inside';
|
|
313
|
-
}>;
|
|
314
|
-
type DrawingShape = Readonly<{
|
|
315
|
-
id: string;
|
|
316
|
-
type: DrawingShapeType;
|
|
317
|
-
/** Top-left corner (boxes/text) or start point (connectors) */
|
|
318
|
-
x: number;
|
|
319
|
-
y: number;
|
|
320
|
-
/** Size (boxes/text) or delta to the end point (connectors) */
|
|
321
|
-
w: number;
|
|
322
|
-
h: number;
|
|
323
|
-
stroke: string;
|
|
324
|
-
fill: string;
|
|
325
|
-
strokeWidth: number;
|
|
326
|
-
/** Standalone text, main (center) content of a box, or connector label */
|
|
327
|
-
text?: string;
|
|
328
|
-
/** Small heading rendered at the top of a box */
|
|
329
|
-
label?: string;
|
|
330
|
-
/** Small line rendered at the bottom of a box */
|
|
331
|
-
footer?: string;
|
|
332
|
-
/** Connector: box the start point is attached to */
|
|
333
|
-
startBinding?: Binding;
|
|
334
|
-
/** Connector: box the end point is attached to */
|
|
335
|
-
endBinding?: Binding;
|
|
336
|
-
/** Arrow: arrowheads on both ends */
|
|
337
|
-
bidirectional?: boolean;
|
|
338
|
-
/** Connector routing: right-angled auto-routed path instead of a straight line */
|
|
339
|
-
routing?: 'elbow';
|
|
340
|
-
/**
|
|
341
|
-
* Elbow override: position of the middle segment as a fraction of the
|
|
342
|
-
* span, applied only when the routed path is a simple three-segment Z.
|
|
343
|
-
*/
|
|
344
|
-
elbow?: number;
|
|
345
|
-
/**
|
|
346
|
-
* Connector: intermediate path points between start and end (absolute
|
|
347
|
-
* canvas coordinates). Takes precedence over `routing`.
|
|
348
|
-
*/
|
|
349
|
-
waypoints?: readonly Point[];
|
|
350
|
-
}>;
|
|
351
|
-
type DrawingData = Readonly<{
|
|
352
|
-
version: 2;
|
|
353
|
-
/**
|
|
354
|
-
* Logical canvas width. When set the drawing is scaled to fit narrower
|
|
355
|
-
* layouts (SVG viewBox); when omitted the canvas is fluid and shapes are
|
|
356
|
-
* in CSS pixels.
|
|
357
|
-
*/
|
|
358
|
-
canvasWidth?: number;
|
|
359
|
-
canvasHeight: number;
|
|
360
|
-
/**
|
|
361
|
-
* Block width: `full` (default) spans the editor; `text` aligns with the
|
|
362
|
-
* text column; `content` fits the shapes' horizontal extent. The editor
|
|
363
|
-
* omits `full` unless it was written explicitly (an insertion default or
|
|
364
|
-
* the source payload); unknown values are dropped.
|
|
365
|
-
*/
|
|
366
|
-
width?: BlockWidth;
|
|
367
|
-
shapes: readonly DrawingShape[];
|
|
368
|
-
}>;
|
|
369
|
-
declare const EMPTY_DRAWING: DrawingData;
|
|
370
|
-
declare const STROKE_COLORS: readonly ["#1e1e1e", "#e03131", "#2f9e44", "#1971c2", "#f08c00", "#7048e8"];
|
|
371
|
-
declare const FILL_COLORS: readonly ["transparent", "#ffc9c9", "#b2f2bb", "#a5d8ff", "#ffec99", "#d0bfff"];
|
|
372
|
-
/** Edge midpoints, used by the ```diagram skeleton's `side` option */
|
|
373
|
-
declare const SIDE_FIXED_POINTS: Record<BindingSide, readonly [number, number]>;
|
|
374
|
-
declare function serializeDrawingData(data: DrawingData): string;
|
|
375
|
-
/**
|
|
376
|
-
* Parse a ```drawing payload. Exactly one format is accepted: version 2 as
|
|
377
|
-
* written by the editor (the ```diagram skeleton is a separate block type,
|
|
378
|
-
* see skeleton.ts). Shapes that fail validation are dropped and a malformed
|
|
379
|
-
* document yields an empty canvas. Never throws.
|
|
380
|
-
*/
|
|
381
|
-
declare function parseDrawingData(json: string): DrawingData;
|
|
382
|
-
declare function normalizeDrawingData(parsed: unknown): DrawingData;
|
|
383
|
-
|
|
384
498
|
type SerializedDrawingNode = Spread<{
|
|
385
499
|
data: string;
|
|
386
500
|
}, SerializedLexicalNode>;
|
|
@@ -1252,4 +1366,4 @@ declare const codeTokenizer: LexicalTokenizer;
|
|
|
1252
1366
|
*/
|
|
1253
1367
|
declare function registerCodeBlockHighlighting(editor: LexicalEditor): () => void;
|
|
1254
1368
|
|
|
1255
|
-
export { $createDrawingNode, $createFrontmatterNode, $getSelectedTable, $getTableDensity, $getTableSettings, $getTableWidth, $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, EMPTY_DRAWING, type EditorContentProps, type EditorMode, type EditorRootProps, FILL_COLORS, FRONTMATTER, FormatButtons, FrontmatterNode, HistoryButtons, 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 TableSettings, type TableSettingsOptions, type TextField, Toolbar, ToolbarButton, ToolbarDivider, type ToolbarItems, anchorPoint, bindEndpoints, boxOutline, codeTokenizer, connectorPoints, drawingToMermaid, expandSkeleton, findBoxAt, fixedPointFor, formatTableSettingsMarker, getCodeLanguages, hasCodeLanguage, isBlockWidth, isDrawingSkeleton, makeBinding, normalizeDrawingData, parseDrawingData, parseDrawingSkeleton, parseTableSettingsMarker, registerCodeBlockHighlighting, registerCodeLanguage, resolveBindings, resolveCodeLanguage, routeElbow, serializeDrawingData, tokenizeCode, useMarkdownEditor };
|
|
1369
|
+
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 };
|