@prosekit/lit 0.0.4 → 0.0.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.
@@ -1,27 +1,35 @@
1
- import {
2
- commandListContext
3
- } from "./chunk-L6CSVKWR.js";
4
- import {
5
- commandPopoverContext,
6
- isCommandItem
7
- } from "./chunk-WPC5TQP7.js";
8
1
  import {
9
2
  __decorateClass,
10
- blockComponentStyles
11
- } from "./chunk-FB3RHUS6.js";
3
+ blockComponentStyles,
4
+ commandListContext
5
+ } from "./chunk-J73E7P6J.js";
6
+
7
+ // src/components/autocomplete-popover/context.ts
8
+ import { createContext } from "@lit-labs/context";
9
+ var commandPopoverContext = createContext(
10
+ "prosekit-autocomplete-popover-context"
11
+ );
12
12
 
13
- // src/internal/command/list.ts
13
+ // src/components/autocomplete-list/component.ts
14
14
  import { consume, provide } from "@lit-labs/context";
15
+ import "@prosekit/core";
15
16
  import { html, LitElement } from "lit";
16
17
  import { customElement, property, query, state } from "lit/decorators.js";
17
18
 
18
- // src/internal/command-score.ts
19
+ // src/utils/command-score.ts
19
20
  import commandScoreModule from "@superhuman/command-score";
20
21
  var commandScore = commandScoreModule;
21
22
 
22
- // src/internal/command/list-controller.ts
23
+ // src/components/autocomplete-item/helpers.ts
24
+ function isAutocompleteItem(element) {
25
+ var _a;
26
+ return ((_a = element == null ? void 0 : element.tagName) == null ? void 0 : _a.toLowerCase()) === "prosekit-autocomplete-item";
27
+ }
28
+
29
+ // src/components/autocomplete-list/controller.ts
23
30
  import { addKeymap } from "@prosekit/core";
