@youcan/celeste 0.6.38 → 0.6.39
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/celeste.css +70 -0
- package/dist/cjs/chunks/index.js +203 -1
- package/dist/cjs/chunks/index2.js +35 -1448
- package/dist/cjs/chunks/index3.js +1336 -16336
- package/dist/cjs/chunks/index4.js +16457 -0
- package/dist/cjs/digit-input-group.js +31 -0
- package/dist/cjs/digit-input-slot.js +28 -0
- package/dist/cjs/digit-input.js +46 -0
- package/dist/cjs/index.js +9 -0
- package/dist/cjs/link-bubble.js +1 -1
- package/dist/cjs/rich-editor.js +1 -1
- package/dist/components/digit-input/digit-input-group.d.ts +22 -0
- package/dist/components/digit-input/digit-input-slot.d.ts +7 -0
- package/dist/components/digit-input/digit-input.d.ts +32 -0
- package/dist/components/digit-input/index.d.ts +6 -0
- package/dist/components/index.d.ts +1 -0
- package/dist/es/chunks/index.js +241 -39
- package/dist/es/chunks/index2.js +36 -1448
- package/dist/es/chunks/index3.js +1335 -16336
- package/dist/es/chunks/index4.js +16458 -0
- package/dist/es/digit-input-group.js +32 -0
- package/dist/es/digit-input-slot.js +29 -0
- package/dist/es/digit-input.js +47 -0
- package/dist/es/dropdown-menu-content.js +1 -1
- package/dist/es/dropdown-menu-group.js +1 -1
- package/dist/es/dropdown-menu-item.js +1 -1
- package/dist/es/dropdown-menu-label.js +1 -1
- package/dist/es/dropdown-menu-separator.js +1 -1
- package/dist/es/dropdown-menu-sub-content.js +1 -1
- package/dist/es/dropdown-menu-sub-trigger.js +1 -1
- package/dist/es/dropdown-menu-trigger.js +1 -1
- package/dist/es/dropdown-menu.js +1 -1
- package/dist/es/index.js +9 -0
- package/dist/es/link-bubble.js +1 -1
- package/dist/es/modal-content.js +1 -1
- package/dist/es/modal-header.js +1 -1
- package/dist/es/popover-content.js +1 -1
- package/dist/es/popover-trigger.js +1 -1
- package/dist/es/progress-bar.js +1 -1
- package/dist/es/progress-circle.js +1 -1
- package/dist/es/rich-editor.js +1 -1
- package/dist/es/select-content.js +1 -1
- package/dist/es/select-item.js +1 -1
- package/dist/es/select-trigger.js +1 -1
- package/dist/es/select-value.js +1 -1
- package/dist/es/tooltip.js +1 -1
- package/package.json +4 -3
- package/src/components/digit-input/digit-input-group.vue +24 -0
- package/src/components/digit-input/digit-input-slot.vue +86 -0
- package/src/components/digit-input/digit-input.vue +37 -0
- package/src/components/digit-input/index.ts +8 -0
- package/src/components/digit-input/stories/digit-input.stories.ts +220 -0
- package/src/components/index.ts +1 -0
|
@@ -1,1457 +1,44 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
-
const index = require("./index3.js");
|
|
4
|
-
const index$1 = require("./index.js");
|
|
5
2
|
const Mo = require("vue");
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
let cachePos = 0;
|
|
19
|
-
readFromCache = (key) => {
|
|
20
|
-
for (let i = 0; i < cache.length; i += 2)
|
|
21
|
-
if (cache[i] == key) return cache[i + 1];
|
|
22
|
-
};
|
|
23
|
-
addToCache = (key, value) => {
|
|
24
|
-
if (cachePos == cacheSize) cachePos = 0;
|
|
25
|
-
cache[cachePos++] = key;
|
|
26
|
-
return cache[cachePos++] = value;
|
|
27
|
-
};
|
|
28
|
-
}
|
|
29
|
-
var TableMap = class {
|
|
30
|
-
constructor(width, height, map, problems) {
|
|
31
|
-
this.width = width;
|
|
32
|
-
this.height = height;
|
|
33
|
-
this.map = map;
|
|
34
|
-
this.problems = problems;
|
|
35
|
-
}
|
|
36
|
-
// Find the dimensions of the cell at the given position.
|
|
37
|
-
findCell(pos) {
|
|
38
|
-
for (let i = 0; i < this.map.length; i++) {
|
|
39
|
-
const curPos = this.map[i];
|
|
40
|
-
if (curPos != pos) continue;
|
|
41
|
-
const left = i % this.width;
|
|
42
|
-
const top = i / this.width | 0;
|
|
43
|
-
let right = left + 1;
|
|
44
|
-
let bottom = top + 1;
|
|
45
|
-
for (let j = 1; right < this.width && this.map[i + j] == curPos; j++) {
|
|
46
|
-
right++;
|
|
47
|
-
}
|
|
48
|
-
for (let j = 1; bottom < this.height && this.map[i + this.width * j] == curPos; j++) {
|
|
49
|
-
bottom++;
|
|
50
|
-
}
|
|
51
|
-
return { left, top, right, bottom };
|
|
52
|
-
}
|
|
53
|
-
throw new RangeError(`No cell with offset ${pos} found`);
|
|
54
|
-
}
|
|
55
|
-
// Find the left side of the cell at the given position.
|
|
56
|
-
colCount(pos) {
|
|
57
|
-
for (let i = 0; i < this.map.length; i++) {
|
|
58
|
-
if (this.map[i] == pos) {
|
|
59
|
-
return i % this.width;
|
|
60
|
-
}
|
|
61
|
-
}
|
|
62
|
-
throw new RangeError(`No cell with offset ${pos} found`);
|
|
63
|
-
}
|
|
64
|
-
// Find the next cell in the given direction, starting from the cell
|
|
65
|
-
// at `pos`, if any.
|
|
66
|
-
nextCell(pos, axis, dir) {
|
|
67
|
-
const { left, right, top, bottom } = this.findCell(pos);
|
|
68
|
-
if (axis == "horiz") {
|
|
69
|
-
if (dir < 0 ? left == 0 : right == this.width) return null;
|
|
70
|
-
return this.map[top * this.width + (dir < 0 ? left - 1 : right)];
|
|
71
|
-
} else {
|
|
72
|
-
if (dir < 0 ? top == 0 : bottom == this.height) return null;
|
|
73
|
-
return this.map[left + this.width * (dir < 0 ? top - 1 : bottom)];
|
|
74
|
-
}
|
|
75
|
-
}
|
|
76
|
-
// Get the rectangle spanning the two given cells.
|
|
77
|
-
rectBetween(a, b) {
|
|
78
|
-
const {
|
|
79
|
-
left: leftA,
|
|
80
|
-
right: rightA,
|
|
81
|
-
top: topA,
|
|
82
|
-
bottom: bottomA
|
|
83
|
-
} = this.findCell(a);
|
|
84
|
-
const {
|
|
85
|
-
left: leftB,
|
|
86
|
-
right: rightB,
|
|
87
|
-
top: topB,
|
|
88
|
-
bottom: bottomB
|
|
89
|
-
} = this.findCell(b);
|
|
90
|
-
return {
|
|
91
|
-
left: Math.min(leftA, leftB),
|
|
92
|
-
top: Math.min(topA, topB),
|
|
93
|
-
right: Math.max(rightA, rightB),
|
|
94
|
-
bottom: Math.max(bottomA, bottomB)
|
|
95
|
-
};
|
|
96
|
-
}
|
|
97
|
-
// Return the position of all cells that have the top left corner in
|
|
98
|
-
// the given rectangle.
|
|
99
|
-
cellsInRect(rect) {
|
|
100
|
-
const result = [];
|
|
101
|
-
const seen = {};
|
|
102
|
-
for (let row = rect.top; row < rect.bottom; row++) {
|
|
103
|
-
for (let col = rect.left; col < rect.right; col++) {
|
|
104
|
-
const index2 = row * this.width + col;
|
|
105
|
-
const pos = this.map[index2];
|
|
106
|
-
if (seen[pos]) continue;
|
|
107
|
-
seen[pos] = true;
|
|
108
|
-
if (col == rect.left && col && this.map[index2 - 1] == pos || row == rect.top && row && this.map[index2 - this.width] == pos) {
|
|
109
|
-
continue;
|
|
110
|
-
}
|
|
111
|
-
result.push(pos);
|
|
112
|
-
}
|
|
113
|
-
}
|
|
114
|
-
return result;
|
|
115
|
-
}
|
|
116
|
-
// Return the position at which the cell at the given row and column
|
|
117
|
-
// starts, or would start, if a cell started there.
|
|
118
|
-
positionAt(row, col, table) {
|
|
119
|
-
for (let i = 0, rowStart = 0; ; i++) {
|
|
120
|
-
const rowEnd = rowStart + table.child(i).nodeSize;
|
|
121
|
-
if (i == row) {
|
|
122
|
-
let index2 = col + row * this.width;
|
|
123
|
-
const rowEndIndex = (row + 1) * this.width;
|
|
124
|
-
while (index2 < rowEndIndex && this.map[index2] < rowStart) index2++;
|
|
125
|
-
return index2 == rowEndIndex ? rowEnd - 1 : this.map[index2];
|
|
126
|
-
}
|
|
127
|
-
rowStart = rowEnd;
|
|
128
|
-
}
|
|
129
|
-
}
|
|
130
|
-
// Find the table map for the given table node.
|
|
131
|
-
static get(table) {
|
|
132
|
-
return readFromCache(table) || addToCache(table, computeMap(table));
|
|
133
|
-
}
|
|
134
|
-
};
|
|
135
|
-
function computeMap(table) {
|
|
136
|
-
if (table.type.spec.tableRole != "table")
|
|
137
|
-
throw new RangeError("Not a table node: " + table.type.name);
|
|
138
|
-
const width = findWidth(table), height = table.childCount;
|
|
139
|
-
const map = [];
|
|
140
|
-
let mapPos = 0;
|
|
141
|
-
let problems = null;
|
|
142
|
-
const colWidths = [];
|
|
143
|
-
for (let i = 0, e = width * height; i < e; i++) map[i] = 0;
|
|
144
|
-
for (let row = 0, pos = 0; row < height; row++) {
|
|
145
|
-
const rowNode = table.child(row);
|
|
146
|
-
pos++;
|
|
147
|
-
for (let i = 0; ; i++) {
|
|
148
|
-
while (mapPos < map.length && map[mapPos] != 0) mapPos++;
|
|
149
|
-
if (i == rowNode.childCount) break;
|
|
150
|
-
const cellNode = rowNode.child(i);
|
|
151
|
-
const { colspan, rowspan, colwidth } = cellNode.attrs;
|
|
152
|
-
for (let h = 0; h < rowspan; h++) {
|
|
153
|
-
if (h + row >= height) {
|
|
154
|
-
(problems || (problems = [])).push({
|
|
155
|
-
type: "overlong_rowspan",
|
|
156
|
-
pos,
|
|
157
|
-
n: rowspan - h
|
|
158
|
-
});
|
|
159
|
-
break;
|
|
160
|
-
}
|
|
161
|
-
const start = mapPos + h * width;
|
|
162
|
-
for (let w = 0; w < colspan; w++) {
|
|
163
|
-
if (map[start + w] == 0) map[start + w] = pos;
|
|
164
|
-
else
|
|
165
|
-
(problems || (problems = [])).push({
|
|
166
|
-
type: "collision",
|
|
167
|
-
row,
|
|
168
|
-
pos,
|
|
169
|
-
n: colspan - w
|
|
170
|
-
});
|
|
171
|
-
const colW = colwidth && colwidth[w];
|
|
172
|
-
if (colW) {
|
|
173
|
-
const widthIndex = (start + w) % width * 2, prev = colWidths[widthIndex];
|
|
174
|
-
if (prev == null || prev != colW && colWidths[widthIndex + 1] == 1) {
|
|
175
|
-
colWidths[widthIndex] = colW;
|
|
176
|
-
colWidths[widthIndex + 1] = 1;
|
|
177
|
-
} else if (prev == colW) {
|
|
178
|
-
colWidths[widthIndex + 1]++;
|
|
179
|
-
}
|
|
180
|
-
}
|
|
181
|
-
}
|
|
182
|
-
}
|
|
183
|
-
mapPos += colspan;
|
|
184
|
-
pos += cellNode.nodeSize;
|
|
185
|
-
}
|
|
186
|
-
const expectedPos = (row + 1) * width;
|
|
187
|
-
let missing = 0;
|
|
188
|
-
while (mapPos < expectedPos) if (map[mapPos++] == 0) missing++;
|
|
189
|
-
if (missing)
|
|
190
|
-
(problems || (problems = [])).push({ type: "missing", row, n: missing });
|
|
191
|
-
pos++;
|
|
192
|
-
}
|
|
193
|
-
if (width === 0 || height === 0)
|
|
194
|
-
(problems || (problems = [])).push({ type: "zero_sized" });
|
|
195
|
-
const tableMap = new TableMap(width, height, map, problems);
|
|
196
|
-
let badWidths = false;
|
|
197
|
-
for (let i = 0; !badWidths && i < colWidths.length; i += 2)
|
|
198
|
-
if (colWidths[i] != null && colWidths[i + 1] < height) badWidths = true;
|
|
199
|
-
if (badWidths) findBadColWidths(tableMap, colWidths, table);
|
|
200
|
-
return tableMap;
|
|
201
|
-
}
|
|
202
|
-
function findWidth(table) {
|
|
203
|
-
let width = -1;
|
|
204
|
-
let hasRowSpan = false;
|
|
205
|
-
for (let row = 0; row < table.childCount; row++) {
|
|
206
|
-
const rowNode = table.child(row);
|
|
207
|
-
let rowWidth = 0;
|
|
208
|
-
if (hasRowSpan)
|
|
209
|
-
for (let j = 0; j < row; j++) {
|
|
210
|
-
const prevRow = table.child(j);
|
|
211
|
-
for (let i = 0; i < prevRow.childCount; i++) {
|
|
212
|
-
const cell = prevRow.child(i);
|
|
213
|
-
if (j + cell.attrs.rowspan > row) rowWidth += cell.attrs.colspan;
|
|
214
|
-
}
|
|
215
|
-
}
|
|
216
|
-
for (let i = 0; i < rowNode.childCount; i++) {
|
|
217
|
-
const cell = rowNode.child(i);
|
|
218
|
-
rowWidth += cell.attrs.colspan;
|
|
219
|
-
if (cell.attrs.rowspan > 1) hasRowSpan = true;
|
|
220
|
-
}
|
|
221
|
-
if (width == -1) width = rowWidth;
|
|
222
|
-
else if (width != rowWidth) width = Math.max(width, rowWidth);
|
|
223
|
-
}
|
|
224
|
-
return width;
|
|
225
|
-
}
|
|
226
|
-
function findBadColWidths(map, colWidths, table) {
|
|
227
|
-
if (!map.problems) map.problems = [];
|
|
228
|
-
const seen = {};
|
|
229
|
-
for (let i = 0; i < map.map.length; i++) {
|
|
230
|
-
const pos = map.map[i];
|
|
231
|
-
if (seen[pos]) continue;
|
|
232
|
-
seen[pos] = true;
|
|
233
|
-
const node = table.nodeAt(pos);
|
|
234
|
-
if (!node) {
|
|
235
|
-
throw new RangeError(`No cell with offset ${pos} found`);
|
|
236
|
-
}
|
|
237
|
-
let updated = null;
|
|
238
|
-
const attrs = node.attrs;
|
|
239
|
-
for (let j = 0; j < attrs.colspan; j++) {
|
|
240
|
-
const col = (i + j) % map.width;
|
|
241
|
-
const colWidth = colWidths[col * 2];
|
|
242
|
-
if (colWidth != null && (!attrs.colwidth || attrs.colwidth[j] != colWidth))
|
|
243
|
-
(updated || (updated = freshColWidth(attrs)))[j] = colWidth;
|
|
244
|
-
}
|
|
245
|
-
if (updated)
|
|
246
|
-
map.problems.unshift({
|
|
247
|
-
type: "colwidth mismatch",
|
|
248
|
-
pos,
|
|
249
|
-
colwidth: updated
|
|
250
|
-
});
|
|
251
|
-
}
|
|
252
|
-
}
|
|
253
|
-
function freshColWidth(attrs) {
|
|
254
|
-
if (attrs.colwidth) return attrs.colwidth.slice();
|
|
255
|
-
const result = [];
|
|
256
|
-
for (let i = 0; i < attrs.colspan; i++) result.push(0);
|
|
257
|
-
return result;
|
|
258
|
-
}
|
|
259
|
-
function tableNodeTypes(schema) {
|
|
260
|
-
let result = schema.cached.tableNodeTypes;
|
|
261
|
-
if (!result) {
|
|
262
|
-
result = schema.cached.tableNodeTypes = {};
|
|
263
|
-
for (const name in schema.nodes) {
|
|
264
|
-
const type = schema.nodes[name], role = type.spec.tableRole;
|
|
265
|
-
if (role) result[role] = type;
|
|
266
|
-
}
|
|
267
|
-
}
|
|
268
|
-
return result;
|
|
269
|
-
}
|
|
270
|
-
new index.PluginKey("selectingCells");
|
|
271
|
-
function cellAround($pos) {
|
|
272
|
-
for (let d = $pos.depth - 1; d > 0; d--)
|
|
273
|
-
if ($pos.node(d).type.spec.tableRole == "row")
|
|
274
|
-
return $pos.node(0).resolve($pos.before(d + 1));
|
|
275
|
-
return null;
|
|
276
|
-
}
|
|
277
|
-
function isInTable(state) {
|
|
278
|
-
const $head = state.selection.$head;
|
|
279
|
-
for (let d = $head.depth; d > 0; d--)
|
|
280
|
-
if ($head.node(d).type.spec.tableRole == "row") return true;
|
|
281
|
-
return false;
|
|
282
|
-
}
|
|
283
|
-
function selectionCell(state) {
|
|
284
|
-
const sel = state.selection;
|
|
285
|
-
if ("$anchorCell" in sel && sel.$anchorCell) {
|
|
286
|
-
return sel.$anchorCell.pos > sel.$headCell.pos ? sel.$anchorCell : sel.$headCell;
|
|
287
|
-
} else if ("node" in sel && sel.node && sel.node.type.spec.tableRole == "cell") {
|
|
288
|
-
return sel.$anchor;
|
|
289
|
-
}
|
|
290
|
-
const $cell = cellAround(sel.$head) || cellNear(sel.$head);
|
|
291
|
-
if ($cell) {
|
|
292
|
-
return $cell;
|
|
293
|
-
}
|
|
294
|
-
throw new RangeError(`No cell found around position ${sel.head}`);
|
|
295
|
-
}
|
|
296
|
-
function cellNear($pos) {
|
|
297
|
-
for (let after = $pos.nodeAfter, pos = $pos.pos; after; after = after.firstChild, pos++) {
|
|
298
|
-
const role = after.type.spec.tableRole;
|
|
299
|
-
if (role == "cell" || role == "header_cell") return $pos.doc.resolve(pos);
|
|
300
|
-
}
|
|
301
|
-
for (let before = $pos.nodeBefore, pos = $pos.pos; before; before = before.lastChild, pos--) {
|
|
302
|
-
const role = before.type.spec.tableRole;
|
|
303
|
-
if (role == "cell" || role == "header_cell")
|
|
304
|
-
return $pos.doc.resolve(pos - before.nodeSize);
|
|
305
|
-
}
|
|
306
|
-
}
|
|
307
|
-
function pointsAtCell($pos) {
|
|
308
|
-
return $pos.parent.type.spec.tableRole == "row" && !!$pos.nodeAfter;
|
|
309
|
-
}
|
|
310
|
-
function inSameTable($cellA, $cellB) {
|
|
311
|
-
return $cellA.depth == $cellB.depth && $cellA.pos >= $cellB.start(-1) && $cellA.pos <= $cellB.end(-1);
|
|
312
|
-
}
|
|
313
|
-
function nextCell($pos, axis, dir) {
|
|
314
|
-
const table = $pos.node(-1);
|
|
315
|
-
const map = TableMap.get(table);
|
|
316
|
-
const tableStart = $pos.start(-1);
|
|
317
|
-
const moved = map.nextCell($pos.pos - tableStart, axis, dir);
|
|
318
|
-
return moved == null ? null : $pos.node(0).resolve(tableStart + moved);
|
|
319
|
-
}
|
|
320
|
-
function removeColSpan(attrs, pos, n = 1) {
|
|
321
|
-
const result = { ...attrs, colspan: attrs.colspan - n };
|
|
322
|
-
if (result.colwidth) {
|
|
323
|
-
result.colwidth = result.colwidth.slice();
|
|
324
|
-
result.colwidth.splice(pos, n);
|
|
325
|
-
if (!result.colwidth.some((w) => w > 0)) result.colwidth = null;
|
|
326
|
-
}
|
|
327
|
-
return result;
|
|
328
|
-
}
|
|
329
|
-
var CellSelection = class _CellSelection extends index.Selection {
|
|
330
|
-
// A table selection is identified by its anchor and head cells. The
|
|
331
|
-
// positions given to this constructor should point _before_ two
|
|
332
|
-
// cells in the same table. They may be the same, to select a single
|
|
333
|
-
// cell.
|
|
334
|
-
constructor($anchorCell, $headCell = $anchorCell) {
|
|
335
|
-
const table = $anchorCell.node(-1);
|
|
336
|
-
const map = TableMap.get(table);
|
|
337
|
-
const tableStart = $anchorCell.start(-1);
|
|
338
|
-
const rect = map.rectBetween(
|
|
339
|
-
$anchorCell.pos - tableStart,
|
|
340
|
-
$headCell.pos - tableStart
|
|
341
|
-
);
|
|
342
|
-
const doc = $anchorCell.node(0);
|
|
343
|
-
const cells = map.cellsInRect(rect).filter((p) => p != $headCell.pos - tableStart);
|
|
344
|
-
cells.unshift($headCell.pos - tableStart);
|
|
345
|
-
const ranges = cells.map((pos) => {
|
|
346
|
-
const cell = table.nodeAt(pos);
|
|
347
|
-
if (!cell) {
|
|
348
|
-
throw RangeError(`No cell with offset ${pos} found`);
|
|
349
|
-
}
|
|
350
|
-
const from = tableStart + pos + 1;
|
|
351
|
-
return new index.SelectionRange(
|
|
352
|
-
doc.resolve(from),
|
|
353
|
-
doc.resolve(from + cell.content.size)
|
|
354
|
-
);
|
|
355
|
-
});
|
|
356
|
-
super(ranges[0].$from, ranges[0].$to, ranges);
|
|
357
|
-
this.$anchorCell = $anchorCell;
|
|
358
|
-
this.$headCell = $headCell;
|
|
359
|
-
}
|
|
360
|
-
map(doc, mapping) {
|
|
361
|
-
const $anchorCell = doc.resolve(mapping.map(this.$anchorCell.pos));
|
|
362
|
-
const $headCell = doc.resolve(mapping.map(this.$headCell.pos));
|
|
363
|
-
if (pointsAtCell($anchorCell) && pointsAtCell($headCell) && inSameTable($anchorCell, $headCell)) {
|
|
364
|
-
const tableChanged = this.$anchorCell.node(-1) != $anchorCell.node(-1);
|
|
365
|
-
if (tableChanged && this.isRowSelection())
|
|
366
|
-
return _CellSelection.rowSelection($anchorCell, $headCell);
|
|
367
|
-
else if (tableChanged && this.isColSelection())
|
|
368
|
-
return _CellSelection.colSelection($anchorCell, $headCell);
|
|
369
|
-
else return new _CellSelection($anchorCell, $headCell);
|
|
370
|
-
}
|
|
371
|
-
return index.TextSelection.between($anchorCell, $headCell);
|
|
372
|
-
}
|
|
373
|
-
// Returns a rectangular slice of table rows containing the selected
|
|
374
|
-
// cells.
|
|
375
|
-
content() {
|
|
376
|
-
const table = this.$anchorCell.node(-1);
|
|
377
|
-
const map = TableMap.get(table);
|
|
378
|
-
const tableStart = this.$anchorCell.start(-1);
|
|
379
|
-
const rect = map.rectBetween(
|
|
380
|
-
this.$anchorCell.pos - tableStart,
|
|
381
|
-
this.$headCell.pos - tableStart
|
|
382
|
-
);
|
|
383
|
-
const seen = {};
|
|
384
|
-
const rows = [];
|
|
385
|
-
for (let row = rect.top; row < rect.bottom; row++) {
|
|
386
|
-
const rowContent = [];
|
|
387
|
-
for (let index2 = row * map.width + rect.left, col = rect.left; col < rect.right; col++, index2++) {
|
|
388
|
-
const pos = map.map[index2];
|
|
389
|
-
if (seen[pos]) continue;
|
|
390
|
-
seen[pos] = true;
|
|
391
|
-
const cellRect = map.findCell(pos);
|
|
392
|
-
let cell = table.nodeAt(pos);
|
|
393
|
-
if (!cell) {
|
|
394
|
-
throw RangeError(`No cell with offset ${pos} found`);
|
|
395
|
-
}
|
|
396
|
-
const extraLeft = rect.left - cellRect.left;
|
|
397
|
-
const extraRight = cellRect.right - rect.right;
|
|
398
|
-
if (extraLeft > 0 || extraRight > 0) {
|
|
399
|
-
let attrs = cell.attrs;
|
|
400
|
-
if (extraLeft > 0) {
|
|
401
|
-
attrs = removeColSpan(attrs, 0, extraLeft);
|
|
402
|
-
}
|
|
403
|
-
if (extraRight > 0) {
|
|
404
|
-
attrs = removeColSpan(
|
|
405
|
-
attrs,
|
|
406
|
-
attrs.colspan - extraRight,
|
|
407
|
-
extraRight
|
|
408
|
-
);
|
|
409
|
-
}
|
|
410
|
-
if (cellRect.left < rect.left) {
|
|
411
|
-
cell = cell.type.createAndFill(attrs);
|
|
412
|
-
if (!cell) {
|
|
413
|
-
throw RangeError(
|
|
414
|
-
`Could not create cell with attrs ${JSON.stringify(attrs)}`
|
|
415
|
-
);
|
|
416
|
-
}
|
|
417
|
-
} else {
|
|
418
|
-
cell = cell.type.create(attrs, cell.content);
|
|
419
|
-
}
|
|
420
|
-
}
|
|
421
|
-
if (cellRect.top < rect.top || cellRect.bottom > rect.bottom) {
|
|
422
|
-
const attrs = {
|
|
423
|
-
...cell.attrs,
|
|
424
|
-
rowspan: Math.min(cellRect.bottom, rect.bottom) - Math.max(cellRect.top, rect.top)
|
|
425
|
-
};
|
|
426
|
-
if (cellRect.top < rect.top) {
|
|
427
|
-
cell = cell.type.createAndFill(attrs);
|
|
428
|
-
} else {
|
|
429
|
-
cell = cell.type.create(attrs, cell.content);
|
|
430
|
-
}
|
|
431
|
-
}
|
|
432
|
-
rowContent.push(cell);
|
|
433
|
-
}
|
|
434
|
-
rows.push(table.child(row).copy(index.Fragment.from(rowContent)));
|
|
435
|
-
}
|
|
436
|
-
const fragment = this.isColSelection() && this.isRowSelection() ? table : rows;
|
|
437
|
-
return new index.Slice(index.Fragment.from(fragment), 1, 1);
|
|
438
|
-
}
|
|
439
|
-
replace(tr, content = index.Slice.empty) {
|
|
440
|
-
const mapFrom = tr.steps.length, ranges = this.ranges;
|
|
441
|
-
for (let i = 0; i < ranges.length; i++) {
|
|
442
|
-
const { $from, $to } = ranges[i], mapping = tr.mapping.slice(mapFrom);
|
|
443
|
-
tr.replace(
|
|
444
|
-
mapping.map($from.pos),
|
|
445
|
-
mapping.map($to.pos),
|
|
446
|
-
i ? index.Slice.empty : content
|
|
447
|
-
);
|
|
448
|
-
}
|
|
449
|
-
const sel = index.Selection.findFrom(
|
|
450
|
-
tr.doc.resolve(tr.mapping.slice(mapFrom).map(this.to)),
|
|
451
|
-
-1
|
|
452
|
-
);
|
|
453
|
-
if (sel) tr.setSelection(sel);
|
|
454
|
-
}
|
|
455
|
-
replaceWith(tr, node) {
|
|
456
|
-
this.replace(tr, new index.Slice(index.Fragment.from(node), 0, 0));
|
|
457
|
-
}
|
|
458
|
-
forEachCell(f) {
|
|
459
|
-
const table = this.$anchorCell.node(-1);
|
|
460
|
-
const map = TableMap.get(table);
|
|
461
|
-
const tableStart = this.$anchorCell.start(-1);
|
|
462
|
-
const cells = map.cellsInRect(
|
|
463
|
-
map.rectBetween(
|
|
464
|
-
this.$anchorCell.pos - tableStart,
|
|
465
|
-
this.$headCell.pos - tableStart
|
|
466
|
-
)
|
|
467
|
-
);
|
|
468
|
-
for (let i = 0; i < cells.length; i++) {
|
|
469
|
-
f(table.nodeAt(cells[i]), tableStart + cells[i]);
|
|
470
|
-
}
|
|
471
|
-
}
|
|
472
|
-
// True if this selection goes all the way from the top to the
|
|
473
|
-
// bottom of the table.
|
|
474
|
-
isColSelection() {
|
|
475
|
-
const anchorTop = this.$anchorCell.index(-1);
|
|
476
|
-
const headTop = this.$headCell.index(-1);
|
|
477
|
-
if (Math.min(anchorTop, headTop) > 0) return false;
|
|
478
|
-
const anchorBottom = anchorTop + this.$anchorCell.nodeAfter.attrs.rowspan;
|
|
479
|
-
const headBottom = headTop + this.$headCell.nodeAfter.attrs.rowspan;
|
|
480
|
-
return Math.max(anchorBottom, headBottom) == this.$headCell.node(-1).childCount;
|
|
481
|
-
}
|
|
482
|
-
// Returns the smallest column selection that covers the given anchor
|
|
483
|
-
// and head cell.
|
|
484
|
-
static colSelection($anchorCell, $headCell = $anchorCell) {
|
|
485
|
-
const table = $anchorCell.node(-1);
|
|
486
|
-
const map = TableMap.get(table);
|
|
487
|
-
const tableStart = $anchorCell.start(-1);
|
|
488
|
-
const anchorRect = map.findCell($anchorCell.pos - tableStart);
|
|
489
|
-
const headRect = map.findCell($headCell.pos - tableStart);
|
|
490
|
-
const doc = $anchorCell.node(0);
|
|
491
|
-
if (anchorRect.top <= headRect.top) {
|
|
492
|
-
if (anchorRect.top > 0)
|
|
493
|
-
$anchorCell = doc.resolve(tableStart + map.map[anchorRect.left]);
|
|
494
|
-
if (headRect.bottom < map.height)
|
|
495
|
-
$headCell = doc.resolve(
|
|
496
|
-
tableStart + map.map[map.width * (map.height - 1) + headRect.right - 1]
|
|
497
|
-
);
|
|
498
|
-
} else {
|
|
499
|
-
if (headRect.top > 0)
|
|
500
|
-
$headCell = doc.resolve(tableStart + map.map[headRect.left]);
|
|
501
|
-
if (anchorRect.bottom < map.height)
|
|
502
|
-
$anchorCell = doc.resolve(
|
|
503
|
-
tableStart + map.map[map.width * (map.height - 1) + anchorRect.right - 1]
|
|
504
|
-
);
|
|
505
|
-
}
|
|
506
|
-
return new _CellSelection($anchorCell, $headCell);
|
|
507
|
-
}
|
|
508
|
-
// True if this selection goes all the way from the left to the
|
|
509
|
-
// right of the table.
|
|
510
|
-
isRowSelection() {
|
|
511
|
-
const table = this.$anchorCell.node(-1);
|
|
512
|
-
const map = TableMap.get(table);
|
|
513
|
-
const tableStart = this.$anchorCell.start(-1);
|
|
514
|
-
const anchorLeft = map.colCount(this.$anchorCell.pos - tableStart);
|
|
515
|
-
const headLeft = map.colCount(this.$headCell.pos - tableStart);
|
|
516
|
-
if (Math.min(anchorLeft, headLeft) > 0) return false;
|
|
517
|
-
const anchorRight = anchorLeft + this.$anchorCell.nodeAfter.attrs.colspan;
|
|
518
|
-
const headRight = headLeft + this.$headCell.nodeAfter.attrs.colspan;
|
|
519
|
-
return Math.max(anchorRight, headRight) == map.width;
|
|
520
|
-
}
|
|
521
|
-
eq(other) {
|
|
522
|
-
return other instanceof _CellSelection && other.$anchorCell.pos == this.$anchorCell.pos && other.$headCell.pos == this.$headCell.pos;
|
|
523
|
-
}
|
|
524
|
-
// Returns the smallest row selection that covers the given anchor
|
|
525
|
-
// and head cell.
|
|
526
|
-
static rowSelection($anchorCell, $headCell = $anchorCell) {
|
|
527
|
-
const table = $anchorCell.node(-1);
|
|
528
|
-
const map = TableMap.get(table);
|
|
529
|
-
const tableStart = $anchorCell.start(-1);
|
|
530
|
-
const anchorRect = map.findCell($anchorCell.pos - tableStart);
|
|
531
|
-
const headRect = map.findCell($headCell.pos - tableStart);
|
|
532
|
-
const doc = $anchorCell.node(0);
|
|
533
|
-
if (anchorRect.left <= headRect.left) {
|
|
534
|
-
if (anchorRect.left > 0)
|
|
535
|
-
$anchorCell = doc.resolve(
|
|
536
|
-
tableStart + map.map[anchorRect.top * map.width]
|
|
537
|
-
);
|
|
538
|
-
if (headRect.right < map.width)
|
|
539
|
-
$headCell = doc.resolve(
|
|
540
|
-
tableStart + map.map[map.width * (headRect.top + 1) - 1]
|
|
541
|
-
);
|
|
542
|
-
} else {
|
|
543
|
-
if (headRect.left > 0)
|
|
544
|
-
$headCell = doc.resolve(tableStart + map.map[headRect.top * map.width]);
|
|
545
|
-
if (anchorRect.right < map.width)
|
|
546
|
-
$anchorCell = doc.resolve(
|
|
547
|
-
tableStart + map.map[map.width * (anchorRect.top + 1) - 1]
|
|
548
|
-
);
|
|
549
|
-
}
|
|
550
|
-
return new _CellSelection($anchorCell, $headCell);
|
|
551
|
-
}
|
|
552
|
-
toJSON() {
|
|
553
|
-
return {
|
|
554
|
-
type: "cell",
|
|
555
|
-
anchor: this.$anchorCell.pos,
|
|
556
|
-
head: this.$headCell.pos
|
|
557
|
-
};
|
|
558
|
-
}
|
|
559
|
-
static fromJSON(doc, json) {
|
|
560
|
-
return new _CellSelection(doc.resolve(json.anchor), doc.resolve(json.head));
|
|
561
|
-
}
|
|
562
|
-
static create(doc, anchorCell, headCell = anchorCell) {
|
|
563
|
-
return new _CellSelection(doc.resolve(anchorCell), doc.resolve(headCell));
|
|
564
|
-
}
|
|
565
|
-
getBookmark() {
|
|
566
|
-
return new CellBookmark(this.$anchorCell.pos, this.$headCell.pos);
|
|
567
|
-
}
|
|
568
|
-
};
|
|
569
|
-
CellSelection.prototype.visible = false;
|
|
570
|
-
index.Selection.jsonID("cell", CellSelection);
|
|
571
|
-
var CellBookmark = class _CellBookmark {
|
|
572
|
-
constructor(anchor, head) {
|
|
573
|
-
this.anchor = anchor;
|
|
574
|
-
this.head = head;
|
|
575
|
-
}
|
|
576
|
-
map(mapping) {
|
|
577
|
-
return new _CellBookmark(mapping.map(this.anchor), mapping.map(this.head));
|
|
578
|
-
}
|
|
579
|
-
resolve(doc) {
|
|
580
|
-
const $anchorCell = doc.resolve(this.anchor), $headCell = doc.resolve(this.head);
|
|
581
|
-
if ($anchorCell.parent.type.spec.tableRole == "row" && $headCell.parent.type.spec.tableRole == "row" && $anchorCell.index() < $anchorCell.parent.childCount && $headCell.index() < $headCell.parent.childCount && inSameTable($anchorCell, $headCell))
|
|
582
|
-
return new CellSelection($anchorCell, $headCell);
|
|
583
|
-
else return index.Selection.near($headCell, 1);
|
|
584
|
-
}
|
|
585
|
-
};
|
|
586
|
-
new index.PluginKey("fix-tables");
|
|
587
|
-
function selectedRect(state) {
|
|
588
|
-
const sel = state.selection;
|
|
589
|
-
const $pos = selectionCell(state);
|
|
590
|
-
const table = $pos.node(-1);
|
|
591
|
-
const tableStart = $pos.start(-1);
|
|
592
|
-
const map = TableMap.get(table);
|
|
593
|
-
const rect = sel instanceof CellSelection ? map.rectBetween(
|
|
594
|
-
sel.$anchorCell.pos - tableStart,
|
|
595
|
-
sel.$headCell.pos - tableStart
|
|
596
|
-
) : map.findCell($pos.pos - tableStart);
|
|
597
|
-
return { ...rect, tableStart, map, table };
|
|
598
|
-
}
|
|
599
|
-
function deprecated_toggleHeader(type) {
|
|
600
|
-
return function(state, dispatch) {
|
|
601
|
-
if (!isInTable(state)) return false;
|
|
602
|
-
if (dispatch) {
|
|
603
|
-
const types = tableNodeTypes(state.schema);
|
|
604
|
-
const rect = selectedRect(state), tr = state.tr;
|
|
605
|
-
const cells = rect.map.cellsInRect(
|
|
606
|
-
type == "column" ? {
|
|
607
|
-
left: rect.left,
|
|
608
|
-
top: 0,
|
|
609
|
-
right: rect.right,
|
|
610
|
-
bottom: rect.map.height
|
|
611
|
-
} : type == "row" ? {
|
|
612
|
-
left: 0,
|
|
613
|
-
top: rect.top,
|
|
614
|
-
right: rect.map.width,
|
|
615
|
-
bottom: rect.bottom
|
|
616
|
-
} : rect
|
|
617
|
-
);
|
|
618
|
-
const nodes = cells.map((pos) => rect.table.nodeAt(pos));
|
|
619
|
-
for (let i = 0; i < cells.length; i++)
|
|
620
|
-
if (nodes[i].type == types.header_cell)
|
|
621
|
-
tr.setNodeMarkup(
|
|
622
|
-
rect.tableStart + cells[i],
|
|
623
|
-
types.cell,
|
|
624
|
-
nodes[i].attrs
|
|
625
|
-
);
|
|
626
|
-
if (tr.steps.length == 0)
|
|
627
|
-
for (let i = 0; i < cells.length; i++)
|
|
628
|
-
tr.setNodeMarkup(
|
|
629
|
-
rect.tableStart + cells[i],
|
|
630
|
-
types.header_cell,
|
|
631
|
-
nodes[i].attrs
|
|
632
|
-
);
|
|
633
|
-
dispatch(tr);
|
|
634
|
-
}
|
|
635
|
-
return true;
|
|
636
|
-
};
|
|
637
|
-
}
|
|
638
|
-
function isHeaderEnabledByType(type, rect, types) {
|
|
639
|
-
const cellPositions = rect.map.cellsInRect({
|
|
640
|
-
left: 0,
|
|
641
|
-
top: 0,
|
|
642
|
-
right: type == "row" ? rect.map.width : 1,
|
|
643
|
-
bottom: type == "column" ? rect.map.height : 1
|
|
644
|
-
});
|
|
645
|
-
for (let i = 0; i < cellPositions.length; i++) {
|
|
646
|
-
const cell = rect.table.nodeAt(cellPositions[i]);
|
|
647
|
-
if (cell && cell.type !== types.header_cell) {
|
|
648
|
-
return false;
|
|
649
|
-
}
|
|
650
|
-
}
|
|
651
|
-
return true;
|
|
652
|
-
}
|
|
653
|
-
function toggleHeader(type, options) {
|
|
654
|
-
options = options || { useDeprecatedLogic: false };
|
|
655
|
-
if (options.useDeprecatedLogic) return deprecated_toggleHeader(type);
|
|
656
|
-
return function(state, dispatch) {
|
|
657
|
-
if (!isInTable(state)) return false;
|
|
658
|
-
if (dispatch) {
|
|
659
|
-
const types = tableNodeTypes(state.schema);
|
|
660
|
-
const rect = selectedRect(state), tr = state.tr;
|
|
661
|
-
const isHeaderRowEnabled = isHeaderEnabledByType("row", rect, types);
|
|
662
|
-
const isHeaderColumnEnabled = isHeaderEnabledByType(
|
|
663
|
-
"column",
|
|
664
|
-
rect,
|
|
665
|
-
types
|
|
666
|
-
);
|
|
667
|
-
const isHeaderEnabled = type === "column" ? isHeaderRowEnabled : type === "row" ? isHeaderColumnEnabled : false;
|
|
668
|
-
const selectionStartsAt = isHeaderEnabled ? 1 : 0;
|
|
669
|
-
const cellsRect = type == "column" ? {
|
|
670
|
-
left: 0,
|
|
671
|
-
top: selectionStartsAt,
|
|
672
|
-
right: 1,
|
|
673
|
-
bottom: rect.map.height
|
|
674
|
-
} : type == "row" ? {
|
|
675
|
-
left: selectionStartsAt,
|
|
676
|
-
top: 0,
|
|
677
|
-
right: rect.map.width,
|
|
678
|
-
bottom: 1
|
|
679
|
-
} : rect;
|
|
680
|
-
const newType = type == "column" ? isHeaderColumnEnabled ? types.cell : types.header_cell : type == "row" ? isHeaderRowEnabled ? types.cell : types.header_cell : types.cell;
|
|
681
|
-
rect.map.cellsInRect(cellsRect).forEach((relativeCellPos) => {
|
|
682
|
-
const cellPos = relativeCellPos + rect.tableStart;
|
|
683
|
-
const cell = tr.doc.nodeAt(cellPos);
|
|
684
|
-
if (cell) {
|
|
685
|
-
tr.setNodeMarkup(cellPos, newType, cell.attrs);
|
|
686
|
-
}
|
|
687
|
-
});
|
|
688
|
-
dispatch(tr);
|
|
689
|
-
}
|
|
690
|
-
return true;
|
|
691
|
-
};
|
|
692
|
-
}
|
|
693
|
-
toggleHeader("row", {
|
|
694
|
-
useDeprecatedLogic: true
|
|
695
|
-
});
|
|
696
|
-
toggleHeader("column", {
|
|
697
|
-
useDeprecatedLogic: true
|
|
698
|
-
});
|
|
699
|
-
toggleHeader("cell", {
|
|
700
|
-
useDeprecatedLogic: true
|
|
701
|
-
});
|
|
702
|
-
function deleteCellSelection(state, dispatch) {
|
|
703
|
-
const sel = state.selection;
|
|
704
|
-
if (!(sel instanceof CellSelection)) return false;
|
|
705
|
-
if (dispatch) {
|
|
706
|
-
const tr = state.tr;
|
|
707
|
-
const baseContent = tableNodeTypes(state.schema).cell.createAndFill().content;
|
|
708
|
-
sel.forEachCell((cell, pos) => {
|
|
709
|
-
if (!cell.content.eq(baseContent))
|
|
710
|
-
tr.replace(
|
|
711
|
-
tr.mapping.map(pos + 1),
|
|
712
|
-
tr.mapping.map(pos + cell.nodeSize - 1),
|
|
713
|
-
new index.Slice(baseContent, 0, 0)
|
|
714
|
-
);
|
|
715
|
-
});
|
|
716
|
-
if (tr.docChanged) dispatch(tr);
|
|
717
|
-
}
|
|
718
|
-
return true;
|
|
719
|
-
}
|
|
720
|
-
index.keydownHandler({
|
|
721
|
-
ArrowLeft: arrow("horiz", -1),
|
|
722
|
-
ArrowRight: arrow("horiz", 1),
|
|
723
|
-
ArrowUp: arrow("vert", -1),
|
|
724
|
-
ArrowDown: arrow("vert", 1),
|
|
725
|
-
"Shift-ArrowLeft": shiftArrow("horiz", -1),
|
|
726
|
-
"Shift-ArrowRight": shiftArrow("horiz", 1),
|
|
727
|
-
"Shift-ArrowUp": shiftArrow("vert", -1),
|
|
728
|
-
"Shift-ArrowDown": shiftArrow("vert", 1),
|
|
729
|
-
Backspace: deleteCellSelection,
|
|
730
|
-
"Mod-Backspace": deleteCellSelection,
|
|
731
|
-
Delete: deleteCellSelection,
|
|
732
|
-
"Mod-Delete": deleteCellSelection
|
|
733
|
-
});
|
|
734
|
-
function maybeSetSelection(state, dispatch, selection) {
|
|
735
|
-
if (selection.eq(state.selection)) return false;
|
|
736
|
-
if (dispatch) dispatch(state.tr.setSelection(selection).scrollIntoView());
|
|
737
|
-
return true;
|
|
738
|
-
}
|
|
739
|
-
function arrow(axis, dir) {
|
|
740
|
-
return (state, dispatch, view) => {
|
|
741
|
-
if (!view) return false;
|
|
742
|
-
const sel = state.selection;
|
|
743
|
-
if (sel instanceof CellSelection) {
|
|
744
|
-
return maybeSetSelection(
|
|
745
|
-
state,
|
|
746
|
-
dispatch,
|
|
747
|
-
index.Selection.near(sel.$headCell, dir)
|
|
748
|
-
);
|
|
749
|
-
}
|
|
750
|
-
if (axis != "horiz" && !sel.empty) return false;
|
|
751
|
-
const end = atEndOfCell(view, axis, dir);
|
|
752
|
-
if (end == null) return false;
|
|
753
|
-
if (axis == "horiz") {
|
|
754
|
-
return maybeSetSelection(
|
|
755
|
-
state,
|
|
756
|
-
dispatch,
|
|
757
|
-
index.Selection.near(state.doc.resolve(sel.head + dir), dir)
|
|
758
|
-
);
|
|
759
|
-
} else {
|
|
760
|
-
const $cell = state.doc.resolve(end);
|
|
761
|
-
const $next = nextCell($cell, axis, dir);
|
|
762
|
-
let newSel;
|
|
763
|
-
if ($next) newSel = index.Selection.near($next, 1);
|
|
764
|
-
else if (dir < 0)
|
|
765
|
-
newSel = index.Selection.near(state.doc.resolve($cell.before(-1)), -1);
|
|
766
|
-
else newSel = index.Selection.near(state.doc.resolve($cell.after(-1)), 1);
|
|
767
|
-
return maybeSetSelection(state, dispatch, newSel);
|
|
768
|
-
}
|
|
769
|
-
};
|
|
770
|
-
}
|
|
771
|
-
function shiftArrow(axis, dir) {
|
|
772
|
-
return (state, dispatch, view) => {
|
|
773
|
-
if (!view) return false;
|
|
774
|
-
const sel = state.selection;
|
|
775
|
-
let cellSel;
|
|
776
|
-
if (sel instanceof CellSelection) {
|
|
777
|
-
cellSel = sel;
|
|
778
|
-
} else {
|
|
779
|
-
const end = atEndOfCell(view, axis, dir);
|
|
780
|
-
if (end == null) return false;
|
|
781
|
-
cellSel = new CellSelection(state.doc.resolve(end));
|
|
782
|
-
}
|
|
783
|
-
const $head = nextCell(cellSel.$headCell, axis, dir);
|
|
784
|
-
if (!$head) return false;
|
|
785
|
-
return maybeSetSelection(
|
|
786
|
-
state,
|
|
787
|
-
dispatch,
|
|
788
|
-
new CellSelection(cellSel.$anchorCell, $head)
|
|
789
|
-
);
|
|
790
|
-
};
|
|
791
|
-
}
|
|
792
|
-
function atEndOfCell(view, axis, dir) {
|
|
793
|
-
if (!(view.state.selection instanceof index.TextSelection)) return null;
|
|
794
|
-
const { $head } = view.state.selection;
|
|
795
|
-
for (let d = $head.depth - 1; d >= 0; d--) {
|
|
796
|
-
const parent = $head.node(d), index2 = dir < 0 ? $head.index(d) : $head.indexAfter(d);
|
|
797
|
-
if (index2 != (dir < 0 ? 0 : parent.childCount)) return null;
|
|
798
|
-
if (parent.type.spec.tableRole == "cell" || parent.type.spec.tableRole == "header_cell") {
|
|
799
|
-
const cellPos = $head.before(d);
|
|
800
|
-
const dirStr = axis == "vert" ? dir > 0 ? "down" : "up" : dir > 0 ? "right" : "left";
|
|
801
|
-
return view.endOfTextblock(dirStr) ? cellPos : null;
|
|
802
|
-
}
|
|
803
|
-
}
|
|
804
|
-
return null;
|
|
805
|
-
}
|
|
806
|
-
new index.PluginKey(
|
|
807
|
-
"tableColumnResizing"
|
|
808
|
-
);
|
|
809
|
-
function combineDOMRects(rect1, rect2) {
|
|
810
|
-
const top = Math.min(rect1.top, rect2.top);
|
|
811
|
-
const bottom = Math.max(rect1.bottom, rect2.bottom);
|
|
812
|
-
const left = Math.min(rect1.left, rect2.left);
|
|
813
|
-
const right = Math.max(rect1.right, rect2.right);
|
|
814
|
-
const width = right - left;
|
|
815
|
-
const height = bottom - top;
|
|
816
|
-
const x = left;
|
|
817
|
-
const y = top;
|
|
818
|
-
return new DOMRect(x, y, width, height);
|
|
819
|
-
}
|
|
820
|
-
var BubbleMenuView = class {
|
|
821
|
-
constructor({
|
|
822
|
-
editor,
|
|
823
|
-
element,
|
|
824
|
-
view,
|
|
825
|
-
updateDelay = 250,
|
|
826
|
-
resizeDelay = 60,
|
|
827
|
-
shouldShow,
|
|
828
|
-
options
|
|
829
|
-
}) {
|
|
830
|
-
this.preventHide = false;
|
|
831
|
-
this.isVisible = false;
|
|
832
|
-
this.floatingUIOptions = {
|
|
833
|
-
strategy: "absolute",
|
|
834
|
-
placement: "top",
|
|
835
|
-
offset: 8,
|
|
836
|
-
flip: {},
|
|
837
|
-
shift: {},
|
|
838
|
-
arrow: false,
|
|
839
|
-
size: false,
|
|
840
|
-
autoPlacement: false,
|
|
841
|
-
hide: false,
|
|
842
|
-
inline: false,
|
|
843
|
-
onShow: void 0,
|
|
844
|
-
onHide: void 0,
|
|
845
|
-
onUpdate: void 0,
|
|
846
|
-
onDestroy: void 0
|
|
847
|
-
};
|
|
848
|
-
this.shouldShow = ({ view: view2, state, from, to }) => {
|
|
849
|
-
const { doc, selection } = state;
|
|
850
|
-
const { empty } = selection;
|
|
851
|
-
const isEmptyTextBlock = !doc.textBetween(from, to).length && index.isTextSelection(state.selection);
|
|
852
|
-
const isChildOfMenu = this.element.contains(document.activeElement);
|
|
853
|
-
const hasEditorFocus = view2.hasFocus() || isChildOfMenu;
|
|
854
|
-
if (!hasEditorFocus || empty || isEmptyTextBlock || !this.editor.isEditable) {
|
|
855
|
-
return false;
|
|
856
|
-
}
|
|
3
|
+
function toReactive(objectRef) {
|
|
4
|
+
if (!Mo.isRef(objectRef))
|
|
5
|
+
return Mo.reactive(objectRef);
|
|
6
|
+
const proxy = new Proxy({}, {
|
|
7
|
+
get(_, p, receiver) {
|
|
8
|
+
return Mo.unref(Reflect.get(objectRef.value, p, receiver));
|
|
9
|
+
},
|
|
10
|
+
set(_, p, value) {
|
|
11
|
+
if (Mo.isRef(objectRef.value[p]) && !Mo.isRef(value))
|
|
12
|
+
objectRef.value[p].value = value;
|
|
13
|
+
else
|
|
14
|
+
objectRef.value[p] = value;
|
|
857
15
|
return true;
|
|
858
|
-
};
|
|
859
|
-
this.mousedownHandler = () => {
|
|
860
|
-
this.preventHide = true;
|
|
861
|
-
};
|
|
862
|
-
this.dragstartHandler = () => {
|
|
863
|
-
this.hide();
|
|
864
|
-
};
|
|
865
|
-
this.resizeHandler = () => {
|
|
866
|
-
if (this.resizeDebounceTimer) {
|
|
867
|
-
clearTimeout(this.resizeDebounceTimer);
|
|
868
|
-
}
|
|
869
|
-
this.resizeDebounceTimer = window.setTimeout(() => {
|
|
870
|
-
this.updatePosition();
|
|
871
|
-
}, this.resizeDelay);
|
|
872
|
-
};
|
|
873
|
-
this.focusHandler = () => {
|
|
874
|
-
setTimeout(() => this.update(this.editor.view));
|
|
875
|
-
};
|
|
876
|
-
this.blurHandler = ({ event }) => {
|
|
877
|
-
var _a;
|
|
878
|
-
if (this.preventHide) {
|
|
879
|
-
this.preventHide = false;
|
|
880
|
-
return;
|
|
881
|
-
}
|
|
882
|
-
if ((event == null ? void 0 : event.relatedTarget) && ((_a = this.element.parentNode) == null ? void 0 : _a.contains(event.relatedTarget))) {
|
|
883
|
-
return;
|
|
884
|
-
}
|
|
885
|
-
if ((event == null ? void 0 : event.relatedTarget) === this.editor.view.dom) {
|
|
886
|
-
return;
|
|
887
|
-
}
|
|
888
|
-
this.hide();
|
|
889
|
-
};
|
|
890
|
-
this.handleDebouncedUpdate = (view2, oldState) => {
|
|
891
|
-
const selectionChanged = !(oldState == null ? void 0 : oldState.selection.eq(view2.state.selection));
|
|
892
|
-
const docChanged = !(oldState == null ? void 0 : oldState.doc.eq(view2.state.doc));
|
|
893
|
-
if (!selectionChanged && !docChanged) {
|
|
894
|
-
return;
|
|
895
|
-
}
|
|
896
|
-
if (this.updateDebounceTimer) {
|
|
897
|
-
clearTimeout(this.updateDebounceTimer);
|
|
898
|
-
}
|
|
899
|
-
this.updateDebounceTimer = window.setTimeout(() => {
|
|
900
|
-
this.updateHandler(view2, selectionChanged, docChanged, oldState);
|
|
901
|
-
}, this.updateDelay);
|
|
902
|
-
};
|
|
903
|
-
this.updateHandler = (view2, selectionChanged, docChanged, oldState) => {
|
|
904
|
-
const { composing } = view2;
|
|
905
|
-
const isSame = !selectionChanged && !docChanged;
|
|
906
|
-
if (composing || isSame) {
|
|
907
|
-
return;
|
|
908
|
-
}
|
|
909
|
-
const shouldShow2 = this.getShouldShow(oldState);
|
|
910
|
-
if (!shouldShow2) {
|
|
911
|
-
this.hide();
|
|
912
|
-
return;
|
|
913
|
-
}
|
|
914
|
-
this.updatePosition();
|
|
915
|
-
this.show();
|
|
916
|
-
};
|
|
917
|
-
this.editor = editor;
|
|
918
|
-
this.element = element;
|
|
919
|
-
this.view = view;
|
|
920
|
-
this.updateDelay = updateDelay;
|
|
921
|
-
this.resizeDelay = resizeDelay;
|
|
922
|
-
this.floatingUIOptions = {
|
|
923
|
-
...this.floatingUIOptions,
|
|
924
|
-
...options
|
|
925
|
-
};
|
|
926
|
-
this.element.tabIndex = 0;
|
|
927
|
-
if (shouldShow) {
|
|
928
|
-
this.shouldShow = shouldShow;
|
|
929
|
-
}
|
|
930
|
-
this.element.addEventListener("mousedown", this.mousedownHandler, { capture: true });
|
|
931
|
-
this.view.dom.addEventListener("dragstart", this.dragstartHandler);
|
|
932
|
-
this.editor.on("focus", this.focusHandler);
|
|
933
|
-
this.editor.on("blur", this.blurHandler);
|
|
934
|
-
window.addEventListener("resize", this.resizeHandler);
|
|
935
|
-
this.update(view, view.state);
|
|
936
|
-
if (this.getShouldShow()) {
|
|
937
|
-
this.show();
|
|
938
|
-
}
|
|
939
|
-
}
|
|
940
|
-
get middlewares() {
|
|
941
|
-
const middlewares = [];
|
|
942
|
-
if (this.floatingUIOptions.flip) {
|
|
943
|
-
middlewares.push(index$1.flip(typeof this.floatingUIOptions.flip !== "boolean" ? this.floatingUIOptions.flip : void 0));
|
|
944
|
-
}
|
|
945
|
-
if (this.floatingUIOptions.shift) {
|
|
946
|
-
middlewares.push(
|
|
947
|
-
index$1.shift(typeof this.floatingUIOptions.shift !== "boolean" ? this.floatingUIOptions.shift : void 0)
|
|
948
|
-
);
|
|
949
|
-
}
|
|
950
|
-
if (this.floatingUIOptions.offset) {
|
|
951
|
-
middlewares.push(
|
|
952
|
-
index$1.offset(typeof this.floatingUIOptions.offset !== "boolean" ? this.floatingUIOptions.offset : void 0)
|
|
953
|
-
);
|
|
954
|
-
}
|
|
955
|
-
if (this.floatingUIOptions.arrow) {
|
|
956
|
-
middlewares.push(index$1.arrow(this.floatingUIOptions.arrow));
|
|
957
|
-
}
|
|
958
|
-
if (this.floatingUIOptions.size) {
|
|
959
|
-
middlewares.push(index$1.size(typeof this.floatingUIOptions.size !== "boolean" ? this.floatingUIOptions.size : void 0));
|
|
960
|
-
}
|
|
961
|
-
if (this.floatingUIOptions.autoPlacement) {
|
|
962
|
-
middlewares.push(
|
|
963
|
-
index$1.autoPlacement(
|
|
964
|
-
typeof this.floatingUIOptions.autoPlacement !== "boolean" ? this.floatingUIOptions.autoPlacement : void 0
|
|
965
|
-
)
|
|
966
|
-
);
|
|
967
|
-
}
|
|
968
|
-
if (this.floatingUIOptions.hide) {
|
|
969
|
-
middlewares.push(index$1.hide(typeof this.floatingUIOptions.hide !== "boolean" ? this.floatingUIOptions.hide : void 0));
|
|
970
|
-
}
|
|
971
|
-
if (this.floatingUIOptions.inline) {
|
|
972
|
-
middlewares.push(
|
|
973
|
-
index$1.inline(typeof this.floatingUIOptions.inline !== "boolean" ? this.floatingUIOptions.inline : void 0)
|
|
974
|
-
);
|
|
975
|
-
}
|
|
976
|
-
return middlewares;
|
|
977
|
-
}
|
|
978
|
-
updatePosition() {
|
|
979
|
-
const { selection } = this.editor.state;
|
|
980
|
-
const domRect = index.posToDOMRect(this.view, selection.from, selection.to);
|
|
981
|
-
let virtualElement = {
|
|
982
|
-
getBoundingClientRect: () => domRect,
|
|
983
|
-
getClientRects: () => [domRect]
|
|
984
|
-
};
|
|
985
|
-
if (selection instanceof CellSelection) {
|
|
986
|
-
const { $anchorCell, $headCell } = selection;
|
|
987
|
-
const from = $anchorCell ? $anchorCell.pos : $headCell.pos;
|
|
988
|
-
const to = $headCell ? $headCell.pos : $anchorCell.pos;
|
|
989
|
-
const fromDOM = this.view.nodeDOM(from);
|
|
990
|
-
const toDOM = this.view.nodeDOM(to);
|
|
991
|
-
if (!fromDOM || !toDOM) {
|
|
992
|
-
return;
|
|
993
|
-
}
|
|
994
|
-
const clientRect = fromDOM === toDOM ? fromDOM.getBoundingClientRect() : combineDOMRects(
|
|
995
|
-
fromDOM.getBoundingClientRect(),
|
|
996
|
-
toDOM.getBoundingClientRect()
|
|
997
|
-
);
|
|
998
|
-
virtualElement = {
|
|
999
|
-
getBoundingClientRect: () => clientRect,
|
|
1000
|
-
getClientRects: () => [clientRect]
|
|
1001
|
-
};
|
|
1002
|
-
}
|
|
1003
|
-
index$1.computePosition(virtualElement, this.element, {
|
|
1004
|
-
placement: this.floatingUIOptions.placement,
|
|
1005
|
-
strategy: this.floatingUIOptions.strategy,
|
|
1006
|
-
middleware: this.middlewares
|
|
1007
|
-
}).then(({ x, y, strategy }) => {
|
|
1008
|
-
this.element.style.width = "max-content";
|
|
1009
|
-
this.element.style.position = strategy;
|
|
1010
|
-
this.element.style.left = `${x}px`;
|
|
1011
|
-
this.element.style.top = `${y}px`;
|
|
1012
|
-
if (this.isVisible && this.floatingUIOptions.onUpdate) {
|
|
1013
|
-
this.floatingUIOptions.onUpdate();
|
|
1014
|
-
}
|
|
1015
|
-
});
|
|
1016
|
-
}
|
|
1017
|
-
update(view, oldState) {
|
|
1018
|
-
const { state } = view;
|
|
1019
|
-
const hasValidSelection = state.selection.from !== state.selection.to;
|
|
1020
|
-
if (this.updateDelay > 0 && hasValidSelection) {
|
|
1021
|
-
this.handleDebouncedUpdate(view, oldState);
|
|
1022
|
-
return;
|
|
1023
|
-
}
|
|
1024
|
-
const selectionChanged = !(oldState == null ? void 0 : oldState.selection.eq(view.state.selection));
|
|
1025
|
-
const docChanged = !(oldState == null ? void 0 : oldState.doc.eq(view.state.doc));
|
|
1026
|
-
this.updateHandler(view, selectionChanged, docChanged, oldState);
|
|
1027
|
-
}
|
|
1028
|
-
getShouldShow(oldState) {
|
|
1029
|
-
var _a;
|
|
1030
|
-
const { state } = this.view;
|
|
1031
|
-
const { selection } = state;
|
|
1032
|
-
const { ranges } = selection;
|
|
1033
|
-
const from = Math.min(...ranges.map((range) => range.$from.pos));
|
|
1034
|
-
const to = Math.max(...ranges.map((range) => range.$to.pos));
|
|
1035
|
-
const shouldShow = (_a = this.shouldShow) == null ? void 0 : _a.call(this, {
|
|
1036
|
-
editor: this.editor,
|
|
1037
|
-
element: this.element,
|
|
1038
|
-
view: this.view,
|
|
1039
|
-
state,
|
|
1040
|
-
oldState,
|
|
1041
|
-
from,
|
|
1042
|
-
to
|
|
1043
|
-
});
|
|
1044
|
-
return shouldShow;
|
|
1045
|
-
}
|
|
1046
|
-
show() {
|
|
1047
|
-
var _a;
|
|
1048
|
-
if (this.isVisible) {
|
|
1049
|
-
return;
|
|
1050
|
-
}
|
|
1051
|
-
this.element.style.visibility = "visible";
|
|
1052
|
-
this.element.style.opacity = "1";
|
|
1053
|
-
(_a = this.view.dom.parentElement) == null ? void 0 : _a.appendChild(this.element);
|
|
1054
|
-
if (this.floatingUIOptions.onShow) {
|
|
1055
|
-
this.floatingUIOptions.onShow();
|
|
1056
|
-
}
|
|
1057
|
-
this.isVisible = true;
|
|
1058
|
-
}
|
|
1059
|
-
hide() {
|
|
1060
|
-
if (!this.isVisible) {
|
|
1061
|
-
return;
|
|
1062
|
-
}
|
|
1063
|
-
this.element.style.visibility = "hidden";
|
|
1064
|
-
this.element.style.opacity = "0";
|
|
1065
|
-
this.element.remove();
|
|
1066
|
-
if (this.floatingUIOptions.onHide) {
|
|
1067
|
-
this.floatingUIOptions.onHide();
|
|
1068
|
-
}
|
|
1069
|
-
this.isVisible = false;
|
|
1070
|
-
}
|
|
1071
|
-
destroy() {
|
|
1072
|
-
this.hide();
|
|
1073
|
-
this.element.removeEventListener("mousedown", this.mousedownHandler, { capture: true });
|
|
1074
|
-
this.view.dom.removeEventListener("dragstart", this.dragstartHandler);
|
|
1075
|
-
window.removeEventListener("resize", this.resizeHandler);
|
|
1076
|
-
this.editor.off("focus", this.focusHandler);
|
|
1077
|
-
this.editor.off("blur", this.blurHandler);
|
|
1078
|
-
if (this.floatingUIOptions.onDestroy) {
|
|
1079
|
-
this.floatingUIOptions.onDestroy();
|
|
1080
|
-
}
|
|
1081
|
-
}
|
|
1082
|
-
};
|
|
1083
|
-
var BubbleMenuPlugin = (options) => {
|
|
1084
|
-
return new index.Plugin({
|
|
1085
|
-
key: typeof options.pluginKey === "string" ? new index.PluginKey(options.pluginKey) : options.pluginKey,
|
|
1086
|
-
view: (view) => new BubbleMenuView({ view, ...options })
|
|
1087
|
-
});
|
|
1088
|
-
};
|
|
1089
|
-
index.Extension.create({
|
|
1090
|
-
name: "bubbleMenu",
|
|
1091
|
-
addOptions() {
|
|
1092
|
-
return {
|
|
1093
|
-
element: null,
|
|
1094
|
-
pluginKey: "bubbleMenu",
|
|
1095
|
-
updateDelay: void 0,
|
|
1096
|
-
shouldShow: null
|
|
1097
|
-
};
|
|
1098
|
-
},
|
|
1099
|
-
addProseMirrorPlugins() {
|
|
1100
|
-
if (!this.options.element) {
|
|
1101
|
-
return [];
|
|
1102
|
-
}
|
|
1103
|
-
return [
|
|
1104
|
-
BubbleMenuPlugin({
|
|
1105
|
-
pluginKey: this.options.pluginKey,
|
|
1106
|
-
editor: this.editor,
|
|
1107
|
-
element: this.options.element,
|
|
1108
|
-
updateDelay: this.options.updateDelay,
|
|
1109
|
-
options: this.options.options,
|
|
1110
|
-
shouldShow: this.options.shouldShow
|
|
1111
|
-
})
|
|
1112
|
-
];
|
|
1113
|
-
}
|
|
1114
|
-
});
|
|
1115
|
-
var BubbleMenu2 = Mo.defineComponent({
|
|
1116
|
-
name: "BubbleMenu",
|
|
1117
|
-
props: {
|
|
1118
|
-
pluginKey: {
|
|
1119
|
-
type: [String, Object],
|
|
1120
|
-
default: "bubbleMenu"
|
|
1121
16
|
},
|
|
1122
|
-
|
|
1123
|
-
|
|
1124
|
-
required: true
|
|
17
|
+
deleteProperty(_, p) {
|
|
18
|
+
return Reflect.deleteProperty(objectRef.value, p);
|
|
1125
19
|
},
|
|
1126
|
-
|
|
1127
|
-
|
|
1128
|
-
default: void 0
|
|
20
|
+
has(_, p) {
|
|
21
|
+
return Reflect.has(objectRef.value, p);
|
|
1129
22
|
},
|
|
1130
|
-
|
|
1131
|
-
|
|
1132
|
-
default: void 0
|
|
23
|
+
ownKeys() {
|
|
24
|
+
return Object.keys(objectRef.value);
|
|
1133
25
|
},
|
|
1134
|
-
|
|
1135
|
-
|
|
1136
|
-
|
|
1137
|
-
|
|
1138
|
-
|
|
1139
|
-
type: Function,
|
|
1140
|
-
default: null
|
|
1141
|
-
}
|
|
1142
|
-
},
|
|
1143
|
-
setup(props, { slots }) {
|
|
1144
|
-
const root = Mo.ref(null);
|
|
1145
|
-
Mo.onMounted(() => {
|
|
1146
|
-
const { editor, options, pluginKey, resizeDelay, shouldShow, updateDelay } = props;
|
|
1147
|
-
if (!root.value) {
|
|
1148
|
-
return;
|
|
1149
|
-
}
|
|
1150
|
-
root.value.style.visibility = "hidden";
|
|
1151
|
-
root.value.style.position = "absolute";
|
|
1152
|
-
root.value.remove();
|
|
1153
|
-
editor.registerPlugin(
|
|
1154
|
-
BubbleMenuPlugin({
|
|
1155
|
-
editor,
|
|
1156
|
-
element: root.value,
|
|
1157
|
-
options,
|
|
1158
|
-
pluginKey,
|
|
1159
|
-
resizeDelay,
|
|
1160
|
-
shouldShow,
|
|
1161
|
-
updateDelay
|
|
1162
|
-
})
|
|
1163
|
-
);
|
|
1164
|
-
});
|
|
1165
|
-
Mo.onBeforeUnmount(() => {
|
|
1166
|
-
const { pluginKey, editor } = props;
|
|
1167
|
-
editor.unregisterPlugin(pluginKey);
|
|
1168
|
-
});
|
|
1169
|
-
return () => {
|
|
1170
|
-
var _a;
|
|
1171
|
-
return Mo.h(Mo.Teleport, { to: "body" }, Mo.h("div", { ref: root }, (_a = slots.default) == null ? void 0 : _a.call(slots)));
|
|
1172
|
-
};
|
|
1173
|
-
}
|
|
1174
|
-
});
|
|
1175
|
-
var FloatingMenuView = class {
|
|
1176
|
-
constructor({ editor, element, view, options, shouldShow }) {
|
|
1177
|
-
this.preventHide = false;
|
|
1178
|
-
this.isVisible = false;
|
|
1179
|
-
this.shouldShow = ({ view: view2, state }) => {
|
|
1180
|
-
const { selection } = state;
|
|
1181
|
-
const { $anchor, empty } = selection;
|
|
1182
|
-
const isRootDepth = $anchor.depth === 1;
|
|
1183
|
-
const isEmptyTextBlock = $anchor.parent.isTextblock && !$anchor.parent.type.spec.code && !$anchor.parent.textContent && $anchor.parent.childCount === 0 && !this.getTextContent($anchor.parent);
|
|
1184
|
-
if (!view2.hasFocus() || !empty || !isRootDepth || !isEmptyTextBlock || !this.editor.isEditable) {
|
|
1185
|
-
return false;
|
|
1186
|
-
}
|
|
1187
|
-
return true;
|
|
1188
|
-
};
|
|
1189
|
-
this.floatingUIOptions = {
|
|
1190
|
-
strategy: "absolute",
|
|
1191
|
-
placement: "right",
|
|
1192
|
-
offset: 8,
|
|
1193
|
-
flip: {},
|
|
1194
|
-
shift: {},
|
|
1195
|
-
arrow: false,
|
|
1196
|
-
size: false,
|
|
1197
|
-
autoPlacement: false,
|
|
1198
|
-
hide: false,
|
|
1199
|
-
inline: false
|
|
1200
|
-
};
|
|
1201
|
-
this.updateHandler = (view2, selectionChanged, docChanged, oldState) => {
|
|
1202
|
-
const { composing } = view2;
|
|
1203
|
-
const isSame = !selectionChanged && !docChanged;
|
|
1204
|
-
if (composing || isSame) {
|
|
1205
|
-
return;
|
|
1206
|
-
}
|
|
1207
|
-
const shouldShow2 = this.getShouldShow(oldState);
|
|
1208
|
-
if (!shouldShow2) {
|
|
1209
|
-
this.hide();
|
|
1210
|
-
return;
|
|
1211
|
-
}
|
|
1212
|
-
this.updatePosition();
|
|
1213
|
-
this.show();
|
|
1214
|
-
};
|
|
1215
|
-
this.mousedownHandler = () => {
|
|
1216
|
-
this.preventHide = true;
|
|
1217
|
-
};
|
|
1218
|
-
this.focusHandler = () => {
|
|
1219
|
-
setTimeout(() => this.update(this.editor.view));
|
|
1220
|
-
};
|
|
1221
|
-
this.blurHandler = ({ event }) => {
|
|
1222
|
-
var _a;
|
|
1223
|
-
if (this.preventHide) {
|
|
1224
|
-
this.preventHide = false;
|
|
1225
|
-
return;
|
|
1226
|
-
}
|
|
1227
|
-
if ((event == null ? void 0 : event.relatedTarget) && ((_a = this.element.parentNode) == null ? void 0 : _a.contains(event.relatedTarget))) {
|
|
1228
|
-
return;
|
|
1229
|
-
}
|
|
1230
|
-
if ((event == null ? void 0 : event.relatedTarget) === this.editor.view.dom) {
|
|
1231
|
-
return;
|
|
1232
|
-
}
|
|
1233
|
-
this.hide();
|
|
1234
|
-
};
|
|
1235
|
-
this.editor = editor;
|
|
1236
|
-
this.element = element;
|
|
1237
|
-
this.view = view;
|
|
1238
|
-
this.floatingUIOptions = {
|
|
1239
|
-
...this.floatingUIOptions,
|
|
1240
|
-
...options
|
|
1241
|
-
};
|
|
1242
|
-
this.element.tabIndex = 0;
|
|
1243
|
-
if (shouldShow) {
|
|
1244
|
-
this.shouldShow = shouldShow;
|
|
1245
|
-
}
|
|
1246
|
-
this.element.addEventListener("mousedown", this.mousedownHandler, { capture: true });
|
|
1247
|
-
this.editor.on("focus", this.focusHandler);
|
|
1248
|
-
this.editor.on("blur", this.blurHandler);
|
|
1249
|
-
this.update(view, view.state);
|
|
1250
|
-
if (this.getShouldShow()) {
|
|
1251
|
-
this.show();
|
|
1252
|
-
}
|
|
1253
|
-
}
|
|
1254
|
-
getTextContent(node) {
|
|
1255
|
-
return index.getText(node, { textSerializers: index.getTextSerializersFromSchema(this.editor.schema) });
|
|
1256
|
-
}
|
|
1257
|
-
get middlewares() {
|
|
1258
|
-
const middlewares = [];
|
|
1259
|
-
if (this.floatingUIOptions.flip) {
|
|
1260
|
-
middlewares.push(index$1.flip(typeof this.floatingUIOptions.flip !== "boolean" ? this.floatingUIOptions.flip : void 0));
|
|
1261
|
-
}
|
|
1262
|
-
if (this.floatingUIOptions.shift) {
|
|
1263
|
-
middlewares.push(
|
|
1264
|
-
index$1.shift(typeof this.floatingUIOptions.shift !== "boolean" ? this.floatingUIOptions.shift : void 0)
|
|
1265
|
-
);
|
|
1266
|
-
}
|
|
1267
|
-
if (this.floatingUIOptions.offset) {
|
|
1268
|
-
middlewares.push(
|
|
1269
|
-
index$1.offset(typeof this.floatingUIOptions.offset !== "boolean" ? this.floatingUIOptions.offset : void 0)
|
|
1270
|
-
);
|
|
1271
|
-
}
|
|
1272
|
-
if (this.floatingUIOptions.arrow) {
|
|
1273
|
-
middlewares.push(index$1.arrow(this.floatingUIOptions.arrow));
|
|
1274
|
-
}
|
|
1275
|
-
if (this.floatingUIOptions.size) {
|
|
1276
|
-
middlewares.push(index$1.size(typeof this.floatingUIOptions.size !== "boolean" ? this.floatingUIOptions.size : void 0));
|
|
1277
|
-
}
|
|
1278
|
-
if (this.floatingUIOptions.autoPlacement) {
|
|
1279
|
-
middlewares.push(
|
|
1280
|
-
index$1.autoPlacement(
|
|
1281
|
-
typeof this.floatingUIOptions.autoPlacement !== "boolean" ? this.floatingUIOptions.autoPlacement : void 0
|
|
1282
|
-
)
|
|
1283
|
-
);
|
|
1284
|
-
}
|
|
1285
|
-
if (this.floatingUIOptions.hide) {
|
|
1286
|
-
middlewares.push(index$1.hide(typeof this.floatingUIOptions.hide !== "boolean" ? this.floatingUIOptions.hide : void 0));
|
|
1287
|
-
}
|
|
1288
|
-
if (this.floatingUIOptions.inline) {
|
|
1289
|
-
middlewares.push(
|
|
1290
|
-
index$1.inline(typeof this.floatingUIOptions.inline !== "boolean" ? this.floatingUIOptions.inline : void 0)
|
|
1291
|
-
);
|
|
1292
|
-
}
|
|
1293
|
-
return middlewares;
|
|
1294
|
-
}
|
|
1295
|
-
getShouldShow(oldState) {
|
|
1296
|
-
var _a;
|
|
1297
|
-
const { state } = this.view;
|
|
1298
|
-
const { selection } = state;
|
|
1299
|
-
const { ranges } = selection;
|
|
1300
|
-
const from = Math.min(...ranges.map((range) => range.$from.pos));
|
|
1301
|
-
const to = Math.max(...ranges.map((range) => range.$to.pos));
|
|
1302
|
-
const shouldShow = (_a = this.shouldShow) == null ? void 0 : _a.call(this, {
|
|
1303
|
-
editor: this.editor,
|
|
1304
|
-
view: this.view,
|
|
1305
|
-
state,
|
|
1306
|
-
oldState,
|
|
1307
|
-
from,
|
|
1308
|
-
to
|
|
1309
|
-
});
|
|
1310
|
-
return shouldShow;
|
|
1311
|
-
}
|
|
1312
|
-
updatePosition() {
|
|
1313
|
-
const { selection } = this.editor.state;
|
|
1314
|
-
const domRect = index.posToDOMRect(this.view, selection.from, selection.to);
|
|
1315
|
-
const virtualElement = {
|
|
1316
|
-
getBoundingClientRect: () => domRect,
|
|
1317
|
-
getClientRects: () => [domRect]
|
|
1318
|
-
};
|
|
1319
|
-
index$1.computePosition(virtualElement, this.element, {
|
|
1320
|
-
placement: this.floatingUIOptions.placement,
|
|
1321
|
-
strategy: this.floatingUIOptions.strategy,
|
|
1322
|
-
middleware: this.middlewares
|
|
1323
|
-
}).then(({ x, y, strategy }) => {
|
|
1324
|
-
this.element.style.width = "max-content";
|
|
1325
|
-
this.element.style.position = strategy;
|
|
1326
|
-
this.element.style.left = `${x}px`;
|
|
1327
|
-
this.element.style.top = `${y}px`;
|
|
1328
|
-
if (this.isVisible && this.floatingUIOptions.onUpdate) {
|
|
1329
|
-
this.floatingUIOptions.onUpdate();
|
|
1330
|
-
}
|
|
1331
|
-
});
|
|
1332
|
-
}
|
|
1333
|
-
update(view, oldState) {
|
|
1334
|
-
const selectionChanged = !(oldState == null ? void 0 : oldState.selection.eq(view.state.selection));
|
|
1335
|
-
const docChanged = !(oldState == null ? void 0 : oldState.doc.eq(view.state.doc));
|
|
1336
|
-
this.updateHandler(view, selectionChanged, docChanged, oldState);
|
|
1337
|
-
}
|
|
1338
|
-
show() {
|
|
1339
|
-
var _a;
|
|
1340
|
-
if (this.isVisible) {
|
|
1341
|
-
return;
|
|
1342
|
-
}
|
|
1343
|
-
this.element.style.visibility = "visible";
|
|
1344
|
-
this.element.style.opacity = "1";
|
|
1345
|
-
(_a = this.view.dom.parentElement) == null ? void 0 : _a.appendChild(this.element);
|
|
1346
|
-
if (this.floatingUIOptions.onShow) {
|
|
1347
|
-
this.floatingUIOptions.onShow();
|
|
1348
|
-
}
|
|
1349
|
-
this.isVisible = true;
|
|
1350
|
-
}
|
|
1351
|
-
hide() {
|
|
1352
|
-
if (!this.isVisible) {
|
|
1353
|
-
return;
|
|
1354
|
-
}
|
|
1355
|
-
this.element.style.visibility = "hidden";
|
|
1356
|
-
this.element.style.opacity = "0";
|
|
1357
|
-
this.element.remove();
|
|
1358
|
-
if (this.floatingUIOptions.onHide) {
|
|
1359
|
-
this.floatingUIOptions.onHide();
|
|
1360
|
-
}
|
|
1361
|
-
this.isVisible = false;
|
|
1362
|
-
}
|
|
1363
|
-
destroy() {
|
|
1364
|
-
this.hide();
|
|
1365
|
-
this.element.removeEventListener("mousedown", this.mousedownHandler, { capture: true });
|
|
1366
|
-
this.editor.off("focus", this.focusHandler);
|
|
1367
|
-
this.editor.off("blur", this.blurHandler);
|
|
1368
|
-
if (this.floatingUIOptions.onDestroy) {
|
|
1369
|
-
this.floatingUIOptions.onDestroy();
|
|
26
|
+
getOwnPropertyDescriptor() {
|
|
27
|
+
return {
|
|
28
|
+
enumerable: true,
|
|
29
|
+
configurable: true
|
|
30
|
+
};
|
|
1370
31
|
}
|
|
1371
|
-
}
|
|
1372
|
-
};
|
|
1373
|
-
var FloatingMenuPlugin = (options) => {
|
|
1374
|
-
return new index.Plugin({
|
|
1375
|
-
key: typeof options.pluginKey === "string" ? new index.PluginKey(options.pluginKey) : options.pluginKey,
|
|
1376
|
-
view: (view) => new FloatingMenuView({ view, ...options })
|
|
1377
32
|
});
|
|
1378
|
-
|
|
1379
|
-
|
|
1380
|
-
|
|
1381
|
-
|
|
1382
|
-
|
|
1383
|
-
|
|
1384
|
-
|
|
1385
|
-
|
|
1386
|
-
|
|
1387
|
-
|
|
1388
|
-
|
|
1389
|
-
|
|
1390
|
-
if (!this.options.element) {
|
|
1391
|
-
return [];
|
|
1392
|
-
}
|
|
1393
|
-
return [
|
|
1394
|
-
FloatingMenuPlugin({
|
|
1395
|
-
pluginKey: this.options.pluginKey,
|
|
1396
|
-
editor: this.editor,
|
|
1397
|
-
element: this.options.element,
|
|
1398
|
-
options: this.options.options,
|
|
1399
|
-
shouldShow: this.options.shouldShow
|
|
1400
|
-
})
|
|
1401
|
-
];
|
|
1402
|
-
}
|
|
1403
|
-
});
|
|
1404
|
-
var FloatingMenu2 = Mo.defineComponent({
|
|
1405
|
-
name: "FloatingMenu",
|
|
1406
|
-
props: {
|
|
1407
|
-
pluginKey: {
|
|
1408
|
-
// TODO: TypeScript breaks :(
|
|
1409
|
-
// type: [String, Object as PropType<Exclude<FloatingMenuPluginProps['pluginKey'], string>>],
|
|
1410
|
-
type: null,
|
|
1411
|
-
default: "floatingMenu"
|
|
1412
|
-
},
|
|
1413
|
-
editor: {
|
|
1414
|
-
type: Object,
|
|
1415
|
-
required: true
|
|
1416
|
-
},
|
|
1417
|
-
options: {
|
|
1418
|
-
type: Object,
|
|
1419
|
-
default: () => ({})
|
|
1420
|
-
},
|
|
1421
|
-
shouldShow: {
|
|
1422
|
-
type: Function,
|
|
1423
|
-
default: null
|
|
1424
|
-
}
|
|
1425
|
-
},
|
|
1426
|
-
setup(props, { slots }) {
|
|
1427
|
-
const root = Mo.ref(null);
|
|
1428
|
-
Mo.onMounted(() => {
|
|
1429
|
-
const { pluginKey, editor, options, shouldShow } = props;
|
|
1430
|
-
if (!root.value) {
|
|
1431
|
-
return;
|
|
1432
|
-
}
|
|
1433
|
-
root.value.style.visibility = "hidden";
|
|
1434
|
-
root.value.style.position = "absolute";
|
|
1435
|
-
root.value.remove();
|
|
1436
|
-
editor.registerPlugin(
|
|
1437
|
-
FloatingMenuPlugin({
|
|
1438
|
-
pluginKey,
|
|
1439
|
-
editor,
|
|
1440
|
-
element: root.value,
|
|
1441
|
-
options,
|
|
1442
|
-
shouldShow
|
|
1443
|
-
})
|
|
1444
|
-
);
|
|
1445
|
-
});
|
|
1446
|
-
Mo.onBeforeUnmount(() => {
|
|
1447
|
-
const { pluginKey, editor } = props;
|
|
1448
|
-
editor.unregisterPlugin(pluginKey);
|
|
1449
|
-
});
|
|
1450
|
-
return () => {
|
|
1451
|
-
var _a;
|
|
1452
|
-
return Mo.h(Mo.Teleport, { to: "body" }, Mo.h("div", { ref: root }, (_a = slots.default) == null ? void 0 : _a.call(slots)));
|
|
1453
|
-
};
|
|
1454
|
-
}
|
|
1455
|
-
});
|
|
1456
|
-
exports.BubbleMenu = BubbleMenu2;
|
|
1457
|
-
exports.FloatingMenu = FloatingMenu2;
|
|
33
|
+
return Mo.reactive(proxy);
|
|
34
|
+
}
|
|
35
|
+
function reactiveComputed(fn) {
|
|
36
|
+
return toReactive(Mo.computed(fn));
|
|
37
|
+
}
|
|
38
|
+
function reactiveOmit(obj, ...keys) {
|
|
39
|
+
const flatKeys = keys.flat();
|
|
40
|
+
const predicate = flatKeys[0];
|
|
41
|
+
return reactiveComputed(() => typeof predicate === "function" ? Object.fromEntries(Object.entries(Mo.toRefs(obj)).filter(([k, v]) => !predicate(Mo.toValue(v), k))) : Object.fromEntries(Object.entries(Mo.toRefs(obj)).filter((e) => !flatKeys.includes(e[0]))));
|
|
42
|
+
}
|
|
43
|
+
typeof WorkerGlobalScope !== "undefined" && globalThis instanceof WorkerGlobalScope;
|
|
44
|
+
exports.reactiveOmit = reactiveOmit;
|