@prosekit/lit 0.0.3 → 0.0.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.
@@ -1,169 +0,0 @@
1
- import {
2
- __decorateClass,
3
- blockComponentStyles
4
- } from "./chunk-6FOWUXQ2.js";
5
-
6
- // src/elements/menu.ts
7
- import { ProseKitError, addKeymap } from "@prosekit/core";
8
- import { LitElement, html } from "lit";
9
- import { customElement, property, query, state } from "lit/decorators.js";
10
-
11
- // src/utils/is-menu-item.ts
12
- function isMenuItem(element) {
13
- var _a, _b;
14
- return ((_a = element == null ? void 0 : element.tagName) == null ? void 0 : _a.toLowerCase()) === "prosekit-menu-item" || ["menuitem", "menuitemcheckbox", "menuitemradio"].includes(
15
- (_b = element == null ? void 0 : element.getAttribute("role")) != null ? _b : ""
16
- );
17
- }
18
-
19
- // src/utils/visibility.ts
20
- function isVisibleElement(element) {
21
- return !element.hidden;
22
- }
23
-
24
- // src/elements/menu.ts
25
- var Menu = class extends LitElement {
26
- /** @hidden */
27
- constructor() {
28
- super();
29
- /** @hidden */
30
- this.cleanup = [];
31
- }
32
- /** @hidden */
33
- firstUpdated() {
34
- if (!this.editor) {
35
- throw new ProseKitError("Property editor is required");
36
- }
37
- const extension = addKeymap({
38
- ArrowUp: () => this.handleArrowUp(),
39
- ArrowDown: () => this.handleArrowDown(),
40
- Escape: () => this.handleEscape(),
41
- Enter: () => this.handleEnter()
42
- });
43
- this.cleanup.push(this.editor.use(extension));
44
- }
45
- updated(_changedProperties) {
46
- this.ensureFocusedItem();
47
- }
48
- /** @hidden */
49
- disconnectedCallback() {
50
- super.disconnectedCallback();
51
- this.cleanup.forEach((fn) => fn());
52
- }
53
- ensureFocusedItem() {
54
- const items = this.queryVisibleMenuItems();
55
- if (this.focusedItem && items.includes(this.focusedItem)) {
56
- return;
57
- }
58
- this.focusItem(items[0]);
59
- }
60
- /** @hidden */
61
- handleArrowUp() {
62
- const items = this.queryVisibleMenuItems();
63
- let prevIndex = this.focusedItem ? items.indexOf(this.focusedItem) : 0;
64
- if (prevIndex === -1) {
65
- prevIndex = 0;
66
- }
67
- const nextIndex = (prevIndex + items.length - 1) % items.length;
68
- this.focusItem(items[nextIndex]);
69
- return true;
70
- }
71
- /** @hidden */
72
- handleArrowDown() {
73
- const items = this.queryVisibleMenuItems();
74
- const prevIndex = this.focusedItem ? items.indexOf(this.focusedItem) : -1;
75
- const nextIndex = (prevIndex + items.length + 1) % items.length;
76
- this.focusItem(items[nextIndex]);
77
- return true;
78
- }
79
- /** @hidden */
80
- handleEscape() {
81
- const event = new CustomEvent("menu-dismiss", {
82
- bubbles: true,
83
- composed: false
84
- });
85
- this.dispatchEvent(event);
86
- this.blurItem();
87
- return true;
88
- }
89
- /** @hidden */
90
- handleMouseOver(event) {
91
- const target = event.target;
92
- if (isMenuItem(target) && isVisibleElement(target)) {
93
- this.focusItem(target);
94
- }
95
- return true;
96
- }
97
- /** @hidden */
98
- handleEnter() {
99
- if (this.focusedItem) {
100
- this.handleSelect(this.focusedItem);
101
- return true;
102
- }
103
- return false;
104
- }
105
- /** @hidden */
106
- handleClick(event) {
107
- const target = event.target;
108
- if (isMenuItem(target) && isVisibleElement(target)) {
109
- this.handleSelect(target);
110
- }
111
- }
112
- /** @hidden */
113
- handleSelect(menuItem) {
114
- var _a;
115
- (_a = menuItem.onSelect) == null ? void 0 : _a.call(menuItem);
116
- const event = new CustomEvent("menu-select", {
117
- bubbles: true,
118
- composed: false
119
- });
120
- this.dispatchEvent(event);
121
- this.blurItem();
122
- }
123
- /** @hidden */
124
- focusItem(item) {
125
- this.blurItem();
126
- if (!item) {
127
- return;
128
- }
129
- item.focused = true;
130
- this.focusedItem = item;
131
- }
132
- /** @hidden */
133
- blurItem() {
134
- if (this.focusedItem) {
135
- this.focusedItem.focused = false;
136
- this.focusedItem = void 0;
137
- }
138
- }
139
- /** @hidden */
140
- queryAllMenuItems() {
141
- var _a, _b, _c;
142
- return (_c = (_b = (_a = this.defaultSlot) == null ? void 0 : _a.assignedElements({ flatten: true })) == null ? void 0 : _b.filter(isMenuItem)) != null ? _c : [];
143
- }
144
- /** @hidden */
145
- queryVisibleMenuItems() {
146
- return this.queryAllMenuItems().filter(isVisibleElement);
147
- }
148
- /** @hidden */
149
- render() {
150
- return html`<div role="menu" @mouseover="${this.handleMouseOver.bind(this)}" @click="${this.handleClick.bind(this)}"><slot></slot></div>`;
151
- }
152
- };
153
- /** @hidden */
154
- Menu.styles = blockComponentStyles;
155
- __decorateClass([
156
- property({ attribute: false })
157
- ], Menu.prototype, "editor", 2);
158
- __decorateClass([
159
- state()
160
- ], Menu.prototype, "focusedItem", 2);
161
- __decorateClass([
162
- query("slot")
163
- ], Menu.prototype, "defaultSlot", 2);
164
- Menu = __decorateClass([
165
- customElement("prosekit-menu")
166
- ], Menu);
167
- export {
168
- Menu
169
- };
@@ -1,59 +0,0 @@
1
- import { P as PopoverOptions } from './options-7235df55.js';
2
- import * as lit from 'lit';
3
- import { ReactiveController, ReactiveControllerHost, LitElement, CSSResultGroup } from 'lit';
4
- import { Editor } from '@prosekit/core';
5
- import { PredictionRule } from '@prosekit/extensions/suggestion';
6
- export { PredictionRule } from '@prosekit/extensions/suggestion';
7
- import '@floating-ui/dom';
8
-
9
- /**
10
- * Default popover options.
11
- */
12
- declare const defaultPopoverOptions: PopoverOptions;
13
-
14
- interface PopoverSuggestionContext {
15
- active: boolean;
16
- query?: string;
17
- onDismiss?: () => void;
18
- onSubmit?: () => void;
19
- }
20
-
21
- declare class PopoverSuggestionController implements ReactiveController {
22
- private host;
23
- private editor;
24
- private rules;
25
- private onContext?;
26
- private connected;
27
- reference: Element | null;
28
- private removeExtension;
29
- constructor(host: ReactiveControllerHost, editor: Editor, rules: PredictionRule[], onContext?: ((context: PopoverSuggestionContext) => void) | undefined);
30
- hostUpdated(): void;
31
- hostDisconnected(): void;
32
- }
33
-
34
- declare class PopoverSuggestion extends LitElement {
35
- /** @hidden */
36
- constructor();
37
- editor: Editor;
38
- popoverOptions: PopoverOptions;
39
- rules: PredictionRule[];
40
- /** @hidden */
41
- context: PopoverSuggestionContext;
42
- onContext?: (context: PopoverSuggestionContext) => void;
43
- /** @hidden */
44
- controller?: PopoverSuggestionController;
45
- /** @hidden */
46
- defaultSlot?: HTMLSlotElement;
47
- /** @hidden */
48
- static styles: CSSResultGroup;
49
- /** @hidden */
50
- protected firstUpdated(): void;
51
- /** @hidden */
52
- protected get active(): boolean;
53
- /** @hidden */
54
- private queryMenu;
55
- /** @hidden */
56
- render(): lit.TemplateResult<1>;
57
- }
58
-
59
- export { PopoverSuggestion, PopoverSuggestionContext, defaultPopoverOptions };
@@ -1,218 +0,0 @@
1
- import "./chunk-WHIPWT4H.js";
2
- import {
3
- __decorateClass,
4
- blockComponentStyles
5
- } from "./chunk-6FOWUXQ2.js";
6
-
7
- // src/elements/popover-suggestion/options.ts
8
- import {
9
- flip,
10
- inline,
11
- offset,
12
- shift,
13
- size
14
- } from "@floating-ui/dom";
15
- var defaultDetectOverflowOptions = {
16
- // Make sure the popover is always at least 8px away from the boundary
17
- padding: 8
18
- };
19
- var defaultPopoverOptions = {
20
- placement: "bottom-end",
21
- middleware: [
22
- offset(({ rects }) => ({
23
- // Put the popover at the bottom right corner
24
- alignmentAxis: -rects.floating.width,
25
- // Move down the popover by 4px
26
- mainAxis: 4
27
- })),
28
- size({
29
- apply: ({ availableHeight, elements }) => {
30
- const style = {
31
- // Minimum acceptable height is 100px.
32
- // `flip` will then take over.
33
- maxHeight: `${Math.max(100, availableHeight)}px`,
34
- overflowY: "auto"
35
- };
36
- Object.assign(elements.floating.style, style);
37
- },
38
- ...defaultDetectOverflowOptions
39
- }),
40
- // Flip the popover to the top if it's overflowing the viewport
41
- flip({
42
- fallbackStrategy: "initialPlacement",
43
- fallbackAxisSideDirection: "start",
44
- crossAxis: false,
45
- ...defaultDetectOverflowOptions
46
- }),
47
- shift({
48
- ...defaultDetectOverflowOptions
49
- }),
50
- // Use the text caret as the reference point
51
- inline()
52
- ]
53
- };
54
-
55
- // src/elements/popover-suggestion/popover-suggestion.ts
56
- import { html, LitElement } from "lit";
57
- import { customElement, property, query, state } from "lit/decorators.js";
58
-
59
- // src/utils/is-menu.ts
60
- function isMenu(element) {
61
- var _a, _b;
62
- return ((_a = element == null ? void 0 : element.tagName) == null ? void 0 : _a.toLowerCase()) === "prosekit-menu" || ["menu"].includes((_b = element == null ? void 0 : element.getAttribute("role")) != null ? _b : "");
63
- }
64
-
65
- // src/elements/popover-suggestion/controller.ts
66
- import { ProseKitError } from "@prosekit/core";
67
- import { addSuggestion } from "@prosekit/extensions/suggestion";
68
- var PopoverSuggestionController = class {
69
- constructor(host, editor, rules, onContext) {
70
- this.host = host;
71
- this.editor = editor;
72
- this.rules = rules;
73
- this.onContext = onContext;
74
- this.connected = false;
75
- this.reference = null;
76
- this.removeExtension = null;
77
- if (!editor) {
78
- throw new ProseKitError("Missing 'editor' property");
79
- }
80
- if (!rules) {
81
- throw new ProseKitError("Missing 'rules' property");
82
- }
83
- this.host.addController(this);
84
- }
85
- hostUpdated() {
86
- var _a;
87
- if (this.connected)
88
- return;
89
- this.connected = true;
90
- const editor = this.editor;
91
- if (!editor) {
92
- throw new ProseKitError("Missing 'editor' property");
93
- }
94
- if (!this.rules) {
95
- throw new ProseKitError("Missing 'rules' property");
96
- }
97
- const extension = addSuggestion({
98
- rules: this.rules,
99
- onMatch: ({ dismiss, deleteMatch, match, matchAfter }) => {
100
- var _a2, _b;
101
- const span = editor.view.dom.querySelector(
102
- ".prosemirror-prediction-match"
103
- );
104
- if (span) {
105
- this.reference = span;
106
- }
107
- const matchText = match[0] + ((_a2 = matchAfter == null ? void 0 : matchAfter[0]) != null ? _a2 : "");
108
- (_b = this.onContext) == null ? void 0 : _b.call(this, {
109
- active: true,
110
- query: matchText,
111
- onDismiss: () => {
112
- dismiss();
113
- },
114
- onSubmit: () => {
115
- deleteMatch();
116
- }
117
- });
118
- },
119
- onDeactivate: () => {
120
- this.reference = null;
121
- setTimeout(() => {
122
- var _a2;
123
- (_a2 = this.onContext) == null ? void 0 : _a2.call(this, {
124
- active: false
125
- });
126
- });
127
- }
128
- });
129
- (_a = this.removeExtension) == null ? void 0 : _a.call(this);
130
- this.removeExtension = editor.use(extension);
131
- }
132
- hostDisconnected() {
133
- var _a;
134
- this.connected = false;
135
- (_a = this.removeExtension) == null ? void 0 : _a.call(this);
136
- this.removeExtension = null;
137
- }
138
- };
139
-
140
- // src/elements/popover-suggestion/popover-suggestion.ts
141
- var PopoverSuggestion = class extends LitElement {
142
- /** @hidden */
143
- constructor() {
144
- super();
145
- this.popoverOptions = defaultPopoverOptions;
146
- this.context = { active: false };
147
- }
148
- /** @hidden */
149
- firstUpdated() {
150
- setTimeout(() => {
151
- this.controller = new PopoverSuggestionController(
152
- this,
153
- this.editor,
154
- this.rules,
155
- (context) => {
156
- var _a;
157
- (_a = this.onContext) == null ? void 0 : _a.call(this, context);
158
- this.context = context;
159
- requestAnimationFrame(() => {
160
- var _a2, _b;
161
- (_b = (_a2 = this.queryMenu()) == null ? void 0 : _a2.ensureFocusedItem) == null ? void 0 : _b.call(_a2);
162
- });
163
- }
164
- );
165
- });
166
- }
167
- /** @hidden */
168
- get active() {
169
- var _a;
170
- return !!((_a = this.controller) == null ? void 0 : _a.reference);
171
- }
172
- /** @hidden */
173
- queryMenu() {
174
- var _a, _b, _c;
175
- return (_c = (_b = (_a = this.defaultSlot) == null ? void 0 : _a.assignedElements({ flatten: true })) == null ? void 0 : _b.find(isMenu)) != null ? _c : null;
176
- }
177
- /** @hidden */
178
- render() {
179
- var _a, _b;
180
- return html`<prosekit-popover .active="${this.active}" .reference="${(_b = (_a = this.controller) == null ? void 0 : _a.reference) != null ? _b : void 0}" .options="${this.popoverOptions}"><slot @menu-dismiss="${() => {
181
- var _a2, _b2;
182
- return (_b2 = (_a2 = this.context) == null ? void 0 : _a2.onDismiss) == null ? void 0 : _b2.call(_a2);
183
- }}" @menu-select="${() => {
184
- var _a2, _b2;
185
- return (_b2 = (_a2 = this.context) == null ? void 0 : _a2.onSubmit) == null ? void 0 : _b2.call(_a2);
186
- }}"></slot></prosekit-popover>`;
187
- }
188
- };
189
- /** @hidden */
190
- PopoverSuggestion.styles = blockComponentStyles;
191
- __decorateClass([
192
- property({ attribute: false })
193
- ], PopoverSuggestion.prototype, "editor", 2);
194
- __decorateClass([
195
- property({ attribute: false })
196
- ], PopoverSuggestion.prototype, "popoverOptions", 2);
197
- __decorateClass([
198
- property({ attribute: false })
199
- ], PopoverSuggestion.prototype, "rules", 2);
200
- __decorateClass([
201
- state()
202
- ], PopoverSuggestion.prototype, "context", 2);
203
- __decorateClass([
204
- property({ attribute: false })
205
- ], PopoverSuggestion.prototype, "onContext", 2);
206
- __decorateClass([
207
- state()
208
- ], PopoverSuggestion.prototype, "controller", 2);
209
- __decorateClass([
210
- query("slot")
211
- ], PopoverSuggestion.prototype, "defaultSlot", 2);
212
- PopoverSuggestion = __decorateClass([
213
- customElement("prosekit-popover-suggestion")
214
- ], PopoverSuggestion);
215
- export {
216
- PopoverSuggestion,
217
- defaultPopoverOptions
218
- };
@@ -1,65 +0,0 @@
1
- import * as lit from 'lit';
2
- import { LitElement, CSSResultGroup, PropertyValueMap } from 'lit';
3
- import { VirtualElement, AutoUpdateOptions } from '@floating-ui/dom';
4
- import { P as PopoverOptions } from './options-7235df55.js';
5
-
6
- /**
7
- * A custom element that displays a popover anchored to a reference element.
8
- */
9
- declare class Popover extends LitElement {
10
- /** @hidden */
11
- constructor();
12
- /** @hidden */
13
- static styles: CSSResultGroup;
14
- /**
15
- * Controls the visibility of the popover element. When set to `true`, the popover is displayed and positioned
16
- * relative to its reference element. When set to `false`, the popover is hidden and its positioning logic is
17
- * deactivated.
18
- */
19
- active: boolean;
20
- /** The floating element that displays the popover. */
21
- floating: HTMLElement;
22
- /**
23
- * The element that the popover is anchored to. This can be either a DOM element or an object that implements the
24
- * virtual element interface from Floating UI.
25
- */
26
- reference?: Element | VirtualElement;
27
- /**
28
- * The options that are passed to the `computePosition` function from Floating UI. These options are used to
29
- * configure the positioning of the popover element relative to its reference element. For more information on the
30
- * available options, please refer to the Floating UI documentation.
31
- */
32
- options?: PopoverOptions;
33
- /**
34
- * Controls whether the popover position is automatically updated when the reference element changes position. When
35
- * set to `true`, the popover position is updated automatically. When set to `false`, the popover position is only
36
- * updated when the given properties are changed.
37
- *
38
- * @default false
39
- */
40
- autoUpdate: boolean;
41
- /**
42
- * The options that are passed to the `autoUpdate` function from Floating UI. These options are used to configure the
43
- * automatic update behavior of the popover position. For more information on the available options, please refer to
44
- * the Floating UI documentation. This property is only used when the `autoUpdate` property is set to `true`.
45
- */
46
- autoUpdateOptions?: AutoUpdateOptions;
47
- /** @hidden */
48
- private computed?;
49
- /** @hidden */
50
- private cleanupAutoUpdate?;
51
- /** @hidden */
52
- disconnectedCallback(): void;
53
- /** @hidden */
54
- protected updated(changed: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
55
- /** @hidden */
56
- private start;
57
- /** @hidden */
58
- private compute;
59
- /** @hidden */
60
- private cleanup;
61
- /** @hidden */
62
- render(): lit.TemplateResult<1>;
63
- }
64
-
65
- export { Popover, PopoverOptions };
@@ -1,7 +0,0 @@
1
- import {
2
- Popover
3
- } from "./chunk-WHIPWT4H.js";
4
- import "./chunk-6FOWUXQ2.js";
5
- export {
6
- Popover
7
- };