@prosekit/web 0.5.7 → 0.5.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/get-default-state-CIEy7xrl.js +11 -0
- package/dist/prosekit-web-autocomplete.d.ts +126 -20
- package/dist/prosekit-web-autocomplete.js +243 -349
- package/dist/prosekit-web-block-handle.d.ts +82 -15
- package/dist/prosekit-web-block-handle.js +422 -394
- package/dist/prosekit-web-inline-popover.d.ts +81 -5
- package/dist/prosekit-web-inline-popover.js +114 -155
- package/dist/prosekit-web-popover.d.ts +28 -15
- package/dist/prosekit-web-popover.js +31 -70
- package/dist/prosekit-web-resizable.d.ts +48 -10
- package/dist/prosekit-web-resizable.js +210 -238
- package/dist/prosekit-web-table-handle.d.ts +151 -35
- package/dist/prosekit-web-table-handle.js +364 -491
- package/dist/prosekit-web-tooltip.d.ts +28 -15
- package/dist/prosekit-web-tooltip.js +31 -70
- package/dist/prosekit-web.d.ts +1 -1
- package/dist/use-editor-extension-Cc7ZG7uj.js +11 -0
- package/package.json +29 -14
- package/dist/_tsup-dts-rollup.d.ts +0 -1100
- package/dist/chunk-WTW6FOH3.js +0 -13
- package/dist/chunk-ZGQ225UP.js +0 -17
|
@@ -1,542 +1,415 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
} from "
|
|
4
|
-
import {
|
|
5
|
-
useEditorExtension
|
|
6
|
-
} from "./chunk-WTW6FOH3.js";
|
|
7
|
-
|
|
8
|
-
// src/components/table-handle/table-handle-column-root/element.gen.ts
|
|
9
|
-
import { defineCustomElement, registerCustomElement } from "@aria-ui/core";
|
|
10
|
-
|
|
11
|
-
// src/components/table-handle/table-handle-column-root/setup.ts
|
|
12
|
-
import {
|
|
13
|
-
createComputed,
|
|
14
|
-
createSignal,
|
|
15
|
-
useAttribute,
|
|
16
|
-
useEffect
|
|
17
|
-
} from "@aria-ui/core";
|
|
18
|
-
import {
|
|
19
|
-
menuRootProps,
|
|
20
|
-
useMenuRoot
|
|
21
|
-
} from "@aria-ui/menu/elements";
|
|
1
|
+
import { getStateWithDefaults } from "./get-default-state-CIEy7xrl.js";
|
|
2
|
+
import { useEditorExtension } from "./use-editor-extension-Cc7ZG7uj.js";
|
|
3
|
+
import { createComputed, createContext, createSignal, defineCustomElement, defineEmit, registerCustomElement, useAttribute, useEffect, useEventListener } from "@aria-ui/core";
|
|
4
|
+
import { defineDOMEventHandler, union } from "@prosekit/core";
|
|
22
5
|
import { useOverlayPositionerState } from "@aria-ui/overlay/elements";
|
|
23
6
|
import { usePresence } from "@aria-ui/presence";
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
import {
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
7
|
+
import { overlayPositionerEvents as overlayPositionerEvents$1, overlayPositionerProps as overlayPositionerProps$1 } from "@aria-ui/overlay";
|
|
8
|
+
import { menuContentEvents, menuContentProps, menuRootEvents, menuRootProps, useMenuContent, useMenuItem, useMenuRoot, useMenuTrigger } from "@aria-ui/menu/elements";
|
|
9
|
+
import { selectTableColumn, selectTableRow } from "@prosekit/extensions/table";
|
|
10
|
+
import { menuItemEvents, menuItemProps } from "@aria-ui/menu";
|
|
11
|
+
import { TableMap, cellAround } from "prosemirror-tables";
|
|
12
|
+
|
|
13
|
+
//#region src/components/table-handle/context.ts
|
|
14
|
+
/**
|
|
15
|
+
* @internal
|
|
16
|
+
*/
|
|
17
|
+
const tableHandleRootContext = createContext("prosekit-table-handle-root-context", null);
|
|
18
|
+
|
|
19
|
+
//#endregion
|
|
20
|
+
//#region src/components/table-handle/table-handle-column-root/setup.ts
|
|
33
21
|
function useTableHandleColumnRoot(host, { state }) {
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
);
|
|
60
|
-
useMenuRoot(host, {
|
|
61
|
-
state: menuRootState,
|
|
62
|
-
emit: () => void 0
|
|
63
|
-
});
|
|
22
|
+
const { editor,...overlayState } = state;
|
|
23
|
+
const rootContext = tableHandleRootContext.consume(host);
|
|
24
|
+
const colFirstCellPos = createComputed(() => {
|
|
25
|
+
return rootContext.get()?.colFirstCellPos;
|
|
26
|
+
});
|
|
27
|
+
const referenceCell = createComputed(() => {
|
|
28
|
+
const pos = colFirstCellPos.get();
|
|
29
|
+
const view = editor.get()?.view;
|
|
30
|
+
if (!pos || !view) return null;
|
|
31
|
+
return view.nodeDOM(pos);
|
|
32
|
+
});
|
|
33
|
+
const contentOpen = createSignal(false);
|
|
34
|
+
useEffect(host, () => {
|
|
35
|
+
colFirstCellPos.get();
|
|
36
|
+
contentOpen.set(false);
|
|
37
|
+
});
|
|
38
|
+
useOverlayPositionerState(host, overlayState, { reference: referenceCell });
|
|
39
|
+
const presence = createComputed(() => !!referenceCell.get());
|
|
40
|
+
useAttribute(host, "data-state", () => presence.get() ? "open" : "closed");
|
|
41
|
+
usePresence(host, presence);
|
|
42
|
+
const menuRootState = getStateWithDefaults({ open: contentOpen }, menuRootProps);
|
|
43
|
+
useMenuRoot(host, {
|
|
44
|
+
state: menuRootState,
|
|
45
|
+
emit: () => void 0
|
|
46
|
+
});
|
|
64
47
|
}
|
|
65
48
|
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
editor: { default: null },
|
|
74
|
-
placement: { default: "top" }
|
|
49
|
+
//#endregion
|
|
50
|
+
//#region src/components/table-handle/table-handle-column-root/types.ts
|
|
51
|
+
/** @internal */
|
|
52
|
+
const tableHandleColumnRootProps = Object.freeze({
|
|
53
|
+
...overlayPositionerProps$1,
|
|
54
|
+
editor: { default: null },
|
|
55
|
+
placement: { default: "top" }
|
|
75
56
|
});
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
57
|
+
/** @internal */
|
|
58
|
+
const tableHandleColumnRootEvents = overlayPositionerEvents$1;
|
|
59
|
+
|
|
60
|
+
//#endregion
|
|
61
|
+
//#region src/components/table-handle/table-handle-column-root/element.gen.ts
|
|
62
|
+
const TableHandleColumnRootElementBase = defineCustomElement({
|
|
63
|
+
props: tableHandleColumnRootProps,
|
|
64
|
+
events: tableHandleColumnRootEvents,
|
|
65
|
+
setup: useTableHandleColumnRoot
|
|
66
|
+
});
|
|
67
|
+
var TableHandleColumnRootElement = class extends TableHandleColumnRootElementBase {};
|
|
85
68
|
registerCustomElement("prosekit-table-handle-column-root", TableHandleColumnRootElement);
|
|
86
69
|
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
// src/components/table-handle/table-handle-column-trigger/setup.ts
|
|
91
|
-
import {
|
|
92
|
-
useEventListener
|
|
93
|
-
} from "@aria-ui/core";
|
|
94
|
-
import { useMenuTrigger } from "@aria-ui/menu/elements";
|
|
95
|
-
import { selectTableColumn } from "@prosekit/extensions/table";
|
|
70
|
+
//#endregion
|
|
71
|
+
//#region src/components/table-handle/table-handle-column-trigger/setup.ts
|
|
96
72
|
function useTableHandleColumnTrigger(host, { state }) {
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
73
|
+
useMenuTrigger(host);
|
|
74
|
+
const context = tableHandleRootContext.consume(host);
|
|
75
|
+
useEventListener(host, "pointerdown", () => {
|
|
76
|
+
const editor = state.editor.peek();
|
|
77
|
+
const cellPos = context.peek()?.cellPos;
|
|
78
|
+
if (!editor || !cellPos) return;
|
|
79
|
+
editor.exec(selectTableColumn({ head: cellPos }));
|
|
80
|
+
});
|
|
105
81
|
}
|
|
106
82
|
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
};
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
}
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
})
|
|
139
|
-
const rootContext = tableHandleRootContext.consume(host);
|
|
140
|
-
const open = createComputed2(() => !!rootContext.get());
|
|
141
|
-
const keyDownTarget = useKeyDownTarget(host, open);
|
|
142
|
-
const menuContentState = getStateWithDefaults(
|
|
143
|
-
{
|
|
144
|
-
placement: state.placement,
|
|
145
|
-
offset: state.offset,
|
|
146
|
-
eventTarget: createSignal2(keyDownTarget)
|
|
147
|
-
},
|
|
148
|
-
menuContentProps
|
|
149
|
-
);
|
|
150
|
-
useMenuContent(host, { state: menuContentState, emit });
|
|
83
|
+
//#endregion
|
|
84
|
+
//#region src/components/table-handle/table-handle-column-trigger/types.ts
|
|
85
|
+
/** @internal */
|
|
86
|
+
const tableHandleColumnTriggerProps = { editor: { default: null } };
|
|
87
|
+
/** @internal */
|
|
88
|
+
const tableHandleColumnTriggerEvents = {};
|
|
89
|
+
|
|
90
|
+
//#endregion
|
|
91
|
+
//#region src/components/table-handle/table-handle-column-trigger/element.gen.ts
|
|
92
|
+
const TableHandleColumnTriggerElementBase = defineCustomElement({
|
|
93
|
+
props: tableHandleColumnTriggerProps,
|
|
94
|
+
events: tableHandleColumnTriggerEvents,
|
|
95
|
+
setup: useTableHandleColumnTrigger
|
|
96
|
+
});
|
|
97
|
+
var TableHandleColumnTriggerElement = class extends TableHandleColumnTriggerElementBase {};
|
|
98
|
+
registerCustomElement("prosekit-table-handle-column-trigger", TableHandleColumnTriggerElement);
|
|
99
|
+
|
|
100
|
+
//#endregion
|
|
101
|
+
//#region src/components/table-handle/table-handle-popover-content/setup.ts
|
|
102
|
+
function useTableHandlePopoverContent(host, { state, emit }) {
|
|
103
|
+
const rootContext = tableHandleRootContext.consume(host);
|
|
104
|
+
const open = createComputed(() => !!rootContext.get());
|
|
105
|
+
const keyDownTarget = useKeyDownTarget(host, open);
|
|
106
|
+
const menuContentState = getStateWithDefaults({
|
|
107
|
+
placement: state.placement,
|
|
108
|
+
offset: state.offset,
|
|
109
|
+
eventTarget: createSignal(keyDownTarget)
|
|
110
|
+
}, menuContentProps);
|
|
111
|
+
useMenuContent(host, {
|
|
112
|
+
state: menuContentState,
|
|
113
|
+
emit
|
|
114
|
+
});
|
|
151
115
|
}
|
|
152
116
|
function useKeyDownTarget(element, open) {
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
if (index !== -1) {
|
|
176
|
-
keydownHandlers.splice(index, 1);
|
|
177
|
-
}
|
|
178
|
-
}
|
|
179
|
-
}
|
|
180
|
-
};
|
|
117
|
+
const keydownHandlers = [];
|
|
118
|
+
useEffect(element, () => {
|
|
119
|
+
const handleKeydown = (event) => {
|
|
120
|
+
if (event.isComposing || event.defaultPrevented || !open.get()) return false;
|
|
121
|
+
keydownHandlers.forEach((handler) => handler(event));
|
|
122
|
+
};
|
|
123
|
+
document.addEventListener("keydown", handleKeydown);
|
|
124
|
+
return () => {
|
|
125
|
+
document.removeEventListener("keydown", handleKeydown);
|
|
126
|
+
};
|
|
127
|
+
});
|
|
128
|
+
return {
|
|
129
|
+
addEventListener: (type, listener) => {
|
|
130
|
+
if (type === "keydown") keydownHandlers.push(listener);
|
|
131
|
+
},
|
|
132
|
+
removeEventListener: (type, listener) => {
|
|
133
|
+
if (type === "keydown") {
|
|
134
|
+
const index = keydownHandlers.indexOf(listener);
|
|
135
|
+
if (index !== -1) keydownHandlers.splice(index, 1);
|
|
136
|
+
}
|
|
137
|
+
}
|
|
138
|
+
};
|
|
181
139
|
}
|
|
182
140
|
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
141
|
+
//#endregion
|
|
142
|
+
//#region src/components/table-handle/table-handle-popover-content/types.ts
|
|
143
|
+
/** @internal */
|
|
144
|
+
const tableHandlePopoverContentProps = Object.freeze({
|
|
145
|
+
...menuContentProps,
|
|
146
|
+
placement: { default: "right-start" },
|
|
147
|
+
offset: { default: {
|
|
148
|
+
mainAxis: -4,
|
|
149
|
+
crossAxis: 4
|
|
150
|
+
} },
|
|
151
|
+
editor: { default: null }
|
|
193
152
|
});
|
|
194
|
-
|
|
195
|
-
|
|
153
|
+
/** @internal */
|
|
154
|
+
const tableHandlePopoverContentEvents = Object.freeze({ ...menuContentEvents });
|
|
155
|
+
|
|
156
|
+
//#endregion
|
|
157
|
+
//#region src/components/table-handle/table-handle-popover-content/element.gen.ts
|
|
158
|
+
const TableHandlePopoverContentElementBase = defineCustomElement({
|
|
159
|
+
props: tableHandlePopoverContentProps,
|
|
160
|
+
events: tableHandlePopoverContentEvents,
|
|
161
|
+
setup: useTableHandlePopoverContent
|
|
196
162
|
});
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
// src/components/table-handle/table-handle-popover-item/element.gen.ts
|
|
208
|
-
import { defineCustomElement as defineCustomElement4, registerCustomElement as registerCustomElement4 } from "@aria-ui/core";
|
|
209
|
-
|
|
210
|
-
// src/components/table-handle/table-handle-popover-item/setup.ts
|
|
211
|
-
import "@aria-ui/core";
|
|
212
|
-
import { useMenuItem } from "@aria-ui/menu/elements";
|
|
213
|
-
function useTableHandlePopoverItem(element, {
|
|
214
|
-
state,
|
|
215
|
-
emit
|
|
216
|
-
}) {
|
|
217
|
-
useMenuItem(element, { state, emit });
|
|
163
|
+
var TableHandlePopoverContentElement = class extends TableHandlePopoverContentElementBase {};
|
|
164
|
+
registerCustomElement("prosekit-table-handle-popover-content", TableHandlePopoverContentElement);
|
|
165
|
+
|
|
166
|
+
//#endregion
|
|
167
|
+
//#region src/components/table-handle/table-handle-popover-item/setup.ts
|
|
168
|
+
function useTableHandlePopoverItem(element, { state, emit }) {
|
|
169
|
+
useMenuItem(element, {
|
|
170
|
+
state,
|
|
171
|
+
emit
|
|
172
|
+
});
|
|
218
173
|
}
|
|
219
174
|
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
setup: useTableHandlePopoverItem
|
|
237
|
-
}) {
|
|
238
|
-
};
|
|
239
|
-
registerCustomElement4("prosekit-table-handle-popover-item", TableHandlePopoverItemElement);
|
|
240
|
-
|
|
241
|
-
// src/components/table-handle/table-handle-root/element.gen.ts
|
|
242
|
-
import { defineCustomElement as defineCustomElement5, registerCustomElement as registerCustomElement5 } from "@aria-ui/core";
|
|
243
|
-
|
|
244
|
-
// src/components/table-handle/table-handle-root/setup.ts
|
|
245
|
-
import {
|
|
246
|
-
createComputed as createComputed3,
|
|
247
|
-
createSignal as createSignal4,
|
|
248
|
-
useEffect as useEffect3
|
|
249
|
-
} from "@aria-ui/core";
|
|
250
|
-
import {
|
|
251
|
-
defineDOMEventHandler as defineDOMEventHandler2
|
|
252
|
-
} from "@prosekit/core";
|
|
175
|
+
//#endregion
|
|
176
|
+
//#region src/components/table-handle/table-handle-popover-item/types.ts
|
|
177
|
+
/** @internal */
|
|
178
|
+
const tableHandlePopoverItemProps = { ...menuItemProps };
|
|
179
|
+
/** @internal */
|
|
180
|
+
const tableHandlePopoverItemEvents = { ...menuItemEvents };
|
|
181
|
+
|
|
182
|
+
//#endregion
|
|
183
|
+
//#region src/components/table-handle/table-handle-popover-item/element.gen.ts
|
|
184
|
+
const TableHandlePopoverItemElementBase = defineCustomElement({
|
|
185
|
+
props: tableHandlePopoverItemProps,
|
|
186
|
+
events: tableHandlePopoverItemEvents,
|
|
187
|
+
setup: useTableHandlePopoverItem
|
|
188
|
+
});
|
|
189
|
+
var TableHandlePopoverItemElement = class extends TableHandlePopoverItemElementBase {};
|
|
190
|
+
registerCustomElement("prosekit-table-handle-popover-item", TableHandlePopoverItemElement);
|
|
253
191
|
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
createSignal as createSignal3
|
|
257
|
-
} from "@aria-ui/core";
|
|
258
|
-
import {
|
|
259
|
-
defineDOMEventHandler,
|
|
260
|
-
union
|
|
261
|
-
} from "@prosekit/core";
|
|
192
|
+
//#endregion
|
|
193
|
+
//#region src/hooks/use-editor-typing.ts
|
|
262
194
|
function useEditorTyping(host, editor) {
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
);
|
|
274
|
-
useEditorExtension(host, editor, extension);
|
|
275
|
-
return typing;
|
|
195
|
+
const typing = createSignal(false);
|
|
196
|
+
const handleKeypress = () => {
|
|
197
|
+
typing.set(true);
|
|
198
|
+
};
|
|
199
|
+
const handlePointerMove = () => {
|
|
200
|
+
typing.set(false);
|
|
201
|
+
};
|
|
202
|
+
const extension = union(defineDOMEventHandler("keypress", handleKeypress), defineDOMEventHandler("pointermove", handlePointerMove));
|
|
203
|
+
useEditorExtension(host, editor, extension);
|
|
204
|
+
return typing;
|
|
276
205
|
}
|
|
277
206
|
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
cellAround,
|
|
281
|
-
TableMap
|
|
282
|
-
} from "prosemirror-tables";
|
|
207
|
+
//#endregion
|
|
208
|
+
//#region src/components/table-handle/utils.ts
|
|
283
209
|
function isHoveringCellInfoEqual(a, b) {
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
210
|
+
if (!a && !b) return true;
|
|
211
|
+
if (!a || !b) return false;
|
|
212
|
+
return a.rowIndex === b.rowIndex && a.colIndex === b.colIndex && a.cellPos === b.cellPos && a.rowFirstCellPos === b.rowFirstCellPos && a.colFirstCellPos === b.colFirstCellPos;
|
|
287
213
|
}
|
|
214
|
+
/**
|
|
215
|
+
* Copied from https://github.com/ProseMirror/prosemirror-tables/blob/v1.5.0/src/columnresizing.ts#L256
|
|
216
|
+
*
|
|
217
|
+
* @internal
|
|
218
|
+
*/
|
|
288
219
|
function domCellAround(target) {
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
}
|
|
292
|
-
return target;
|
|
220
|
+
while (target && target.nodeName != "TD" && target.nodeName != "TH") target = target.classList?.contains("ProseMirror") ? null : target.parentNode;
|
|
221
|
+
return target;
|
|
293
222
|
}
|
|
294
223
|
function getHoveringCell(view, event) {
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
rowFirstCellPos: getCellPos(map, tableStart, rowIndex, 0),
|
|
318
|
-
colFirstCellPos: getCellPos(map, tableStart, 0, colIndex)
|
|
319
|
-
};
|
|
224
|
+
const domCell = domCellAround(event.target);
|
|
225
|
+
if (!domCell) return;
|
|
226
|
+
const { left, top, width, height } = domCell.getBoundingClientRect();
|
|
227
|
+
const eventPos = view.posAtCoords({
|
|
228
|
+
left: left + width / 2,
|
|
229
|
+
top: top + height / 2
|
|
230
|
+
});
|
|
231
|
+
if (!eventPos) return;
|
|
232
|
+
const $cellPos = cellAround(view.state.doc.resolve(eventPos.pos));
|
|
233
|
+
if (!$cellPos) return;
|
|
234
|
+
const map = TableMap.get($cellPos.node(-1));
|
|
235
|
+
const tableStart = $cellPos.start(-1);
|
|
236
|
+
const cellRect = map.findCell($cellPos.pos - tableStart);
|
|
237
|
+
const rowIndex = cellRect.top;
|
|
238
|
+
const colIndex = cellRect.left;
|
|
239
|
+
return {
|
|
240
|
+
rowIndex,
|
|
241
|
+
colIndex,
|
|
242
|
+
cellPos: $cellPos.pos,
|
|
243
|
+
rowFirstCellPos: getCellPos(map, tableStart, rowIndex, 0),
|
|
244
|
+
colFirstCellPos: getCellPos(map, tableStart, 0, colIndex)
|
|
245
|
+
};
|
|
320
246
|
}
|
|
321
247
|
function getCellPos(map, tableStart, rowIndex, colIndex) {
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
248
|
+
const cellIndex = getCellIndex(map, rowIndex, colIndex);
|
|
249
|
+
const posInTable = map.map[cellIndex];
|
|
250
|
+
return tableStart + posInTable;
|
|
325
251
|
}
|
|
326
252
|
function getCellIndex(map, rowIndex, colIndex) {
|
|
327
|
-
|
|
253
|
+
return map.width * rowIndex + colIndex;
|
|
328
254
|
}
|
|
329
255
|
|
|
330
|
-
|
|
256
|
+
//#endregion
|
|
257
|
+
//#region src/components/table-handle/table-handle-root/setup.ts
|
|
331
258
|
function useTableHandleRoot(host, { state }) {
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
259
|
+
const { editor } = state;
|
|
260
|
+
const context = createSignal(null);
|
|
261
|
+
const hoveringCell = useHoveringCell(host, editor);
|
|
262
|
+
const typing = useEditorTyping(host, editor);
|
|
263
|
+
const isInTable = createComputed(() => !!hoveringCell.get());
|
|
264
|
+
const selecting = useSelecting(host, editor, isInTable);
|
|
265
|
+
useEffect(host, () => {
|
|
266
|
+
const typingValue = typing.get();
|
|
267
|
+
const selectingValue = selecting.get();
|
|
268
|
+
const hoveringCellValue = hoveringCell.get();
|
|
269
|
+
context.set(typingValue || selectingValue ? null : hoveringCellValue);
|
|
270
|
+
});
|
|
271
|
+
tableHandleRootContext.provide(host, context);
|
|
345
272
|
}
|
|
346
273
|
function useHoveringCell(host, editor) {
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
useEditorExtension(host, editor, extension);
|
|
355
|
-
return hoveringCell;
|
|
274
|
+
const hoveringCell = createSignal(null);
|
|
275
|
+
const extension = defineCellHoverHandler((curr) => {
|
|
276
|
+
const prev = hoveringCell.peek();
|
|
277
|
+
if (!isHoveringCellInfoEqual(prev, curr)) hoveringCell.set(curr);
|
|
278
|
+
});
|
|
279
|
+
useEditorExtension(host, editor, extension);
|
|
280
|
+
return hoveringCell;
|
|
356
281
|
}
|
|
357
282
|
function defineCellHoverHandler(handler) {
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
283
|
+
const pointerHandler = (view, event) => {
|
|
284
|
+
const hoveringCell = getHoveringCell(view, event);
|
|
285
|
+
return handler(hoveringCell ?? null);
|
|
286
|
+
};
|
|
287
|
+
return defineDOMEventHandler("pointerover", pointerHandler);
|
|
363
288
|
}
|
|
289
|
+
/**
|
|
290
|
+
* Detect if the user is selecting text by dragging.
|
|
291
|
+
*/
|
|
364
292
|
function useSelecting(host, editor, isInTable) {
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
return () => {
|
|
387
|
-
root.removeEventListener("pointerdown", pointerDownHandler);
|
|
388
|
-
root.removeEventListener("pointerup", pointerUpHandler);
|
|
389
|
-
};
|
|
390
|
-
});
|
|
391
|
-
return selecting;
|
|
293
|
+
const selecting = createSignal(false);
|
|
294
|
+
useEffect(host, () => {
|
|
295
|
+
if (!isInTable.get()) return;
|
|
296
|
+
const root = editor.peek()?.view.root;
|
|
297
|
+
if (!root) return;
|
|
298
|
+
const pointerDownHandler = (event) => {
|
|
299
|
+
const target = event.target;
|
|
300
|
+
if (!target || host.contains(event.target)) return;
|
|
301
|
+
selecting.set(true);
|
|
302
|
+
};
|
|
303
|
+
const pointerUpHandler = () => {
|
|
304
|
+
selecting.set(false);
|
|
305
|
+
};
|
|
306
|
+
root.addEventListener("pointerdown", pointerDownHandler);
|
|
307
|
+
root.addEventListener("pointerup", pointerUpHandler);
|
|
308
|
+
return () => {
|
|
309
|
+
root.removeEventListener("pointerdown", pointerDownHandler);
|
|
310
|
+
root.removeEventListener("pointerup", pointerUpHandler);
|
|
311
|
+
};
|
|
312
|
+
});
|
|
313
|
+
return selecting;
|
|
392
314
|
}
|
|
393
315
|
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
};
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
import { defineCustomElement as defineCustomElement6, registerCustomElement as registerCustomElement6 } from "@aria-ui/core";
|
|
316
|
+
//#endregion
|
|
317
|
+
//#region src/components/table-handle/table-handle-root/types.ts
|
|
318
|
+
/** @internal */
|
|
319
|
+
const tableHandleRootProps = { editor: { default: null } };
|
|
320
|
+
/** @internal */
|
|
321
|
+
const tableHandleRootEvents = {};
|
|
322
|
+
|
|
323
|
+
//#endregion
|
|
324
|
+
//#region src/components/table-handle/table-handle-root/element.gen.ts
|
|
325
|
+
const TableHandleRootElementBase = defineCustomElement({
|
|
326
|
+
props: tableHandleRootProps,
|
|
327
|
+
events: tableHandleRootEvents,
|
|
328
|
+
setup: useTableHandleRoot
|
|
329
|
+
});
|
|
330
|
+
var TableHandleRootElement = class extends TableHandleRootElementBase {};
|
|
331
|
+
registerCustomElement("prosekit-table-handle-root", TableHandleRootElement);
|
|
411
332
|
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
createComputed as createComputed4,
|
|
415
|
-
createSignal as createSignal5,
|
|
416
|
-
defineEmit,
|
|
417
|
-
useAttribute as useAttribute2,
|
|
418
|
-
useEffect as useEffect4
|
|
419
|
-
} from "@aria-ui/core";
|
|
420
|
-
import {
|
|
421
|
-
menuRootEvents,
|
|
422
|
-
menuRootProps as menuRootProps2,
|
|
423
|
-
useMenuRoot as useMenuRoot2
|
|
424
|
-
} from "@aria-ui/menu/elements";
|
|
425
|
-
import { useOverlayPositionerState as useOverlayPositionerState2 } from "@aria-ui/overlay/elements";
|
|
426
|
-
import { usePresence as usePresence2 } from "@aria-ui/presence";
|
|
333
|
+
//#endregion
|
|
334
|
+
//#region src/components/table-handle/table-handle-row-root/setup.ts
|
|
427
335
|
function useTableHandleRowRoot(host, { state }) {
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
},
|
|
454
|
-
menuRootProps2
|
|
455
|
-
);
|
|
456
|
-
useMenuRoot2(host, {
|
|
457
|
-
state: menuRootState,
|
|
458
|
-
emit: defineEmit(host, menuRootEvents)
|
|
459
|
-
});
|
|
336
|
+
const { editor,...overlayState } = state;
|
|
337
|
+
const rootContext = tableHandleRootContext.consume(host);
|
|
338
|
+
const rowFirstCellPos = createComputed(() => {
|
|
339
|
+
return rootContext.get()?.rowFirstCellPos;
|
|
340
|
+
});
|
|
341
|
+
const referenceCell = createComputed(() => {
|
|
342
|
+
const pos = rowFirstCellPos.get();
|
|
343
|
+
const view = editor.get()?.view;
|
|
344
|
+
if (!pos || !view) return null;
|
|
345
|
+
return view.nodeDOM(pos);
|
|
346
|
+
});
|
|
347
|
+
const contentOpen = createSignal(false);
|
|
348
|
+
useEffect(host, () => {
|
|
349
|
+
rowFirstCellPos.get();
|
|
350
|
+
contentOpen.set(false);
|
|
351
|
+
});
|
|
352
|
+
useOverlayPositionerState(host, overlayState, { reference: referenceCell });
|
|
353
|
+
const presence = createComputed(() => !!referenceCell.get());
|
|
354
|
+
useAttribute(host, "data-state", () => presence.get() ? "open" : "closed");
|
|
355
|
+
usePresence(host, presence);
|
|
356
|
+
const menuRootState = getStateWithDefaults({ open: contentOpen }, menuRootProps);
|
|
357
|
+
useMenuRoot(host, {
|
|
358
|
+
state: menuRootState,
|
|
359
|
+
emit: defineEmit(host, menuRootEvents)
|
|
360
|
+
});
|
|
460
361
|
}
|
|
461
362
|
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
placement: { default: "left" }
|
|
363
|
+
//#endregion
|
|
364
|
+
//#region src/components/table-handle/table-handle-row-root/types.ts
|
|
365
|
+
/** @internal */
|
|
366
|
+
const tableHandleRowRootProps = {
|
|
367
|
+
...overlayPositionerProps$1,
|
|
368
|
+
editor: { default: null },
|
|
369
|
+
placement: { default: "left" }
|
|
470
370
|
};
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
})
|
|
494
|
-
|
|
495
|
-
const context = tableHandleRootContext.consume(host);
|
|
496
|
-
useEventListener2(host, "pointerdown", () => {
|
|
497
|
-
const editor = state.editor.peek();
|
|
498
|
-
const cellPos = context.peek()?.cellPos;
|
|
499
|
-
if (!editor || !cellPos) return;
|
|
500
|
-
editor.exec(selectTableRow({ head: cellPos }));
|
|
501
|
-
});
|
|
371
|
+
/** @internal */
|
|
372
|
+
const tableHandleRowRootEvents = {};
|
|
373
|
+
|
|
374
|
+
//#endregion
|
|
375
|
+
//#region src/components/table-handle/table-handle-row-root/element.gen.ts
|
|
376
|
+
const TableHandleRowRootElementBase = defineCustomElement({
|
|
377
|
+
props: tableHandleRowRootProps,
|
|
378
|
+
events: tableHandleRowRootEvents,
|
|
379
|
+
setup: useTableHandleRowRoot
|
|
380
|
+
});
|
|
381
|
+
var TableHandleRowRootElement = class extends TableHandleRowRootElementBase {};
|
|
382
|
+
registerCustomElement("prosekit-table-handle-row-root", TableHandleRowRootElement);
|
|
383
|
+
|
|
384
|
+
//#endregion
|
|
385
|
+
//#region src/components/table-handle/table-handle-row-trigger/setup.ts
|
|
386
|
+
function useTableHandleRowTrigger(host, { state }) {
|
|
387
|
+
useMenuTrigger(host);
|
|
388
|
+
const context = tableHandleRootContext.consume(host);
|
|
389
|
+
useEventListener(host, "pointerdown", () => {
|
|
390
|
+
const editor = state.editor.peek();
|
|
391
|
+
const cellPos = context.peek()?.cellPos;
|
|
392
|
+
if (!editor || !cellPos) return;
|
|
393
|
+
editor.exec(selectTableRow({ head: cellPos }));
|
|
394
|
+
});
|
|
502
395
|
}
|
|
503
396
|
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
};
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
397
|
+
//#endregion
|
|
398
|
+
//#region src/components/table-handle/table-handle-row-trigger/types.ts
|
|
399
|
+
/** @internal */
|
|
400
|
+
const tableHandleRowTriggerProps = { editor: { default: null } };
|
|
401
|
+
/** @internal */
|
|
402
|
+
const tableHandleRowTriggerEvents = { select: {} };
|
|
403
|
+
|
|
404
|
+
//#endregion
|
|
405
|
+
//#region src/components/table-handle/table-handle-row-trigger/element.gen.ts
|
|
406
|
+
const TableHandleRowTriggerElementBase = defineCustomElement({
|
|
407
|
+
props: tableHandleRowTriggerProps,
|
|
408
|
+
events: tableHandleRowTriggerEvents,
|
|
409
|
+
setup: useTableHandleRowTrigger
|
|
410
|
+
});
|
|
411
|
+
var TableHandleRowTriggerElement = class extends TableHandleRowTriggerElementBase {};
|
|
412
|
+
registerCustomElement("prosekit-table-handle-row-trigger", TableHandleRowTriggerElement);
|
|
511
413
|
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
props: tableHandleRowTriggerProps,
|
|
515
|
-
events: tableHandleRowTriggerEvents,
|
|
516
|
-
setup: useTableHandleRowTrigger
|
|
517
|
-
}) {
|
|
518
|
-
};
|
|
519
|
-
registerCustomElement7("prosekit-table-handle-row-trigger", TableHandleRowTriggerElement);
|
|
520
|
-
export {
|
|
521
|
-
TableHandleColumnRootElement,
|
|
522
|
-
TableHandleColumnTriggerElement,
|
|
523
|
-
TableHandlePopoverContentElement,
|
|
524
|
-
TableHandlePopoverItemElement,
|
|
525
|
-
TableHandleRootElement,
|
|
526
|
-
TableHandleRowRootElement,
|
|
527
|
-
TableHandleRowTriggerElement,
|
|
528
|
-
tableHandleColumnRootEvents,
|
|
529
|
-
tableHandleColumnRootProps,
|
|
530
|
-
tableHandleColumnTriggerEvents,
|
|
531
|
-
tableHandleColumnTriggerProps,
|
|
532
|
-
tableHandlePopoverContentEvents,
|
|
533
|
-
tableHandlePopoverContentProps,
|
|
534
|
-
tableHandlePopoverItemEvents,
|
|
535
|
-
tableHandlePopoverItemProps,
|
|
536
|
-
tableHandleRootEvents,
|
|
537
|
-
tableHandleRootProps,
|
|
538
|
-
tableHandleRowRootEvents,
|
|
539
|
-
tableHandleRowRootProps,
|
|
540
|
-
tableHandleRowTriggerEvents,
|
|
541
|
-
tableHandleRowTriggerProps
|
|
542
|
-
};
|
|
414
|
+
//#endregion
|
|
415
|
+
export { TableHandleColumnRootElement, TableHandleColumnTriggerElement, TableHandlePopoverContentElement, TableHandlePopoverItemElement, TableHandleRootElement, TableHandleRowRootElement, TableHandleRowTriggerElement, tableHandleColumnRootEvents, tableHandleColumnRootProps, tableHandleColumnTriggerEvents, tableHandleColumnTriggerProps, tableHandlePopoverContentEvents, tableHandlePopoverContentProps, tableHandlePopoverItemEvents, tableHandlePopoverItemProps, tableHandleRootEvents, tableHandleRootProps, tableHandleRowRootEvents, tableHandleRowRootProps, tableHandleRowTriggerEvents, tableHandleRowTriggerProps };
|