@ai-markdown/core 3.3.1 → 3.4.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/LICENSE +1 -1
- package/dist/components/index.cjs +786 -167
- package/dist/components/index.cjs.map +1 -1
- package/dist/components/index.d.cts +388 -53
- package/dist/components/index.d.ts +388 -53
- package/dist/components/index.js +775 -163
- package/dist/components/index.js.map +1 -1
- package/package.json +3 -2
|
@@ -1,4 +1,93 @@
|
|
|
1
|
+
import { CodeLanguage } from "@ai-markdown/code-language-detector";
|
|
1
2
|
import { Element } from "hast";
|
|
3
|
+
/** Shared image semantics; no DOM or framework dependency. */
|
|
4
|
+
type ImageActionIconName = 'rotateLeft' | 'rotateRight' | 'zoomIn' | 'zoomOut' | 'close' | 'prev' | 'next' | 'flipX' | 'flipY';
|
|
5
|
+
type ImageIconName = 'placeholder' | 'error' | 'preview' | 'gallery' | ImageActionIconName;
|
|
6
|
+
type ImageLoadStatus = 'loading' | 'ready' | 'error';
|
|
7
|
+
/** Lucide paths supplied for the Markdown image skin (ISC license). */
|
|
8
|
+
export declare const imageIconPaths: Record<ImageIconName, readonly string[]>;
|
|
9
|
+
interface ImageGalleryItem {
|
|
10
|
+
id: object;
|
|
11
|
+
src: string;
|
|
12
|
+
alt: string;
|
|
13
|
+
/** DOM adapters provide document ordering without leaking DOM types. */
|
|
14
|
+
precedes: (other: object) => boolean;
|
|
15
|
+
}
|
|
16
|
+
interface ImageGallery {
|
|
17
|
+
/** Document-ordered entries. The same array is returned until the membership changes. */
|
|
18
|
+
items: () => readonly ImageGalleryItem[];
|
|
19
|
+
/** Number of registered entries; O(1), so listeners can test it without sorting. */
|
|
20
|
+
size: () => number;
|
|
21
|
+
subscribe: (listener: () => void) => () => void;
|
|
22
|
+
set: (item: ImageGalleryItem) => void;
|
|
23
|
+
remove: (id: object) => void;
|
|
24
|
+
}
|
|
25
|
+
/** Scope is an adapter-owned object, never a global document id. */
|
|
26
|
+
export declare function getImageGallery(scope: object): ImageGallery;
|
|
27
|
+
/** The preview toolbar actions, in toolbar order. */
|
|
28
|
+
export declare const imageActionNames: readonly ImageActionIconName[];
|
|
29
|
+
/**
|
|
30
|
+
* The text of one component, as a partial override of its English defaults.
|
|
31
|
+
* A function is read on every render, so it can follow an application's own
|
|
32
|
+
* i18n state. This package ships no translations.
|
|
33
|
+
*/
|
|
34
|
+
type LabelsOption<T> = Partial<T> | (() => Partial<T>);
|
|
35
|
+
/** The defaults with the supplied entries on top. An entry set to `undefined` keeps its default. */
|
|
36
|
+
export declare function resolveLabels<T extends object>(defaults: T, option?: LabelsOption<T>): T;
|
|
37
|
+
interface CodeBlockLabels {
|
|
38
|
+
/** Accessible name of the toolbar. */
|
|
39
|
+
actions: string;
|
|
40
|
+
/** Language shown for a block that has none. */
|
|
41
|
+
plainText: string;
|
|
42
|
+
copy: string;
|
|
43
|
+
copied: string;
|
|
44
|
+
copyFailed: string;
|
|
45
|
+
showSource: string;
|
|
46
|
+
showPreview: string;
|
|
47
|
+
expand: string;
|
|
48
|
+
collapse: string;
|
|
49
|
+
/** Shown above the source when a language renderer throws. */
|
|
50
|
+
previewFailed: string;
|
|
51
|
+
}
|
|
52
|
+
export declare const defaultCodeBlockLabels: Readonly<CodeBlockLabels>;
|
|
53
|
+
interface DiagramLabels {
|
|
54
|
+
/** Nothing has rendered yet and the document is still streaming. */
|
|
55
|
+
waiting: string;
|
|
56
|
+
/** Nothing has rendered yet and the source is complete. */
|
|
57
|
+
rendering: string;
|
|
58
|
+
/** The engine module could not be downloaded. */
|
|
59
|
+
loadFailed: string;
|
|
60
|
+
retry: string;
|
|
61
|
+
/** The engine failed without a message of its own. */
|
|
62
|
+
renderFailed: string;
|
|
63
|
+
/** The source is longer than the engine's `maxTextSize`. */
|
|
64
|
+
tooLarge: (length: number, limit: number) => string;
|
|
65
|
+
}
|
|
66
|
+
export declare const defaultDiagramLabels: Readonly<DiagramLabels>;
|
|
67
|
+
interface ImageLabels extends Record<ImageActionIconName, string> {
|
|
68
|
+
loading: string;
|
|
69
|
+
loadFailed: string;
|
|
70
|
+
/** Accessible name of the button that opens the preview. Receives the image's `alt`, which may be empty. */
|
|
71
|
+
open: (alt: string) => string;
|
|
72
|
+
/** Accessible name of a previewed image that has no `alt`. */
|
|
73
|
+
preview: string;
|
|
74
|
+
/** Accessible name of the preview toolbar. */
|
|
75
|
+
actions: string;
|
|
76
|
+
}
|
|
77
|
+
export declare const defaultImageLabels: Readonly<ImageLabels>;
|
|
78
|
+
/** Why a table has no export. `projectTable` reports one of these; `TableLabels` has the text for each. */
|
|
79
|
+
type TableExportReason = 'mergedCells' | 'notRectangular' | 'unsupportedStructure' | 'unsupportedContent' | 'unavailable';
|
|
80
|
+
interface TableLabels extends Record<TableExportReason, string> {
|
|
81
|
+
/** Accessible name of the toolbar. */
|
|
82
|
+
actions: string;
|
|
83
|
+
copy: string;
|
|
84
|
+
download: string;
|
|
85
|
+
copied: string;
|
|
86
|
+
copyFailed: string;
|
|
87
|
+
/** Accessible name of the scrolling region. */
|
|
88
|
+
scrollRegion: string;
|
|
89
|
+
}
|
|
90
|
+
export declare const defaultTableLabels: Readonly<TableLabels>;
|
|
2
91
|
interface CodeSource {
|
|
3
92
|
code: string;
|
|
4
93
|
language: string;
|
|
@@ -11,15 +100,106 @@ type TableProjection = {
|
|
|
11
100
|
reason?: undefined;
|
|
12
101
|
} | {
|
|
13
102
|
rows?: undefined;
|
|
14
|
-
reason:
|
|
103
|
+
reason: TableExportReason;
|
|
15
104
|
};
|
|
16
|
-
/** Project sanitized HAST semantics, never custom cell UI or raw Markdown.
|
|
105
|
+
/** Project sanitized HAST semantics, never custom cell UI or raw Markdown. A
|
|
106
|
+
* table that cannot be exported reports why as a code; `TableLabels` has the text. */
|
|
17
107
|
export declare function projectTable(node?: Element): TableProjection;
|
|
18
108
|
export declare function serializeTable(rows: readonly (readonly string[])[], delimiter?: ',' | '\t'): string;
|
|
109
|
+
/** Whether `next` is `previous` with nothing or more appended. */
|
|
110
|
+
export declare function extendsCode(next: string, previous: string): boolean;
|
|
111
|
+
/**
|
|
112
|
+
* Follows the language of one unlabelled code block.
|
|
113
|
+
*
|
|
114
|
+
* `read` answers during render, server rendering included, and changes
|
|
115
|
+
* nothing: a render that is thrown away cannot move the verdict. `observe` is
|
|
116
|
+
* called once the text is on screen, and only it feeds the detector that
|
|
117
|
+
* follows the block. That detector keeps one verdict for as long as the text
|
|
118
|
+
* only grows: it looks again only when the text has grown enough to change
|
|
119
|
+
* the evidence, never lowers its confidence, and charges a margin for a
|
|
120
|
+
* switch across language families. It is fed the text without hast's final
|
|
121
|
+
* newline, which makes every append a continuation.
|
|
122
|
+
*
|
|
123
|
+
* What `read` answers for a text:
|
|
124
|
+
* - the observed text, or one that extends it: the followed verdict as it
|
|
125
|
+
* stands. `observe` then looks at the new text and returns true when the
|
|
126
|
+
* verdict moved, so the host can read again;
|
|
127
|
+
* - anything else (a first or server render, a rewrite, an older text): the
|
|
128
|
+
* verdict a fresh detector gives it, which is also what `observe` will
|
|
129
|
+
* arrive at after starting over.
|
|
130
|
+
*
|
|
131
|
+
* While the document streams the detector does not look again before 80 more
|
|
132
|
+
* characters, and the streaming flag describes the document, not this fence.
|
|
133
|
+
* `observe` therefore starts a timer after each change: a block whose text
|
|
134
|
+
* has been still for `CODE_LANGUAGE_SETTLE_MS` is judged as complete, and
|
|
135
|
+
* `onSettle` asks the host to read again.
|
|
136
|
+
*/
|
|
137
|
+
export declare function createCodeLanguageTracker(onSettle: () => void): {
|
|
138
|
+
/** The verdict for `code`. Changes nothing, so a repeated or abandoned render is harmless. */
|
|
139
|
+
read(code: string, streaming: boolean): CodeLanguage | null;
|
|
140
|
+
/** Call once the text is on screen. Each call replaces the pending timer. True when the verdict `read` gave for `code` has moved. */
|
|
141
|
+
observe(code: string, streaming: boolean): boolean;
|
|
142
|
+
dispose: () => void;
|
|
143
|
+
};
|
|
144
|
+
/** The state of one code block at one update. Options arrive already resolved by the host. */
|
|
145
|
+
interface CodeBlockInput {
|
|
146
|
+
/** Raw accumulated source, including its trailing newline. */
|
|
147
|
+
code: string;
|
|
148
|
+
/** Explicit fence language, normalized. Empty when the fence has none. */
|
|
149
|
+
language: string;
|
|
150
|
+
/** Which block this is. A different value starts a new generation even when the text continues. */
|
|
151
|
+
identity?: string;
|
|
152
|
+
/** Document streaming state. */
|
|
153
|
+
streaming: boolean;
|
|
154
|
+
/** Detect the language of a block that has none. */
|
|
155
|
+
autoDetect: boolean;
|
|
156
|
+
/** Pretty-print a JSON block once it is complete. */
|
|
157
|
+
formatJson: boolean;
|
|
158
|
+
expandNestedJson: boolean;
|
|
159
|
+
/** Minimum time between two displayed frames of a growing block. Zero shows every update. */
|
|
160
|
+
highlightIntervalMs: number;
|
|
161
|
+
}
|
|
162
|
+
interface CodeBlockSnapshot {
|
|
163
|
+
/** Text for the highlighter: throttled while the block grows, pretty-printed when it is complete JSON. */
|
|
164
|
+
text: string;
|
|
165
|
+
/** The fence language, else the detected one, else empty. */
|
|
166
|
+
language: string;
|
|
167
|
+
/** Grows by one when the block is rewritten or becomes another block. An append keeps it. */
|
|
168
|
+
generation: number;
|
|
169
|
+
}
|
|
170
|
+
/**
|
|
171
|
+
* Everything a code block derives from its source, for one block.
|
|
172
|
+
*
|
|
173
|
+
* `read` answers during render, server rendering included. Equal input gives
|
|
174
|
+
* an equal answer, and a render that is abandoned leaves the committed
|
|
175
|
+
* generation and the language verdict alone. `commit` is called once the answer
|
|
176
|
+
* is on screen: it records the lineage, lets the language detector look at the
|
|
177
|
+
* text, and starts the display throttle and the language settle timer. When a
|
|
178
|
+
* commit or a timer changes the answer, `onChange` asks the host to read again. A host that never commits, such as a server render, always reads the
|
|
179
|
+
* current text.
|
|
180
|
+
*
|
|
181
|
+
* - An append keeps the generation; a rewrite, another fence language or
|
|
182
|
+
* another `identity` advances it.
|
|
183
|
+
* - While the document streams, appends inside `highlightIntervalMs` share one
|
|
184
|
+
* displayed frame. A rewrite, a language change, a static update and the end
|
|
185
|
+
* of the stream show the current text at once.
|
|
186
|
+
* - A block with no fence language is detected as it grows and judged as
|
|
187
|
+
* complete once its text has been still (see `createCodeLanguageTracker`).
|
|
188
|
+
* - JSON is pretty-printed when the document is not streaming, or as soon as
|
|
189
|
+
* the displayed text is a balanced value.
|
|
190
|
+
*/
|
|
191
|
+
export declare function createCodeBlockSession(onChange: () => void): {
|
|
192
|
+
read(input: CodeBlockInput): CodeBlockSnapshot;
|
|
193
|
+
commit(input: CodeBlockInput): void;
|
|
194
|
+
dispose(): void;
|
|
195
|
+
};
|
|
19
196
|
interface CodeFrame {
|
|
20
197
|
code: string;
|
|
21
198
|
language: string;
|
|
199
|
+
/** Shared only by append continuations (see `extendsCode`); never mutated. */
|
|
200
|
+
generation: object;
|
|
22
201
|
}
|
|
202
|
+
export declare function nextCodeFrame(previous: CodeFrame | undefined, code: string, language: string): CodeFrame;
|
|
23
203
|
/** A trailing throttle: append bursts replace one pending frame without
|
|
24
204
|
* moving its deadline. Replacements and completion bypass the timer. */
|
|
25
205
|
export declare function createCodeFrame(initial: CodeFrame, publish: (frame: CodeFrame) => void): {
|
|
@@ -32,16 +212,11 @@ export declare function createCodeFrame(initial: CodeFrame, publish: (frame: Cod
|
|
|
32
212
|
export declare function prettyPrintJson(text: string, expandNested?: boolean): string;
|
|
33
213
|
/** Bracket-balance gate, not a JSON validator. Retain quote/escape state
|
|
34
214
|
* across append seams so growing JSON does not rescan its whole body when
|
|
35
|
-
* each nested object closes. Replacements start a fresh lineage.
|
|
215
|
+
* each nested object closes. Replacements start a fresh lineage. The final
|
|
216
|
+
* newline of hast code text is left unscanned: it is whitespace, and it moves
|
|
217
|
+
* on every append. */
|
|
36
218
|
export declare function createJsonCompletenessScanner(): (text: string) => boolean;
|
|
37
219
|
export declare function jsonLooksComplete(text: string): boolean;
|
|
38
|
-
/** Mermaid owns global configuration and a global renderer. Keep initialize,
|
|
39
|
-
* parse and render in one serialized task. Each mounted diagram retains at
|
|
40
|
-
* most one pending task; superseded frames never enter Mermaid. */
|
|
41
|
-
export declare function createRenderQueue(): {
|
|
42
|
-
enqueue(owner: object, run: () => Promise<void>): Promise<void>;
|
|
43
|
-
cancel(owner: object): void;
|
|
44
|
-
};
|
|
45
220
|
export declare const mermaidRenderQueue: {
|
|
46
221
|
enqueue(owner: object, run: () => Promise<void>): Promise<void>;
|
|
47
222
|
cancel(owner: object): void;
|
|
@@ -65,10 +240,6 @@ type MermaidInitTarget = {
|
|
|
65
240
|
getConfig?: () => MermaidConfig;
|
|
66
241
|
};
|
|
67
242
|
};
|
|
68
|
-
/** Test hook: forget the theme cache so each test starts from a cold module. */
|
|
69
|
-
export declare const resetMermaidInitializationForTests: () => void;
|
|
70
|
-
/** mermaid's own default for `maxTextSize` (`MAX_TEXTLENGTH` in mermaidAPI). */
|
|
71
|
-
export declare const MERMAID_DEFAULT_MAX_TEXT_SIZE = 50000;
|
|
72
243
|
/**
|
|
73
244
|
* The effective `maxTextSize`. `mermaid.render` does not reject oversized
|
|
74
245
|
* input: it swaps in a placeholder diagram ("Maximum text size in diagram
|
|
@@ -110,64 +281,120 @@ export declare const getMermaidMaxTextSize: (mermaid: MermaidInitTarget) => numb
|
|
|
110
281
|
*/
|
|
111
282
|
export declare const ensureMermaidInitialized: (mermaid: MermaidInitTarget, isDark: boolean) => void;
|
|
112
283
|
interface DiagramEngine extends MermaidInitTarget {
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
}): Promise<unknown>;
|
|
284
|
+
/** Resolves truthy for a source that parses; rejects, or resolves falsy, for one that does not. */
|
|
285
|
+
parse(code: string): Promise<unknown>;
|
|
116
286
|
render(id: string, code: string): Promise<{
|
|
117
287
|
svg: string;
|
|
288
|
+
diagramType?: string;
|
|
118
289
|
bindFunctions?(element: object): void;
|
|
119
290
|
}>;
|
|
120
291
|
}
|
|
121
|
-
|
|
122
|
-
|
|
292
|
+
/**
|
|
293
|
+
* What the host shows. One value instead of separate flags whose combinations
|
|
294
|
+
* had to be kept coherent by hand:
|
|
295
|
+
* - `source`: nothing has rendered in this generation (warm-up, server render).
|
|
296
|
+
* - `diagram`: the last successful render.
|
|
297
|
+
* - `error`: only a failed corrective pass after a stream, or a static failure
|
|
298
|
+
* with no diagram up, enters this state.
|
|
299
|
+
*/
|
|
300
|
+
type DiagramView = {
|
|
301
|
+
kind: 'source';
|
|
302
|
+
} | {
|
|
303
|
+
kind: 'diagram';
|
|
123
304
|
svg: string;
|
|
124
|
-
|
|
305
|
+
chartType: string;
|
|
125
306
|
bind?: (element: object) => void;
|
|
307
|
+
} | DiagramError;
|
|
308
|
+
/**
|
|
309
|
+
* Why a diagram did not render, as data: the host owns the words.
|
|
310
|
+
* - `tooLarge`: the source is longer than the engine's `maxTextSize`.
|
|
311
|
+
* - `parse` and `render`: the engine refused the source or failed to draw it.
|
|
312
|
+
* `message` is the engine's own text, which is diagnostic and not
|
|
313
|
+
* translated, or empty when it gave none.
|
|
314
|
+
*/
|
|
315
|
+
type DiagramError = {
|
|
316
|
+
kind: 'error';
|
|
317
|
+
reason: 'tooLarge';
|
|
318
|
+
length: number;
|
|
319
|
+
limit: number;
|
|
320
|
+
} | {
|
|
321
|
+
kind: 'error';
|
|
322
|
+
reason: 'parse' | 'render';
|
|
323
|
+
message: string;
|
|
126
324
|
};
|
|
325
|
+
/** The text for an error view: the engine's own message when there is one, else the label for the reason. */
|
|
326
|
+
export declare function diagramErrorText(error: DiagramError, labels: Pick<DiagramLabels, 'tooLarge' | 'renderFailed'>): string;
|
|
327
|
+
interface DiagramState {
|
|
328
|
+
view: DiagramView;
|
|
329
|
+
/** The engine module could not be loaded and the automatic retries are spent. `retry()` starts over. */
|
|
330
|
+
loadFailed: boolean;
|
|
331
|
+
}
|
|
127
332
|
interface DiagramRequest {
|
|
128
333
|
code: string;
|
|
129
334
|
dark: boolean;
|
|
335
|
+
/** Document streaming state. Its edges mark the start and the end of a generation. */
|
|
130
336
|
streaming: boolean;
|
|
337
|
+
/** False while the host shows something else, such as the source. No attempt runs. */
|
|
131
338
|
active: boolean;
|
|
132
|
-
|
|
339
|
+
/** Minimum time between attempts while streaming. Zero attempts every update. */
|
|
133
340
|
interval: number;
|
|
134
341
|
}
|
|
135
|
-
/**
|
|
136
|
-
*
|
|
342
|
+
/**
|
|
343
|
+
* The render state machine for one diagram. The host passes every change of
|
|
344
|
+
* its inputs to `update` and draws what `publish` receives.
|
|
345
|
+
*
|
|
346
|
+
* ## While `streaming` is true
|
|
347
|
+
*
|
|
348
|
+
* The source is usually a truncated prefix, so a parse failure is expected:
|
|
349
|
+
* - Before the first success the view stays `source`, never `error`.
|
|
350
|
+
* - After a success the last diagram stays up; each attempt replaces it only
|
|
351
|
+
* when it succeeds.
|
|
352
|
+
* - Attempts are throttled by `interval` with the same trailing throttle as
|
|
353
|
+
* code display: appends inside an interval replace one pending frame without
|
|
354
|
+
* moving its deadline. A rewrite, a non-streaming update and the end of the
|
|
355
|
+
* stream pass through at once.
|
|
356
|
+
* - When streaming ends, one corrective pass runs on the final source. Its
|
|
357
|
+
* failure is published even over a diagram, because that diagram no longer
|
|
358
|
+
* matches the source. Only that one pass may do so.
|
|
359
|
+
* - When streaming starts, a new generation begins on the same instance (a
|
|
360
|
+
* regenerated answer keeps its block position). Everything from the previous
|
|
361
|
+
* generation is dropped and the view returns to `source`.
|
|
362
|
+
*
|
|
363
|
+
* ## While `streaming` stays false
|
|
364
|
+
*
|
|
365
|
+
* A failure is published only while no diagram is up. Once one is, a later
|
|
366
|
+
* failure (a theme change, an incomplete source from a host that does not pass
|
|
367
|
+
* `streaming`) keeps it.
|
|
368
|
+
*
|
|
369
|
+
* ## Always
|
|
370
|
+
*
|
|
371
|
+
* - An attempt whose source and theme match the diagram on screen is skipped.
|
|
372
|
+
* - A source above the engine's `maxTextSize` is an error, not a render.
|
|
373
|
+
* - A failed engine download is not a diagram error. It keeps the view, keeps a
|
|
374
|
+
* pending corrective pass, and is retried a bounded number of times.
|
|
375
|
+
* - An attempt that has been superseded publishes nothing.
|
|
376
|
+
*/
|
|
137
377
|
export declare function createDiagramController(load: () => Promise<DiagramEngine>, publish: (state: DiagramState) => void): {
|
|
138
|
-
update(
|
|
139
|
-
|
|
378
|
+
update(next: DiagramRequest): void;
|
|
379
|
+
/** Attempts again on unchanged inputs, with a fresh download budget. */
|
|
380
|
+
retry(): void;
|
|
381
|
+
dispose(): void;
|
|
140
382
|
};
|
|
383
|
+
/**
|
|
384
|
+
* Stops the page behind a preview from scrolling. `scrollbarWidth` is the
|
|
385
|
+
* width of the scrollbar that hiding the overflow removes
|
|
386
|
+
* (`window.innerWidth - document.documentElement.clientWidth`); the same width
|
|
387
|
+
* is added as padding so the page does not shift sideways. Pass zero, or
|
|
388
|
+
* nothing, when the scrollbar takes no space.
|
|
389
|
+
*/
|
|
141
390
|
export declare function lockImagePreviewScroll(target: {
|
|
142
391
|
style: {
|
|
143
392
|
overflow: string;
|
|
393
|
+
paddingRight?: string;
|
|
144
394
|
};
|
|
145
|
-
}): () => void;
|
|
146
|
-
/**
|
|
147
|
-
|
|
148
|
-
type ImageIconName = 'placeholder' | 'error' | 'preview' | 'gallery' | ImageActionIconName;
|
|
149
|
-
type ImageLoadStatus = 'loading' | 'ready' | 'error';
|
|
150
|
-
/** Lucide paths supplied for the Markdown image skin (ISC license). */
|
|
151
|
-
export declare const imageIconPaths: Record<ImageIconName, readonly string[]>;
|
|
152
|
-
export declare const imageGroupSelector = "[data-aimd-image-scope], .aim-typography-root, .aimd-vue, .mantine-Typography-root";
|
|
153
|
-
interface ImageGalleryItem {
|
|
154
|
-
id: object;
|
|
155
|
-
src: string;
|
|
156
|
-
alt: string;
|
|
157
|
-
/** DOM adapters provide document ordering without leaking DOM types. */
|
|
158
|
-
precedes: (other: object) => boolean;
|
|
159
|
-
}
|
|
160
|
-
interface ImageGallery {
|
|
161
|
-
items: () => readonly ImageGalleryItem[];
|
|
162
|
-
subscribe: (listener: () => void) => () => void;
|
|
163
|
-
set: (item: ImageGalleryItem) => void;
|
|
164
|
-
remove: (id: object) => void;
|
|
165
|
-
}
|
|
166
|
-
/** Scope is an adapter-owned object, never a global document id. */
|
|
167
|
-
export declare function getImageGallery(scope: object): ImageGallery;
|
|
168
|
-
export declare const imageActionLabels: Record<ImageActionIconName, string>;
|
|
169
|
-
/** Transform rules adapted from @rc-component/image 1.10.0 (MIT).
|
|
170
|
-
* Keep the Vue adapter's gestures aligned with the upstream React engine. */
|
|
395
|
+
}, scrollbarWidth?: number): () => void;
|
|
396
|
+
/** Transform rules adapted from @rc-component/image 1.10.0 (MIT, Copyright (c) 2019-present react-component; see LICENSE).
|
|
397
|
+
* Pure functions; `createImagePreviewController` applies them. */
|
|
171
398
|
interface ImageTransform {
|
|
172
399
|
x: number;
|
|
173
400
|
y: number;
|
|
@@ -187,7 +414,15 @@ interface ImageGeometry {
|
|
|
187
414
|
export declare const initialImageTransform: () => ImageTransform;
|
|
188
415
|
export declare function imageTransformStyle(transform: ImageTransform): string;
|
|
189
416
|
export declare function zoomImage(transform: ImageTransform, ratio: number, geometry: ImageGeometry, centerX?: number, centerY?: number, touch?: boolean): ImageTransform;
|
|
190
|
-
|
|
417
|
+
/**
|
|
418
|
+
* The zoom factor for one wheel event. A full notch (100 pixels) is one 1.5x
|
|
419
|
+
* step, and a smaller delta a proportional part of it.
|
|
420
|
+
* - `mode` is `WheelEvent.deltaMode`. Some browsers and mice report lines or
|
|
421
|
+
* pages, not pixels: three lines or one page count as a notch.
|
|
422
|
+
* - `pinch` is a trackpad pinch, which arrives as a wheel event with the
|
|
423
|
+
* control key set and small deltas. It scales continuously with the delta.
|
|
424
|
+
*/
|
|
425
|
+
export declare function imageWheelRatio(delta: number, mode?: number, pinch?: boolean): number;
|
|
191
426
|
/** Snap a moved image back inside the viewport, taking quarter turns into account. */
|
|
192
427
|
export declare function reboundImage(transform: ImageTransform, geometry: ImageGeometry, bounds: {
|
|
193
428
|
left: number;
|
|
@@ -210,6 +445,104 @@ export declare function imagePinchCenter(oldA: {
|
|
|
210
445
|
x: number;
|
|
211
446
|
y: number;
|
|
212
447
|
};
|
|
448
|
+
/**
|
|
449
|
+
* - `closed`: nothing to render.
|
|
450
|
+
* - `opening`: rendered in its starting style, for the frames a transition needs to start from.
|
|
451
|
+
* - `open`: the resting state.
|
|
452
|
+
* - `closing`: still rendered, in its leaving style, until the close duration has passed.
|
|
453
|
+
*/
|
|
454
|
+
type ImagePreviewPhase = 'closed' | 'opening' | 'open' | 'closing';
|
|
455
|
+
interface ImagePreviewState {
|
|
456
|
+
phase: ImagePreviewPhase;
|
|
457
|
+
/** The gallery in document order. It follows the gallery while the preview is open. */
|
|
458
|
+
items: readonly ImageGalleryItem[];
|
|
459
|
+
/** Index of the image shown, or -1 while closed. */
|
|
460
|
+
current: number;
|
|
461
|
+
item: ImageGalleryItem | undefined;
|
|
462
|
+
transform: ImageTransform;
|
|
463
|
+
/** Load state of the image shown. */
|
|
464
|
+
status: ImageLoadStatus;
|
|
465
|
+
/** A drag or a pinch is in progress: the image follows the pointer without a transition. */
|
|
466
|
+
moving: boolean;
|
|
467
|
+
canPrevious: boolean;
|
|
468
|
+
canNext: boolean;
|
|
469
|
+
canZoomIn: boolean;
|
|
470
|
+
canZoomOut: boolean;
|
|
471
|
+
}
|
|
472
|
+
/** What the controller needs from the page. */
|
|
473
|
+
interface ImagePreviewHost {
|
|
474
|
+
/** Layout box of the image shown, before its transform, and the viewport. Undefined while there is no image. */
|
|
475
|
+
geometry(): ImageGeometry | undefined;
|
|
476
|
+
/** Runs the callback before the next paint and returns a cancel function. `requestAnimationFrame` in a browser. */
|
|
477
|
+
frame(callback: () => void): () => void;
|
|
478
|
+
}
|
|
479
|
+
interface ImagePreviewOptions {
|
|
480
|
+
/** How long the leaving style stays up, in milliseconds. Zero closes at once. A function is read at each close,
|
|
481
|
+
* so a host can answer zero while the user prefers reduced motion. Default 300. */
|
|
482
|
+
closeDuration?: number | (() => number);
|
|
483
|
+
}
|
|
484
|
+
interface ImagePointer {
|
|
485
|
+
/** Pointer id: one drag, or one finger of a pinch. */
|
|
486
|
+
id: number;
|
|
487
|
+
x: number;
|
|
488
|
+
y: number;
|
|
489
|
+
/** `PointerEvent.button`. Only the main button starts a gesture. */
|
|
490
|
+
button?: number;
|
|
491
|
+
}
|
|
492
|
+
/**
|
|
493
|
+
* One image preview: which image of a gallery is shown, how it is transformed,
|
|
494
|
+
* and where it is in opening and closing. The host forwards its events as plain
|
|
495
|
+
* numbers and draws each state it is given.
|
|
496
|
+
*
|
|
497
|
+
* - `open(gallery, id)` shows the image registered under `id` and follows the
|
|
498
|
+
* gallery from then on: images added or removed while the preview is open
|
|
499
|
+
* update the list, and the preview closes when the image shown leaves it.
|
|
500
|
+
* - Pointer input is one model for mouse, pen and touch. One pointer drags.
|
|
501
|
+
* Two pointers pinch, around a centre weighted by how far each one moved. A
|
|
502
|
+
* pinch may shrink the image below its natural size; when the last pointer
|
|
503
|
+
* lifts the image snaps back inside the viewport. The host should capture
|
|
504
|
+
* the pointer when `pointerDown` returns true, so a drag that leaves the
|
|
505
|
+
* window or its frame still ends.
|
|
506
|
+
* - Drag and wheel updates reach `publish` at most once per frame; everything
|
|
507
|
+
* else is published at once. Each update is applied to the current state, so
|
|
508
|
+
* several in one frame add up.
|
|
509
|
+
* - Switching images resets the transform. Zoom is limited to 1x to 50x in
|
|
510
|
+
* 1.5x steps, about the pointer for the wheel and a double click, about the
|
|
511
|
+
* viewport centre for the toolbar.
|
|
512
|
+
*/
|
|
513
|
+
export declare function createImagePreviewController(host: ImagePreviewHost, publish: (state: ImagePreviewState) => void, options?: ImagePreviewOptions): {
|
|
514
|
+
state: () => ImagePreviewState;
|
|
515
|
+
/** Shows the image registered under `id`. False when the gallery has no such image. */
|
|
516
|
+
open(gallery: ImageGallery, id: object): boolean;
|
|
517
|
+
close: () => void;
|
|
518
|
+
/** Moves by `delta` images. Does nothing at either end of the gallery. */
|
|
519
|
+
go: (delta: number) => void;
|
|
520
|
+
/** A toolbar action. */
|
|
521
|
+
action(name: ImageActionIconName): void;
|
|
522
|
+
/** The image shown finished loading, or failed to. */
|
|
523
|
+
loaded(): void;
|
|
524
|
+
failed(): void;
|
|
525
|
+
/** True when the pointer now takes part in a gesture: capture it and prevent the default action. */
|
|
526
|
+
pointerDown(pointer: ImagePointer): boolean;
|
|
527
|
+
pointerMove(pointer: ImagePointer): void;
|
|
528
|
+
/** A pointer lifted or was cancelled. */
|
|
529
|
+
pointerUp(id: number): void;
|
|
530
|
+
/** True when the wheel zoomed: prevent the default action. `mode` is `WheelEvent.deltaMode`; `pinch` is a
|
|
531
|
+
* trackpad pinch, which browsers report as a wheel event with the control key set. */
|
|
532
|
+
wheel(input: {
|
|
533
|
+
deltaY: number;
|
|
534
|
+
x: number;
|
|
535
|
+
y: number;
|
|
536
|
+
mode?: number;
|
|
537
|
+
pinch?: boolean;
|
|
538
|
+
}): boolean;
|
|
539
|
+
/** Returns to the natural size, or zooms one step about the point when already there. */
|
|
540
|
+
doubleClick(x: number, y: number): void;
|
|
541
|
+
/** True when the key was used: prevent the default action. Left and right move through a gallery. */
|
|
542
|
+
key(key: string): boolean;
|
|
543
|
+
/** Stops every timer and subscription. The controller can be opened again afterwards. */
|
|
544
|
+
dispose(): void;
|
|
545
|
+
};
|
|
213
546
|
export interface CodeRendererInput {
|
|
214
547
|
/** Raw accumulated source, including its trailing newline. */
|
|
215
548
|
code: string;
|
|
@@ -229,5 +562,7 @@ export interface CodeBlockOptions {
|
|
|
229
562
|
expandNestedJson?: boolean;
|
|
230
563
|
highlightIntervalMs?: number;
|
|
231
564
|
mermaidIntervalMs?: number;
|
|
565
|
+
/** Text of the code block, as overrides of the English defaults. A function is called on every render. */
|
|
566
|
+
labels?: LabelsOption<CodeBlockLabels>;
|
|
232
567
|
}
|
|
233
|
-
export type { CodeFrame, CodeSource, DiagramEngine, DiagramRequest, DiagramState, ImageActionIconName, ImageGallery, ImageGalleryItem, ImageGeometry, ImageIconName, ImageLoadStatus, ImageTransform, MermaidInitTarget, TableProjection };
|
|
568
|
+
export type { CodeBlockInput, CodeBlockLabels, CodeBlockSnapshot, CodeFrame, CodeSource, DiagramEngine, DiagramError, DiagramLabels, DiagramRequest, DiagramState, DiagramView, ImageActionIconName, ImageGallery, ImageGalleryItem, ImageGeometry, ImageIconName, ImageLabels, ImageLoadStatus, ImagePointer, ImagePreviewHost, ImagePreviewOptions, ImagePreviewPhase, ImagePreviewState, ImageTransform, LabelsOption, MermaidInitTarget, TableExportReason, TableLabels, TableProjection };
|