24
- var CommandListController = class {
31
+ import "lit";
32
+ var AutocompleteListController = class {
25
33
  constructor(host, keymap) {
26
34
  this.host = host;
27
35
  this.keymap = keymap;
@@ -52,11 +60,12 @@ var CommandListController = class {
52
60
  }
53
61
  };
54
62
 
55
- // src/internal/command/list.ts
56
- var CommandList = class extends LitElement {
63
+ // src/components/autocomplete-list/component.ts
64
+ var AutocompleteList = class extends LitElement {
57
65
  constructor() {
58
66
  super(...arguments);
59
- this.controller = new CommandListController(this, {
67
+ /** @hidden */
68
+ this.controller = new AutocompleteListController(this, {
60
69
  ArrowUp: () => {
61
70
  if (!this.active)
62
71
  return false;
@@ -83,6 +92,7 @@ var CommandList = class extends LitElement {
83
92
  return true;
84
93
  }
85
94
  });
95
+ this.lastMouseMoveTime = 0;
86
96
  this.popoverContext = null;
87
97
  this.context = {
88
98
  scores: /* @__PURE__ */ new Map(),
@@ -99,7 +109,7 @@ var CommandList = class extends LitElement {
99
109
  }
100
110
  get items() {
101
111
  var _a, _b, _c;
102
- return (_c = (_b = (_a = this.defaultSlot) == null ? void 0 : _a.assignedElements({ flatten: true })) == null ? void 0 : _b.filter(isCommandItem)) != null ? _c : [];
112
+ return (_c = (_b = (_a = this.defaultSlot) == null ? void 0 : _a.assignedElements({ flatten: true })) == null ? void 0 : _b.filter(isAutocompleteItem)) != null ? _c : [];
103
113
  }
104
114
  get availableItems() {
105
115
  var _a, _b;
@@ -167,17 +177,23 @@ var CommandList = class extends LitElement {
167
177
  this.updateValue(items[nextIndex].content);
168
178
  }
169
179
  }
180
+ handleMouseMove() {
181
+ this.lastMouseMoveTime = Date.now();
182
+ }
170
183
  handleMouseOver(event) {
184
+ if (this.lastMouseMoveTime + 500 < Date.now()) {
185
+ return;
186
+ }
171
187
  const target = event.target;
172
- if (isCommandItem(target)) {
188
+ if (isAutocompleteItem(target)) {
173
189
  this.updateValue(target.content);
174
190
  }
175
191
  }
176
192
  handleClick(event) {
177
193
  event.preventDefault();
178
194
  const target = event.target;
179
- const item = target == null ? void 0 : target.closest("prosekit-command-item");
180
- if (item && isCommandItem(item)) {
195
+ const item = target == null ? void 0 : target.closest("prosekit-autocomplete-item");
196
+ if (item && isAutocompleteItem(item)) {
181
197
  this.handleSelect(item);
182
198
  }
183
199
  }
@@ -191,28 +207,30 @@ var CommandList = class extends LitElement {
191
207
  }
192
208
  /** @hidden */
193
209
  render() {
194
- return html`<div role="listbox" aria-label="Suggestions" @mouseover="${this.handleMouseOver.bind(this)}" @click="${this.handleClick.bind(this)}" @mousedown="${this.handleMouseDown.bind(this)}"><slot></slot></div>`;
210
+ return html`<div role="listbox" aria-label="Suggestions" @mousemove="${this.handleMouseMove.bind(this)}" @mouseover="${this.handleMouseOver.bind(this)}" @click="${this.handleClick.bind(this)}" @mousedown="${this.handleMouseDown.bind(this)}"><slot></slot></div>`;
195
211
  }
196
212
  };
197
213
  /** @hidden */
198
- CommandList.styles = blockComponentStyles;
214
+ AutocompleteList.styles = blockComponentStyles;
199
215
  __decorateClass([
200
216
  property({ attribute: false })
201
- ], CommandList.prototype, "editor", 2);
217
+ ], AutocompleteList.prototype, "editor", 2);
202
218
  __decorateClass([
203
219
  consume({ context: commandPopoverContext, subscribe: true }),
204
220
  state()
205
- ], CommandList.prototype, "popoverContext", 2);
221
+ ], AutocompleteList.prototype, "popoverContext", 2);
206
222
  __decorateClass([
207
223
  provide({ context: commandListContext }),
208
224
  state()
209
- ], CommandList.prototype, "context", 2);
225
+ ], AutocompleteList.prototype, "context", 2);
210
226
  __decorateClass([
211
227
  query("slot")
212
- ], CommandList.prototype, "defaultSlot", 2);
213
- CommandList = __decorateClass([
214
- customElement("prosekit-command-list")
215
- ], CommandList);
228
+ ], AutocompleteList.prototype, "defaultSlot", 2);
229
+ AutocompleteList = __decorateClass([
230
+ customElement("prosekit-autocomplete-list")
231
+ ], AutocompleteList);
232
+
216
233
  export {
217
- CommandList
234
+ commandPopoverContext,
235
+ AutocompleteList
218
236
  };
@@ -20,7 +20,14 @@ var componentStyles = css`:host{box-sizing:border-box}:host *,:host ::after,:hos
20
20
  // src/styles/block-component.styles.ts
21
21
  var blockComponentStyles = css2`${componentStyles}:host{display:block}:host([hidden]){display:none}`;
22
22
 
23
+ // src/components/autocomplete-list/context.ts
24
+ import { createContext } from "@lit-labs/context";
25
+ var commandListContext = createContext(
26
+ "prosekit-autocomplete-list-context"
27
+ );
28
+
23
29
  export {
24
30
  __decorateClass,
25
- blockComponentStyles
31
+ blockComponentStyles,
32
+ commandListContext
26
33
  };
@@ -1,16 +1,14 @@
1
- import {
2
- commandListContext
3
- } from "./chunk-L6CSVKWR.js";
4
1
  import {
5
2
  __decorateClass,
6
- blockComponentStyles
7
- } from "./chunk-FB3RHUS6.js";
3
+ blockComponentStyles,
4
+ commandListContext
5
+ } from "./chunk-J73E7P6J.js";
8
6
 
9
- // src/internal/command/item.ts
7
+ // src/components/autocomplete-item/component.ts
10
8
  import { consume } from "@lit-labs/context";
11
9
  import { LitElement, html } from "lit";
12
10
  import { customElement, property, query, state } from "lit/decorators.js";
13
- var CommandItem = class extends LitElement {
11
+ var AutocompleteItem = class extends LitElement {
14
12
  constructor() {
15
13
  super(...arguments);
16
14
  this.value = "";
@@ -31,6 +29,11 @@ var CommandItem = class extends LitElement {
31
29
  this.listContext.registerValue(this.content);
32
30
  }
33
31
  }
32
+ updated(changedProperties) {
33
+ if (this.selected && changedProperties.has("selected") && !changedProperties.get("selected")) {
34
+ this.scrollIntoView({ block: "nearest" });
35
+ }
36
+ }
34
37
  /** @hidden */
35
38
  render() {
36
39
  if (this.hidden) {
@@ -40,26 +43,27 @@ var CommandItem = class extends LitElement {
40
43
  }
41
44
  };
42
45
  /** @hidden */
43
- CommandItem.styles = blockComponentStyles;
46
+ AutocompleteItem.styles = blockComponentStyles;
44
47
  __decorateClass([
45
48
  property({ type: String, reflect: true, attribute: "data-value" })
46
- ], CommandItem.prototype, "value", 2);
49
+ ], AutocompleteItem.prototype, "value", 2);
47
50
  __decorateClass([
48
51
  property({ type: Boolean, reflect: true, attribute: "data-selected" })
49
- ], CommandItem.prototype, "selected", 2);
52
+ ], AutocompleteItem.prototype, "selected", 2);
50
53
  __decorateClass([
51
54
  property({ attribute: false })
52
- ], CommandItem.prototype, "onSelect", 2);
55
+ ], AutocompleteItem.prototype, "onSelect", 2);
53
56
  __decorateClass([
54
57
  query("slot")
55
- ], CommandItem.prototype, "defaultSlot", 2);
58
+ ], AutocompleteItem.prototype, "defaultSlot", 2);
56
59
  __decorateClass([
57
60
  consume({ context: commandListContext, subscribe: true }),
58
61
  state({})
59
- ], CommandItem.prototype, "listContext", 2);
60
- CommandItem = __decorateClass([
61
- customElement("prosekit-command-item")
62
- ], CommandItem);
62
+ ], AutocompleteItem.prototype, "listContext", 2);
63
+ AutocompleteItem = __decorateClass([
64
+ customElement("prosekit-autocomplete-item")
65
+ ], AutocompleteItem);
66
+
63
67
  export {
64
- CommandItem
68
+ AutocompleteItem
65
69
  };
@@ -1,7 +1,7 @@
1
- type CommandListContext = {
1
+ type AutocompleteListContext = {
2
2
  scores: Map<string, number>;
3
3
  selectedValue: string;
4
4
  registerValue: (value: string) => VoidFunction;
5
5
  };
6
6
 
7
- export { CommandListContext as C };
7
+ export { AutocompleteListContext as A };
@@ -1,8 +1,8 @@
1
- type CommandPopoverContext = {
1
+ type AutocompletePopoverContext = {
2
2
  active: boolean;
3
3
  query: string;
4
4
  handleDismiss: VoidFunction;
5
5
  handleSubmit: VoidFunction;
6
6
  };
7
7
 
8
- export { CommandPopoverContext as C };
8
+ export { AutocompletePopoverContext as A };
@@ -0,0 +1,16 @@
1
+ import * as lit from 'lit';
2
+ import { LitElement, CSSResultGroup, PropertyValues } from 'lit';
3
+ import { A as AutocompleteListContext } from './context-19474449.js';
4
+
5
+ interface AutocompleteEmptyProps {
6
+ }
7
+ declare class AutocompleteEmpty extends LitElement implements AutocompleteEmptyProps {
8
+ /** @hidden */
9
+ static styles: CSSResultGroup;
10
+ listContext?: AutocompleteListContext;
11
+ protected willUpdate(_changedProperties: PropertyValues<this>): void;
12
+ /** @hidden */
13
+ render(): lit.TemplateResult<1> | null;
14
+ }
15
+
16
+ export { AutocompleteEmpty, AutocompleteEmptyProps };
@@ -1,16 +1,14 @@
1
- import {
2
- commandListContext
3
- } from "./chunk-L6CSVKWR.js";
4
1
  import {
5
2
  __decorateClass,
6
- blockComponentStyles
7
- } from "./chunk-FB3RHUS6.js";
3
+ blockComponentStyles,
4
+ commandListContext
5
+ } from "./chunk-J73E7P6J.js";
8
6
 
9
- // src/internal/command/empty.ts
7
+ // src/components/autocomplete-empty/index.ts
10
8
  import { consume } from "@lit-labs/context";
11
9
  import { LitElement, html } from "lit";
12
10
  import { customElement, state } from "lit/decorators.js";
13
- var CommandEmpty = class extends LitElement {
11
+ var AutocompleteEmpty = class extends LitElement {
14
12
  willUpdate(_changedProperties) {
15
13
  var _a;
16
14
  const scores = (_a = this.listContext) == null ? void 0 : _a.scores;
@@ -35,14 +33,14 @@ var CommandEmpty = class extends LitElement {
35
33
  }
36
34
  };
37
35
  /** @hidden */
38
- CommandEmpty.styles = blockComponentStyles;
36
+ AutocompleteEmpty.styles = blockComponentStyles;
39
37
  __decorateClass([
40
38
  consume({ context: commandListContext, subscribe: true }),
41
39
  state()
42
- ], CommandEmpty.prototype, "listContext", 2);
43
- CommandEmpty = __decorateClass([
44
- customElement("prosekit-command-empty")
45
- ], CommandEmpty);
40
+ ], AutocompleteEmpty.prototype, "listContext", 2);
41
+ AutocompleteEmpty = __decorateClass([
42
+ customElement("prosekit-autocomplete-empty")
43
+ ], AutocompleteEmpty);
46
44
  export {
47
- CommandEmpty
45
+ AutocompleteEmpty
48
46
  };
@@ -1,8 +1,8 @@
1
1
  import * as lit from 'lit';
2
2
  import { LitElement, CSSResultGroup, PropertyValues } from 'lit';
3
- import { C as CommandListContext } from './list-context-2692a600.js';
3
+ import { A as AutocompleteListContext } from './context-19474449.js';
4
4
 
5
- interface CommandItemProps {
5
+ interface AutocompleteItemProps {
6
6
  value?: string;
7
7
  onSelect: VoidFunction;
8
8
  }
@@ -11,7 +11,7 @@ interface CommandItemProps {
11
11
  * navigation. Preferably pass a `value`, otherwise the value will be inferred
12
12
  * from the rendered item's `textContent`.
13
13
  */
14
- declare class CommandItem extends LitElement implements Partial<CommandItemProps> {
14
+ declare class AutocompleteItem extends LitElement implements Partial<AutocompleteItemProps> {
15
15
  /** @hidden */
16
16
  static styles: CSSResultGroup;
17
17
  value: string;
@@ -20,11 +20,12 @@ declare class CommandItem extends LitElement implements Partial<CommandItemProps
20
20
  onSelect?: VoidFunction;
21
21
  /** @hidden */
22
22
  defaultSlot?: HTMLSlotElement;
23
- listContext?: CommandListContext;
23
+ listContext?: AutocompleteListContext;
24
24
  get content(): string;
25
- protected willUpdate(changedProperties: PropertyValues<CommandItem>): void;
25
+ protected willUpdate(changedProperties: PropertyValues<this>): void;
26
+ protected updated(changedProperties: PropertyValues<this>): void;
26
27
  /** @hidden */
27
28
  render(): lit.TemplateResult<1> | null;
28
29
  }
29
30
 
30
- export { CommandItem, CommandItemProps };
31
+ export { AutocompleteItem, AutocompleteItemProps };
@@ -0,0 +1,7 @@
1
+ import {
2
+ AutocompleteItem
3
+ } from "./chunk-UDTISUHF.js";
4
+ import "./chunk-J73E7P6J.js";
5
+ export {
6
+ AutocompleteItem
7
+ };
@@ -1,20 +1,22 @@
1
1
  import * as lit from 'lit';
2
2
  import { LitElement, CSSResultGroup, PropertyValues } from 'lit';
3
3
  import { Editor } from '@prosekit/core';
4
- import { C as CommandListContext } from './list-context-2692a600.js';
5
- import { C as CommandPopoverContext } from './popover-context-d5266bd6.js';
4
+ import { A as AutocompletePopoverContext } from './context-436a56d3.js';
5
+ import { A as AutocompleteListContext } from './context-19474449.js';
6
6
 
7
- interface CommandListProps {
7
+ interface AutocompleteListProps {
8
8
  editor: Editor;
9
9
  }
10
- declare class CommandList extends LitElement implements Partial<CommandListProps> {
10
+ declare class AutocompleteList extends LitElement implements Partial<AutocompleteListProps> {
11
11
  /** @hidden */
12
12
  static styles: CSSResultGroup;
13
+ /** @hidden */
13
14
  private controller;
14
15
  private get active();
16
+ private lastMouseMoveTime;
15
17
  editor?: Editor;
16
- popoverContext: CommandPopoverContext | null;
17
- context: CommandListContext;
18
+ popoverContext: AutocompletePopoverContext | null;
19
+ context: AutocompleteListContext;
18
20
  protected firstUpdated(): void;
19
21
  private get items();
20
22
  private get availableItems();
@@ -26,8 +28,9 @@ declare class CommandList extends LitElement implements Partial<CommandListProps
26
28
  /** @hidden */
27
29
  defaultSlot?: HTMLSlotElement;
28
30
  /** @hidden */
29
- willUpdate(changedProperties: PropertyValues<CommandList>): void;
31
+ willUpdate(changedProperties: PropertyValues<this>): void;
30
32
  private updateSelectedByChange;
33
+ private handleMouseMove;
31
34
  private handleMouseOver;
32
35
  private handleClick;
33
36
  private handleMouseDown;
@@ -36,4 +39,4 @@ declare class CommandList extends LitElement implements Partial<CommandListProps
36
39
  render(): lit.TemplateResult<1>;
37
40
  }
38
41
 
39
- export { CommandList, CommandListProps };
42
+ export { AutocompleteList, AutocompleteListProps };
@@ -0,0 +1,8 @@
1
+ import {
2
+ AutocompleteList
3
+ } from "./chunk-65QAWC7L.js";
4
+ import "./chunk-UDTISUHF.js";
5
+ import "./chunk-J73E7P6J.js";
6
+ export {
7
+ AutocompleteList
8
+ };
@@ -1,8 +1,8 @@
1
1
  import * as lit from 'lit';
2
- import { LitElement, CSSResultGroup, PropertyValues } from 'lit';
2
+ import { LitElement, CSSResultGroup } from 'lit';
3
3
  import { ComputePositionConfig } from '@floating-ui/dom';
4
4
  import { Editor } from '@prosekit/core';
5
- import { C as CommandPopoverContext } from './popover-context-d5266bd6.js';
5
+ import { A as AutocompletePopoverContext } from './context-436a56d3.js';
6
6
 
7
7
  /**
8
8
  * The `PopoverOptions` interface defines the options that can be passed to the
@@ -15,25 +15,20 @@ import { C as CommandPopoverContext } from './popover-context-d5266bd6.js';
15
15
  */
16
16
  type PopoverOptions = ComputePositionConfig;
17
17
 
18
- type QueryBuilder = (match: RegExpMatchArray, matchAfter?: RegExpMatchArray | null) => string;
19
-
20
- interface CommandPopoverProps {
18
+ interface AutocompletePopoverProps {
21
19
  editor: Editor;
22
20
  regex: RegExp;
23
- regexAfter?: RegExp;
24
- queryBuilder?: QueryBuilder;
25
21
  popoverOptions?: PopoverOptions;
26
22
  }
27
- declare class CommandPopover extends LitElement implements Partial<CommandPopoverProps> {
23
+ declare class AutocompletePopover extends LitElement implements Partial<AutocompletePopoverProps> {
28
24
  /** @hidden */
29
25
  static styles: CSSResultGroup;
26
+ /** @hidden */
30
27
  private controller;
31
28
  editor?: Editor;
32
29
  regex?: RegExp;
33
- regexAfter?: RegExp;
34
- queryBuilder: QueryBuilder;
35
30
  popoverOptions: PopoverOptions;
36
- context: CommandPopoverContext;
31
+ context: AutocompletePopoverContext;
37
32
  /** @hidden */
38
33
  onSelect?: VoidFunction;
39
34
  private get list();
@@ -43,9 +38,9 @@ declare class CommandPopover extends LitElement implements Partial<CommandPopove
43
38
  /** @hidden */
44
39
  protected get active(): boolean;
45
40
  /** @hidden */
46
- willUpdate(changedProperties: PropertyValues<CommandPopover>): void;
41
+ willUpdate(): void;
47
42
  /** @hidden */
48
43
  render(): lit.TemplateResult<1>;
49
44
  }
50
45
 
51
- export { CommandPopover, CommandPopoverProps, PopoverOptions, QueryBuilder };
46
+ export { AutocompletePopover, AutocompletePopoverProps, PopoverOptions };
@@ -1,18 +1,21 @@
1
1
  import {
2
- commandPopoverContext,
3
- isCommandList
4
- } from "./chunk-WPC5TQP7.js";
2
+ commandPopoverContext
3
+ } from "./chunk-65QAWC7L.js";
4
+ import "./chunk-UDTISUHF.js";
5
5
  import {
6
6
  __decorateClass,
7
7
  blockComponentStyles
8
- } from "./chunk-FB3RHUS6.js";
8
+ } from "./chunk-J73E7P6J.js";
9
9
 
10
- // src/internal/popover/popover.ts
10
+ // src/components/popover/index.ts
11
11
  import {
12
12
  autoUpdate,
13
13
  computePosition
14
14
  } from "@floating-ui/dom";
15
- import { LitElement, html } from "lit";
15
+ import {
16
+ LitElement,
17
+ html
18
+ } from "lit";
16
19
  import { customElement, property, query, state } from "lit/decorators.js";
17
20
  import { styleMap } from "lit/directives/style-map.js";
18
21
 
@@ -22,7 +25,10 @@ function roundByDPR(value) {
22
25
  return Math.round(value * dpr) / dpr;
23
26
  }
24
27
 
25
- // src/internal/popover/popover.ts
28
+ // src/components/popover/options.ts
29
+ import "@floating-ui/dom";
30
+
31
+ // src/components/popover/index.ts
26
32
  var Popover = class extends LitElement {
27
33
  /** @hidden */
28
34
  constructor() {
@@ -121,22 +127,40 @@ Popover = __decorateClass([
121
127
  customElement("prosekit-popover")
122
128
  ], Popover);
123
129
 
124
- // src/internal/command/popover.ts
130
+ // src/components/autocomplete-popover/index.ts
125
131
  import { provide } from "@lit-labs/context";
126
- import { LitElement as LitElement2, html as html2 } from "lit";
132
+ import "@prosekit/core";
133
+ import { html as html2, LitElement as LitElement2 } from "lit";
127
134
  import { customElement as customElement2, property as property2, query as query2, state as state2 } from "lit/decorators.js";
128
135
 
129
- // src/internal/command/popover-controller.ts
130
- import { addSuggestion } from "@prosekit/extensions/suggestion";
131
- var CommandPopoverController = class {
136
+ // src/components/autocomplete-list/helpers.ts
137
+ function isAutocompleteList(element) {
138
+ var _a;
139
+ return ((_a = element == null ? void 0 : element.tagName) == null ? void 0 : _a.toLowerCase()) === "prosekit-autocomplete-list";
140
+ }
141
+
142
+ // src/components/autocomplete-popover/controller.ts
143
+ import "@prosekit/core";
144
+ import {
145
+ AutocompleteRule,
146
+ addAutocomplete
147
+ } from "@prosekit/extensions/autocomplete";
148
+ import "lit";
149
+
150
+ // src/components/autocomplete-popover/helpers.ts
151
+ function defaultQueryBuilder(match) {
152
+ return match[0].toLowerCase().replace(/[!"#$%&'()*+,-./:;<=>?@[\\\]^_`{|}~]/g, "").replace(/\s\s+/g, " ").trim();
153
+ }
154
+
155
+ // src/components/autocomplete-popover/controller.ts
156
+ var AutocompletePopoverController = class {
132
157
  constructor(host, onChange) {
133
158
  this.host = host;
134
159
  this.onChange = onChange;
135
160
  this.reference = null;
136
161
  this.editor = null;
137
- this.rules = [];
162
+ this.regex = null;
138
163
  this.cleanup = null;
139
- this.queryBuilder = null;
140
164
  this.handleDismiss = null;
141
165
  this.handleSubmit = null;
142
166
  this.host.addController(this);
@@ -144,68 +168,64 @@ var CommandPopoverController = class {
144
168
  setEditor(editor) {
145
169
  if (this.editor !== editor) {
146
170
  this.editor = editor;
147
- this.host.requestUpdate();
148
171
  this.addExtension();
149
- }
150
- }
151
- setRules(rules) {
152
- if (this.rules.length !== rules.length || this.rules.some((r, i) => r !== rules[i])) {
153
- this.rules = rules;
154
172
  this.host.requestUpdate();
155
- this.addExtension();
156
173
  }
157
174
  }
158
- setQueryBuilder(queryBuilder) {
159
- if (this.queryBuilder !== queryBuilder) {
160
- this.queryBuilder = queryBuilder;
161
- this.host.requestUpdate();
175
+ setRegex(regex) {
176
+ if (this.regex !== regex) {
177
+ this.regex = regex;
162
178
  this.addExtension();
179
+ this.host.requestUpdate();
163
180
  }
164
181
  }
165
- hostDisconnected() {
166
- var _a;
167
- (_a = this.cleanup) == null ? void 0 : _a.call(this);
168
- this.cleanup = null;
169
- }
170
182
  addExtension() {
171
183
  var _a;
172
- (_a = this.cleanup) == null ? void 0 : _a.call(this);
173
- this.cleanup = null;
174
- if (!this.editor || !this.rules || this.rules.length === 0) {
184
+ const regex = this.regex;
185
+ const editor = this.editor;
186
+ if (!regex || !editor) {
175
187
  return;
176
188
  }
177
- const editor = this.editor;
178
- const extension = addSuggestion({
179
- rules: this.rules,
180
- onMatch: ({ dismiss, deleteMatch, match, matchAfter }) => {
181
- var _a2;
182
- const span = editor.view.dom.querySelector(
183
- ".prosemirror-prediction-match"
184
- );
185
- if (span) {
186
- this.reference = span;
187
- }
188
- const query3 = (_a2 = this.queryBuilder) == null ? void 0 : _a2.call(this, match, matchAfter);
189
- this.onChange(query3 != null ? query3 : "", !!this.reference);
190
- this.handleDismiss = dismiss;
191
- this.handleSubmit = deleteMatch;
192
- setTimeout(() => {
193
- this.host.requestUpdate();
194
- }, 0);
195
- },
196
- onDeactivate: () => {
197
- this.reference = null;
198
- this.host.requestUpdate();
199
- this.onChange("", false);
200
- this.handleDismiss = null;
201
- this.handleSubmit = null;
189
+ (_a = this.cleanup) == null ? void 0 : _a.call(this);
190
+ this.cleanup = null;
191
+ const handleEnter = (options) => {
192
+ const span = editor.view.dom.querySelector(
193
+ ".prosemirror-prediction-match"
194
+ );
195
+ if (span) {
196
+ this.reference = span;
202
197
  }
198
+ const query3 = defaultQueryBuilder(options.match);
199
+ this.onChange(query3 != null ? query3 : "", !!this.reference);
200
+ this.handleDismiss = options.ignoreMatch;
201
+ this.handleSubmit = options.deleteMatch;
202
+ setTimeout(() => {
203
+ this.host.requestUpdate();
204
+ }, 0);
205
+ };
206
+ const handleLeave = () => {
207
+ this.reference = null;
208
+ this.host.requestUpdate();
209
+ this.onChange("", false);
210
+ this.handleDismiss = null;
211
+ this.handleSubmit = null;
212
+ };
213
+ const rule = new AutocompleteRule({
214
+ regex,
215
+ onEnter: handleEnter,
216
+ onLeave: handleLeave
203
217
  });
218
+ const extension = addAutocomplete(rule);
204
219
  this.cleanup = editor.use(extension);
205
220
  }
221
+ hostDisconnected() {
222
+ var _a;
223
+ (_a = this.cleanup) == null ? void 0 : _a.call(this);
224
+ this.cleanup = null;
225
+ }
206
226
  };
207
227
 
208
- // src/internal/command/popover-default-options.ts
228
+ // src/components/autocomplete-popover/default-popover-options.ts
209
229
  import {
210
230
  flip,
211
231
  inline,
@@ -253,22 +273,15 @@ var defaultPopoverOptions = {
253
273
  ]
254
274
  };
255
275
 
256
- // src/internal/command/query-builder.ts
257
- var defaultQueryBuilder = (match, matchAfter) => {
258
- var _a;
259
- const query3 = match[0] + ((_a = matchAfter == null ? void 0 : matchAfter[0]) != null ? _a : "");
260
- return query3.toLowerCase().replace(/[!"#$%&'()*+,-./:;<=>?@[\\\]^_`{|}~]/g, "").replace(/\s\s+/g, " ").trim();
261
- };
262
-
263
- // src/internal/command/popover.ts
264
- var CommandPopover = class extends LitElement2 {
276
+ // src/components/autocomplete-popover/index.ts
277
+ var AutocompletePopover = class extends LitElement2 {
265
278
  constructor() {
266
279
  super(...arguments);
267
- this.controller = new CommandPopoverController(
280
+ /** @hidden */
281
+ this.controller = new AutocompletePopoverController(
268
282
  this,
269
283
  this.updateContext.bind(this)
270
284
  );
271
- this.queryBuilder = defaultQueryBuilder;
272
285
  this.popoverOptions = defaultPopoverOptions;
273
286
  this.context = {
274
287
  active: false,
@@ -285,7 +298,7 @@ var CommandPopover = class extends LitElement2 {
285
298
  }
286
299
  get list() {
287
300
  var _a, _b, _c;
288
- return (_c = (_b = (_a = this.defaultSlot) == null ? void 0 : _a.assignedElements({ flatten: true })) == null ? void 0 : _b.find(isCommandList)) != null ? _c : null;
301
+ return (_c = (_b = (_a = this.defaultSlot) == null ? void 0 : _a.assignedElements({ flatten: true })) == null ? void 0 : _b.find(isAutocompleteList)) != null ? _c : null;
289
302
  }
290
303
  updateContext(query3, active) {
291
304
  if (this.context.query === query3 && this.context.active === active) {
@@ -303,23 +316,12 @@ var CommandPopover = class extends LitElement2 {
303
316
  return !!((_a = this.controller) == null ? void 0 : _a.reference);
304
317
  }
305
318
  /** @hidden */
306
- willUpdate(changedProperties) {
307
- if (changedProperties.has("editor") && this.editor) {
319
+ willUpdate() {
320
+ if (this.editor) {
308
321
  this.controller.setEditor(this.editor);
309
322
  }
310
- if (changedProperties.has("regex") || changedProperties.has("regexAfter")) {
311
- const regex = this.regex;
312
- const regexAfter = this.regexAfter;
313
- if (regex) {
314
- const rule = {
315
- match: regex,
316
- matchAfter: regexAfter != null ? regexAfter : void 0
317
- };
318
- this.controller.setRules([rule]);
319
- }
320
- }
321
- if (changedProperties.has("queryBuilder") && this.queryBuilder) {
322
- this.controller.setQueryBuilder(this.queryBuilder);
323
+ if (this.regex) {
324
+ this.controller.setRegex(this.regex);
323
325
  }
324
326
  }
325
327
  /** @hidden */
@@ -329,35 +331,29 @@ var CommandPopover = class extends LitElement2 {
329
331
  }
330
332
  };
331
333
  /** @hidden */
332
- CommandPopover.styles = blockComponentStyles;
333
- __decorateClass([
334
- property2({ attribute: false })
335
- ], CommandPopover.prototype, "editor", 2);
336
- __decorateClass([
337
- property2({ attribute: false })
338
- ], CommandPopover.prototype, "regex", 2);
334
+ AutocompletePopover.styles = blockComponentStyles;
339
335
  __decorateClass([
340
336
  property2({ attribute: false })
341
- ], CommandPopover.prototype, "regexAfter", 2);
337
+ ], AutocompletePopover.prototype, "editor", 2);
342
338
  __decorateClass([
343
339
  property2({ attribute: false })
344
- ], CommandPopover.prototype, "queryBuilder", 2);
340
+ ], AutocompletePopover.prototype, "regex", 2);
345
341
  __decorateClass([
346
342
  property2({ attribute: false })
347
- ], CommandPopover.prototype, "popoverOptions", 2);
343
+ ], AutocompletePopover.prototype, "popoverOptions", 2);
348
344
  __decorateClass([
349
345
  provide({ context: commandPopoverContext }),
350
346
  state2()
351
- ], CommandPopover.prototype, "context", 2);
347
+ ], AutocompletePopover.prototype, "context", 2);
352
348
  __decorateClass([
353
349
  property2({ attribute: false })
354
- ], CommandPopover.prototype, "onSelect", 2);
350
+ ], AutocompletePopover.prototype, "onSelect", 2);
355
351
  __decorateClass([
356
352
  query2("slot")
357
- ], CommandPopover.prototype, "defaultSlot", 2);
358
- CommandPopover = __decorateClass([
359
- customElement2("prosekit-command-popover")
360
- ], CommandPopover);
353
+ ], AutocompletePopover.prototype, "defaultSlot", 2);
354
+ AutocompletePopover = __decorateClass([
355
+ customElement2("prosekit-autocomplete-popover")
356
+ ], AutocompletePopover);
361
357
  export {
362
- CommandPopover
358
+ AutocompletePopover
363
359
  };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@prosekit/lit",
3
3
  "type": "module",
4
- "version": "0.0.4",
4
+ "version": "0.0.5",
5
5
  "private": false,
6
6
  "author": {
7
7
  "name": "ocavue",
@@ -30,36 +30,36 @@
30
30
  "import": "./dist/prosekit-lit.js",
31
31
  "default": "./dist/prosekit-lit.js"
32
32
  },
33
- "./components/command-empty": {
34
- "types": "./dist/prosekit-lit-components-command-empty.d.ts",
35
- "import": "./dist/prosekit-lit-components-command-empty.js",
36
- "default": "./dist/prosekit-lit-components-command-empty.js"
33
+ "./components/autocomplete-empty": {
34
+ "types": "./dist/prosekit-lit-components-autocomplete-empty.d.ts",
35
+ "import": "./dist/prosekit-lit-components-autocomplete-empty.js",
36
+ "default": "./dist/prosekit-lit-components-autocomplete-empty.js"
37
37
  },
38
- "./components/command-item": {
39
- "types": "./dist/prosekit-lit-components-command-item.d.ts",
40
- "import": "./dist/prosekit-lit-components-command-item.js",
41
- "default": "./dist/prosekit-lit-components-command-item.js"
38
+ "./components/autocomplete-item": {
39
+ "types": "./dist/prosekit-lit-components-autocomplete-item.d.ts",
40
+ "import": "./dist/prosekit-lit-components-autocomplete-item.js",
41
+ "default": "./dist/prosekit-lit-components-autocomplete-item.js"
42
42
  },
43
- "./components/command-list": {
44
- "types": "./dist/prosekit-lit-components-command-list.d.ts",
45
- "import": "./dist/prosekit-lit-components-command-list.js",
46
- "default": "./dist/prosekit-lit-components-command-list.js"
43
+ "./components/autocomplete-list": {
44
+ "types": "./dist/prosekit-lit-components-autocomplete-list.d.ts",
45
+ "import": "./dist/prosekit-lit-components-autocomplete-list.js",
46
+ "default": "./dist/prosekit-lit-components-autocomplete-list.js"
47
47
  },
48
- "./components/command-popover": {
49
- "types": "./dist/prosekit-lit-components-command-popover.d.ts",
50
- "import": "./dist/prosekit-lit-components-command-popover.js",
51
- "default": "./dist/prosekit-lit-components-command-popover.js"
48
+ "./components/autocomplete-popover": {
49
+ "types": "./dist/prosekit-lit-components-autocomplete-popover.d.ts",
50
+ "import": "./dist/prosekit-lit-components-autocomplete-popover.js",
51
+ "default": "./dist/prosekit-lit-components-autocomplete-popover.js"
52
52
  }
53
53
  },
54
54
  "files": [
55
55
  "dist"
56
56
  ],
57
57
  "dependencies": {
58
- "@floating-ui/dom": "^1.4.4",
58
+ "@floating-ui/dom": "^1.4.5",
59
59
  "@lit-labs/context": "^0.3.3",
60
60
  "@lit/reactive-element": "^1.6.2",
61
- "@prosekit/core": "^0.0.3",
62
- "@prosekit/extensions": "^0.0.3",
61
+ "@prosekit/core": "^0.0.4",
62
+ "@prosekit/extensions": "^0.0.4",
63
63
  "@prosekit/pm": "^0.0.3",
64
64
  "@superhuman/command-score": "^0.5.0",
65
65
  "lit": "^2.7.6",
@@ -84,17 +84,17 @@
84
84
  ".": [
85
85
  "./dist/prosekit-lit.d.ts"
86
86
  ],
87
- "components/command-empty": [
88
- "./dist/prosekit-lit-components-command-empty.d.ts"
87
+ "components/autocomplete-empty": [
88
+ "./dist/prosekit-lit-components-autocomplete-empty.d.ts"
89
89
  ],
90
- "components/command-item": [
91
- "./dist/prosekit-lit-components-command-item.d.ts"
90
+ "components/autocomplete-item": [
91
+ "./dist/prosekit-lit-components-autocomplete-item.d.ts"
92
92
  ],
93
- "components/command-list": [
94
- "./dist/prosekit-lit-components-command-list.d.ts"
93
+ "components/autocomplete-list": [
94
+ "./dist/prosekit-lit-components-autocomplete-list.d.ts"
95
95
  ],
96
- "components/command-popover": [
97
- "./dist/prosekit-lit-components-command-popover.d.ts"
96
+ "components/autocomplete-popover": [
97
+ "./dist/prosekit-lit-components-autocomplete-popover.d.ts"
98
98
  ]
99
99
  }
100
100
  }
package/src/index.ts CHANGED
@@ -1,5 +1 @@
1
- /**
2
- * @module @prosekit/lit
3
- */
4
-
5
1
  export {}
@@ -1,9 +0,0 @@
1
- // src/internal/command/list-context.ts
2
- import { createContext } from "@lit-labs/context";
3
- var commandListContext = createContext(
4
- "prosekit-command-list-context"
5
- );
6
-
7
- export {
8
- commandListContext
9
- };
@@ -1,21 +0,0 @@
1
- // src/internal/command/popover-context.ts
2
- import { createContext } from "@lit-labs/context";
3
- var commandPopoverContext = createContext(
4
- "prosekit-command-popover-context"
5
- );
6
-
7
- // src/internal/command/utils.ts
8
- function isCommandItem(element) {
9
- var _a;
10
- return ((_a = element == null ? void 0 : element.tagName) == null ? void 0 : _a.toLowerCase()) === "prosekit-command-item";
11
- }
12
- function isCommandList(element) {
13
- var _a;
14
- return ((_a = element == null ? void 0 : element.tagName) == null ? void 0 : _a.toLowerCase()) === "prosekit-command-list";
15
- }
16
-
17
- export {
18
- commandPopoverContext,
19
- isCommandItem,
20
- isCommandList
21
- };
@@ -1,16 +0,0 @@
1
- import * as lit from 'lit';
2
- import { LitElement, CSSResultGroup, PropertyValues } from 'lit';
3
- import { C as CommandListContext } from './list-context-2692a600.js';
4
-
5
- interface CommandEmptyProps {
6
- }
7
- declare class CommandEmpty extends LitElement implements CommandEmptyProps {
8
- /** @hidden */
9
- static styles: CSSResultGroup;
10
- listContext?: CommandListContext;
11
- protected willUpdate(_changedProperties: PropertyValues<CommandEmpty>): void;
12
- /** @hidden */
13
- render(): lit.TemplateResult<1> | null;
14
- }
15
-
16
- export { CommandEmpty, CommandEmptyProps };