@fusion.dev/helix-headless 0.220.0 → 0.222.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/api.json +1 -1
- package/custom-elements.json +1 -1
- package/dist/code-editor/root/code-editor-root.d.ts +20 -20
- package/dist/editor/index.d.ts +1 -0
- package/dist/editor/index.js +1 -0
- package/dist/editor/root/editor-root.d.ts +611 -0
- package/dist/editor/root/editor-root.js +860 -0
- package/dist/element-events.generated.js +1 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1 -0
- package/examples.json +1 -1
- package/lint.json +1 -1
- package/package.json +5 -5
- package/types/jsx.d.ts +1113 -8
- package/types/svelte.d.ts +1 -0
- package/types/vue.d.ts +208 -2
- package/types/words.d.ts +248 -0
|
@@ -0,0 +1,611 @@
|
|
|
1
|
+
import { HelixElement } from '@fusion.dev/helix-core';
|
|
2
|
+
import { nothing, type PropertyValues, type TemplateResult } from 'lit';
|
|
3
|
+
import '../../button/index.js';
|
|
4
|
+
import '../../divider/index.js';
|
|
5
|
+
import '../../find/index.js';
|
|
6
|
+
import type { FindDirection, FindQuery, FindResult } from '../../find/index.js';
|
|
7
|
+
import '../../icon-button/index.js';
|
|
8
|
+
import '../../menu/index.js';
|
|
9
|
+
import '../../toolbar/index.js';
|
|
10
|
+
/**
|
|
11
|
+
* Something the editor's toolbar draws and a renderer runs at the selection:
|
|
12
|
+
* a block type, a mark, a list, a quote, a link, or a step through history.
|
|
13
|
+
*/
|
|
14
|
+
export type EditorTool = 'bold' | 'bullet-list' | 'code' | 'code-block' | 'heading-1' | 'heading-2' | 'heading-3' | 'italic' | 'link' | 'ordered-list' | 'paragraph' | 'quote' | 'redo' | 'strike' | 'undo';
|
|
15
|
+
/** The block types the block menu offers, in its order. */
|
|
16
|
+
export declare const EDITOR_BLOCKS: readonly EditorTool[];
|
|
17
|
+
/** The toolbar's groups, in the order it draws them, and the tools in each. */
|
|
18
|
+
declare const GROUPS: readonly [readonly ["history", readonly ["undo", "redo"]], readonly ["block", readonly EditorTool[]], readonly ["marks", readonly ["bold", "italic", "strike", "code"]], readonly ["link", readonly ["link"]], readonly ["lists", readonly ["bullet-list", "ordered-list"]], readonly ["quote", readonly ["quote"]]];
|
|
19
|
+
/** A group of tools that `tools` names: the groups above, and `find`, the button that opens the find bar, which is drawn only where `tools` names it. */
|
|
20
|
+
export type EditorToolGroup = (typeof GROUPS)[number][0] | 'find';
|
|
21
|
+
/** What the frame asks of whatever draws the document, as the frame's settings stand. */
|
|
22
|
+
export interface EditorSettings {
|
|
23
|
+
/** The document's name, which the renderer gives the element that takes the text. */
|
|
24
|
+
label: string;
|
|
25
|
+
/** The words shown in an empty document. */
|
|
26
|
+
placeholder: string;
|
|
27
|
+
/** Whether the document cannot be edited. */
|
|
28
|
+
readOnly: boolean;
|
|
29
|
+
}
|
|
30
|
+
/** What the toolbar shows about the selection, which a renderer reports. */
|
|
31
|
+
export interface EditorFormats {
|
|
32
|
+
/** The tools whose format holds at the selection, such as `bold` or `bullet-list`. Their buttons are pressed. */
|
|
33
|
+
applied: readonly EditorTool[];
|
|
34
|
+
/** The block type at the selection, one of the block menu's tools, or empty where it is none of them. */
|
|
35
|
+
block: EditorTool | '';
|
|
36
|
+
/** The address of the link at the selection, or empty where there is none. */
|
|
37
|
+
link: string;
|
|
38
|
+
/** The tools that cannot apply at the selection, such as `undo` with nothing to undo. Their buttons are disabled. */
|
|
39
|
+
unavailable: readonly EditorTool[];
|
|
40
|
+
}
|
|
41
|
+
/**
|
|
42
|
+
* What draws a document for the frame: `connectEditor` from
|
|
43
|
+
* `@fusion.dev/helix-editor` builds one on ProseMirror, and a page drawing
|
|
44
|
+
* its document some other way hands the frame its own.
|
|
45
|
+
*
|
|
46
|
+
* `run` is the one method it must have. A tool the renderer does not list in
|
|
47
|
+
* `tools` is left off the toolbar.
|
|
48
|
+
*/
|
|
49
|
+
export interface EditorRenderer {
|
|
50
|
+
/**
|
|
51
|
+
* Finds `query` in the document, marks every match, and selects one by
|
|
52
|
+
* `direction`, for the find bar, and returns where the search stands. The
|
|
53
|
+
* find bar is drawn only for a renderer that has this.
|
|
54
|
+
*/
|
|
55
|
+
find?(query: FindQuery, direction: FindDirection): FindResult;
|
|
56
|
+
/** Takes the marks a search drew away, as the find bar closes. */
|
|
57
|
+
findEnd?(): void;
|
|
58
|
+
/** Puts focus in the document, with the selection where it was. */
|
|
59
|
+
focus?(): void;
|
|
60
|
+
/**
|
|
61
|
+
* Replaces the selected match, or every match with `all`, and returns where
|
|
62
|
+
* the search stands after. The find bar offers replacing only to a renderer
|
|
63
|
+
* that has this, and never while `readonly`.
|
|
64
|
+
*/
|
|
65
|
+
replace?(query: FindQuery, all: boolean): FindResult;
|
|
66
|
+
/**
|
|
67
|
+
* Runs a tool at the selection, and says whether it ran. `value` is a
|
|
68
|
+
* link's address for `link`, where empty takes the link off.
|
|
69
|
+
*/
|
|
70
|
+
run(tool: EditorTool, value?: string): boolean;
|
|
71
|
+
/** Applies the frame's settings. Called when attached and whenever one changes. */
|
|
72
|
+
settings?(settings: EditorSettings): void;
|
|
73
|
+
/** The tools the renderer can run, such as those its schema has the nodes and marks for. Absent is every tool. */
|
|
74
|
+
tools?(): readonly EditorTool[];
|
|
75
|
+
}
|
|
76
|
+
/** What the frame gives back to whatever it is attached to: how a renderer tells the frame what happened. */
|
|
77
|
+
export interface EditorSink {
|
|
78
|
+
/** Detaches the renderer, which the frame stops asking. */
|
|
79
|
+
detach(): void;
|
|
80
|
+
/** The selection moved or the document changed what the toolbar shows. */
|
|
81
|
+
formats(formats: EditorFormats): void;
|
|
82
|
+
/** The document changed under an open search, which now stands here. */
|
|
83
|
+
found(result: FindResult): void;
|
|
84
|
+
}
|
|
85
|
+
/**
|
|
86
|
+
* @summary A frame around a document that ProseMirror or another editor draws.
|
|
87
|
+
*
|
|
88
|
+
* @description
|
|
89
|
+
* Wraps a document drawn by ProseMirror or another rich text editor. The frame
|
|
90
|
+
* adds a toolbar, an address bar for links, and a box the document is drawn
|
|
91
|
+
* in. `connectEditor` from `@fusion.dev/helix-editor` connects ProseMirror:
|
|
92
|
+
* it gives the document Helix's typed blocks, each with a stable id, and draws
|
|
93
|
+
* them in your theme.
|
|
94
|
+
*
|
|
95
|
+
* The document is the element you write inside the frame, so it stays in the
|
|
96
|
+
* page: the browser's input methods, spellcheck, and right-to-left text work in
|
|
97
|
+
* it as they do in any field. A server can send the document's HTML there, and
|
|
98
|
+
* it reads before any script loads. Mark it `data-prose`, so the base layer
|
|
99
|
+
* draws its headings, lists, and quotes before a renderer connects.
|
|
100
|
+
*
|
|
101
|
+
* The toolbar's groups are named by `tools`, in this order: `history` (Undo
|
|
102
|
+
* and Redo), `block` (a menu of Paragraph, three headings, and Code block),
|
|
103
|
+
* `marks` (Bold, Italic, Strikethrough, and Code), `link`, `lists` (Bulleted
|
|
104
|
+
* and Numbered), and `quote`, which are drawn by default, and `find`, the Find
|
|
105
|
+
* button, which is drawn where `tools` names it. A tool the renderer cannot run
|
|
106
|
+
* is left out once it is connected, and a tool that cannot apply at the
|
|
107
|
+
* selection is disabled. A tool returns focus to the document once it has run.
|
|
108
|
+
* With `readonly`, the document cannot be edited and the toolbar is not drawn.
|
|
109
|
+
*
|
|
110
|
+
* Command+F opens a find bar under the toolbar, a Find that searches the
|
|
111
|
+
* document through the renderer, marks every match, and selects one. It
|
|
112
|
+
* replaces unless the document is `readonly`, which it searches too.
|
|
113
|
+
*
|
|
114
|
+
* **Keyboard.** In the document:
|
|
115
|
+
*
|
|
116
|
+
* - Command+B, Command+I, Command+Shift+X, and Command+E make text bold,
|
|
117
|
+
* italic, struck through, and code. Use Control in place of Command on
|
|
118
|
+
* Windows and Linux.
|
|
119
|
+
* - Command+Alt+0 makes a paragraph, Command+Alt+1 to 3 a heading, and
|
|
120
|
+
* Command+Alt+8 a code block.
|
|
121
|
+
* - Command+Shift+8, Command+Shift+7, and Command+Shift+9 make a bulleted
|
|
122
|
+
* list, a numbered list, and a quote.
|
|
123
|
+
* - Command+K opens the address bar for a link. Enter applies the address,
|
|
124
|
+
* and Escape closes the bar.
|
|
125
|
+
* - Command+Z undoes, and Command+Shift+Z redoes.
|
|
126
|
+
* - In a list, Tab nests the item and Shift+Tab lifts it. Escape then Tab
|
|
127
|
+
* leaves the document from anywhere, so a list never keeps focus.
|
|
128
|
+
* - Alt+F10 moves focus to the toolbar. The arrow keys move between its
|
|
129
|
+
* tools, and Escape returns to the document.
|
|
130
|
+
* - Command+F opens the find bar. Enter and Shift+Enter move between the
|
|
131
|
+
* matches, and Escape closes the bar and returns to the document.
|
|
132
|
+
*
|
|
133
|
+
* @since 0.221.0
|
|
134
|
+
* @status experimental
|
|
135
|
+
* @category editors
|
|
136
|
+
* @aliases Rich text editor, WYSIWYG, Document editor, ProseMirror, Block editor
|
|
137
|
+
* @documentation https://fusion.dev/helix/components/editor
|
|
138
|
+
*
|
|
139
|
+
* @slot - The element your renderer draws the document in.
|
|
140
|
+
* @slot actions - Controls of your own at the end of the toolbar, such as Share or Comment.
|
|
141
|
+
* @slot bold-icon - Replaces the glyph inside the Bold button.
|
|
142
|
+
* @slot bullet-list-icon - Replaces the glyph inside the Bulleted list button.
|
|
143
|
+
* @slot code-icon - Replaces the glyph inside the Code button.
|
|
144
|
+
* @slot find-icon - Replaces the glyph inside the Find button.
|
|
145
|
+
* @slot footer - Content under the document, such as a word count or whether it is saved.
|
|
146
|
+
* @slot italic-icon - Replaces the glyph inside the Italic button.
|
|
147
|
+
* @slot link-icon - Replaces the glyph inside the Link button.
|
|
148
|
+
* @slot ordered-list-icon - Replaces the glyph inside the Numbered list button.
|
|
149
|
+
* @slot quote-icon - Replaces the glyph inside the Quote button.
|
|
150
|
+
* @slot redo-icon - Replaces the glyph inside the Redo button.
|
|
151
|
+
* @slot strike-icon - Replaces the glyph inside the Strikethrough button.
|
|
152
|
+
* @slot undo-icon - Replaces the glyph inside the Undo button.
|
|
153
|
+
*
|
|
154
|
+
* @event {HelixFoundEvent} helix-found - The find bar searched or moved among the matches, with `count` and the selected match's `index`, counting from 0, or -1 for none.
|
|
155
|
+
*
|
|
156
|
+
* @csspart actions - The `actions` slot, last in the toolbar.
|
|
157
|
+
* @csspart block - The button that opens the block menu, which names the block type at the selection.
|
|
158
|
+
* @csspart block-button - The block menu button's inner button.
|
|
159
|
+
* @csspart block-live - The block menu button's live region, which speaks while the button is pending.
|
|
160
|
+
* @csspart block-menu - The menu of block types.
|
|
161
|
+
* @csspart block-menu-back - The control that returns from a submenu.
|
|
162
|
+
* @csspart block-menu-back-mark - The glyph on the back control of a submenu.
|
|
163
|
+
* @csspart block-menu-empty - The text shown when the menu has no items.
|
|
164
|
+
* @csspart block-menu-header - The bar above a submenu, holding the way back and its name.
|
|
165
|
+
* @csspart block-menu-live - The block menu's live region, which repeats the empty and loading text for screen readers.
|
|
166
|
+
* @csspart block-menu-loading - The text shown while the items are loading.
|
|
167
|
+
* @csspart block-menu-search-field - The block menu's filter field, drawn with `filterable`.
|
|
168
|
+
* @csspart block-menu-surface - The floating panel the block menu is drawn on.
|
|
169
|
+
* @csspart block-menu-title - The name of the submenu that is showing.
|
|
170
|
+
* @csspart block-name - The name of the block type at the selection, in the block menu's button.
|
|
171
|
+
* @csspart block-option - One block type in the block menu, checked while the selection is in one.
|
|
172
|
+
* @csspart block-option-end - A block type's trailing column, which holds its shortcut.
|
|
173
|
+
* @csspart block-option-item - A block type's row.
|
|
174
|
+
* @csspart block-option-mark - The check beside the block type the selection is in.
|
|
175
|
+
* @csspart block-option-shortcut - A block type's key.
|
|
176
|
+
* @csspart block-option-shortcut-kbd - The key inside it.
|
|
177
|
+
* @csspart block-option-shortcut-key - One key of a block type's chord.
|
|
178
|
+
* @csspart block-option-shortcut-separator - The `+` between two keys of a block type's chord.
|
|
179
|
+
* @csspart block-option-start - A block type's leading column.
|
|
180
|
+
* @csspart block-option-surface - A block type's submenu panel, which a block type does not open.
|
|
181
|
+
* @csspart block-spinner - The ring the block menu button turns while it is pending.
|
|
182
|
+
* @csspart block-text - The box the block menu button's words sit in.
|
|
183
|
+
* @csspart bold - The Bold button. Pressed while the selection is bold.
|
|
184
|
+
* @csspart bold-button - The Bold button's inner button.
|
|
185
|
+
* @csspart bold-live - The Bold button's live region, which speaks while the button is pending.
|
|
186
|
+
* @csspart bold-pressed - The Bold button while the selection is bold, beside `bold`.
|
|
187
|
+
* @csspart bold-spinner - The ring the Bold button turns while it is pending.
|
|
188
|
+
* @csspart bold-text - The box the Bold button's icon sits in.
|
|
189
|
+
* @csspart bullet-list - The Bulleted list button. Pressed while the selection is in a bulleted list.
|
|
190
|
+
* @csspart bullet-list-button - The Bulleted list button's inner button.
|
|
191
|
+
* @csspart bullet-list-live - The Bulleted list button's live region, which speaks while the button is pending.
|
|
192
|
+
* @csspart bullet-list-pressed - The Bulleted list button while the selection is in a bulleted list, beside `bullet-list`.
|
|
193
|
+
* @csspart bullet-list-spinner - The ring the Bulleted list button turns while it is pending.
|
|
194
|
+
* @csspart bullet-list-text - The box the Bulleted list button's icon sits in.
|
|
195
|
+
* @csspart code - The Code button. Pressed while the selection is code.
|
|
196
|
+
* @csspart code-button - The Code button's inner button.
|
|
197
|
+
* @csspart code-live - The Code button's live region, which speaks while the button is pending.
|
|
198
|
+
* @csspart code-pressed - The Code button while the selection is code, beside `code`.
|
|
199
|
+
* @csspart code-spinner - The ring the Code button turns while it is pending.
|
|
200
|
+
* @csspart code-text - The box the Code button's icon sits in.
|
|
201
|
+
* @csspart controls - The toolbar: the tools, then your actions, one tab stop that the arrows move along.
|
|
202
|
+
* @csspart controls-toolbar - The box inside the toolbar that lays its buttons out.
|
|
203
|
+
* @csspart divider - The line between two groups of tools.
|
|
204
|
+
* @csspart divider-content - The content set into a divider, which the editor sets none into.
|
|
205
|
+
* @csspart divider-line - The line itself.
|
|
206
|
+
* @csspart find - The find bar under the toolbar, where the reader searches the document: a Find of its own.
|
|
207
|
+
* @csspart find-actions - The find bar's `actions` slot, which the editor fills with nothing.
|
|
208
|
+
* @csspart find-bar - The find bar's strip: the field, the count, the toolbar, and the replace row while it shows.
|
|
209
|
+
* @csspart find-close - The button that closes the find bar.
|
|
210
|
+
* @csspart find-close-button - The find bar's close button's inner button.
|
|
211
|
+
* @csspart find-close-live - The find bar's close button's live region, which speaks while the button is pending.
|
|
212
|
+
* @csspart find-close-spinner - The ring the find bar's close button turns while it is pending.
|
|
213
|
+
* @csspart find-close-text - The box the find bar's close button's icon sits in.
|
|
214
|
+
* @csspart find-controls - The find bar's toolbar of options and moves.
|
|
215
|
+
* @csspart find-controls-toolbar - The box inside the find bar's toolbar that lays its buttons out.
|
|
216
|
+
* @csspart find-count - Which match is selected, of how many.
|
|
217
|
+
* @csspart find-field - The field the search is typed in.
|
|
218
|
+
* @csspart find-live - The find bar's live region, which says the count as it changes.
|
|
219
|
+
* @csspart find-match-case - The option that finds only the same case. Pressed while it applies.
|
|
220
|
+
* @csspart find-match-case-button - The match case button's inner button.
|
|
221
|
+
* @csspart find-match-case-live - The match case button's live region, which speaks while the button is pending.
|
|
222
|
+
* @csspart find-match-case-pressed - The match case option while it applies, beside `find-match-case`.
|
|
223
|
+
* @csspart find-match-case-spinner - The ring the match case button turns while it is pending.
|
|
224
|
+
* @csspart find-match-case-text - The box the match case button's icon sits in.
|
|
225
|
+
* @csspart find-next - The button that selects the next match.
|
|
226
|
+
* @csspart find-next-button - The next match button's inner button.
|
|
227
|
+
* @csspart find-next-live - The next match button's live region, which speaks while the button is pending.
|
|
228
|
+
* @csspart find-next-spinner - The ring the next match button turns while it is pending.
|
|
229
|
+
* @csspart find-next-text - The box the next match button's icon sits in.
|
|
230
|
+
* @csspart find-previous - The button that selects the previous match.
|
|
231
|
+
* @csspart find-previous-button - The previous match button's inner button.
|
|
232
|
+
* @csspart find-previous-live - The previous match button's live region, which speaks while the button is pending.
|
|
233
|
+
* @csspart find-previous-spinner - The ring the previous match button turns while it is pending.
|
|
234
|
+
* @csspart find-previous-text - The box the previous match button's icon sits in.
|
|
235
|
+
* @csspart find-regex - The option that reads the search as a regular expression. Pressed while it applies.
|
|
236
|
+
* @csspart find-regex-button - The regular expression button's inner button.
|
|
237
|
+
* @csspart find-regex-live - The regular expression button's live region, which speaks while the button is pending.
|
|
238
|
+
* @csspart find-regex-pressed - The regular expression option while it applies, beside `find-regex`.
|
|
239
|
+
* @csspart find-regex-spinner - The ring the regular expression button turns while it is pending.
|
|
240
|
+
* @csspart find-regex-text - The box the regular expression button's icon sits in.
|
|
241
|
+
* @csspart find-replace - The button that replaces the selected match.
|
|
242
|
+
* @csspart find-replace-all - The button that replaces every match.
|
|
243
|
+
* @csspart find-replace-all-button - The Replace all button's inner button.
|
|
244
|
+
* @csspart find-replace-all-live - The Replace all button's live region, which speaks while the button is pending.
|
|
245
|
+
* @csspart find-replace-all-spinner - The ring the Replace all button turns while it is pending.
|
|
246
|
+
* @csspart find-replace-all-text - The box the Replace all button's words sits in.
|
|
247
|
+
* @csspart find-replace-button - The Replace button's inner button.
|
|
248
|
+
* @csspart find-replace-field - The field the replacement is typed in.
|
|
249
|
+
* @csspart find-replace-live - The Replace button's live region, which speaks while the button is pending.
|
|
250
|
+
* @csspart find-replace-spinner - The ring the Replace button turns while it is pending.
|
|
251
|
+
* @csspart find-replace-text - The box the Replace button's words sits in.
|
|
252
|
+
* @csspart find-replace-toggle - The button that shows the replace field under the find field. Expanded while it shows. Not drawn while `readonly`.
|
|
253
|
+
* @csspart find-replace-toggle-button - The find and replace button's inner button.
|
|
254
|
+
* @csspart find-replace-toggle-live - The find and replace button's live region, which speaks while the button is pending.
|
|
255
|
+
* @csspart find-replace-toggle-spinner - The ring the find and replace button turns while it is pending.
|
|
256
|
+
* @csspart find-replace-toggle-text - The box the find and replace button's icon sits in.
|
|
257
|
+
* @csspart find-toggle - The Find button in the toolbar, drawn where `tools` names `find`, which opens and closes the find bar. Expanded while it is open.
|
|
258
|
+
* @csspart find-toggle-button - The Find button's inner button.
|
|
259
|
+
* @csspart find-toggle-live - The Find button's live region, which speaks while the button is pending.
|
|
260
|
+
* @csspart find-toggle-spinner - The ring the Find button turns while it is pending.
|
|
261
|
+
* @csspart find-toggle-text - The box the Find button's icon sits in.
|
|
262
|
+
* @csspart find-whole-word - The option that finds only whole words. Pressed while it applies.
|
|
263
|
+
* @csspart find-whole-word-button - The whole word button's inner button.
|
|
264
|
+
* @csspart find-whole-word-live - The whole word button's live region, which speaks while the button is pending.
|
|
265
|
+
* @csspart find-whole-word-pressed - The whole word option while it applies, beside `find-whole-word`.
|
|
266
|
+
* @csspart find-whole-word-spinner - The ring the whole word button turns while it is pending.
|
|
267
|
+
* @csspart find-whole-word-text - The box the whole word button's icon sits in.
|
|
268
|
+
* @csspart footer - The `footer` slot, under the document.
|
|
269
|
+
* @csspart header - The strip above the document that holds the toolbar, and the address bar under it while it is open.
|
|
270
|
+
* @csspart italic - The Italic button. Pressed while the selection is italic.
|
|
271
|
+
* @csspart italic-button - The Italic button's inner button.
|
|
272
|
+
* @csspart italic-live - The Italic button's live region, which speaks while the button is pending.
|
|
273
|
+
* @csspart italic-pressed - The Italic button while the selection is italic, beside `italic`.
|
|
274
|
+
* @csspart italic-spinner - The ring the Italic button turns while it is pending.
|
|
275
|
+
* @csspart italic-text - The box the Italic button's icon sits in.
|
|
276
|
+
* @csspart link - The Link button, which opens the address bar. Pressed while the selection is in a link, and expanded while the bar is open.
|
|
277
|
+
* @csspart link-apply - The button that applies the address.
|
|
278
|
+
* @csspart link-apply-button - The Apply button's inner button.
|
|
279
|
+
* @csspart link-apply-live - The Apply button's live region, which speaks while the button is pending.
|
|
280
|
+
* @csspart link-apply-spinner - The ring the Apply button turns while it is pending.
|
|
281
|
+
* @csspart link-apply-text - The box the Apply button's icon sits in.
|
|
282
|
+
* @csspart link-bar - The bar under the toolbar where the reader writes a link's address.
|
|
283
|
+
* @csspart link-button - The Link button's inner button.
|
|
284
|
+
* @csspart link-close - The button that closes the address bar.
|
|
285
|
+
* @csspart link-close-button - The close button's inner button.
|
|
286
|
+
* @csspart link-close-live - The close button's live region, which speaks while the button is pending.
|
|
287
|
+
* @csspart link-close-spinner - The ring the close button turns while it is pending.
|
|
288
|
+
* @csspart link-close-text - The box the close button's icon sits in.
|
|
289
|
+
* @csspart link-controls - The toolbar at the end of the address bar: Apply, Remove, and Close.
|
|
290
|
+
* @csspart link-controls-toolbar - The box inside the address bar's toolbar that lays its buttons out.
|
|
291
|
+
* @csspart link-field - The field the address is written in.
|
|
292
|
+
* @csspart link-live - The Link button's live region, which speaks while the button is pending.
|
|
293
|
+
* @csspart link-pressed - The Link button while the selection is in a link, beside `link`.
|
|
294
|
+
* @csspart link-remove - The button that takes the link off. Disabled where the selection is in no link.
|
|
295
|
+
* @csspart link-remove-button - The Remove button's inner button.
|
|
296
|
+
* @csspart link-remove-live - The Remove button's live region, which speaks while the button is pending.
|
|
297
|
+
* @csspart link-remove-spinner - The ring the Remove button turns while it is pending.
|
|
298
|
+
* @csspart link-remove-text - The box the Remove button's icon sits in.
|
|
299
|
+
* @csspart link-spinner - The ring the Link button turns while it is pending.
|
|
300
|
+
* @csspart link-text - The box the Link button's icon sits in.
|
|
301
|
+
* @csspart ordered-list - The Numbered list button. Pressed while the selection is in a numbered list.
|
|
302
|
+
* @csspart ordered-list-button - The Numbered list button's inner button.
|
|
303
|
+
* @csspart ordered-list-live - The Numbered list button's live region, which speaks while the button is pending.
|
|
304
|
+
* @csspart ordered-list-pressed - The Numbered list button while the selection is in a numbered list, beside `ordered-list`.
|
|
305
|
+
* @csspart ordered-list-spinner - The ring the Numbered list button turns while it is pending.
|
|
306
|
+
* @csspart ordered-list-text - The box the Numbered list button's icon sits in.
|
|
307
|
+
* @csspart quote - The Quote button. Pressed while the selection is in a quote.
|
|
308
|
+
* @csspart quote-button - The Quote button's inner button.
|
|
309
|
+
* @csspart quote-live - The Quote button's live region, which speaks while the button is pending.
|
|
310
|
+
* @csspart quote-pressed - The Quote button while the selection is in a quote, beside `quote`.
|
|
311
|
+
* @csspart quote-spinner - The ring the Quote button turns while it is pending.
|
|
312
|
+
* @csspart quote-text - The box the Quote button's icon sits in.
|
|
313
|
+
* @csspart redo - The Redo button. Disabled while there is nothing to redo.
|
|
314
|
+
* @csspart redo-button - The Redo button's inner button.
|
|
315
|
+
* @csspart redo-live - The Redo button's live region, which speaks while the button is pending.
|
|
316
|
+
* @csspart redo-spinner - The ring the Redo button turns while it is pending.
|
|
317
|
+
* @csspart redo-text - The box the Redo button's icon sits in.
|
|
318
|
+
* @csspart region - The frame around the toolbar, the address bar, and the document.
|
|
319
|
+
* @csspart strike - The Strikethrough button. Pressed while the selection is struck through.
|
|
320
|
+
* @csspart strike-button - The Strikethrough button's inner button.
|
|
321
|
+
* @csspart strike-live - The Strikethrough button's live region, which speaks while the button is pending.
|
|
322
|
+
* @csspart strike-pressed - The Strikethrough button while the selection is struck through, beside `strike`.
|
|
323
|
+
* @csspart strike-spinner - The ring the Strikethrough button turns while it is pending.
|
|
324
|
+
* @csspart strike-text - The box the Strikethrough button's icon sits in.
|
|
325
|
+
* @csspart tools - A group of several tools, which a narrow toolbar wraps as one: Undo and Redo, the marks, or the lists and the quote.
|
|
326
|
+
* @csspart undo - The Undo button. Disabled while there is nothing to undo.
|
|
327
|
+
* @csspart undo-button - The Undo button's inner button.
|
|
328
|
+
* @csspart undo-live - The Undo button's live region, which speaks while the button is pending.
|
|
329
|
+
* @csspart undo-spinner - The ring the Undo button turns while it is pending.
|
|
330
|
+
* @csspart undo-text - The box the Undo button's icon sits in.
|
|
331
|
+
* @csspart viewport - The box the document is drawn in.
|
|
332
|
+
*
|
|
333
|
+
* @cssstate connected - A renderer draws the document.
|
|
334
|
+
* @cssstate document-focused - Focus is in the document, where the reader types.
|
|
335
|
+
* @cssstate find-open - The find bar is open.
|
|
336
|
+
* @cssstate link-open - The address bar is open.
|
|
337
|
+
*/
|
|
338
|
+
export declare class HelixHeadlessEditor extends HelixElement {
|
|
339
|
+
protected static markRules: string[];
|
|
340
|
+
/**
|
|
341
|
+
* The key this family's words are registered under, its styled tag:
|
|
342
|
+
* `registerWords('de', { 'helix-editor': { boldLabel: 'Fett' } })`.
|
|
343
|
+
*/
|
|
344
|
+
static words: string;
|
|
345
|
+
/** The block menu button's name. `{name}` is the block type at the selection. */
|
|
346
|
+
blockChosenLabel: string;
|
|
347
|
+
/** The block menu's name, read by screen readers. */
|
|
348
|
+
blockLabel: string;
|
|
349
|
+
/** The Bold button's label. */
|
|
350
|
+
boldLabel: string;
|
|
351
|
+
/** The Bulleted list button's label. */
|
|
352
|
+
bulletListLabel: string;
|
|
353
|
+
/** The Code block row's label in the block menu. */
|
|
354
|
+
codeBlockLabel: string;
|
|
355
|
+
/** The Code button's label. */
|
|
356
|
+
codeLabel: string;
|
|
357
|
+
/** The toolbar's name, read by screen readers. */
|
|
358
|
+
controlsLabel: string;
|
|
359
|
+
/** The document's name where `label` is empty and the host has no `aria-label`. */
|
|
360
|
+
fallbackLabel: string;
|
|
361
|
+
/** The Find button's label, and the find bar's name. */
|
|
362
|
+
findLabel: string;
|
|
363
|
+
/** A heading's name in the block menu. `{level}` is its level, 1 to 3. */
|
|
364
|
+
headingLabel: string;
|
|
365
|
+
/** The Italic button's label. */
|
|
366
|
+
italicLabel: string;
|
|
367
|
+
/**
|
|
368
|
+
* The document's name, read by screen readers. Name what it holds, such as
|
|
369
|
+
* "Release notes", so that several editors on one page can be told apart.
|
|
370
|
+
* Required.
|
|
371
|
+
*/
|
|
372
|
+
label: string;
|
|
373
|
+
/** The Apply button's label in the address bar. */
|
|
374
|
+
linkApplyLabel: string;
|
|
375
|
+
/** The close button's label in the address bar. */
|
|
376
|
+
linkCloseLabel: string;
|
|
377
|
+
/** The name of the address bar's toolbar, read by screen readers. */
|
|
378
|
+
linkControlsLabel: string;
|
|
379
|
+
/** The address field's name, which it also shows while it is empty. */
|
|
380
|
+
linkFieldLabel: string;
|
|
381
|
+
/** The Link button's label, and the address bar's name. */
|
|
382
|
+
linkLabel: string;
|
|
383
|
+
/** The Remove button's label in the address bar. */
|
|
384
|
+
linkRemoveLabel: string;
|
|
385
|
+
/** The Numbered list button's label. */
|
|
386
|
+
orderedListLabel: string;
|
|
387
|
+
/** The Paragraph row's label in the block menu. */
|
|
388
|
+
paragraphLabel: string;
|
|
389
|
+
/** The words shown in an empty document, such as "Write the release notes". */
|
|
390
|
+
placeholder: string;
|
|
391
|
+
/** The Quote button's label. */
|
|
392
|
+
quoteLabel: string;
|
|
393
|
+
/**
|
|
394
|
+
* Shows the document and takes no edits, with no toolbar, for a document
|
|
395
|
+
* someone reads, or one an agent is writing. The attribute is `readonly`,
|
|
396
|
+
* the platform's spelling.
|
|
397
|
+
*/
|
|
398
|
+
readOnly: boolean;
|
|
399
|
+
/** The Redo button's label. */
|
|
400
|
+
redoLabel: string;
|
|
401
|
+
/** The Strikethrough button's label. */
|
|
402
|
+
strikeLabel: string;
|
|
403
|
+
/**
|
|
404
|
+
* Which groups of tools the toolbar draws, as a list of `history`, `block`,
|
|
405
|
+
* `marks`, `link`, `lists`, and `quote`, or `none`. They are drawn in that
|
|
406
|
+
* order, whatever order the list is in. Absent is all six.
|
|
407
|
+
*/
|
|
408
|
+
tools?: string;
|
|
409
|
+
/** The Undo button's label. */
|
|
410
|
+
undoLabel: string;
|
|
411
|
+
/** What the toolbar shows about the selection, as the renderer last reported it. */
|
|
412
|
+
private formats;
|
|
413
|
+
/** What draws the document, while one is attached. */
|
|
414
|
+
private renderer;
|
|
415
|
+
/** Whether the address bar is open. */
|
|
416
|
+
private linkOpen;
|
|
417
|
+
/** The address the reader is writing in the address bar. */
|
|
418
|
+
private draft;
|
|
419
|
+
/** Whether the find bar is open, as it last said. */
|
|
420
|
+
private findOpen;
|
|
421
|
+
/** The find bar drawn now, the renderer it searches, and how a search is reported to it. */
|
|
422
|
+
private find;
|
|
423
|
+
/** Whether anything is slotted into `actions`, read before each render. */
|
|
424
|
+
private hasActions;
|
|
425
|
+
/** Escape was the last key in the document, so Tab leaves it. */
|
|
426
|
+
private escaped;
|
|
427
|
+
/** A choice in the block menu is waiting for the menu to close before focus goes back to the document. */
|
|
428
|
+
private chosen;
|
|
429
|
+
/**
|
|
430
|
+
* Hands the frame what draws the document. The frame sends it the settings
|
|
431
|
+
* now and as they change, asks it to run the tools the reader presses, and
|
|
432
|
+
* draws the toolbar from what it reports through the sink it gets back.
|
|
433
|
+
* Attaching another renderer detaches this one.
|
|
434
|
+
*/
|
|
435
|
+
attach(renderer: EditorRenderer): EditorSink;
|
|
436
|
+
/**
|
|
437
|
+
* Runs a tool at the selection, as its button does, and says whether it
|
|
438
|
+
* ran: a block type, a mark, a list, a quote, a step through history, or a
|
|
439
|
+
* link to `value`, where an empty `value` takes the link off. Nothing runs
|
|
440
|
+
* while no renderer is attached, or while `readonly`.
|
|
441
|
+
*/
|
|
442
|
+
run(tool: EditorTool, value?: string): boolean;
|
|
443
|
+
/** Puts focus in the document, with the selection where it was. */
|
|
444
|
+
focus(options?: FocusOptions): void;
|
|
445
|
+
/** What the renderer is told, as the frame's properties stand. */
|
|
446
|
+
private get settings();
|
|
447
|
+
/** The groups `tools` names. */
|
|
448
|
+
private get groups();
|
|
449
|
+
/**
|
|
450
|
+
* Whether a tool is drawn: its group named by `tools`, and, once a renderer
|
|
451
|
+
* is attached, a tool it can run. Drawn by the list alone until then, so a
|
|
452
|
+
* server's toolbar has the buttons a connected one will.
|
|
453
|
+
*/
|
|
454
|
+
private draws;
|
|
455
|
+
/** Whether the toolbar draws any tool. */
|
|
456
|
+
private get drawsAny();
|
|
457
|
+
/**
|
|
458
|
+
* Whether the document can be searched: always, until a renderer is
|
|
459
|
+
* attached, and then where it can find. Read-only documents too, with
|
|
460
|
+
* no replacing.
|
|
461
|
+
*/
|
|
462
|
+
private get searches();
|
|
463
|
+
/** Whether the toolbar draws the Find button: `find` named by `tools`, and a document that can be searched. */
|
|
464
|
+
private get drawsFind();
|
|
465
|
+
/** Whether a tool's button cannot be pressed now. */
|
|
466
|
+
private disabled;
|
|
467
|
+
/** A tool's name, on its button or its row. */
|
|
468
|
+
private nameOf;
|
|
469
|
+
/** Puts focus back in the document after a tool has run. */
|
|
470
|
+
private returnFocus;
|
|
471
|
+
/** Runs a tool its button pressed, and puts focus back in the document. */
|
|
472
|
+
private press;
|
|
473
|
+
/** Opens the address bar with the address of the link at the selection, and puts focus in its field. */
|
|
474
|
+
openLink(): void;
|
|
475
|
+
/** Closes the address bar, and puts focus back in the document. */
|
|
476
|
+
private closeLink;
|
|
477
|
+
/** Links the selection to the address in the field, or takes the link off where it is empty. */
|
|
478
|
+
private applyLink;
|
|
479
|
+
private removeLink;
|
|
480
|
+
private readonly handleLinkInput;
|
|
481
|
+
/** Enter applies the address and Escape closes the bar, outside a composition. */
|
|
482
|
+
private readonly handleLinkKeys;
|
|
483
|
+
/**
|
|
484
|
+
* Moves focus to the toolbar: to the tool that holds its tab stop, or its
|
|
485
|
+
* first enabled tool.
|
|
486
|
+
*/
|
|
487
|
+
private focusToolbar;
|
|
488
|
+
/** Escape in the toolbar returns to the document, unless a menu in it took the key. */
|
|
489
|
+
private readonly handleToolbarKeys;
|
|
490
|
+
/**
|
|
491
|
+
* Opens the find bar, with its field focused. The header is drawn first,
|
|
492
|
+
* since a read-only frame draws it only while the bar is open.
|
|
493
|
+
*/
|
|
494
|
+
private openFind;
|
|
495
|
+
/** Hands the find bar drawn now the renderer to search through, again whenever either changes. */
|
|
496
|
+
private attachFind;
|
|
497
|
+
/** A renderer, as the find bar searches through it: replacing where the renderer can. */
|
|
498
|
+
private finderFor;
|
|
499
|
+
/** The find bar opened or closed, which the Find button shows. */
|
|
500
|
+
private readonly handleFindToggle;
|
|
501
|
+
/**
|
|
502
|
+
* Keys pressed in the document, heard on their way to the renderer.
|
|
503
|
+
*
|
|
504
|
+
* **Escape then Tab leaves the document**, because Tab in a list nests the
|
|
505
|
+
* item and would otherwise keep focus there. The Tab is stopped on its way to
|
|
506
|
+
* the renderer and left to the browser, which moves focus. Command+K opens
|
|
507
|
+
* the address bar, and Alt+F10 moves to the toolbar. A key pressed during a
|
|
508
|
+
* composition belongs to the input method, so none of these takes it.
|
|
509
|
+
*/
|
|
510
|
+
private readonly handleKeys;
|
|
511
|
+
/** Focus arrived in the frame: in the document, or on one of the frame's own controls. */
|
|
512
|
+
private readonly handleFocusIn;
|
|
513
|
+
/**
|
|
514
|
+
* Whether an event began in the document: inside a child of the frame's own
|
|
515
|
+
* that is in no named slot.
|
|
516
|
+
*
|
|
517
|
+
* **Asked of where the event began, and never of its path.** An event from
|
|
518
|
+
* a slotted child passes through the slot it is in, and so through this
|
|
519
|
+
* shadow root, on its way to the host, so a path naming the shadow root is
|
|
520
|
+
* every event the frame hears.
|
|
521
|
+
*/
|
|
522
|
+
private fromDocument;
|
|
523
|
+
/** Focus left: the next focus in the frame, if any, says where it went. */
|
|
524
|
+
private readonly handleFocusOut;
|
|
525
|
+
/** A control added to `actions` or taken away, which the next render reads. */
|
|
526
|
+
private readonly handleActions;
|
|
527
|
+
/** Keeps the check on the block type the selection is in: a block type is chosen, never cleared. */
|
|
528
|
+
private readonly keepTick;
|
|
529
|
+
/** A block type was chosen in the menu. */
|
|
530
|
+
private choose;
|
|
531
|
+
/** The block menu closed: focus goes back to the document after a choice. */
|
|
532
|
+
private readonly handleMenuToggle;
|
|
533
|
+
connectedCallback(): void;
|
|
534
|
+
disconnectedCallback(): void;
|
|
535
|
+
protected firstUpdated(changed: PropertyValues): void;
|
|
536
|
+
protected updated(changed: PropertyValues): void;
|
|
537
|
+
protected willUpdate(changed: PropertyValues): void;
|
|
538
|
+
/**
|
|
539
|
+
* How the block menu's button is drawn, which the styled tier sets so it
|
|
540
|
+
* sits among the tools: unset here, where no axis is drawn.
|
|
541
|
+
*/
|
|
542
|
+
protected get blockEmphasis(): 'ghost' | undefined;
|
|
543
|
+
/** Whether a tool's format holds at the selection, which presses its button. */
|
|
544
|
+
private pressed;
|
|
545
|
+
/**
|
|
546
|
+
* The glyph of a tool that points along the line, Undo's and Redo's, which
|
|
547
|
+
* turns on a right-to-left page with the line.
|
|
548
|
+
*/
|
|
549
|
+
private renderPointing;
|
|
550
|
+
/** Undo and Redo. */
|
|
551
|
+
protected renderHistory(): TemplateResult | typeof nothing;
|
|
552
|
+
/** Bold, Italic, Strikethrough, and Code, each pressed while its mark holds. */
|
|
553
|
+
protected renderMarks(): TemplateResult | typeof nothing;
|
|
554
|
+
/**
|
|
555
|
+
* The Link button, which opens the address bar: pressed while the selection
|
|
556
|
+
* is in a link, and expanded while the bar is open.
|
|
557
|
+
*/
|
|
558
|
+
protected renderLinkTool(): TemplateResult | typeof nothing;
|
|
559
|
+
/** Bulleted list and Numbered list, each pressed while the selection is in one. */
|
|
560
|
+
protected renderLists(): TemplateResult | typeof nothing;
|
|
561
|
+
/**
|
|
562
|
+
* The lists and the quote, one group: each wraps the blocks it holds, so
|
|
563
|
+
* they stand together on the toolbar, and a narrow one wraps them as one.
|
|
564
|
+
*/
|
|
565
|
+
protected renderBlocks(): TemplateResult | typeof nothing;
|
|
566
|
+
/** Quote, pressed while the selection is in one. */
|
|
567
|
+
protected renderQuote(): TemplateResult | typeof nothing;
|
|
568
|
+
/**
|
|
569
|
+
* The block menu: a button naming the block type at the selection, and a
|
|
570
|
+
* row for each block type, the selection's checked.
|
|
571
|
+
*
|
|
572
|
+
* **Every name is in the button, one shown**, so it is as wide as the
|
|
573
|
+
* longest in the reader's language and does not move the tools after it as
|
|
574
|
+
* the selection moves between a paragraph and a heading.
|
|
575
|
+
*/
|
|
576
|
+
protected renderBlockMenu(): TemplateResult | typeof nothing;
|
|
577
|
+
/** A line between two groups of tools. */
|
|
578
|
+
protected renderDivider(): TemplateResult;
|
|
579
|
+
/** The Find button, which opens and closes the find bar: expanded while it is open. */
|
|
580
|
+
protected renderFindTool(): TemplateResult | typeof nothing;
|
|
581
|
+
/**
|
|
582
|
+
* The find bar, a Find of the frame's own that searches through the
|
|
583
|
+
* renderer, kept in the tree while closed so its field keeps what was typed.
|
|
584
|
+
* The frame takes the find key from the document itself, so the bar takes
|
|
585
|
+
* none. Drawn for any document that can be searched, with or without the
|
|
586
|
+
* Find button.
|
|
587
|
+
*/
|
|
588
|
+
protected renderFind(): TemplateResult | typeof nothing;
|
|
589
|
+
/**
|
|
590
|
+
* The toolbar: each group of tools `tools` names, a line between two, and
|
|
591
|
+
* then the page's `actions`, one tab stop between them.
|
|
592
|
+
*
|
|
593
|
+
* **Always drawn**, empty where nothing is in it, because the `actions` slot
|
|
594
|
+
* is inside it and a slot drawn only once something is slotted is a slot
|
|
595
|
+
* nothing can be slotted into.
|
|
596
|
+
*/
|
|
597
|
+
protected renderControls(): TemplateResult;
|
|
598
|
+
/**
|
|
599
|
+
* The address bar, kept in the tree while closed so its field keeps what
|
|
600
|
+
* was written. The field stands before the toolbar and outside it, because a
|
|
601
|
+
* toolbar leaves the arrows to a text field.
|
|
602
|
+
*/
|
|
603
|
+
protected renderLink(): TemplateResult | typeof nothing;
|
|
604
|
+
protected render(): TemplateResult;
|
|
605
|
+
}
|
|
606
|
+
declare global {
|
|
607
|
+
interface HTMLElementTagNameMap {
|
|
608
|
+
'helix-headless-editor': HelixHeadlessEditor;
|
|
609
|
+
}
|
|
610
|
+
}
|
|
611
|
+
export {};
|