@prosekit/web 0.3.1 → 0.3.3

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,6 +1,9 @@
1
1
  // src/utils/define-custom-element.ts
2
2
  function defineCustomElement(name, constructor, options) {
3
- typeof customElements != "undefined" && customElements.define(name, constructor, options);
3
+ if (typeof customElements === "undefined") {
4
+ return;
5
+ }
6
+ customElements.define(name, constructor, options);
4
7
  }
5
8
 
6
9
  export {
@@ -3,7 +3,7 @@ import {
3
3
  } from "./chunk-MZSYOTZT.js";
4
4
  import {
5
5
  defineCustomElement
6
- } from "./chunk-Y2CJYXR5.js";
6
+ } from "./chunk-LCDA7GFP.js";
7
7
 
8
8
  // src/components/autocomplete/autocomplete-empty/element.gen.ts
9
9
  import { ElementBuilder } from "@aria-ui/core";
@@ -42,21 +42,25 @@ import { createContext } from "@aria-ui/core";
42
42
  var queryContext = createContext(
43
43
  "prosekit/autocomplete-popover/query",
44
44
  ""
45
- ), onSubmitContext = createContext(
45
+ );
46
+ var onSubmitContext = createContext(
46
47
  "prosekit/autocomplete-popover/onSubmit",
47
48
  null
48
- ), openContext = createContext(
49
+ );
50
+ var openContext = createContext(
49
51
  "prosekit/autocomplete-popover/open",
50
- !1
52
+ false
51
53
  );
52
54
 
53
55
  // src/components/autocomplete/autocomplete-item/state.ts
54
56
  function useAutocompleteItem(element, state) {
55
57
  useListboxItem(element, state);
56
- let open = openContext.consume(element);
58
+ const open = openContext.consume(element);
57
59
  useEffect(element, () => {
58
60
  var _a;
59
- !state.value.peek() && open.get() && state.value.set((_a = element.textContent) != null ? _a : "");
61
+ if (!state.value.peek() && open.get()) {
62
+ state.value.set((_a = element.textContent) != null ? _a : "");
63
+ }
60
64
  });
61
65
  }
62
66
 
@@ -70,7 +74,8 @@ import { ElementBuilder as ElementBuilder3 } from "@aria-ui/core";
70
74
 
71
75
  // src/components/autocomplete/autocomplete-list/props.ts
72
76
  import { defaultListboxProps } from "@aria-ui/listbox";
