@prosekit/lit 0.1.3 → 0.1.4

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.
@@ -10,11 +10,10 @@ import { PropertyValues } from 'lit';
10
10
  import { ReactiveController } from 'lit';
11
11
  import { ReactiveControllerHost } from 'lit';
12
12
  import { TemplateResult } from 'lit';
13
- import { UserProjectConfigExport } from 'vitest/dist/config.js';
14
13
  import { VirtualElement } from '@floating-ui/dom';
15
14
 
16
15
  export declare class AutocompleteEmpty extends LightElement implements AutocompleteEmptyProps {
17
- listContext?: AutocompleteListContext;
16
+ private listContext;
18
17
  connectedCallback(): void;
19
18
  protected willUpdate(_changedProperties: PropertyValues<this>): void;
20
19
  }
@@ -28,11 +27,28 @@ export declare interface AutocompleteEmptyProps {
28
27
  * from the rendered item's `textContent`.
29
28
  */
30
29
  declare class AutocompleteItem extends LightElement implements Partial<AutocompleteItemProps> {
30
+ private listContext;
31
+ /**
32
+ * @hidden
33
+ */
34
+ static properties: {
35
+ value: {
36
+ type: StringConstructor;
37
+ reflect: true;
38
+ attribute: string;
39
+ };
40
+ selected: {
41
+ type: BooleanConstructor;
42
+ reflect: true;
43
+ attribute: string;
44
+ };
45
+ onSelect: {
46
+ attribute: false;
47
+ };
48
+ };
31
49
  value: string;
32
50
  selected: boolean;
33
- /** @hidden */
34
51
  onSelect?: VoidFunction;
35
- listContext?: AutocompleteListContext;
36
52
  get content(): string;
37
53
  connectedCallback(): void;
38
54
  protected willUpdate(): void;
@@ -49,19 +65,33 @@ export { AutocompleteItemProps }
49
65
  export { AutocompleteItemProps as AutocompleteItemProps_alias_1 }
50
66
 
51
67
  declare class AutocompleteList extends LightElement implements Partial<AutocompleteListProps> {
52
- /** @hidden */
68
+ /**
69
+ * @hidden
70
+ */
53
71
  private listManager;
54
- /** @hidden */
72
+ /**
73
+ * @hidden
74
+ */
55
75
  private controller;
76
+ private popoverContext;
56
77
  private get active();
78
+ /**
79
+ * @hidden
80
+ */
81
+ static properties: {
82
+ editor: {
83
+ attribute: false;
84
+ };
85
+ };
57
86
  editor?: Editor;
58
- popoverContext: AutocompletePopoverContext | null;
59
- context: AutocompleteListContext;
87
+ private context;
60
88
  connectedCallback(): void;
61
89
  private get items();
62
90
  selectFirstItem(): void;
63
91
  private updateValue;
64
- /** @hidden */
92
+ /**
93
+ * @hidden
94
+ */
65
95
  willUpdate(changedProperties: PropertyValues<this>): void;
66
96
  }
67
97
  export { AutocompleteList }
@@ -73,6 +103,10 @@ export declare interface AutocompleteListContext {
73
103
  selectedReason: 'mouse' | 'keyboard';
74
104
  }
75
105
 
106
+ export declare const autocompleteListContext: {
107
+ __context__: AutocompleteListContext;
108
+ };
109
+
76
110
  export declare class AutocompleteListController implements ReactiveController {
77
111
  private host;
78
112
  private keymap;
@@ -91,19 +125,62 @@ export { AutocompleteListProps }
91
125
  export { AutocompleteListProps as AutocompleteListProps_alias_1 }
92
126
 
93
127
  export declare class AutocompletePopover extends Popover implements Partial<AutocompletePopoverProps> {
94
- /** @hidden */
128
+ /**
129
+ * @hidden
130
+ */
95
131
  private controller;
132
+ /**
133
+ * @hidden
134
+ */
135
+ static properties: {
136
+ editor: {
137
+ attribute: false;
138
+ };
139
+ regex: {
140
+ attribute: false;
141
+ };
142
+ popoverOptions: {
143
+ attribute: false;
144
+ };
145
+ onSelect: {
146
+ attribute: false;
147
+ };
148
+ active: {
149
+ type: BooleanConstructor;
150
+ reflect: true;
151
+ };
152
+ reference: {
153
+ attribute: false;
154
+ };
155
+ options: {
156
+ attribute: false;
157
+ };
158
+ autoUpdate: {
159
+ type: BooleanConstructor;
160
+ reflect: true;
161
+ };
162
+ autoUpdateOptions: {
163
+ type: ObjectConstructor;
164
+ };
165
+ dismiss: {
166
+ type: StringConstructor;
167
+ reflect: true;
168
+ };
169
+ };
96
170
  editor?: Editor;
97
171
  regex?: RegExp;
98
172
  popoverOptions: PopoverOptions;
99
- context: AutocompletePopoverContext;
100
- /** @hidden */
101
173
  onSelect?: VoidFunction;
174
+ private context;
102
175
  private get list();
103
176
  private updateContext;
104
- /** @hidden */
177
+ /**
178
+ * @hidden
179
+ */
105
180
  willUpdate(changedProperties: PropertyValues<this>): void;
106
- /** @hidden */
181
+ /**
182
+ * @hidden
183
+ */
107
184
  hide(): void;
108
185
  }
109
186
 
@@ -114,6 +191,10 @@ export declare interface AutocompletePopoverContext {
114
191
  handleSubmit: VoidFunction;
115
192
  }
116
193
 
194
+ export declare const autocompletePopoverContext: {
195
+ __context__: AutocompletePopoverContext;
196
+ };
197
+
117
198
  export declare class AutocompletePopoverController implements ReactiveController {
118
199
  private host;
119
200
  private onChange;
@@ -140,10 +221,53 @@ export { AutoUpdateOptions }
140
221
 
141
222
  export declare const blockComponentStyles: CSSResult;
142
223
 
224
+ /**
225
+ * If the browser supports the Popover API, we use the body as the boundary
226
+ * since we don't need to worry about the popover overflowing the parent
227
+ * element.
228
+ */
229
+ export declare const boundary: HTMLElement | undefined;
230
+
143
231
  export declare class ComboBox extends Popover {
232
+ /**
233
+ * @hidden
234
+ */
235
+ static properties: {
236
+ onDismiss: {
237
+ attribute: false;
238
+ };
239
+ active: {
240
+ type: BooleanConstructor;
241
+ reflect: true;
242
+ };
243
+ reference: {
244
+ attribute: false;
245
+ };
246
+ options: {
247
+ attribute: false;
248
+ };
249
+ autoUpdate: {
250
+ type: BooleanConstructor;
251
+ reflect: true;
252
+ };
253
+ autoUpdateOptions: {
254
+ type: ObjectConstructor;
255
+ };
256
+ dismiss: {
257
+ type: StringConstructor;
258
+ reflect: true;
259
+ };
260
+ };
144
261
  onDismiss?: VoidFunction;
145
262
  private listManager;
146
- context: ComboBoxContext;
263
+ /**
264
+ * @hidden
265
+ */
266
+ hide(): void;
267
+ private context;
268
+ private getContext;
269
+ private setInputValue;
270
+ private setSelectedValue;
147
271
  get items(): ComboBoxItem[];
148
272
  }
149
273
 
@@ -151,7 +275,7 @@ export declare interface ComboBoxContext {
151
275
  inputValue: string;
152
276
  setInputValue: (val: string) => void;
153
277
  selectedValue: string;
154
- setSelectedValue: (val: string) => void;
278
+ selectedReason: 'mouse' | 'keyboard';
155
279
  listManager: ListManager<ComboBoxItem>;
156
280
  }
157
281
 
@@ -160,13 +284,26 @@ export declare const comboBoxContext: {
160
284
  };
161
285
 
162
286
  export declare class ComboBoxInput extends LightElement {
287
+ /**
288
+ * @hidden
289
+ */
290
+ static properties: {
291
+ placeholder: {
292
+ attribute: true;
293
+ };
294
+ };
163
295
  placeholder: string;
164
- comboBoxContext: ComboBoxContext | null;
296
+ private comboBoxContext;
165
297
  private visible;
166
298
  private handleKeydown;
167
299
  private handleInput;
300
+ /**
301
+ * @hidden
302
+ */
168
303
  protected firstUpdated(): void;
169
- /** @hidden */
304
+ /**
305
+ * @hidden
306
+ */
170
307
  render(): TemplateResult<1>;
171
308
  }
172
309
 
@@ -175,12 +312,30 @@ export declare interface ComboBoxInputProps {
175
312
  }
176
313
 
177
314
  declare class ComboBoxItem extends LightElement {
315
+ /**
316
+ * @hidden
317
+ */
318
+ static properties: {
319
+ editor: {
320
+ attribute: false;
321
+ };
322
+ selected: {
323
+ type: BooleanConstructor;
324
+ reflect: true;
325
+ attribute: string;
326
+ };
327
+ onSelect: {
328
+ attribute: false;
329
+ };
330
+ };
178
331
  editor?: Editor;
179
332
  selected: boolean;
180
- comboBoxContext?: ComboBoxContext;
181
- /** @hidden */
182
333
  onSelect?: VoidFunction;
183
- protected updated(): void;
334
+ private comboBoxContext;
335
+ /**
336
+ * @hidden
337
+ */
338
+ protected updated(changedProperties: PropertyValues<this>): void;
184
339
  }
185
340
  export { ComboBoxItem }
186
341
  export { ComboBoxItem as ComboBoxItem_alias_1 }
@@ -192,7 +347,7 @@ export { ComboBoxItemProps }
192
347
  export { ComboBoxItemProps as ComboBoxItemProps_alias_1 }
193
348
 
194
349
  declare class ComboBoxList extends LightElement {
195
- comboBoxContext: ComboBoxContext | null;
350
+ private comboBoxContext;
196
351
  connectedCallback(): void;
197
352
  }
198
353
  export { ComboBoxList }
@@ -208,14 +363,6 @@ export declare interface ComboBoxProps extends PopoverProps {
208
363
  onDismiss?: VoidFunction;
209
364
  }
210
365
 
211
- export declare const commandListContext: {
212
- __context__: AutocompleteListContext;
213
- };
214
-
215
- export declare const commandPopoverContext: {
216
- __context__: AutocompletePopoverContext;
217
- };
218
-
219
366
  declare type CommandScore = (item: string, query: string) => number;
220
367
 
221
368
  export declare const commandScore: CommandScore;
@@ -224,7 +371,11 @@ export declare const componentStyles: CSSResult;
224
371
 
225
372
  export declare const default_alias: Options | Options[] | ((overrideOptions: Options) => Options | Options[] | Promise<Options | Options[]>);
226
373
 
227
- export declare const default_alias_1: UserProjectConfigExport;
374
+ export declare const default_alias_1: {
375
+ test: {
376
+ environment: "jsdom";
377
+ };
378
+ };
228
379
 
229
380
  /**
230
381
  * Default popover options.
@@ -240,17 +391,57 @@ export declare const defaultPopoverOptions_alias_2: PopoverOptions;
240
391
 
241
392
  export declare function defaultQueryBuilder(match: RegExpExecArray): string;
242
393
 
394
+ export declare function defineCustomElement(name: string, constructor: CustomElementConstructor, options?: ElementDefinitionOptions): void;
395
+
243
396
  export declare function getVirtualSelectionElement(view: EditorView): Range | undefined;
244
397
 
245
398
  export declare class InlinePopover extends Popover implements Partial<InlinePopoverProps> {
246
- /** @hidden */
247
- private controller;
399
+ /**
400
+ * @hidden
401
+ */
402
+ static properties: {
403
+ editor: {
404
+ attribute: false;
405
+ };
406
+ popoverOptions: {
407
+ attribute: false;
408
+ };
409
+ active: {
410
+ type: BooleanConstructor;
411
+ reflect: true;
412
+ };
413
+ reference: {
414
+ attribute: false;
415
+ };
416
+ options: {
417
+ attribute: false;
418
+ };
419
+ autoUpdate: {
420
+ type: BooleanConstructor;
421
+ reflect: true;
422
+ };
423
+ autoUpdateOptions: {
424
+ type: ObjectConstructor;
425
+ };
426
+ dismiss: {
427
+ type: StringConstructor;
428
+ reflect: true;
429
+ };
430
+ };
248
431
  editor?: Editor;
249
432
  popoverOptions: PopoverOptions;
250
- constructor();
251
- /** @hidden */
433
+ dismiss: "escape";
434
+ /**
435
+ * @hidden
436
+ */
437
+ private controller;
438
+ /**
439
+ * @hidden
440
+ */
252
441
  willUpdate(): void;
253
- /** @hidden */
442
+ /**
443
+ * @hidden
444
+ */
254
445
  hide(): void;
255
446
  }
256
447
 
@@ -283,6 +474,10 @@ export declare function isComboBoxItem(element?: Element | null): element is Com
283
474
  export declare function isComboBoxList(element?: Element | null): element is ComboBoxList;
284
475
 
285
476
  export declare class LightElement extends LitElement {
477
+ /**
478
+ * @hidden
479
+ */
480
+ constructor();
286
481
  createRenderRoot(): this;
287
482
  setHidden(hidden: boolean): void;
288
483
  }
@@ -330,37 +525,67 @@ export declare class ListManager<Item extends {
330
525
  * A custom element that displays a popover anchored to a reference element.
331
526
  */
332
527
  export declare class Popover extends LightElement implements Partial<PopoverProps> {
333
- /** @hidden */
334
- constructor();
335
528
  /**
336
- * Controls the visibility of the popover element. When set to `true`, the popover is displayed and positioned
337
- * relative to its reference element. When set to `false`, the popover is hidden and its positioning logic is
529
+ * @hidden
530
+ */
531
+ static properties: {
532
+ active: {
533
+ type: BooleanConstructor;
534
+ reflect: true;
535
+ };
536
+ reference: {
537
+ attribute: false;
538
+ };
539
+ options: {
540
+ attribute: false;
541
+ };
542
+ autoUpdate: {
543
+ type: BooleanConstructor;
544
+ reflect: true;
545
+ };
546
+ autoUpdateOptions: {
547
+ type: ObjectConstructor;
548
+ };
549
+ dismiss: {
550
+ type: StringConstructor;
551
+ reflect: true;
552
+ };
553
+ };
554
+ /**
555
+ * Controls the visibility of the popover element. When set to `true`, the
556
+ * popover is displayed and positioned relative to its reference element. When
557
+ * set to `false`, the popover is hidden and its positioning logic is
338
558
  * deactivated.
339
559
  */
340
560
  active: boolean;
341
561
  /**
342
- * The element that the popover is anchored to. This can be either a DOM element or an object that implements the
343
- * virtual element interface from Floating UI.
562
+ * The element that the popover is anchored to. This can be either a DOM
563
+ * element or an object that implements the virtual element interface from
564
+ * Floating UI.
344
565
  */
345
566
  reference?: Element | VirtualElement;
346
567
  /**
347
- * The options that are passed to the `computePosition` function from Floating UI. These options are used to
348
- * configure the positioning of the popover element relative to its reference element. For more information on the
568
+ * The options that are passed to the `computePosition` function from Floating
569
+ * UI. These options are used to configure the positioning of the popover
570
+ * element relative to its reference element. For more information on the
349
571
  * available options, please refer to the Floating UI documentation.
350
572
  */
351
573
  options?: PopoverOptions;
352
574
  /**
353
- * Controls whether the popover position is automatically updated when the reference element changes position. When
354
- * set to `true`, the popover position is updated automatically. When set to `false`, the popover position is only
355
- * updated when the given properties are changed.
575
+ * Controls whether the popover position is automatically updated when the
576
+ * reference element changes position. When set to `true`, the popover
577
+ * position is updated automatically. When set to `false`, the popover
578
+ * position is only updated when the given properties are changed.
356
579
  *
357
580
  * @default false
358
581
  */
359
582
  autoUpdate: boolean;
360
583
  /**
361
- * The options that are passed to the `autoUpdate` function from Floating UI. These options are used to configure the
362
- * automatic update behavior of the popover position. For more information on the available options, please refer to
363
- * the Floating UI documentation. This property is only used when the `autoUpdate` property is set to `true`.
584
+ * The options that are passed to the `autoUpdate` function from Floating UI.
585
+ * These options are used to configure the automatic update behavior of the
586
+ * popover position. For more information on the available options, please
587
+ * refer to the Floating UI documentation. This property is only used when the
588
+ * `autoUpdate` property is set to `true`.
364
589
  */
365
590
  autoUpdateOptions?: AutoUpdateOptions;
366
591
  /**
@@ -375,27 +600,48 @@ export declare class Popover extends LightElement implements Partial<PopoverProp
375
600
  *
376
601
  * @default "on"
377
602
  */
378
- dismiss: string;
379
- /** @hidden */
603
+ dismiss: 'off' | 'on' | 'click' | 'escape';
604
+ /**
605
+ * @hidden
606
+ */
380
607
  private disposeAutoUpdate?;
381
- /** @hidden */
608
+ /**
609
+ * @hidden
610
+ */
382
611
  private disposeEventListeners?;
383
- /** @hidden */
612
+ /**
613
+ * @hidden
614
+ */
384
615
  connectedCallback(): void;
385
- /** @hidden */
616
+ /**
617
+ * @hidden
618
+ */
386
619
  disconnectedCallback(): void;
387
- /** @hidden */
620
+ /**
621
+ * @hidden
622
+ */
388
623
  protected updated(changedProperties: PropertyValues<this>): void;
389
- /** @hidden */
624
+ /**
625
+ * @hidden
626
+ */
390
627
  private start;
391
- /** @hidden */
628
+ /**
629
+ * @hidden
630
+ */
392
631
  private compute;
393
- /** @hidden */
632
+ /**
633
+ * @hidden
634
+ */
394
635
  hide(): void;
395
636
  private handleDocumentMouseDown;
396
637
  private handleDocumentKeyDown;
397
638
  }
398
639
 
640
+ /**
641
+ * Whether the browser supports the [Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API).
642
+ */
643
+ export declare const popoverAvailable: boolean;
644
+
399
645
  /**
400
646
  * The `PopoverOptions` interface defines the options that can be passed to the
401
647
  * `computePosition` function from Floating UI. These options are used to
@@ -1,9 +1,9 @@
1
1
  // src/components/autocomplete-list/context.ts
2
2
  import { createContext } from "@lit/context";
3
- var commandListContext = createContext(
3
+ var autocompleteListContext = createContext(
4
4
  "prosekit-autocomplete-list-context"
5
5
  );
6
6
 
7
7
  export {
8
- commandListContext
8
+ autocompleteListContext
9
9
  };
@@ -0,0 +1,51 @@
1
+ import {
2
+ comboBoxContext
3
+ } from "./chunk-C4MW43I4.js";
4
+ import {
5
+ LightElement,
6
+ defineCustomElement
7
+ } from "./chunk-S32IZIQF.js";
8
+
9
+ // src/components/combo-box-item/component.ts
10
+ import { ContextConsumer } from "@lit/context";
11
+ var propNames = [];
12
+ var ComboBoxItem = class extends LightElement {
13
+ constructor() {
14
+ super(...arguments);
15
+ this.selected = false;
16
+ this.comboBoxContext = new ContextConsumer(this, {
17
+ context: comboBoxContext,
18
+ subscribe: true
19
+ });
20
+ }
21
+ /**
22
+ * @hidden
23
+ */
24
+ updated(changedProperties) {
25
+ var _a, _b, _c, _d, _e;
26
+ super.updated(changedProperties);
27
+ const content = ((_a = this.textContent) != null ? _a : "").trim();
28
+ const query = ((_c = (_b = this.comboBoxContext.value) == null ? void 0 : _b.inputValue) != null ? _c : "").trim();
29
+ const match = content.toLowerCase().includes(query.toLowerCase());
30
+ this.selected = match && content === ((_d = this.comboBoxContext.value) == null ? void 0 : _d.selectedValue);
31
+ this.ariaSelected = String(this.selected);
32
+ this.setHidden(!match);
33
+ if (this.selected && changedProperties.has("selected") && !changedProperties.get("selected") && ((_e = this.comboBoxContext.value) == null ? void 0 : _e.selectedReason) === "keyboard") {
34
+ this.scrollIntoView({ block: "nearest" });
35
+ }
36
+ }
37
+ };
38
+ /**
39
+ * @hidden
40
+ */
41
+ ComboBoxItem.properties = {
42
+ editor: { attribute: false },
43
+ selected: { type: Boolean, reflect: true, attribute: "data-selected" },
44
+ onSelect: { attribute: false }
45
+ };
46
+ defineCustomElement("prosekit-combo-box-item", ComboBoxItem);
47
+
48
+ export {
49
+ propNames,
50
+ ComboBoxItem
51
+ };
@@ -0,0 +1,60 @@
1
+ import {
2
+ autocompleteListContext
3
+ } from "./chunk-5CI65R73.js";
4
+ import {
5
+ LightElement,
6
+ defineCustomElement
7
+ } from "./chunk-S32IZIQF.js";
8
+
9
+ // src/components/autocomplete-item/component.ts
10
+ import { ContextConsumer } from "@lit/context";
11
+ import "lit";
12
+ var propNames = ["value", "onSelect"];
13
+ var AutocompleteItem = class extends LightElement {
14
+ constructor() {
15
+ super(...arguments);
16
+ this.listContext = new ContextConsumer(this, {
17
+ context: autocompleteListContext,
18
+ subscribe: true
19
+ });
20
+ this.value = "";
21
+ this.selected = false;
22
+ }
23
+ get content() {
24
+ const text = this.value || this.textContent || "";
25
+ return text.trim().toLowerCase();
26
+ }
27
+ connectedCallback() {
28
+ super.connectedCallback();
29
+ this.role = "option";
30
+ }
31
+ willUpdate() {
32
+ var _a, _b;
33
+ const content = this.content;
34
+ const score = ((_a = this.listContext.value) == null ? void 0 : _a.scores.get(content)) || 0;
35
+ const hidden = score <= 0;
36
+ this.selected = !hidden && content === ((_b = this.listContext.value) == null ? void 0 : _b.selectedValue);
37
+ this.setHidden(hidden);
38
+ }
39
+ updated(changedProperties) {
40
+ var _a;
41
+ this.ariaSelected = String(this.selected);
42
+ if (this.selected && changedProperties.has("selected") && !changedProperties.get("selected") && ((_a = this.listContext.value) == null ? void 0 : _a.selectedReason) === "keyboard") {
43
+ this.scrollIntoView({ block: "nearest" });
44
+ }
45
+ }
46
+ };
47
+ /**
48
+ * @hidden
49
+ */
50
+ AutocompleteItem.properties = {
51
+ value: { type: String, reflect: true, attribute: "data-value" },
52
+ selected: { type: Boolean, reflect: true, attribute: "data-selected" },
53
+ onSelect: { attribute: false }
54
+ };
55
+ defineCustomElement("prosekit-autocomplete-item", AutocompleteItem);
56
+
57
+ export {
58
+ propNames,
59
+ AutocompleteItem
60
+ };
@@ -52,6 +52,7 @@ var ListManager = class {
52
52
  const item = this.firstItem;
53
53
  const value = item ? this.getItemValue(item) : "";
54
54
  this.setSelectedValue(value, "keyboard");
55
+ item == null ? void 0 : item.scrollIntoView({ block: "nearest" });
55
56
  }
56
57
  handleMouseMove(_event) {
57
58
  this.lastMouseMoveTime = Date.now();