@prosekit/lit 0.2.3 → 0.2.5
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/dist/_tsup-dts-rollup.d.ts +138 -11
- package/dist/{chunk-JMZWTLTD.js → chunk-CPC45JQ7.js} +8 -4
- package/dist/{chunk-GZRUCYLP.js → chunk-MZAHIYA5.js} +1 -2
- package/dist/chunk-S72UTR5M.js +9 -0
- package/dist/{chunk-YOZJWJGG.js → chunk-XHBZNZ2L.js} +5 -1
- package/dist/prosekit-lit-autocomplete-list.js +2 -2
- package/dist/prosekit-lit-autocomplete-popover.js +3 -3
- package/dist/prosekit-lit-block-popover.d.ts +3 -0
- package/dist/prosekit-lit-block-popover.js +169 -0
- package/dist/prosekit-lit-combo-box-input.d.ts +1 -1
- package/dist/prosekit-lit-combo-box-item.d.ts +1 -1
- package/dist/prosekit-lit-combo-box-list.d.ts +1 -1
- package/dist/prosekit-lit-combo-box.d.ts +1 -1
- package/dist/prosekit-lit-combo-box.js +12 -8
- package/dist/prosekit-lit-drag-handle.d.ts +3 -0
- package/dist/prosekit-lit-drag-handle.js +94 -0
- package/dist/prosekit-lit-inline-popover.d.ts +1 -1
- package/dist/prosekit-lit-inline-popover.js +1 -1
- package/dist/prosekit-lit-popover.d.ts +1 -1
- package/dist/prosekit-lit-popover.js +1 -1
- package/dist/prosekit-lit-resizable-handle.d.ts +1 -1
- package/dist/prosekit-lit-resizable.d.ts +1 -1
- package/package.json +24 -8
@@ -11,9 +11,12 @@ import { Keymap } from '@prosekit/core';
|
|
11
11
|
import { LitElement } from 'lit';
|
12
12
|
import { Options } from 'tsup';
|
13
13
|
import type { Placement } from '@floating-ui/dom';
|
14
|
+
import type { PropertyValueMap } from 'lit';
|
14
15
|
import { PropertyValues } from 'lit';
|
16
|
+
import type { ProseMirrorNode } from '@prosekit/pm/model';
|
15
17
|
import { ReactiveController } from 'lit';
|
16
18
|
import { ReactiveControllerHost } from 'lit';
|
19
|
+
import type { ReactiveElement } from 'lit';
|
17
20
|
import type { ReferenceElement } from '@floating-ui/dom';
|
18
21
|
import type { Selection as Selection_2 } from '@prosekit/pm/state';
|
19
22
|
import { TemplateResult } from 'lit';
|
@@ -165,6 +168,11 @@ export declare class AutocompletePopover extends Popover implements Partial<Auto
|
|
165
168
|
onOpenChange: {
|
166
169
|
attribute: false;
|
167
170
|
};
|
171
|
+
elevated: {
|
172
|
+
type: BooleanConstructor;
|
173
|
+
reflect: false;
|
174
|
+
attribute: false;
|
175
|
+
};
|
168
176
|
};
|
169
177
|
editor?: Editor;
|
170
178
|
regex?: RegExp;
|
@@ -219,6 +227,60 @@ export { AutoUpdateOptions }
|
|
219
227
|
|
220
228
|
export declare const blockComponentStyles: CSSResult;
|
221
229
|
|
230
|
+
export declare class BlockPopover extends Popover {
|
231
|
+
/**
|
232
|
+
* @hidden
|
233
|
+
*/
|
234
|
+
static properties: {
|
235
|
+
editor: {
|
236
|
+
type: ObjectConstructor;
|
237
|
+
reflect: false;
|
238
|
+
attribute: false;
|
239
|
+
};
|
240
|
+
reference: {
|
241
|
+
attribute: false;
|
242
|
+
};
|
243
|
+
open: {
|
244
|
+
type: BooleanConstructor;
|
245
|
+
reflect: false;
|
246
|
+
attribute: false;
|
247
|
+
};
|
248
|
+
onOpenChange: {
|
249
|
+
attribute: false;
|
250
|
+
};
|
251
|
+
positioning: {
|
252
|
+
type: ObjectConstructor;
|
253
|
+
reflect: false;
|
254
|
+
attribute: false;
|
255
|
+
};
|
256
|
+
elevated: {
|
257
|
+
type: BooleanConstructor;
|
258
|
+
reflect: false;
|
259
|
+
attribute: false;
|
260
|
+
};
|
261
|
+
};
|
262
|
+
editor?: Editor;
|
263
|
+
positioning?: PositioningOptions;
|
264
|
+
elevated: boolean;
|
265
|
+
private context;
|
266
|
+
constructor();
|
267
|
+
protected willUpdate(changedProperties: PropertyValueMap<this>): void;
|
268
|
+
}
|
269
|
+
|
270
|
+
export declare interface BlockPopoverContext {
|
271
|
+
pos?: number | null;
|
272
|
+
node?: ProseMirrorNode | null;
|
273
|
+
element?: HTMLElement | null;
|
274
|
+
}
|
275
|
+
|
276
|
+
export declare const blockPopoverContext: {
|
277
|
+
__context__: BlockPopoverContext;
|
278
|
+
};
|
279
|
+
|
280
|
+
export declare interface BlockPopoverProps {
|
281
|
+
editor: Editor;
|
282
|
+
}
|
283
|
+
|
222
284
|
export declare function calcResize(position: 'top' | 'right' | 'bottom' | 'left' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right', w: number, h: number, dx: number, dy: number, aspectRatio: number | null | undefined): [w: number, h: number];
|
223
285
|
|
224
286
|
/**
|
@@ -248,6 +310,11 @@ export declare class ComboBox extends Popover {
|
|
248
310
|
reflect: false;
|
249
311
|
attribute: false;
|
250
312
|
};
|
313
|
+
elevated: {
|
314
|
+
type: BooleanConstructor;
|
315
|
+
reflect: false;
|
316
|
+
attribute: false;
|
317
|
+
};
|
251
318
|
};
|
252
319
|
onDismiss?: VoidFunction;
|
253
320
|
private listManager;
|
@@ -405,6 +472,31 @@ export declare function defaultQueryBuilder(match: RegExpExecArray): string;
|
|
405
472
|
|
406
473
|
export declare function defineCustomElement(name: string, constructor: CustomElementConstructor, options?: ElementDefinitionOptions): void;
|
407
474
|
|
475
|
+
export declare function defineElementHoverHandler(handler: ElementHoverHandler): Extension< {}>;
|
476
|
+
|
477
|
+
export declare class DragHandle extends LightElement {
|
478
|
+
/**
|
479
|
+
* @hidden
|
480
|
+
*/
|
481
|
+
static properties: {
|
482
|
+
editor: {
|
483
|
+
type: ObjectConstructor;
|
484
|
+
reflect: false;
|
485
|
+
attribute: false;
|
486
|
+
};
|
487
|
+
};
|
488
|
+
editor?: Editor;
|
489
|
+
private blockPopoverContext;
|
490
|
+
constructor();
|
491
|
+
connectedCallback(): void;
|
492
|
+
}
|
493
|
+
|
494
|
+
export declare interface DragHandleProps {
|
495
|
+
editor: Editor;
|
496
|
+
}
|
497
|
+
|
498
|
+
export declare type ElementHoverHandler = (reference: VirtualElement | null, element: HTMLElement | null, node: ProseMirrorNode | null, pos: number | null) => void;
|
499
|
+
|
408
500
|
export declare function getPlacement(reference: ReferenceElement | null, floating: FloatingElement | null, options: PositioningOptions): (() => void) | undefined;
|
409
501
|
|
410
502
|
export declare function getReferenceContextElement(reference: HTMLElement | VirtualElement | undefined | null): HTMLElement | null;
|
@@ -438,6 +530,11 @@ export declare class InlinePopover extends Popover implements Partial<InlinePopo
|
|
438
530
|
reflect: false;
|
439
531
|
attribute: false;
|
440
532
|
};
|
533
|
+
elevated: {
|
534
|
+
type: BooleanConstructor;
|
535
|
+
reflect: false;
|
536
|
+
attribute: false;
|
537
|
+
};
|
441
538
|
};
|
442
539
|
editor?: Editor;
|
443
540
|
available?: boolean;
|
@@ -516,7 +613,7 @@ export declare class ListManager<Item extends {
|
|
516
613
|
queryClosestItem: (element: HTMLElement) => Item | null;
|
517
614
|
getActive: () => boolean;
|
518
615
|
onDismiss: () => void;
|
519
|
-
onSelect: (item?: Item | null) =>
|
616
|
+
onSelect: (item?: Item | null) => boolean;
|
520
617
|
});
|
521
618
|
get items(): Item[];
|
522
619
|
get active(): boolean;
|
@@ -560,11 +657,17 @@ export declare class Popover extends LightElement implements Partial<PopoverProp
|
|
560
657
|
reflect: false;
|
561
658
|
attribute: false;
|
562
659
|
};
|
660
|
+
elevated: {
|
661
|
+
type: BooleanConstructor;
|
662
|
+
reflect: false;
|
663
|
+
attribute: false;
|
664
|
+
};
|
563
665
|
};
|
564
666
|
reference?: HTMLElement | VirtualElement;
|
565
667
|
open?: boolean;
|
566
668
|
onOpenChange?: ((open: boolean) => void) | undefined;
|
567
669
|
positioning?: PositioningOptions;
|
670
|
+
elevated?: boolean;
|
568
671
|
/**
|
569
672
|
* @hidden
|
570
673
|
*/
|
@@ -609,11 +712,19 @@ export declare interface PopoverProps {
|
|
609
712
|
* The user provided options used to position the popover content.
|
610
713
|
*/
|
611
714
|
positioning?: PositioningOptions;
|
715
|
+
/**
|
716
|
+
* A boolean that determines if the native [Web Popover
|
717
|
+
* API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API) should
|
718
|
+
* be used. If true, the popover will be placed into the top level so that it
|
719
|
+
* will sit on top of all other page content. This is similar to React's
|
720
|
+
* `<Portals>` or Vue's `<Teleport>`.
|
721
|
+
*/
|
722
|
+
elevated?: boolean;
|
612
723
|
}
|
613
724
|
|
614
725
|
declare const popoverPropsNames: readonly ["open", "onOpenChange", "reference", "positioning"];
|
615
726
|
export { popoverPropsNames }
|
616
|
-
export { popoverPropsNames as
|
727
|
+
export { popoverPropsNames as propNames_alias_15 }
|
617
728
|
|
618
729
|
/**
|
619
730
|
* @public
|
@@ -750,43 +861,47 @@ export { propNames_3 as propNames_alias_4 }
|
|
750
861
|
* @internal
|
751
862
|
*/
|
752
863
|
declare const propNames_4: readonly ["onSelect"];
|
753
|
-
export { propNames_4 as
|
864
|
+
export { propNames_4 as propNames_alias_10 }
|
754
865
|
export { propNames_4 as propNames_alias_9 }
|
755
866
|
|
756
867
|
/**
|
757
868
|
* @internal
|
758
869
|
*/
|
759
870
|
declare const propNames_5: never[];
|
760
|
-
export { propNames_5 as propNames_alias_10 }
|
761
871
|
export { propNames_5 as propNames_alias_11 }
|
872
|
+
export { propNames_5 as propNames_alias_12 }
|
762
873
|
|
763
874
|
/**
|
764
875
|
* @internal
|
765
876
|
*/
|
766
877
|
declare const propNames_6: readonly ["width", "height", "aspectRatio", "onSizeChangeStart", "onSizeChange", "onSizeChangeEnd"];
|
767
|
-
export { propNames_6 as
|
768
|
-
export { propNames_6 as
|
878
|
+
export { propNames_6 as propNames_alias_16 }
|
879
|
+
export { propNames_6 as propNames_alias_17 }
|
769
880
|
|
770
881
|
/**
|
771
882
|
* @internal
|
772
883
|
*/
|
773
884
|
declare const propNames_7: readonly [];
|
774
|
-
export { propNames_7 as
|
775
|
-
export { propNames_7 as
|
885
|
+
export { propNames_7 as propNames_alias_18 }
|
886
|
+
export { propNames_7 as propNames_alias_19 }
|
776
887
|
|
777
|
-
export declare const
|
888
|
+
export declare const propNames_alias_13: readonly ["editor"];
|
889
|
+
|
890
|
+
export declare const propNames_alias_14: readonly ["editor", "available", "open", "onOpenChange", "reference", "positioning"];
|
778
891
|
|
779
892
|
export declare const propNames_alias_5: readonly ["editor", "regex", "positioning"];
|
780
893
|
|
894
|
+
export declare const propNames_alias_6: readonly ["editor"];
|
895
|
+
|
781
896
|
/**
|
782
897
|
* @internal
|
783
898
|
*/
|
784
|
-
export declare const
|
899
|
+
export declare const propNames_alias_7: readonly ["onDismiss"];
|
785
900
|
|
786
901
|
/**
|
787
902
|
* @internal
|
788
903
|
*/
|
789
|
-
export declare const
|
904
|
+
export declare const propNames_alias_8: readonly ["placeholder"];
|
790
905
|
|
791
906
|
export declare function queryClosestAutocompleteItem(element?: Element | null): AutocompleteItem | null;
|
792
907
|
|
@@ -941,6 +1056,11 @@ export declare function roundByDPR(value: number): number;
|
|
941
1056
|
|
942
1057
|
export declare function setFloatingStyles(element: HTMLElement, options: PositioningOptions): void;
|
943
1058
|
|
1059
|
+
/**
|
1060
|
+
* @internal
|
1061
|
+
*/
|
1062
|
+
export declare function throttle<Args extends any[]>(callback: (...args: Args) => void, wait: number): (...args: Args) => void;
|
1063
|
+
|
944
1064
|
/**
|
945
1065
|
* @internal
|
946
1066
|
*/
|
@@ -971,11 +1091,18 @@ export declare function useEditorUpdateEvent(host: WithEditor<ReactiveController
|
|
971
1091
|
*/
|
972
1092
|
export declare function useEffect<T>(host: ReactiveControllerHost, getValue: () => T, onChange: (value: T) => void): void;
|
973
1093
|
|
1094
|
+
export declare function useEventListener<K extends keyof HTMLElementEventMap>(target: ReactiveElement, type: K, listener: (event: HTMLElementEventMap[K]) => void, options?: boolean | AddEventListenerOptions): void;
|
1095
|
+
|
974
1096
|
/**
|
975
1097
|
* @internal
|
976
1098
|
*/
|
977
1099
|
export declare function useInlinePopover(host: WithEditor<LitElement>, onReferenceChange: (reference: ReferenceElement | undefined) => void): () => ReferenceElement | undefined;
|
978
1100
|
|
1101
|
+
/**
|
1102
|
+
* @internal
|
1103
|
+
*/
|
1104
|
+
export declare function useMount(host: ReactiveControllerHost, onMount: () => VoidFunction | void): void;
|
1105
|
+
|
979
1106
|
/**
|
980
1107
|
* @internal
|
981
1108
|
*/
|
@@ -3,7 +3,7 @@ import {
|
|
3
3
|
} from "./chunk-5CI65R73.js";
|
4
4
|
import {
|
5
5
|
ListManager
|
6
|
-
} from "./chunk-
|
6
|
+
} from "./chunk-MZAHIYA5.js";
|
7
7
|
import {
|
8
8
|
LightElement,
|
9
9
|
defineCustomElement
|
@@ -101,9 +101,13 @@ var AutocompleteList = class extends LightElement {
|
|
101
101
|
return (_b = (_a = this.popoverContext.value) == null ? void 0 : _a.handleDismiss) == null ? void 0 : _b.call(_a);
|
102
102
|
},
|
103
103
|
onSelect: (item) => {
|
104
|
-
var _a, _b
|
105
|
-
|
106
|
-
|
104
|
+
var _a, _b;
|
105
|
+
if (item == null ? void 0 : item.onSelect) {
|
106
|
+
(_b = (_a = this.popoverContext.value) == null ? void 0 : _a.handleSubmit) == null ? void 0 : _b.call(_a);
|
107
|
+
item.onSelect();
|
108
|
+
return true;
|
109
|
+
}
|
110
|
+
return false;
|
107
111
|
}
|
108
112
|
});
|
109
113
|
/**
|
@@ -264,6 +264,7 @@ var Popover = class extends LightElement {
|
|
264
264
|
*/
|
265
265
|
constructor() {
|
266
266
|
super();
|
267
|
+
this.elevated = true;
|
267
268
|
useDismissable(this, {
|
268
269
|
onPointerDownOutside: (event) => {
|
269
270
|
var _a, _b;
|
@@ -321,6 +322,8 @@ var Popover = class extends LightElement {
|
|
321
322
|
if (!popoverAvailable) {
|
322
323
|
return;
|
323
324
|
}
|
325
|
+
if (!this.elevated)
|
326
|
+
return;
|
324
327
|
this.setAttribute("popover", "manual");
|
325
328
|
(_a = this.showPopover) == null ? void 0 : _a.call(this);
|
326
329
|
this.style.setProperty("margin", "unset");
|
@@ -355,7 +358,8 @@ Popover.properties = {
|
|
355
358
|
reference: { attribute: false },
|
356
359
|
open: { type: Boolean, reflect: false, attribute: false },
|
357
360
|
onOpenChange: { attribute: false },
|
358
|
-
positioning: { type: Object, reflect: false, attribute: false }
|
361
|
+
positioning: { type: Object, reflect: false, attribute: false },
|
362
|
+
elevated: { type: Boolean, reflect: false, attribute: false }
|
359
363
|
};
|
360
364
|
defineCustomElement("prosekit-popover", Popover);
|
361
365
|
|
@@ -1,10 +1,10 @@
|
|
1
1
|
import {
|
2
2
|
AutocompleteList,
|
3
3
|
propNames
|
4
|
-
} from "./chunk-
|
4
|
+
} from "./chunk-CPC45JQ7.js";
|
5
5
|
import "./chunk-I5EMQRE4.js";
|
6
6
|
import "./chunk-5CI65R73.js";
|
7
|
-
import "./chunk-
|
7
|
+
import "./chunk-MZAHIYA5.js";
|
8
8
|
import "./chunk-3AZDRLDR.js";
|
9
9
|
export {
|
10
10
|
AutocompleteList,
|
@@ -1,12 +1,12 @@
|
|
1
1
|
import {
|
2
2
|
autocompletePopoverContext
|
3
|
-
} from "./chunk-
|
3
|
+
} from "./chunk-CPC45JQ7.js";
|
4
4
|
import "./chunk-I5EMQRE4.js";
|
5
5
|
import "./chunk-5CI65R73.js";
|
6
|
+
import "./chunk-MZAHIYA5.js";
|
6
7
|
import {
|
7
8
|
Popover
|
8
|
-
} from "./chunk-
|
9
|
-
import "./chunk-GZRUCYLP.js";
|
9
|
+
} from "./chunk-XHBZNZ2L.js";
|
10
10
|
import {
|
11
11
|
defineCustomElement
|
12
12
|
} from "./chunk-3AZDRLDR.js";
|
@@ -0,0 +1,169 @@
|
|
1
|
+
import {
|
2
|
+
blockPopoverContext
|
3
|
+
} from "./chunk-S72UTR5M.js";
|
4
|
+
import {
|
5
|
+
Popover
|
6
|
+
} from "./chunk-XHBZNZ2L.js";
|
7
|
+
import {
|
8
|
+
defineCustomElement
|
9
|
+
} from "./chunk-3AZDRLDR.js";
|
10
|
+
|
11
|
+
// src/components/block-popover/index.ts
|
12
|
+
import { ContextProvider } from "@lit/context";
|
13
|
+
|
14
|
+
// src/components/block-popover/pointer-move.ts
|
15
|
+
import { defineDOMEventHandler, union } from "@prosekit/core";
|
16
|
+
|
17
|
+
// src/utils/throttle.ts
|
18
|
+
function throttle(callback, wait) {
|
19
|
+
let lastTime = 0;
|
20
|
+
return (...args) => {
|
21
|
+
const now = Date.now();
|
22
|
+
if (now - lastTime >= wait) {
|
23
|
+
callback(...args);
|
24
|
+
lastTime = now;
|
25
|
+
}
|
26
|
+
};
|
27
|
+
}
|
28
|
+
|
29
|
+
// src/components/block-popover/pointer-move.ts
|
30
|
+
function defineElementHoverHandler(handler) {
|
31
|
+
const handlePointerEvent = (view, event) => {
|
32
|
+
var _a;
|
33
|
+
const rect = view.dom.getBoundingClientRect();
|
34
|
+
const pos = (_a = view.posAtCoords({
|
35
|
+
top: event.clientY,
|
36
|
+
// Use the center of the editor
|
37
|
+
left: rect.left + rect.width / 2
|
38
|
+
})) == null ? void 0 : _a.inside;
|
39
|
+
if (pos == null || pos < 0) {
|
40
|
+
handler(null, null, null, null);
|
41
|
+
return;
|
42
|
+
}
|
43
|
+
const $pos = view.state.doc.resolve(pos);
|
44
|
+
const node = view.state.doc.nodeAt(pos);
|
45
|
+
const element = view.nodeDOM(pos);
|
46
|
+
if ($pos.depth >= 1 && $pos.index($pos.depth) === 0) {
|
47
|
+
const ancestorPos = $pos.before($pos.depth);
|
48
|
+
const node2 = view.state.doc.nodeAt(ancestorPos);
|
49
|
+
const element2 = view.nodeDOM(ancestorPos);
|
50
|
+
if (!element2) {
|
51
|
+
handler(null, null, null, null);
|
52
|
+
return;
|
53
|
+
}
|
54
|
+
const reference = {
|
55
|
+
contextElement: element2,
|
56
|
+
// Get the bounding client rect of the parent node, including its
|
57
|
+
// margins.
|
58
|
+
getBoundingClientRect: () => {
|
59
|
+
const rect2 = element2.getBoundingClientRect();
|
60
|
+
const style = window.getComputedStyle(element2);
|
61
|
+
const marginTop = Number.parseInt(style.marginTop, 10) || 0;
|
62
|
+
const marginRight = Number.parseInt(style.marginRight, 10) || 0;
|
63
|
+
const marginBottom = Number.parseInt(style.marginBottom, 10) || 0;
|
64
|
+
const marginLeft = Number.parseInt(style.marginLeft, 10) || 0;
|
65
|
+
return {
|
66
|
+
top: rect2.top - marginTop,
|
67
|
+
right: rect2.right + marginRight,
|
68
|
+
bottom: rect2.bottom + marginBottom,
|
69
|
+
left: rect2.left - marginLeft,
|
70
|
+
width: rect2.width + marginLeft + marginRight,
|
71
|
+
height: rect2.height + marginTop + marginBottom,
|
72
|
+
x: rect2.x - marginLeft,
|
73
|
+
y: rect2.y - marginTop
|
74
|
+
};
|
75
|
+
}
|
76
|
+
};
|
77
|
+
handler(reference, element2, node2, ancestorPos);
|
78
|
+
return;
|
79
|
+
}
|
80
|
+
handler(element, element, node, pos);
|
81
|
+
};
|
82
|
+
return union([
|
83
|
+
defineDOMEventHandler("pointermove", throttle(handlePointerEvent, 200)),
|
84
|
+
defineDOMEventHandler("pointerout", handlePointerEvent),
|
85
|
+
defineDOMEventHandler("keypress", () => handler(null, null, null, null))
|
86
|
+
]);
|
87
|
+
}
|
88
|
+
|
89
|
+
// src/components/block-popover/index.ts
|
90
|
+
var propNames = ["editor"];
|
91
|
+
var BlockPopover = class extends Popover {
|
92
|
+
constructor() {
|
93
|
+
super();
|
94
|
+
this.positioning = {
|
95
|
+
strategy: "absolute",
|
96
|
+
placement: "left-start",
|
97
|
+
fitViewport: true,
|
98
|
+
flip: false,
|
99
|
+
inline: false,
|
100
|
+
autoUpdate: true,
|
101
|
+
shift: true,
|
102
|
+
overlap: false,
|
103
|
+
hide: true,
|
104
|
+
offset: 4
|
105
|
+
};
|
106
|
+
// We don't want the popover to overflow the editor area so we set `elevated` to false.
|
107
|
+
this.elevated = false;
|
108
|
+
this.context = new ContextProvider(this, {
|
109
|
+
context: blockPopoverContext,
|
110
|
+
initialValue: {
|
111
|
+
pos: null,
|
112
|
+
node: null,
|
113
|
+
element: null
|
114
|
+
}
|
115
|
+
});
|
116
|
+
useBlockPopover(this, (reference, element, node, pos) => {
|
117
|
+
this.reference = reference != null ? reference : void 0;
|
118
|
+
this.context.setValue({ pos, element, node });
|
119
|
+
});
|
120
|
+
}
|
121
|
+
willUpdate(changedProperties) {
|
122
|
+
super.willUpdate(changedProperties);
|
123
|
+
this.open = !!(this == null ? void 0 : this.reference);
|
124
|
+
}
|
125
|
+
};
|
126
|
+
/**
|
127
|
+
* @hidden
|
128
|
+
*/
|
129
|
+
BlockPopover.properties = {
|
130
|
+
...Popover.properties,
|
131
|
+
editor: { type: Object, reflect: false, attribute: false }
|
132
|
+
};
|
133
|
+
function useBlockPopover(host, handler) {
|
134
|
+
let dispose;
|
135
|
+
let editor;
|
136
|
+
let prevElement = null;
|
137
|
+
let prevPos = null;
|
138
|
+
const extension = defineElementHoverHandler(
|
139
|
+
(reference, element, node, pos) => {
|
140
|
+
if (prevElement === element && prevPos === pos) {
|
141
|
+
return;
|
142
|
+
}
|
143
|
+
prevElement = element;
|
144
|
+
prevPos = pos;
|
145
|
+
handler(reference, element, node, pos);
|
146
|
+
}
|
147
|
+
);
|
148
|
+
host.addController({
|
149
|
+
hostUpdated: () => {
|
150
|
+
if (editor !== host.editor) {
|
151
|
+
editor = host.editor;
|
152
|
+
dispose == null ? void 0 : dispose();
|
153
|
+
dispose = void 0;
|
154
|
+
if (editor) {
|
155
|
+
dispose = editor.use(extension);
|
156
|
+
}
|
157
|
+
}
|
158
|
+
},
|
159
|
+
hostDisconnected: () => {
|
160
|
+
dispose == null ? void 0 : dispose();
|
161
|
+
dispose = void 0;
|
162
|
+
}
|
163
|
+
});
|
164
|
+
}
|
165
|
+
defineCustomElement("prosekit-block-popover", BlockPopover);
|
166
|
+
export {
|
167
|
+
BlockPopover,
|
168
|
+
propNames
|
169
|
+
};
|
@@ -1,3 +1,3 @@
|
|
1
1
|
export { ComboBoxItem_alias_1 as ComboBoxItem } from './_tsup-dts-rollup';
|
2
2
|
export { ComboBoxItemProps_alias_1 as ComboBoxItemProps } from './_tsup-dts-rollup';
|
3
|
-
export {
|
3
|
+
export { propNames_alias_10 as propNames } from './_tsup-dts-rollup';
|
@@ -1,3 +1,3 @@
|
|
1
1
|
export { ComboBoxList_alias_1 as ComboBoxList } from './_tsup-dts-rollup';
|
2
2
|
export { ComboBoxListProps_alias_1 as ComboBoxListProps } from './_tsup-dts-rollup';
|
3
|
-
export {
|
3
|
+
export { propNames_alias_12 as propNames } from './_tsup-dts-rollup';
|
@@ -1,10 +1,10 @@
|
|
1
|
-
import
|
2
|
-
Popover
|
3
|
-
} from "./chunk-YOZJWJGG.js";
|
1
|
+
import "./chunk-3TPE2GKD.js";
|
4
2
|
import {
|
5
3
|
ListManager
|
6
|
-
} from "./chunk-
|
7
|
-
import
|
4
|
+
} from "./chunk-MZAHIYA5.js";
|
5
|
+
import {
|
6
|
+
Popover
|
7
|
+
} from "./chunk-XHBZNZ2L.js";
|
8
8
|
import {
|
9
9
|
comboBoxContext
|
10
10
|
} from "./chunk-C4MW43I4.js";
|
@@ -63,9 +63,13 @@ var ComboBox = class extends Popover {
|
|
63
63
|
},
|
64
64
|
onSelect: (item) => {
|
65
65
|
var _a;
|
66
|
-
|
67
|
-
|
68
|
-
|
66
|
+
if (item == null ? void 0 : item.onSelect) {
|
67
|
+
this.setSelectedValue("", "keyboard");
|
68
|
+
(_a = item == null ? void 0 : item.onSelect) == null ? void 0 : _a.call(item);
|
69
|
+
this.hide();
|
70
|
+
return true;
|
71
|
+
}
|
72
|
+
return false;
|
69
73
|
}
|
70
74
|
});
|
71
75
|
this.context = new ContextProvider(this, {
|
@@ -0,0 +1,94 @@
|
|
1
|
+
import {
|
2
|
+
blockPopoverContext
|
3
|
+
} from "./chunk-S72UTR5M.js";
|
4
|
+
import {
|
5
|
+
LightElement,
|
6
|
+
defineCustomElement
|
7
|
+
} from "./chunk-3AZDRLDR.js";
|
8
|
+
|
9
|
+
// src/components/drag-handle/index.ts
|
10
|
+
import { ContextConsumer } from "@lit/context";
|
11
|
+
import { Slice, Fragment } from "@prosekit/pm/model";
|
12
|
+
import { NodeSelection } from "@prosekit/pm/state";
|
13
|
+
|
14
|
+
// src/controllers/use-mount.ts
|
15
|
+
function useMount(host, onMount) {
|
16
|
+
let dispose;
|
17
|
+
host.addController({
|
18
|
+
hostConnected: () => {
|
19
|
+
dispose == null ? void 0 : dispose();
|
20
|
+
dispose = onMount();
|
21
|
+
},
|
22
|
+
hostDisconnected: () => {
|
23
|
+
dispose == null ? void 0 : dispose();
|
24
|
+
dispose = void 0;
|
25
|
+
}
|
26
|
+
});
|
27
|
+
}
|
28
|
+
|
29
|
+
// src/controllers/use-event-listener.ts
|
30
|
+
function useEventListener(target, type, listener, options) {
|
31
|
+
useMount(target, () => {
|
32
|
+
target.addEventListener(type, listener, options);
|
33
|
+
return () => {
|
34
|
+
target.removeEventListener(type, listener, options);
|
35
|
+
};
|
36
|
+
});
|
37
|
+
}
|
38
|
+
|
39
|
+
// src/components/drag-handle/index.ts
|
40
|
+
var propNames = ["editor"];
|
41
|
+
var DragHandle = class extends LightElement {
|
42
|
+
constructor() {
|
43
|
+
super();
|
44
|
+
this.blockPopoverContext = new ContextConsumer(this, {
|
45
|
+
context: blockPopoverContext,
|
46
|
+
subscribe: true
|
47
|
+
});
|
48
|
+
}
|
49
|
+
connectedCallback() {
|
50
|
+
super.connectedCallback();
|
51
|
+
this.draggable = true;
|
52
|
+
useEventListener(this, "pointerdown", () => {
|
53
|
+
var _a, _b;
|
54
|
+
const { pos } = (_a = this.blockPopoverContext.value) != null ? _a : {};
|
55
|
+
const { view } = (_b = this.editor) != null ? _b : {};
|
56
|
+
if (pos == null || !view) {
|
57
|
+
return;
|
58
|
+
}
|
59
|
+
view.dispatch(
|
60
|
+
view.state.tr.setSelection(NodeSelection.create(view.state.doc, pos))
|
61
|
+
);
|
62
|
+
requestAnimationFrame(() => {
|
63
|
+
view.focus();
|
64
|
+
});
|
65
|
+
});
|
66
|
+
useEventListener(this, "dragstart", (event) => {
|
67
|
+
var _a, _b;
|
68
|
+
const { pos, element, node } = (_a = this.blockPopoverContext.value) != null ? _a : {};
|
69
|
+
const { view } = (_b = this.editor) != null ? _b : {};
|
70
|
+
if (pos == null || !element || !node || !view || !event.dataTransfer) {
|
71
|
+
return;
|
72
|
+
}
|
73
|
+
event.dataTransfer.clearData();
|
74
|
+
event.dataTransfer.setData("text/html", element.outerHTML);
|
75
|
+
event.dataTransfer.effectAllowed = "copyMove";
|
76
|
+
event.dataTransfer.setDragImage(element, 0, 0);
|
77
|
+
view.dragging = {
|
78
|
+
slice: new Slice(Fragment.from(node), 0, 0),
|
79
|
+
move: true
|
80
|
+
};
|
81
|
+
});
|
82
|
+
}
|
83
|
+
};
|
84
|
+
/**
|
85
|
+
* @hidden
|
86
|
+
*/
|
87
|
+
DragHandle.properties = {
|
88
|
+
editor: { type: Object, reflect: false, attribute: false }
|
89
|
+
};
|
90
|
+
defineCustomElement("prosekit-drag-handle", DragHandle);
|
91
|
+
export {
|
92
|
+
DragHandle,
|
93
|
+
propNames
|
94
|
+
};
|
@@ -1,4 +1,4 @@
|
|
1
1
|
export { PositioningOptions_alias_1 as PositioningOptions } from './_tsup-dts-rollup';
|
2
|
-
export {
|
2
|
+
export { propNames_alias_14 as propNames } from './_tsup-dts-rollup';
|
3
3
|
export { InlinePopoverProps } from './_tsup-dts-rollup';
|
4
4
|
export { InlinePopover } from './_tsup-dts-rollup';
|
@@ -1,6 +1,6 @@
|
|
1
1
|
export { AutoUpdateOptions } from './_tsup-dts-rollup';
|
2
2
|
export { PositioningOptions_alias_2 as PositioningOptions } from './_tsup-dts-rollup';
|
3
3
|
export { popoverPropsNames } from './_tsup-dts-rollup';
|
4
|
-
export {
|
4
|
+
export { propNames_alias_15 as propNames } from './_tsup-dts-rollup';
|
5
5
|
export { PopoverProps } from './_tsup-dts-rollup';
|
6
6
|
export { Popover } from './_tsup-dts-rollup';
|
@@ -1,3 +1,3 @@
|
|
1
1
|
export { ResizableHandle_alias_1 as ResizableHandle } from './_tsup-dts-rollup';
|
2
2
|
export { ResizableHandleProps_alias_1 as ResizableHandleProps } from './_tsup-dts-rollup';
|
3
|
-
export {
|
3
|
+
export { propNames_alias_19 as propNames } from './_tsup-dts-rollup';
|
@@ -1,3 +1,3 @@
|
|
1
1
|
export { Resizable_alias_1 as Resizable } from './_tsup-dts-rollup';
|
2
|
-
export {
|
2
|
+
export { propNames_alias_17 as propNames } from './_tsup-dts-rollup';
|
3
3
|
export { ResizableProps_alias_1 as ResizableProps } from './_tsup-dts-rollup';
|
package/package.json
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
{
|
2
2
|
"name": "@prosekit/lit",
|
3
3
|
"type": "module",
|
4
|
-
"version": "0.2.
|
4
|
+
"version": "0.2.5",
|
5
5
|
"private": false,
|
6
6
|
"author": {
|
7
7
|
"name": "ocavue",
|
@@ -50,6 +50,11 @@
|
|
50
50
|
"import": "./dist/prosekit-lit-autocomplete-popover.js",
|
51
51
|
"default": "./dist/prosekit-lit-autocomplete-popover.js"
|
52
52
|
},
|
53
|
+
"./block-popover": {
|
54
|
+
"types": "./dist/prosekit-lit-block-popover.d.ts",
|
55
|
+
"import": "./dist/prosekit-lit-block-popover.js",
|
56
|
+
"default": "./dist/prosekit-lit-block-popover.js"
|
57
|
+
},
|
53
58
|
"./combo-box": {
|
54
59
|
"types": "./dist/prosekit-lit-combo-box.d.ts",
|
55
60
|
"import": "./dist/prosekit-lit-combo-box.js",
|
@@ -70,6 +75,11 @@
|
|
70
75
|
"import": "./dist/prosekit-lit-combo-box-list.js",
|
71
76
|
"default": "./dist/prosekit-lit-combo-box-list.js"
|
72
77
|
},
|
78
|
+
"./drag-handle": {
|
79
|
+
"types": "./dist/prosekit-lit-drag-handle.d.ts",
|
80
|
+
"import": "./dist/prosekit-lit-drag-handle.js",
|
81
|
+
"default": "./dist/prosekit-lit-drag-handle.js"
|
82
|
+
},
|
73
83
|
"./inline-popover": {
|
74
84
|
"types": "./dist/prosekit-lit-inline-popover.d.ts",
|
75
85
|
"import": "./dist/prosekit-lit-inline-popover.js",
|
@@ -95,21 +105,21 @@
|
|
95
105
|
"dist"
|
96
106
|
],
|
97
107
|
"dependencies": {
|
98
|
-
"@floating-ui/dom": "^1.6.
|
108
|
+
"@floating-ui/dom": "^1.6.3",
|
99
109
|
"@lit/context": "^1.1.0",
|
100
|
-
"@prosekit/core": "^0.3.
|
101
|
-
"@prosekit/extensions": "^0.3.
|
110
|
+
"@prosekit/core": "^0.3.1",
|
111
|
+
"@prosekit/extensions": "^0.3.1",
|
102
112
|
"@prosekit/pm": "^0.1.1",
|
103
113
|
"@superhuman/command-score": "^0.5.0",
|
104
|
-
"@zag-js/dismissable": "^0.
|
105
|
-
"@zag-js/dom-query": "^0.
|
106
|
-
"@zag-js/utils": "^0.
|
114
|
+
"@zag-js/dismissable": "^0.35.0",
|
115
|
+
"@zag-js/dom-query": "^0.35.0",
|
116
|
+
"@zag-js/utils": "^0.35.0",
|
107
117
|
"lit": "^3.1.2"
|
108
118
|
},
|
109
119
|
"devDependencies": {
|
110
120
|
"@prosekit/dev": "*",
|
111
121
|
"minify-literals": "^1.0.8",
|
112
|
-
"tsup": "^8.0.
|
122
|
+
"tsup": "^8.0.2",
|
113
123
|
"typescript": "^5.3.3",
|
114
124
|
"vitest": "^1.2.2"
|
115
125
|
},
|
@@ -135,6 +145,9 @@
|
|
135
145
|
"autocomplete-popover": [
|
136
146
|
"./dist/prosekit-lit-autocomplete-popover.d.ts"
|
137
147
|
],
|
148
|
+
"block-popover": [
|
149
|
+
"./dist/prosekit-lit-block-popover.d.ts"
|
150
|
+
],
|
138
151
|
"combo-box": [
|
139
152
|
"./dist/prosekit-lit-combo-box.d.ts"
|
140
153
|
],
|
@@ -147,6 +160,9 @@
|
|
147
160
|
"combo-box-list": [
|
148
161
|
"./dist/prosekit-lit-combo-box-list.d.ts"
|
149
162
|
],
|
163
|
+
"drag-handle": [
|
164
|
+
"./dist/prosekit-lit-drag-handle.d.ts"
|
165
|
+
],
|
150
166
|
"inline-popover": [
|
151
167
|
"./dist/prosekit-lit-inline-popover.d.ts"
|
152
168
|
],
|