73
- var defaultFilter = defaultListboxProps.filter, defaultAutocompleteListProps = {
77
+ var defaultFilter = defaultListboxProps.filter;
78
+ var defaultAutocompleteListProps = {
74
79
  filter: defaultFilter,
75
80
  editor: null
76
81
  };
@@ -100,10 +105,17 @@ function omit(object, keys) {
100
105
 
101
106
  // src/components/autocomplete/autocomplete-list/state.ts
102
107
  function useAutocompleteList(element, state) {
103
- let open = openContext.consume(element), query = queryContext.consume(element), onSubmit = onSubmitContext.consume(element), onKeydownHandlerAdd = useKeyboardHandler(element, open, state.editor), onValueChange = (value) => {
108
+ const open = openContext.consume(element);
109
+ const query = queryContext.consume(element);
110
+ const onSubmit = onSubmitContext.consume(element);
111
+ const onKeydownHandlerAdd = useKeyboardHandler(element, open, state.editor);
112
+ const onValueChange = (value) => {
104
113
  var _a;
105
- value && ((_a = onSubmit.peek()) == null || _a());
106
- }, listboxState = {
114
+ if (value) {
115
+ (_a = onSubmit.peek()) == null ? void 0 : _a();
116
+ }
117
+ };
118
+ const listboxState = {
107
119
  ...mapSignals({
108
120
  ...omit(defaultListboxProps2, ["filter"]),
109
121
  onKeydownHandlerAdd,
@@ -111,43 +123,67 @@ function useAutocompleteList(element, state) {
111
123
  }),
112
124
  filter: state.filter
113
125
  };
114
- useListbox(element, listboxState), useEffect2(element, () => {
126
+ useListbox(element, listboxState);
127
+ useEffect2(element, () => {
115
128
  listboxState.query.set(query.get());
116
- }), useEffect2(element, () => {
117
- open.get() || (listboxState.value.set(""), query.set(""));
118
- }), useEffect2(element, () => {
119
- if (!open.get())
120
- listboxState.autoFocus.set(!1);
121
- else {
122
- let canceled = !1;
123
- return requestAnimationFrame(() => {
124
- canceled || listboxState.autoFocus.set(!0);
125
- }), () => {
126
- canceled = !0;
129
+ });
130
+ useEffect2(element, () => {
131
+ if (!open.get()) {
132
+ listboxState.value.set("");
133
+ query.set("");
134
+ }
135
+ });
136
+ useEffect2(element, () => {
137
+ if (!open.get()) {
138
+ listboxState.autoFocus.set(false);
139
+ } else {
140
+ let canceled = false;
141
+ requestAnimationFrame(() => {
142
+ if (canceled) return;
143
+ listboxState.autoFocus.set(true);
144
+ });
145
+ return () => {
146
+ canceled = true;
127
147
  };
128
148
  }
129
- }), useEffect2(element, () => {
149
+ });
150
+ useEffect2(element, () => {
130
151
  element.tabIndex = -1;
131
152
  });
132
153
  }
133
154
  function useKeyboardHandler(element, open, editor) {
134
- let keydownHandler = createSignal(
155
+ const keydownHandler = createSignal(
135
156
  null
136
- ), disposeKeydownHandler;
137
- return useEffect2(element, () => {
138
- let editorValue = editor.get(), keydownHandlerValue = keydownHandler.get();
139
- if (!editorValue || !keydownHandlerValue)
157
+ );
158
+ let disposeKeydownHandler;
159
+ useEffect2(element, () => {
160
+ const editorValue = editor.get();
161
+ const keydownHandlerValue = keydownHandler.get();
162
+ if (!editorValue || !keydownHandlerValue) {
140
163
  return;
141
- let extension = defineDOMEventHandler(
164
+ }
165
+ const extension = defineDOMEventHandler(
142
166
  "keydown",
143
- (view, event) => view.composing || event.defaultPrevented || !open.get() ? !1 : (keydownHandlerValue(event), event.defaultPrevented)
167
+ (view, event) => {
168
+ if (view.composing || event.defaultPrevented || !open.get()) {
169
+ return false;
170
+ }
171
+ keydownHandlerValue(event);
172
+ return event.defaultPrevented;
173
+ }
144
174
  );
145
- disposeKeydownHandler == null || disposeKeydownHandler(), disposeKeydownHandler = editorValue.use(
175
+ disposeKeydownHandler == null ? void 0 : disposeKeydownHandler();
176
+ disposeKeydownHandler = editorValue.use(
146
177
  withPriority(extension, Priority.highest)
147
178
  );
148
- }), (keydownHandlerValue) => (keydownHandler.set(keydownHandlerValue), () => {
149
- disposeKeydownHandler == null || disposeKeydownHandler(), disposeKeydownHandler = void 0;
150
179
  });
180
+ return (keydownHandlerValue) => {
181
+ keydownHandler.set(keydownHandlerValue);
182
+ return () => {
183
+ disposeKeydownHandler == null ? void 0 : disposeKeydownHandler();
184
+ disposeKeydownHandler = void 0;
185
+ };
186
+ };
151
187
  }
152
188
 
153
189
  // src/components/autocomplete/autocomplete-list/element.gen.ts
@@ -160,7 +196,9 @@ import { ElementBuilder as ElementBuilder4 } from "@aria-ui/core";
160
196
 
161
197
  // src/components/autocomplete/autocomplete-popover/props.ts
162
198
  import { defaultOverlayPositionerProps } from "@aria-ui/overlay";
163
- var body = typeof document != "undefined" && document.querySelector("body"), defaultBoundary = body || "clippingAncestors", defaultAutocompletePopoverProps = Object.freeze({
199
+ var body = typeof document !== "undefined" && document.querySelector("body");
200
+ var defaultBoundary = body || "clippingAncestors";
201
+ var defaultAutocompletePopoverProps = Object.freeze({
164
202
  ...defaultOverlayPositionerProps,
165
203
  editor: null,
166
204
  regex: null,
@@ -168,9 +206,9 @@ var body = typeof document != "undefined" && document.querySelector("body"), def
168
206
  onOpenChange: null,
169
207
  placement: "bottom-start",
170
208
  offset: 4,
171
- inline: !0,
172
- hoist: !0,
173
- fitViewport: !0,
209
+ inline: true,
210
+ hoist: true,
211
+ fitViewport: true,
174
212
  boundary: defaultBoundary,
175
213
  overflowPadding: 8
176
214
  });
@@ -180,6 +218,7 @@ import {
180
218
  createComputed,
181
219
  createSignal as createSignal3,
182
220
  useAnimationFrame,
221
+ useAttribute,
183
222
  useEffect as useEffect4
184
223
  } from "@aria-ui/core";
185
224
  import { useOverlayPositionerState } from "@aria-ui/overlay";
@@ -200,12 +239,13 @@ import {
200
239
  useEffect as useEffect3
201
240
  } from "@aria-ui/core";
202
241
  function useFirstRendering(host) {
203
- let firstRendering = createSignal2(!0);
204
- return useEffect3(host, () => {
242
+ const firstRendering = createSignal2(true);
243
+ useEffect3(host, () => {
205
244
  requestAnimationFrame(() => {
206
- firstRendering.set(!1);
245
+ firstRendering.set(false);
207
246
  });
208
- }), firstRendering;
247
+ });
248
+ return firstRendering;
209
249
  }
210
250
 
211
251
  // src/components/autocomplete/autocomplete-popover/helpers.ts
@@ -215,8 +255,17 @@ function defaultQueryBuilder(match) {
215
255
 
216
256
  // src/components/autocomplete/autocomplete-popover/state.ts
217
257
  function useAutocompletePopover(host, state) {
218
- let { editor, regex, ...overlayState } = state, reference = createSignal3(null), query = createSignal3(""), onDismiss = createSignal3(null), onSubmit = createSignal3(null), presence = createComputed(() => !!reference.get());
219
- queryContext.provide(host, query), onSubmitContext.provide(host, onSubmit), openContext.provide(host, presence), useEscapeKeydown(host, editor, createKeymapHandler(onDismiss, presence)), useAutocompleteExtension(
258
+ const { editor, regex, ...overlayState } = state;
259
+ const reference = createSignal3(null);
260
+ const query = createSignal3("");
261
+ const onDismiss = createSignal3(null);
262
+ const onSubmit = createSignal3(null);
263
+ const presence = createComputed(() => !!reference.get());
264
+ queryContext.provide(host, query);
265
+ onSubmitContext.provide(host, onSubmit);
266
+ openContext.provide(host, presence);
267
+ useEscapeKeydown(host, editor, createKeymapHandler(onDismiss, presence));
268
+ useAutocompleteExtension(
220
269
  host,
221
270
  editor,
222
271
  regex,
@@ -224,57 +273,84 @@ function useAutocompletePopover(host, state) {
224
273
  query,
225
274
  onDismiss,
226
275
  onSubmit
227
- ), useOverlayPositionerState(host, overlayState, { reference }), usePresence(host, presence);
228
- let firstRendering = useFirstRendering(host);
276
+ );
277
+ useOverlayPositionerState(host, overlayState, { reference });
278
+ useAttribute(host, "data-state", () => presence.get() ? "open" : "closed");
279
+ usePresence(host, presence);
280
+ const firstRendering = useFirstRendering(host);
229
281
  useEffect4(host, () => {
230
282
  var _a;
231
- let queryValue = query.get();
232
- firstRendering.peek() || (_a = state.onQueryChange.peek()) == null || _a(queryValue);
233
- }), useAnimationFrame(host, () => {
234
- let presenceValue = presence.get(), onOpenChangeValue = state.onOpenChange.peek();
235
- if (onOpenChangeValue)
236
- return () => {
237
- onOpenChangeValue(presenceValue);
238
- };
283
+ const queryValue = query.get();
284
+ if (!firstRendering.peek()) {
285
+ (_a = state.onQueryChange.peek()) == null ? void 0 : _a(queryValue);
286
+ }
287
+ });
288
+ useAnimationFrame(host, () => {
289
+ const presenceValue = presence.get();
290
+ const onOpenChangeValue = state.onOpenChange.peek();
291
+ if (!onOpenChangeValue) {
292
+ return;
293
+ }
294
+ return () => {
295
+ onOpenChangeValue(presenceValue);
296
+ };
239
297
  });
240
298
  }
241
299
  function useAutocompleteExtension(host, editor, regex, reference, query, onDismiss, onSubmit) {
242
300
  useEffect4(host, () => {
243
- let editorValue = editor.get(), regexValue = regex.get();
244
- if (!(!editorValue || !regexValue))
245
- return addAutocompleteExtension(
246
- editorValue,
247
- regexValue,
248
- reference,
249
- query,
250
- onDismiss,
251
- onSubmit
252
- );
301
+ const editorValue = editor.get();
302
+ const regexValue = regex.get();
303
+ if (!editorValue || !regexValue) {
304
+ return;
305
+ }
306
+ return addAutocompleteExtension(
307
+ editorValue,
308
+ regexValue,
309
+ reference,
310
+ query,
311
+ onDismiss,
312
+ onSubmit
313
+ );
253
314
  });
254
315
  }
255
316
  function addAutocompleteExtension(editor, regex, reference, query, onDismiss, onSubmit) {
256
- let handleEnter = (options) => {
257
- let span = editor.view.dom.querySelector(".prosemirror-prediction-match");
258
- span && reference.set(span), query.set(defaultQueryBuilder(options.match)), onDismiss.set(options.ignoreMatch), onSubmit.set(options.deleteMatch);
259
- }, handleLeave = () => {
260
- reference.set(null), query.set(""), onDismiss.set(null), onSubmit.set(null);
261
- }, rule = new AutocompleteRule({
317
+ const handleEnter = (options) => {
318
+ const span = editor.view.dom.querySelector(".prosemirror-prediction-match");
319
+ if (span) {
320
+ reference.set(span);
321
+ }
322
+ query.set(defaultQueryBuilder(options.match));
323
+ onDismiss.set(options.ignoreMatch);
324
+ onSubmit.set(options.deleteMatch);
325
+ };
326
+ const handleLeave = () => {
327
+ reference.set(null);
328
+ query.set("");
329
+ onDismiss.set(null);
330
+ onSubmit.set(null);
331
+ };
332
+ const rule = new AutocompleteRule({
262
333
  regex,
263
334
  onEnter: handleEnter,
264
335
  onLeave: handleLeave
265
- }), extension = defineAutocomplete(rule);
336
+ });
337
+ const extension = defineAutocomplete(rule);
266
338
  return editor.use(extension);
267
339
  }
268
340
  function createKeymapHandler(handler, enabled) {
269
341
  return () => {
270
- if (!enabled.get())
271
- return !1;
272
- let fn = handler.peek();
273
- return fn ? (fn(), !0) : !1;
342
+ if (!enabled.get()) {
343
+ return false;
344
+ }
345
+ const fn = handler.peek();
346
+ if (!fn) return false;
347
+ fn();
348
+ return true;
274
349
  };
275
350
  }
276
351
  function useEscapeKeydown(host, editor, handler) {
277
- let extension = withPriority2(defineKeymap({ Escape: handler }), Priority2.highest);
352
+ const keymap = { Escape: handler };
353
+ const extension = withPriority2(defineKeymap(keymap), Priority2.highest);
278
354
  return useEditorExtension(host, editor, extension);
279
355
  }
280
356
 
@@ -3,7 +3,7 @@ import {
3
3
  } from "./chunk-MZSYOTZT.js";
4
4
  import {
5
5
  defineCustomElement
6
- } from "./chunk-Y2CJYXR5.js";
6
+ } from "./chunk-LCDA7GFP.js";
7
7
 
8
8
  // src/components/block-handle/block-drag-handle/element.gen.ts
9
9
  import { ElementBuilder } from "@aria-ui/core";
@@ -34,24 +34,39 @@ var blockPopoverContext = createContext(
34
34
 
35
35
  // src/components/block-handle/block-drag-handle/state.ts
36
36
  function useBlockDragHandle(host, state) {
37
- let context = blockPopoverContext.consume(host);
37
+ const context = blockPopoverContext.consume(host);
38
38
  useEffect(host, () => {
39
- host.draggable = !0;
40
- }), useEventListener(host, "pointerdown", () => {
39
+ host.draggable = true;
40
+ });
41
+ useEventListener(host, "pointerdown", () => {
41
42
  var _a, _b;
42
- let { pos } = (_a = context.get()) != null ? _a : {}, { view } = (_b = state.editor.get()) != null ? _b : {};
43
- pos == null || view == null || (view.dispatch(
43
+ const { pos } = (_a = context.get()) != null ? _a : {};
44
+ const { view } = (_b = state.editor.get()) != null ? _b : {};
45
+ if (pos == null || view == null) {
46
+ return;
47
+ }
48
+ view.dispatch(
44
49
  view.state.tr.setSelection(NodeSelection.create(view.state.doc, pos))
45
- ), requestAnimationFrame(() => {
50
+ );
51
+ requestAnimationFrame(() => {
46
52
  view.focus();
47
- }));
48
- }), useEventListener(host, "dragstart", (event) => {
53
+ });
54
+ });
55
+ useEventListener(host, "dragstart", (event) => {
49
56
  var _a, _b;
50
- let { pos, element, node } = (_a = context.get()) != null ? _a : {}, { view } = (_b = state.editor.get()) != null ? _b : {};
51
- pos == null || !element || !node || !view || !event.dataTransfer || (event.dataTransfer.clearData(), event.dataTransfer.setData("text/html", element.outerHTML), event.dataTransfer.effectAllowed = "copyMove", event.dataTransfer.setDragImage(element, 0, 0), view.dragging = {
57
+ const { pos, element, node } = (_a = context.get()) != null ? _a : {};
58
+ const { view } = (_b = state.editor.get()) != null ? _b : {};
59
+ if (pos == null || !element || !node || !view || !event.dataTransfer) {
60
+ return;
61
+ }
62
+ event.dataTransfer.clearData();
63
+ event.dataTransfer.setData("text/html", element.outerHTML);
64
+ event.dataTransfer.effectAllowed = "copyMove";
65
+ event.dataTransfer.setDragImage(element, 0, 0);
66
+ view.dragging = {
52
67
  slice: new Slice(Fragment.from(node), 0, 0),
53
- move: !0
54
- });
68
+ move: true
69
+ };
55
70
  });
56
71
  }
57
72
 
@@ -89,16 +104,20 @@ import { defineDOMEventHandler, union } from "@prosekit/core";
89
104
  function throttle(callback, wait) {
90
105
  let lastTime = 0;
91
106
  return (...args) => {
92
- let now = Date.now();
93
- now - lastTime >= wait && (callback(...args), lastTime = now);
107
+ const now = Date.now();
108
+ if (now - lastTime >= wait) {
109
+ callback(...args);
110
+ lastTime = now;
111
+ }
94
112
  };
95
113
  }
96
114
 
97
115
  // src/components/block-handle/block-popover/pointer-move.ts
98
116
  function defineElementHoverHandler(handler) {
99
- let handlePointerEvent = (view, event) => {
117
+ const handlePointerEvent = (view, event) => {
100
118
  var _a;
101
- let rect = view.dom.getBoundingClientRect(), pos = (_a = view.posAtCoords({
119
+ const rect = view.dom.getBoundingClientRect();
120
+ const pos = (_a = view.posAtCoords({
102
121
  top: event.clientY,
103
122
  // Use the center of the editor
104
123
  left: rect.left + rect.width / 2
@@ -107,19 +126,28 @@ function defineElementHoverHandler(handler) {
107
126
  handler(null, null, null, null);
108
127
  return;
109
128
  }
110
- let $pos = view.state.doc.resolve(pos), node = view.state.doc.nodeAt(pos), element = view.nodeDOM(pos);
129
+ const $pos = view.state.doc.resolve(pos);
130
+ const node = view.state.doc.nodeAt(pos);
131
+ const element = view.nodeDOM(pos);
111
132
  if ($pos.depth >= 1 && $pos.index($pos.depth) === 0) {
112
- let ancestorPos = $pos.before($pos.depth), node2 = view.state.doc.nodeAt(ancestorPos), element2 = view.nodeDOM(ancestorPos);
133
+ const ancestorPos = $pos.before($pos.depth);
134
+ const node2 = view.state.doc.nodeAt(ancestorPos);
135
+ const element2 = view.nodeDOM(ancestorPos);
113
136
  if (!element2) {
114
137
  handler(null, null, null, null);
115
138
  return;
116
139
  }
117
- handler({
140
+ const reference = {
118
141
  contextElement: element2,
119
142
  // Get the bounding client rect of the parent node, including its
120
143
  // margins.
121
144
  getBoundingClientRect: () => {
122
- let rect2 = element2.getBoundingClientRect(), style = window.getComputedStyle(element2), marginTop = Number.parseInt(style.marginTop, 10) || 0, marginRight = Number.parseInt(style.marginRight, 10) || 0, marginBottom = Number.parseInt(style.marginBottom, 10) || 0, marginLeft = Number.parseInt(style.marginLeft, 10) || 0;
145
+ const rect2 = element2.getBoundingClientRect();
146
+ const style = window.getComputedStyle(element2);
147
+ const marginTop = Number.parseInt(style.marginTop, 10) || 0;
148
+ const marginRight = Number.parseInt(style.marginRight, 10) || 0;
149
+ const marginBottom = Number.parseInt(style.marginBottom, 10) || 0;
150
+ const marginLeft = Number.parseInt(style.marginLeft, 10) || 0;
123
151
  return {
124
152
  top: rect2.top - marginTop,
125
153
  right: rect2.right + marginRight,
@@ -131,7 +159,8 @@ function defineElementHoverHandler(handler) {
131
159
  y: rect2.y - marginTop
132
160
  };
133
161
  }
134
- }, element2, node2, ancestorPos);
162
+ };
163
+ handler(reference, element2, node2, ancestorPos);
135
164
  return;
136
165
  }
137
166
  handler(element, element, node, pos);
@@ -145,27 +174,38 @@ function defineElementHoverHandler(handler) {
145
174
 
146
175
  // src/components/block-handle/block-popover/state.ts
147
176
  function useBlockPopover(host, state) {
148
- let { editor, ...overlayState } = state, reference = createSignal(null);
177
+ const { editor, ...overlayState } = state;
178
+ const reference = createSignal(null);
149
179
  useOverlayPositionerState(host, overlayState, { reference });
150
- let context = createSignal({
180
+ const context = createSignal({
151
181
  pos: null,
152
182
  node: null,
153
183
  element: null
154
184
  });
155
185
  blockPopoverContext.provide(host, context);
156
- let open = createSignal(!1);
186
+ const open = createSignal(false);
157
187
  useEffect2(host, () => {
158
188
  open.set(!!context.get().element);
159
- }), useHoverExtension(host, editor, (referenceValue, element, node, pos) => {
160
- reference.set(referenceValue), context.set({ element, node, pos });
161
189
  });
162
- let presence = createComputed(() => !!reference.get());
163
- useAttribute(host, "data-state", () => presence.get() ? "open" : "closed"), usePresence(host, presence);
190
+ useHoverExtension(host, editor, (referenceValue, element, node, pos) => {
191
+ reference.set(referenceValue);
192
+ context.set({ element, node, pos });
193
+ });
194
+ const presence = createComputed(() => !!reference.get());
195
+ useAttribute(host, "data-state", () => presence.get() ? "open" : "closed");
196
+ usePresence(host, presence);
164
197
  }
165
198
  function useHoverExtension(host, editor, handler) {
166
- let prevElement = null, prevPos = null, extension = defineElementHoverHandler(
199
+ let prevElement = null;
200
+ let prevPos = null;
201
+ const extension = defineElementHoverHandler(
167
202
  (reference, element, node, pos) => {
168
- prevElement === element && prevPos === pos || (prevElement = element, prevPos = pos, handler(reference, element, node, pos));
203
+ if (prevElement === element && prevPos === pos) {
204
+ return;
205
+ }
206
+ prevElement = element;
207
+ prevPos = pos;
208
+ handler(reference, element, node, pos);
169
209
  }
170
210
  );
171
211
  useEditorExtension(host, editor, extension);
@@ -3,7 +3,7 @@ import {
3
3
  } from "./chunk-MZSYOTZT.js";
4
4
  import {
5
5
  defineCustomElement
6
- } from "./chunk-Y2CJYXR5.js";
6
+ } from "./chunk-LCDA7GFP.js";
7
7
 
8
8
  // src/components/inline-popover/inline-popover/element.gen.ts
9
9
  import { ElementBuilder } from "@aria-ui/core";
@@ -13,20 +13,20 @@ import { defaultOverlayPositionerProps } from "@aria-ui/overlay";
13
13
  var defaultInlinePopoverProps = Object.freeze({
14
14
  ...defaultOverlayPositionerProps,
15
15
  editor: null,
16
- defaultOpen: !0,
17
- open: !1,
16
+ defaultOpen: true,
17
+ open: false,
18
18
  onOpenChange: null,
19
- dismissOnEscape: !0,
19
+ dismissOnEscape: true,
20
20
  placement: "top",
21
21
  offset: 12,
22
- shift: !0,
23
- flip: !0,
24
- hide: !0,
25
- overlap: !0,
26
- inline: !0,
22
+ shift: true,
23
+ flip: true,
24
+ hide: true,
25
+ overlap: true,
26
+ inline: true,
27
27
  overflowPadding: 8,
28
28
  // Don't need boundary when hoist is true.
29
- hoist: !0,
29
+ hoist: true,
30
30
  boundary: []
31
31
  });
32
32
 
@@ -45,21 +45,21 @@ import {
45
45
  defineFocusChangeHandler
46
46
  } from "@prosekit/core";
47
47
  function useEditorFocusChangeEvent(host, editor, handler) {
48
- let extension = defineFocusChangeHandler(handler);
48
+ const extension = defineFocusChangeHandler(handler);
49
49
  useEditorExtension(host, editor, extension);
50
50
  }
51
51
 
52
52
  // src/hooks/use-editor-update-event.ts
53
53
  import { defineUpdateHandler } from "@prosekit/core";
54
54
  function useEditorUpdateEvent(host, editor, handler) {
55
- let extension = defineUpdateHandler(handler);
55
+ const extension = defineUpdateHandler(handler);
56
56
  useEditorExtension(host, editor, extension);
57
57
  }
58
58
 
59
59
  // src/hooks/use-keymap.ts
60
60
  import { defineKeymap } from "@prosekit/core";
61
61
  function useKeymap(host, editor, keymap) {
62
- let extension = defineKeymap(keymap);
62
+ const extension = defineKeymap(keymap);
63
63
  return useEditorExtension(host, editor, extension);
64
64
  }
65
65
 
@@ -68,44 +68,52 @@ import { isTextSelection } from "@prosekit/core";
68
68
 
69
69
  // src/utils/is-in-code-block.ts
70
70
  function isInCodeBlock(selection) {
71
- let type = selection.$from.parent.type;
71
+ const type = selection.$from.parent.type;
72
72
  return type.spec.code && type.isBlock;
73
73
  }
74
74
 
75
75
  // src/components/inline-popover/inline-popover/virtual-selection-element.ts
76
76
  function getVirtualSelectionElement(view) {
77
- if (typeof window == "undefined" || view.isDestroyed)
77
+ if (typeof window === "undefined" || view.isDestroyed) {
78
78
  return null;
79
- let selection = view.state.selection;
79
+ }
80
+ const selection = view.state.selection;
80
81
  if (!selection.empty && !isInCodeBlock(selection) && isTextSelection(selection)) {
81
- let decoration = getInlineDecoration(view);
82
- if (decoration)
82
+ const decoration = getInlineDecoration(view);
83
+ if (decoration) {
83
84
  return decoration;
84
- let range = getDomRange();
85
- if (range)
85
+ }
86
+ const range = getDomRange();
87
+ if (range) {
86
88
  return {
87
89
  contextElement: view.dom,
88
90
  getBoundingClientRect: () => range.getBoundingClientRect(),
89
91
  getClientRects: () => range.getClientRects()
90
92
  };
93
+ }
91
94
  }
92
95
  return null;
93
96
  }
94
97
  function getDomRange() {
95
- let selection = window.getSelection();
96
- if (!selection || selection.isCollapsed)
98
+ const selection = window.getSelection();
99
+ if (!selection || selection.isCollapsed) {
97
100
  return;
98
- let range = typeof selection.rangeCount == "number" && selection.rangeCount > 0 && selection.getRangeAt(0);
99
- if (range)
100
- return range;
101
+ }
102
+ const range = typeof selection.rangeCount === "number" && selection.rangeCount > 0 && selection.getRangeAt(0);
103
+ if (!range) {
104
+ return;
105
+ }
106
+ return range;
101
107
  }
102
108
  function getInlineDecoration(view) {
103
- let match = view.dom.querySelectorAll(".prosekit-virtual-selection");
104
- if (match.length === 0)
109
+ const match = view.dom.querySelectorAll(".prosekit-virtual-selection");
110
+ if (match.length === 0) {
105
111
  return;
106
- if (match.length === 1)
112
+ }
113
+ if (match.length === 1) {
107
114
  return match[0];
108
- let items = Array.from(match);
115
+ }
116
+ const items = Array.from(match);
109
117
  return {
110
118
  contextElement: items[0],
111
119
  getBoundingClientRect: () => items[0].getBoundingClientRect(),
@@ -115,27 +123,56 @@ function getInlineDecoration(view) {
115
123
 
116
124
  // src/components/inline-popover/inline-popover/state.ts
117
125
  function useInlinePopover(host, state) {
118
- let { editor, defaultOpen, open, onOpenChange, ...overlayState } = state, reference = useInlinePopoverReference(host, editor), hasReference = createComputed(() => !!reference.get());
126
+ const { editor, defaultOpen, open, onOpenChange, ...overlayState } = state;
127
+ const reference = useInlinePopoverReference(host, editor);
128
+ const hasReference = createComputed(() => !!reference.get());
129
+ useEffect(host, () => {
130
+ const hasReferenceValue = hasReference.get();
131
+ const onOpenChangeValue = onOpenChange.peek();
132
+ const defaultOpenValue = defaultOpen.peek();
133
+ const openValue = open.peek();
134
+ if (onOpenChangeValue && (defaultOpenValue || openValue)) {
135
+ onOpenChangeValue(hasReferenceValue);
136
+ }
137
+ });
119
138
  useEffect(host, () => {
120
- let hasReferenceValue = hasReference.get(), onOpenChangeValue = onOpenChange.peek(), defaultOpenValue = defaultOpen.peek(), openValue = open.peek();
121
- onOpenChangeValue && (defaultOpenValue || openValue) && onOpenChangeValue(hasReferenceValue);
122
- }), useEffect(host, () => {
123
- let hasReferenceValue = hasReference.get(), defaultOpenValue = defaultOpen.peek();
124
- hasReferenceValue && defaultOpenValue ? open.set(!0) : hasReferenceValue || open.set(!1);
125
- }), useKeymap(host, editor, {
139
+ const hasReferenceValue = hasReference.get();
140
+ const defaultOpenValue = defaultOpen.peek();
141
+ if (hasReferenceValue && defaultOpenValue) {
142
+ open.set(true);
143
+ } else if (!hasReferenceValue) {
144
+ open.set(false);
145
+ }
146
+ });
147
+ useKeymap(host, editor, {
126
148
  Escape: () => {
127
149
  var _a;
128
- return !state.dismissOnEscape.get() || !open.get() ? !1 : (open.set(!1), (_a = onOpenChange.peek()) == null || _a(!1), !0);
150
+ if (!state.dismissOnEscape.get() || !open.get()) {
151
+ return false;
152
+ }
153
+ open.set(false);
154
+ (_a = onOpenChange.peek()) == null ? void 0 : _a(false);
155
+ return true;
129
156
  }
130
- }), useOverlayPositionerState(host, overlayState, { reference }), useAttribute(host, "data-state", () => open.get() ? "open" : "closed"), usePresence(host, open);
157
+ });
158
+ useOverlayPositionerState(host, overlayState, { reference });
159
+ useAttribute(host, "data-state", () => open.get() ? "open" : "closed");
160
+ usePresence(host, open);
131
161
  }
132
162
  function useInlinePopoverReference(host, editor) {
133
- let reference = createSignal(null), editorFocused = !1;
134
- return useEditorFocusChangeEvent(host, editor, (focus) => {
163
+ const reference = createSignal(null);
164
+ let editorFocused = false;
165
+ useEditorFocusChangeEvent(host, editor, (focus) => {
135
166
  editorFocused = focus;
136
- }), useEditorUpdateEvent(host, editor, (view) => {
137
- !editorFocused && host.contains(host.ownerDocument.activeElement) || reference.set(getVirtualSelectionElement(view));
138
- }), reference;
167
+ });
168
+ useEditorUpdateEvent(host, editor, (view) => {
169
+ const isPopoverFocused = !editorFocused && host.contains(host.ownerDocument.activeElement);
170
+ if (isPopoverFocused) {
171
+ return;
172
+ }
173
+ reference.set(getVirtualSelectionElement(view));
174
+ });
175
+ return reference;
139
176
  }
140
177
 
141
178
  // src/components/inline-popover/inline-popover/element.gen.ts
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  defineCustomElement
3
- } from "./chunk-Y2CJYXR5.js";
3
+ } from "./chunk-LCDA7GFP.js";
4
4
 
5
5
  // src/components/popover/popover-content/element.gen.ts
6
6
  import { ElementBuilder } from "@aria-ui/core";
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  defineCustomElement
3
- } from "./chunk-Y2CJYXR5.js";
3
+ } from "./chunk-LCDA7GFP.js";
4
4
 
5
5
  // src/components/resizable/resizable-handle/element.gen.ts
6
6
  import { ElementBuilder } from "@aria-ui/core";
@@ -22,22 +22,26 @@ import { createContext } from "@aria-ui/core";
22
22
  var onResizeContext = createContext(
23
23
  "prosekit/resizable/onResize",
24
24
  null
25
- ), onResizeStartContext = createContext(
25
+ );
26
+ var onResizeStartContext = createContext(
26
27
  "prosekit/resizable/onResizeStart",
27
28
  null
28
- ), onResizeEndContext = createContext(
29
+ );
30
+ var onResizeEndContext = createContext(
29
31
  "prosekit/resizable/onResizeEnd",
30
32
  null
31
33
  );
32
34
 
33
35
  // src/utils/is-finite-positive-number.ts
34
36
  function isFinitePositiveNumber(value) {
35
- return typeof value == "number" && Number.isFinite(value) && value > 0;
37
+ return typeof value === "number" && Number.isFinite(value) && value > 0;
36
38
  }
37
39
 
38
40
  // src/components/resizable/resizable-handle/calc-resize.ts
39
41
  function calcResize(position, w, h, dx, dy, aspectRatio) {
40
- switch (aspectRatio = aspectRatio || w / h, aspectRatio = isFinitePositiveNumber(aspectRatio) ? aspectRatio : 1, position) {
42
+ aspectRatio = aspectRatio ? aspectRatio : w / h;
43
+ aspectRatio = isFinitePositiveNumber(aspectRatio) ? aspectRatio : 1;
44
+ switch (position) {
41
45
  case "bottom-right":
42
46
  return calcBottomRightResize(w, h, dx, dy, aspectRatio);
43
47
  case "bottom-left":
@@ -59,38 +63,90 @@ function calcResize(position, w, h, dx, dy, aspectRatio) {
59
63
  }
60
64
  }
61
65
  var calcBottomRightResize = (w, h, dx, dy, r) => {
62
- w += dx, h += dy;
63
- let sum = w + h;
64
- return h = sum / (r + 1), w = sum - h, [w, h];
65
- }, calcBottomLeftResize = (w, h, dx, dy, r) => {
66
- w -= dx, h += dy;
67
- let sum = w + h;
68
- return h = sum / (r + 1), w = sum - h, [w, h];
69
- }, calcTopRightResize = (w, h, dx, dy, r) => {
70
- w += dx, h -= dy;
71
- let sum = w + h;
72
- return h = sum / (r + 1), w = sum - h, [w, h];
73
- }, calcTopLeftResize = (w, h, dx, dy, r) => {
74
- w -= dx, h -= dy;
75
- let sum = w + h;
76
- return h = sum / (r + 1), w = sum - h, [w, h];
77
- }, calcTopResize = (w, h, dx, dy, r) => (h -= dy, w = h * r, [w, h]), calcRightResize = (w, h, dx, dy, r) => (w += dx, h = w / r, [w, h]), calcBottomResize = (w, h, dx, dy, r) => (h += dy, w = h * r, [w, h]), calcLeftResize = (w, h, dx, dy, r) => (w -= dx, h = w / r, [w, h]);
66
+ w += dx;
67
+ h += dy;
68
+ const sum = w + h;
69
+ h = sum / (r + 1);
70
+ w = sum - h;
71
+ return [w, h];
72
+ };
73
+ var calcBottomLeftResize = (w, h, dx, dy, r) => {
74
+ w -= dx;
75
+ h += dy;
76
+ const sum = w + h;
77
+ h = sum / (r + 1);
78
+ w = sum - h;
79
+ return [w, h];
80
+ };
81
+ var calcTopRightResize = (w, h, dx, dy, r) => {
82
+ w += dx;
83
+ h -= dy;
84
+ const sum = w + h;
85
+ h = sum / (r + 1);
86
+ w = sum - h;
87
+ return [w, h];
88
+ };
89
+ var calcTopLeftResize = (w, h, dx, dy, r) => {
90
+ w -= dx;
91
+ h -= dy;
92
+ const sum = w + h;
93
+ h = sum / (r + 1);
94
+ w = sum - h;
95
+ return [w, h];
96
+ };
97
+ var calcTopResize = (w, h, dx, dy, r) => {
98
+ h -= dy;
99
+ w = h * r;
100
+ return [w, h];
101
+ };
102
+ var calcRightResize = (w, h, dx, dy, r) => {
103
+ w += dx;
104
+ h = w / r;
105
+ return [w, h];
106
+ };
107
+ var calcBottomResize = (w, h, dx, dy, r) => {
108
+ h += dy;
109
+ w = h * r;
110
+ return [w, h];
111
+ };
112
+ var calcLeftResize = (w, h, dx, dy, r) => {
113
+ w -= dx;
114
+ h = w / r;
115
+ return [w, h];
116
+ };
78
117
 
79
118
  // src/components/resizable/resizable-handle/state.ts
80
119
  function useResizableHandle(host, state) {
81
- let onResize = onResizeContext.consume(host), onResizeStart = onResizeStartContext.consume(host), onResizeEnd = onResizeEndContext.consume(host);
120
+ const onResize = onResizeContext.consume(host);
121
+ const onResizeStart = onResizeStartContext.consume(host);
122
+ const onResizeEnd = onResizeEndContext.consume(host);
82
123
  useResizableHandleState(host, state, { onResize, onResizeStart, onResizeEnd });
83
124
  }
84
125
  function useResizableHandleState(host, state, context) {
85
- let startX = 0, startY = 0, width = 0, height = 0, aspectRatio = 1, pointerPressing = createSignal(!1), handlePointerDown = (event) => {
126
+ let startX = 0;
127
+ let startY = 0;
128
+ let width = 0;
129
+ let height = 0;
130
+ let aspectRatio = 1;
131
+ const pointerPressing = createSignal(false);
132
+ const handlePointerDown = (event) => {
86
133
  var _a;
87
- event.preventDefault(), pointerPressing.set(!0), startX = event.x, startY = event.y;
88
- let size = (_a = context.onResizeStart.get()) == null ? void 0 : _a();
89
- size && ([width, height, aspectRatio] = size);
90
- }, handlePointerMove = (event) => {
134
+ event.preventDefault();
135
+ pointerPressing.set(true);
136
+ startX = event.x;
137
+ startY = event.y;
138
+ const size = (_a = context.onResizeStart.get()) == null ? void 0 : _a();
139
+ if (size) {
140
+ ;
141
+ [width, height, aspectRatio] = size;
142
+ }
143
+ };
144
+ const handlePointerMove = (event) => {
91
145
  var _a;
92
146
  event.preventDefault();
93
- let dx = event.x - startX, dy = event.y - startY, [w, h] = calcResize(
147
+ const dx = event.x - startX;
148
+ const dy = event.y - startY;
149
+ const [w, h] = calcResize(
94
150
  state.position.peek(),
95
151
  width,
96
152
  height,
@@ -98,19 +154,30 @@ function useResizableHandleState(host, state, context) {
98
154
  dy,
99
155
  aspectRatio
100
156
  );
101
- (_a = context.onResize.get()) == null || _a(w, h);
102
- }, handlePointerUp = (event) => {
157
+ (_a = context.onResize.get()) == null ? void 0 : _a(w, h);
158
+ };
159
+ const handlePointerUp = (event) => {
103
160
  var _a;
104
- event.preventDefault(), pointerPressing.set(!1), (_a = context.onResizeEnd.get()) == null || _a();
161
+ event.preventDefault();
162
+ pointerPressing.set(false);
163
+ (_a = context.onResizeEnd.get()) == null ? void 0 : _a();
105
164
  };
106
- useEffect(host, () => (host.addEventListener("pointerdown", handlePointerDown), () => {
107
- host.removeEventListener("pointerdown", handlePointerDown);
108
- })), useEffect(host, () => {
109
- if (!pointerPressing.get())
165
+ useEffect(host, () => {
166
+ host.addEventListener("pointerdown", handlePointerDown);
167
+ return () => {
168
+ host.removeEventListener("pointerdown", handlePointerDown);
169
+ };
170
+ });
171
+ useEffect(host, () => {
172
+ if (!pointerPressing.get()) {
110
173
  return;
111
- let win = getWindow(host);
112
- return win.addEventListener("pointermove", handlePointerMove), win.addEventListener("pointerup", handlePointerUp), () => {
113
- win.removeEventListener("pointermove", handlePointerMove), win.removeEventListener("pointerup", handlePointerUp);
174
+ }
175
+ const win = getWindow(host);
176
+ win.addEventListener("pointermove", handlePointerMove);
177
+ win.addEventListener("pointerup", handlePointerUp);
178
+ return () => {
179
+ win.removeEventListener("pointermove", handlePointerMove);
180
+ win.removeEventListener("pointerup", handlePointerUp);
114
181
  };
115
182
  });
116
183
  }
@@ -139,19 +206,31 @@ import {
139
206
  useEffect as useEffect2
140
207
  } from "@aria-ui/core";
141
208
  function useResizableRoot(host, state) {
142
- let onResizeStart = () => {
209
+ const onResizeStart = () => {
143
210
  var _a, _b;
144
- let { width, height } = host.getBoundingClientRect(), aspectRatio = (_a = state.aspectRatio.peek()) != null ? _a : width / height;
145
- return isFinitePositiveNumber(aspectRatio) || (aspectRatio = 0), (_b = state.onSizeChangeStart.peek()) == null || _b({ width, height }), [width, height, aspectRatio];
146
- }, onResize = (width, height) => {
211
+ const { width, height } = host.getBoundingClientRect();
212
+ let aspectRatio = (_a = state.aspectRatio.peek()) != null ? _a : width / height;
213
+ if (!isFinitePositiveNumber(aspectRatio)) {
214
+ aspectRatio = 0;
215
+ }
216
+ (_b = state.onSizeChangeStart.peek()) == null ? void 0 : _b({ width, height });
217
+ return [width, height, aspectRatio];
218
+ };
219
+ const onResize = (width, height) => {
147
220
  var _a;
148
- (_a = state.onSizeChange.peek()) == null || _a({ width, height }), state.width.set(width), state.height.set(height);
149
- }, onResizeEnd = () => {
221
+ (_a = state.onSizeChange.peek()) == null ? void 0 : _a({ width, height });
222
+ state.width.set(width);
223
+ state.height.set(height);
224
+ };
225
+ const onResizeEnd = () => {
150
226
  var _a;
151
- let { width, height } = host.getBoundingClientRect();
152
- (_a = state.onSizeChangeEnd.peek()) == null || _a({ width, height });
227
+ const { width, height } = host.getBoundingClientRect();
228
+ (_a = state.onSizeChangeEnd.peek()) == null ? void 0 : _a({ width, height });
153
229
  };
154
- onResizeStartContext.provide(host, createSignal2(onResizeStart)), onResizeContext.provide(host, createSignal2(onResize)), onResizeEndContext.provide(host, createSignal2(onResizeEnd)), useEffect2(host, () => {
230
+ onResizeStartContext.provide(host, createSignal2(onResizeStart));
231
+ onResizeContext.provide(host, createSignal2(onResize));
232
+ onResizeEndContext.provide(host, createSignal2(onResizeEnd));
233
+ useEffect2(host, () => {
155
234
  updateResizableRootStyles(
156
235
  host,
157
236
  state.width.get(),
@@ -161,7 +240,16 @@ function useResizableRoot(host, state) {
161
240
  });
162
241
  }
163
242
  function updateResizableRootStyles(host, width, height, aspectRatio) {
164
- host.style.width = isFinitePositiveNumber(width) ? `${width}px` : "", host.style.height = isFinitePositiveNumber(height) ? `${height}px` : "", isFinitePositiveNumber(aspectRatio) && (host.style.aspectRatio = `${aspectRatio}`, width && width > 0 && aspectRatio >= 1 ? host.style.height = "auto" : height && height > 0 && aspectRatio <= 1 && (host.style.width = "auto"));
243
+ host.style.width = isFinitePositiveNumber(width) ? `${width}px` : "";
244
+ host.style.height = isFinitePositiveNumber(height) ? `${height}px` : "";
245
+ if (isFinitePositiveNumber(aspectRatio)) {
246
+ host.style.aspectRatio = `${aspectRatio}`;
247
+ if (width && width > 0 && aspectRatio >= 1) {
248
+ host.style.height = "auto";
249
+ } else if (height && height > 0 && aspectRatio <= 1) {
250
+ host.style.width = "auto";
251
+ }
252
+ }
165
253
  }
166
254
 
167
255
  // src/components/resizable/resizable-root/element.gen.ts
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  defineCustomElement
3
- } from "./chunk-Y2CJYXR5.js";
3
+ } from "./chunk-LCDA7GFP.js";
4
4
 
5
5
  // src/components/tooltip/tooltip-content/element.gen.ts
6
6
  import { ElementBuilder } from "@aria-ui/core";
@@ -9,12 +9,12 @@ import { ElementBuilder } from "@aria-ui/core";
9
9
  import { defaultTooltipContentProps as defaultProps } from "@aria-ui/tooltip";
10
10
  var defaultTooltipContentProps = {
11
11
  ...defaultProps,
12
- shift: !0,
13
- flip: !0,
12
+ shift: true,
13
+ flip: true,
14
14
  offset: 6,
15
15
  overflowPadding: 4,
16
16
  // Don't need boundary when hoist is true.
17
- hoist: !0,
17
+ hoist: true,
18
18
  boundary: []
19
19
  };
20
20
 
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@prosekit/web",
3
3
  "type": "module",
4
- "version": "0.3.1",
4
+ "version": "0.3.3",
5
5
  "private": false,
6
6
  "author": {
7
7
  "name": "ocavue",
@@ -74,9 +74,9 @@
74
74
  "@aria-ui/tooltip": "^0.0.21",
75
75
  "@floating-ui/dom": "^1.6.7",
76
76
  "@zag-js/dom-query": "^0.61.0",
77
- "@prosekit/core": "^0.7.2",
78
- "@prosekit/pm": "^0.1.5",
79
- "@prosekit/extensions": "^0.7.2"
77
+ "@prosekit/core": "^0.7.3",
78
+ "@prosekit/extensions": "^0.7.3",
79
+ "@prosekit/pm": "^0.1.6"
80
80
  },
81
81
  "devDependencies": {
82
82
  "tsup": "^8.1.0",