@underverse-ui/underverse 1.0.102 → 1.0.103
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/api-reference.json +1 -1
- package/dist/index.cjs +219 -158
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +213 -152
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/api-reference.json
CHANGED
package/dist/index.cjs
CHANGED
|
@@ -23278,8 +23278,8 @@ function useLocale2() {
|
|
|
23278
23278
|
}
|
|
23279
23279
|
|
|
23280
23280
|
// src/components/UEditor/UEditor.tsx
|
|
23281
|
-
var
|
|
23282
|
-
var
|
|
23281
|
+
var import_react54 = __toESM(require("react"), 1);
|
|
23282
|
+
var import_react55 = require("@tiptap/react");
|
|
23283
23283
|
|
|
23284
23284
|
// src/components/UEditor/extensions.ts
|
|
23285
23285
|
var import_extension_document = __toESM(require("@tiptap/extension-document"), 1);
|
|
@@ -32052,43 +32052,205 @@ var UEDITOR_PROSEMIRROR_CLASS_NAME = cn(
|
|
|
32052
32052
|
);
|
|
32053
32053
|
|
|
32054
32054
|
// src/components/UEditor/use-table-interactions.ts
|
|
32055
|
+
var import_react53 = __toESM(require("react"), 1);
|
|
32056
|
+
|
|
32057
|
+
// src/components/UEditor/use-table-row-resize.ts
|
|
32055
32058
|
var import_react52 = __toESM(require("react"), 1);
|
|
32059
|
+
function useTableRowResize({
|
|
32060
|
+
editor,
|
|
32061
|
+
setHoveredTableCell,
|
|
32062
|
+
clearHoveredTableCell,
|
|
32063
|
+
showRowGuide,
|
|
32064
|
+
clearAllTableResizeHover,
|
|
32065
|
+
scheduleTableLayoutSync
|
|
32066
|
+
}) {
|
|
32067
|
+
const commitFrameRef = (0, import_react52.useRef)(null);
|
|
32068
|
+
const stateRef = (0, import_react52.useRef)(null);
|
|
32069
|
+
const commitPreview = import_react52.default.useCallback(() => {
|
|
32070
|
+
if (!editor) return;
|
|
32071
|
+
const state = stateRef.current;
|
|
32072
|
+
if (!state) return;
|
|
32073
|
+
const nextHeight = state.pendingHeight;
|
|
32074
|
+
if (nextHeight === state.previewHeight) {
|
|
32075
|
+
document.body.style.cursor = "row-resize";
|
|
32076
|
+
showRowGuide(state.tableElement, state.rowElement, state.cellElement);
|
|
32077
|
+
scheduleTableLayoutSync();
|
|
32078
|
+
return;
|
|
32079
|
+
}
|
|
32080
|
+
state.previewHeight = nextHeight;
|
|
32081
|
+
const tr = editor.view.state.tr;
|
|
32082
|
+
tr.setNodeMarkup(state.rowPos, void 0, {
|
|
32083
|
+
...state.rowNode.attrs,
|
|
32084
|
+
rowHeight: nextHeight
|
|
32085
|
+
});
|
|
32086
|
+
tr.setMeta("addToHistory", false);
|
|
32087
|
+
editor.view.dispatch(tr);
|
|
32088
|
+
state.rowNode = editor.view.state.doc.nodeAt(state.rowPos) ?? state.rowNode;
|
|
32089
|
+
const refreshedRow = state.tableElement.rows.item(state.rowElement.rowIndex);
|
|
32090
|
+
if (refreshedRow instanceof HTMLTableRowElement) {
|
|
32091
|
+
state.rowElement = refreshedRow;
|
|
32092
|
+
const refreshedCell = refreshedRow.cells.item(state.cellIndex);
|
|
32093
|
+
if (refreshedCell instanceof HTMLTableCellElement) {
|
|
32094
|
+
state.cellElement = refreshedCell;
|
|
32095
|
+
}
|
|
32096
|
+
}
|
|
32097
|
+
document.body.style.cursor = "row-resize";
|
|
32098
|
+
showRowGuide(state.tableElement, state.rowElement, state.cellElement);
|
|
32099
|
+
scheduleTableLayoutSync();
|
|
32100
|
+
}, [editor, scheduleTableLayoutSync, showRowGuide]);
|
|
32101
|
+
const scheduleCommit = import_react52.default.useCallback(() => {
|
|
32102
|
+
if (commitFrameRef.current !== null) return;
|
|
32103
|
+
commitFrameRef.current = window.requestAnimationFrame(() => {
|
|
32104
|
+
commitFrameRef.current = null;
|
|
32105
|
+
commitPreview();
|
|
32106
|
+
});
|
|
32107
|
+
}, [commitPreview]);
|
|
32108
|
+
const syncActiveGuide = import_react52.default.useCallback(() => {
|
|
32109
|
+
const state = stateRef.current;
|
|
32110
|
+
if (!state) return false;
|
|
32111
|
+
setHoveredTableCell(state.cellElement);
|
|
32112
|
+
showRowGuide(state.tableElement, state.rowElement, state.cellElement);
|
|
32113
|
+
return true;
|
|
32114
|
+
}, [setHoveredTableCell, showRowGuide]);
|
|
32115
|
+
const isResizing = import_react52.default.useCallback(() => stateRef.current !== null, []);
|
|
32116
|
+
const beginResize = import_react52.default.useCallback((event, table, row, cell) => {
|
|
32117
|
+
if (!editor || !isRowResizeHotspot(cell, event.clientX, event.clientY)) {
|
|
32118
|
+
return false;
|
|
32119
|
+
}
|
|
32120
|
+
setHoveredTableCell(cell);
|
|
32121
|
+
const rowInfo = findTableRowNodeInfo(editor.view, row);
|
|
32122
|
+
if (!rowInfo) return false;
|
|
32123
|
+
const startHeight = row.getBoundingClientRect().height;
|
|
32124
|
+
stateRef.current = {
|
|
32125
|
+
rowElement: row,
|
|
32126
|
+
tableElement: table,
|
|
32127
|
+
cellElement: cell,
|
|
32128
|
+
cellIndex: cell.cellIndex,
|
|
32129
|
+
rowPos: rowInfo.pos,
|
|
32130
|
+
rowNode: rowInfo.node,
|
|
32131
|
+
startY: event.clientY,
|
|
32132
|
+
startHeight,
|
|
32133
|
+
previewHeight: startHeight,
|
|
32134
|
+
pendingHeight: startHeight
|
|
32135
|
+
};
|
|
32136
|
+
showRowGuide(table, row, cell);
|
|
32137
|
+
document.body.style.cursor = "row-resize";
|
|
32138
|
+
event.preventDefault();
|
|
32139
|
+
event.stopPropagation();
|
|
32140
|
+
return true;
|
|
32141
|
+
}, [editor, setHoveredTableCell, showRowGuide]);
|
|
32142
|
+
const handlePointerMove = import_react52.default.useCallback((event) => {
|
|
32143
|
+
const state = stateRef.current;
|
|
32144
|
+
if (!state) return;
|
|
32145
|
+
const nextHeight = Math.max(
|
|
32146
|
+
MIN_TABLE_ROW_HEIGHT,
|
|
32147
|
+
Math.round(state.startHeight + (event.clientY - state.startY))
|
|
32148
|
+
);
|
|
32149
|
+
if (nextHeight === state.pendingHeight) {
|
|
32150
|
+
document.body.style.cursor = "row-resize";
|
|
32151
|
+
showRowGuide(state.tableElement, state.rowElement, state.cellElement);
|
|
32152
|
+
return;
|
|
32153
|
+
}
|
|
32154
|
+
state.pendingHeight = nextHeight;
|
|
32155
|
+
document.body.style.cursor = "row-resize";
|
|
32156
|
+
scheduleCommit();
|
|
32157
|
+
}, [scheduleCommit, showRowGuide]);
|
|
32158
|
+
const handlePointerUp = import_react52.default.useCallback((event) => {
|
|
32159
|
+
if (!editor) return;
|
|
32160
|
+
const state = stateRef.current;
|
|
32161
|
+
if (!state) return;
|
|
32162
|
+
const nextHeight = Math.max(
|
|
32163
|
+
MIN_TABLE_ROW_HEIGHT,
|
|
32164
|
+
Math.round(state.startHeight + (event.clientY - state.startY))
|
|
32165
|
+
);
|
|
32166
|
+
state.pendingHeight = nextHeight;
|
|
32167
|
+
if (commitFrameRef.current !== null) {
|
|
32168
|
+
window.cancelAnimationFrame(commitFrameRef.current);
|
|
32169
|
+
commitFrameRef.current = null;
|
|
32170
|
+
}
|
|
32171
|
+
commitPreview();
|
|
32172
|
+
const latestState = stateRef.current ?? state;
|
|
32173
|
+
const rowNode = editor.view.state.doc.nodeAt(latestState.rowPos) ?? latestState.rowNode;
|
|
32174
|
+
if (rowNode.attrs.rowHeight !== nextHeight) {
|
|
32175
|
+
const tr = editor.view.state.tr;
|
|
32176
|
+
tr.setNodeMarkup(latestState.rowPos, void 0, {
|
|
32177
|
+
...rowNode.attrs,
|
|
32178
|
+
rowHeight: nextHeight
|
|
32179
|
+
});
|
|
32180
|
+
editor.view.dispatch(tr);
|
|
32181
|
+
}
|
|
32182
|
+
stateRef.current = null;
|
|
32183
|
+
document.body.style.cursor = "";
|
|
32184
|
+
clearHoveredTableCell();
|
|
32185
|
+
clearAllTableResizeHover();
|
|
32186
|
+
scheduleTableLayoutSync();
|
|
32187
|
+
}, [clearAllTableResizeHover, clearHoveredTableCell, commitPreview, editor, scheduleTableLayoutSync]);
|
|
32188
|
+
const cancelResize = import_react52.default.useCallback(() => {
|
|
32189
|
+
if (!stateRef.current) return;
|
|
32190
|
+
if (commitFrameRef.current !== null) {
|
|
32191
|
+
window.cancelAnimationFrame(commitFrameRef.current);
|
|
32192
|
+
commitFrameRef.current = null;
|
|
32193
|
+
}
|
|
32194
|
+
stateRef.current = null;
|
|
32195
|
+
document.body.style.cursor = "";
|
|
32196
|
+
clearHoveredTableCell();
|
|
32197
|
+
clearAllTableResizeHover();
|
|
32198
|
+
scheduleTableLayoutSync();
|
|
32199
|
+
}, [clearAllTableResizeHover, clearHoveredTableCell, scheduleTableLayoutSync]);
|
|
32200
|
+
const cleanup = import_react52.default.useCallback(() => {
|
|
32201
|
+
if (commitFrameRef.current !== null) {
|
|
32202
|
+
window.cancelAnimationFrame(commitFrameRef.current);
|
|
32203
|
+
commitFrameRef.current = null;
|
|
32204
|
+
}
|
|
32205
|
+
stateRef.current = null;
|
|
32206
|
+
document.body.style.cursor = "";
|
|
32207
|
+
}, []);
|
|
32208
|
+
return {
|
|
32209
|
+
beginResize,
|
|
32210
|
+
cancelResize,
|
|
32211
|
+
cleanup,
|
|
32212
|
+
handlePointerMove,
|
|
32213
|
+
handlePointerUp,
|
|
32214
|
+
isResizing,
|
|
32215
|
+
syncActiveGuide
|
|
32216
|
+
};
|
|
32217
|
+
}
|
|
32218
|
+
|
|
32219
|
+
// src/components/UEditor/use-table-interactions.ts
|
|
32056
32220
|
function useUEditorTableInteractions(editor) {
|
|
32057
|
-
const editorContentRef = (0,
|
|
32058
|
-
const tableColumnGuideRef = (0,
|
|
32059
|
-
const tableRowGuideRef = (0,
|
|
32060
|
-
const activeTableCellHighlightRef = (0,
|
|
32061
|
-
const hoveredTableCellRef = (0,
|
|
32062
|
-
const activeTableCellRef = (0,
|
|
32063
|
-
const tableLayoutSyncFrameRef = (0,
|
|
32064
|
-
const
|
|
32065
|
-
const rowResizeStateRef = (0, import_react52.useRef)(null);
|
|
32066
|
-
const setEditorResizeCursor = import_react52.default.useCallback((cursor) => {
|
|
32221
|
+
const editorContentRef = (0, import_react53.useRef)(null);
|
|
32222
|
+
const tableColumnGuideRef = (0, import_react53.useRef)(null);
|
|
32223
|
+
const tableRowGuideRef = (0, import_react53.useRef)(null);
|
|
32224
|
+
const activeTableCellHighlightRef = (0, import_react53.useRef)(null);
|
|
32225
|
+
const hoveredTableCellRef = (0, import_react53.useRef)(null);
|
|
32226
|
+
const activeTableCellRef = (0, import_react53.useRef)(null);
|
|
32227
|
+
const tableLayoutSyncFrameRef = (0, import_react53.useRef)(null);
|
|
32228
|
+
const setEditorResizeCursor = import_react53.default.useCallback((cursor) => {
|
|
32067
32229
|
const proseMirror = editorContentRef.current?.querySelector(".ProseMirror");
|
|
32068
32230
|
if (proseMirror) {
|
|
32069
32231
|
proseMirror.style.cursor = cursor;
|
|
32070
32232
|
}
|
|
32071
32233
|
}, []);
|
|
32072
|
-
const hideColumnGuide =
|
|
32234
|
+
const hideColumnGuide = import_react53.default.useCallback(() => {
|
|
32073
32235
|
editorContentRef.current?.classList.remove("resize-cursor");
|
|
32074
32236
|
const guide = tableColumnGuideRef.current;
|
|
32075
32237
|
if (guide) {
|
|
32076
32238
|
guide.style.opacity = "0";
|
|
32077
32239
|
}
|
|
32078
32240
|
}, []);
|
|
32079
|
-
const hideRowGuide =
|
|
32241
|
+
const hideRowGuide = import_react53.default.useCallback(() => {
|
|
32080
32242
|
editorContentRef.current?.classList.remove("resize-row-cursor");
|
|
32081
32243
|
const guide = tableRowGuideRef.current;
|
|
32082
32244
|
if (guide) {
|
|
32083
32245
|
guide.style.opacity = "0";
|
|
32084
32246
|
}
|
|
32085
32247
|
}, []);
|
|
32086
|
-
const clearAllTableResizeHover =
|
|
32248
|
+
const clearAllTableResizeHover = import_react53.default.useCallback(() => {
|
|
32087
32249
|
setEditorResizeCursor("");
|
|
32088
32250
|
hideColumnGuide();
|
|
32089
32251
|
hideRowGuide();
|
|
32090
32252
|
}, [hideColumnGuide, hideRowGuide, setEditorResizeCursor]);
|
|
32091
|
-
const updateActiveCellHighlight =
|
|
32253
|
+
const updateActiveCellHighlight = import_react53.default.useCallback((cell) => {
|
|
32092
32254
|
const surface = editorContentRef.current;
|
|
32093
32255
|
const highlight = activeTableCellHighlightRef.current;
|
|
32094
32256
|
if (!highlight) return;
|
|
@@ -32103,7 +32265,7 @@ function useUEditorTableInteractions(editor) {
|
|
|
32103
32265
|
highlight.style.width = `${metrics.width}px`;
|
|
32104
32266
|
highlight.style.height = `${metrics.height}px`;
|
|
32105
32267
|
}, []);
|
|
32106
|
-
const scheduleTableLayoutSync =
|
|
32268
|
+
const scheduleTableLayoutSync = import_react53.default.useCallback(() => {
|
|
32107
32269
|
if (tableLayoutSyncFrameRef.current !== null) return;
|
|
32108
32270
|
tableLayoutSyncFrameRef.current = window.requestAnimationFrame(() => {
|
|
32109
32271
|
tableLayoutSyncFrameRef.current = null;
|
|
@@ -32111,22 +32273,22 @@ function useUEditorTableInteractions(editor) {
|
|
|
32111
32273
|
editorContentRef.current?.dispatchEvent(new CustomEvent(UEDITOR_TABLE_LAYOUT_CHANGE_EVENT));
|
|
32112
32274
|
});
|
|
32113
32275
|
}, [updateActiveCellHighlight]);
|
|
32114
|
-
const setActiveTableCell =
|
|
32276
|
+
const setActiveTableCell = import_react53.default.useCallback((cell) => {
|
|
32115
32277
|
if (activeTableCellRef.current === cell) return;
|
|
32116
32278
|
activeTableCellRef.current = cell;
|
|
32117
32279
|
updateActiveCellHighlight(activeTableCellRef.current);
|
|
32118
32280
|
}, [updateActiveCellHighlight]);
|
|
32119
|
-
const clearActiveTableCell =
|
|
32281
|
+
const clearActiveTableCell = import_react53.default.useCallback(() => {
|
|
32120
32282
|
activeTableCellRef.current = null;
|
|
32121
32283
|
updateActiveCellHighlight(null);
|
|
32122
32284
|
}, [updateActiveCellHighlight]);
|
|
32123
|
-
const setHoveredTableCell =
|
|
32285
|
+
const setHoveredTableCell = import_react53.default.useCallback((cell) => {
|
|
32124
32286
|
hoveredTableCellRef.current = cell;
|
|
32125
32287
|
}, []);
|
|
32126
|
-
const clearHoveredTableCell =
|
|
32288
|
+
const clearHoveredTableCell = import_react53.default.useCallback(() => {
|
|
32127
32289
|
hoveredTableCellRef.current = null;
|
|
32128
32290
|
}, []);
|
|
32129
|
-
const showColumnGuide =
|
|
32291
|
+
const showColumnGuide = import_react53.default.useCallback((table, row, cell) => {
|
|
32130
32292
|
const surface = editorContentRef.current;
|
|
32131
32293
|
const guide = tableColumnGuideRef.current;
|
|
32132
32294
|
if (!surface || !guide) return;
|
|
@@ -32139,7 +32301,7 @@ function useUEditorTableInteractions(editor) {
|
|
|
32139
32301
|
surface.classList.add("resize-cursor");
|
|
32140
32302
|
setEditorResizeCursor("col-resize");
|
|
32141
32303
|
}, [setEditorResizeCursor]);
|
|
32142
|
-
const showRowGuide =
|
|
32304
|
+
const showRowGuide = import_react53.default.useCallback((table, row, cell) => {
|
|
32143
32305
|
const surface = editorContentRef.current;
|
|
32144
32306
|
const guide = tableRowGuideRef.current;
|
|
32145
32307
|
if (!surface || !guide) return;
|
|
@@ -32152,50 +32314,27 @@ function useUEditorTableInteractions(editor) {
|
|
|
32152
32314
|
surface.classList.add("resize-row-cursor");
|
|
32153
32315
|
setEditorResizeCursor("row-resize");
|
|
32154
32316
|
}, [setEditorResizeCursor]);
|
|
32155
|
-
const
|
|
32156
|
-
|
|
32157
|
-
|
|
32158
|
-
|
|
32159
|
-
|
|
32160
|
-
|
|
32161
|
-
|
|
32162
|
-
|
|
32163
|
-
|
|
32164
|
-
|
|
32165
|
-
|
|
32166
|
-
|
|
32167
|
-
|
|
32168
|
-
|
|
32169
|
-
|
|
32170
|
-
|
|
32171
|
-
|
|
32172
|
-
tr.setMeta("addToHistory", false);
|
|
32173
|
-
editor.view.dispatch(tr);
|
|
32174
|
-
state.rowNode = editor.view.state.doc.nodeAt(state.rowPos) ?? state.rowNode;
|
|
32175
|
-
const refreshedRow = state.tableElement.rows.item(state.rowElement.rowIndex);
|
|
32176
|
-
if (refreshedRow instanceof HTMLTableRowElement) {
|
|
32177
|
-
state.rowElement = refreshedRow;
|
|
32178
|
-
const refreshedCell = refreshedRow.cells.item(state.cellIndex);
|
|
32179
|
-
if (refreshedCell instanceof HTMLTableCellElement) {
|
|
32180
|
-
state.cellElement = refreshedCell;
|
|
32181
|
-
}
|
|
32182
|
-
}
|
|
32183
|
-
document.body.style.cursor = "row-resize";
|
|
32184
|
-
showRowGuide(state.tableElement, state.rowElement, state.cellElement);
|
|
32185
|
-
scheduleTableLayoutSync();
|
|
32186
|
-
}, [editor, scheduleTableLayoutSync, showRowGuide]);
|
|
32187
|
-
const scheduleRowResizeCommit = import_react52.default.useCallback(() => {
|
|
32188
|
-
if (rowResizeCommitFrameRef.current !== null) return;
|
|
32189
|
-
rowResizeCommitFrameRef.current = window.requestAnimationFrame(() => {
|
|
32190
|
-
rowResizeCommitFrameRef.current = null;
|
|
32191
|
-
commitRowResizePreview();
|
|
32192
|
-
});
|
|
32193
|
-
}, [commitRowResizePreview]);
|
|
32194
|
-
const syncActiveTableCellFromSelection = import_react52.default.useCallback(() => {
|
|
32317
|
+
const {
|
|
32318
|
+
beginResize,
|
|
32319
|
+
cancelResize,
|
|
32320
|
+
cleanup: cleanupRowResize,
|
|
32321
|
+
handlePointerMove: handleRowResizePointerMove,
|
|
32322
|
+
handlePointerUp: handleRowResizePointerUp,
|
|
32323
|
+
isResizing: isRowResizing,
|
|
32324
|
+
syncActiveGuide: syncActiveRowResizeGuide
|
|
32325
|
+
} = useTableRowResize({
|
|
32326
|
+
editor,
|
|
32327
|
+
setHoveredTableCell,
|
|
32328
|
+
clearHoveredTableCell,
|
|
32329
|
+
showRowGuide,
|
|
32330
|
+
clearAllTableResizeHover,
|
|
32331
|
+
scheduleTableLayoutSync
|
|
32332
|
+
});
|
|
32333
|
+
const syncActiveTableCellFromSelection = import_react53.default.useCallback(() => {
|
|
32195
32334
|
if (!editor) return;
|
|
32196
32335
|
setActiveTableCell(getSelectionTableCell(editor.view));
|
|
32197
32336
|
}, [editor, setActiveTableCell]);
|
|
32198
|
-
(0,
|
|
32337
|
+
(0, import_react53.useEffect)(() => {
|
|
32199
32338
|
if (!editor) return void 0;
|
|
32200
32339
|
const proseMirror = editor.view.dom;
|
|
32201
32340
|
const surface = editorContentRef.current;
|
|
@@ -32216,10 +32355,7 @@ function useUEditorTableInteractions(editor) {
|
|
|
32216
32355
|
updateActiveCellHighlight(activeTableCellRef.current);
|
|
32217
32356
|
};
|
|
32218
32357
|
const handleEditorMouseMove = (event) => {
|
|
32219
|
-
|
|
32220
|
-
if (activeRowResize) {
|
|
32221
|
-
setHoveredTableCell(activeRowResize.cellElement);
|
|
32222
|
-
showRowGuide(activeRowResize.tableElement, activeRowResize.rowElement, activeRowResize.cellElement);
|
|
32358
|
+
if (syncActiveRowResizeGuide()) {
|
|
32223
32359
|
return;
|
|
32224
32360
|
}
|
|
32225
32361
|
const target = resolveEventElement(event.target);
|
|
@@ -32257,7 +32393,7 @@ function useUEditorTableInteractions(editor) {
|
|
|
32257
32393
|
};
|
|
32258
32394
|
const handleEditorMouseLeave = () => {
|
|
32259
32395
|
clearHoveredTableCell();
|
|
32260
|
-
if (!
|
|
32396
|
+
if (!isRowResizing()) {
|
|
32261
32397
|
clearAllTableResizeHover();
|
|
32262
32398
|
}
|
|
32263
32399
|
};
|
|
@@ -32278,87 +32414,16 @@ function useUEditorTableInteractions(editor) {
|
|
|
32278
32414
|
const row = cell.closest("tr");
|
|
32279
32415
|
const table = cell.closest("table");
|
|
32280
32416
|
if (!(row instanceof HTMLTableRowElement) || !(table instanceof HTMLTableElement)) return;
|
|
32281
|
-
|
|
32282
|
-
return;
|
|
32283
|
-
}
|
|
32284
|
-
setHoveredTableCell(cell);
|
|
32285
|
-
const rowInfo = findTableRowNodeInfo(editor.view, row);
|
|
32286
|
-
if (!rowInfo) return;
|
|
32287
|
-
const startHeight = row.getBoundingClientRect().height;
|
|
32288
|
-
rowResizeStateRef.current = {
|
|
32289
|
-
rowElement: row,
|
|
32290
|
-
tableElement: table,
|
|
32291
|
-
cellElement: cell,
|
|
32292
|
-
cellIndex: cell.cellIndex,
|
|
32293
|
-
rowPos: rowInfo.pos,
|
|
32294
|
-
rowNode: rowInfo.node,
|
|
32295
|
-
startY: event.clientY,
|
|
32296
|
-
startHeight,
|
|
32297
|
-
previewHeight: startHeight,
|
|
32298
|
-
pendingHeight: startHeight
|
|
32299
|
-
};
|
|
32300
|
-
showRowGuide(table, row, cell);
|
|
32301
|
-
document.body.style.cursor = "row-resize";
|
|
32302
|
-
event.preventDefault();
|
|
32303
|
-
event.stopPropagation();
|
|
32417
|
+
beginResize(event, table, row, cell);
|
|
32304
32418
|
};
|
|
32305
32419
|
const handlePointerMove = (event) => {
|
|
32306
|
-
|
|
32307
|
-
if (!state) return;
|
|
32308
|
-
const nextHeight = Math.max(
|
|
32309
|
-
MIN_TABLE_ROW_HEIGHT,
|
|
32310
|
-
Math.round(state.startHeight + (event.clientY - state.startY))
|
|
32311
|
-
);
|
|
32312
|
-
if (nextHeight === state.pendingHeight) {
|
|
32313
|
-
document.body.style.cursor = "row-resize";
|
|
32314
|
-
showRowGuide(state.tableElement, state.rowElement, state.cellElement);
|
|
32315
|
-
return;
|
|
32316
|
-
}
|
|
32317
|
-
state.pendingHeight = nextHeight;
|
|
32318
|
-
document.body.style.cursor = "row-resize";
|
|
32319
|
-
scheduleRowResizeCommit();
|
|
32420
|
+
handleRowResizePointerMove(event);
|
|
32320
32421
|
};
|
|
32321
32422
|
const handlePointerUp = (event) => {
|
|
32322
|
-
|
|
32323
|
-
if (!state) return;
|
|
32324
|
-
const nextHeight = Math.max(
|
|
32325
|
-
MIN_TABLE_ROW_HEIGHT,
|
|
32326
|
-
Math.round(state.startHeight + (event.clientY - state.startY))
|
|
32327
|
-
);
|
|
32328
|
-
state.pendingHeight = nextHeight;
|
|
32329
|
-
if (rowResizeCommitFrameRef.current !== null) {
|
|
32330
|
-
window.cancelAnimationFrame(rowResizeCommitFrameRef.current);
|
|
32331
|
-
rowResizeCommitFrameRef.current = null;
|
|
32332
|
-
}
|
|
32333
|
-
commitRowResizePreview();
|
|
32334
|
-
const latestState = rowResizeStateRef.current ?? state;
|
|
32335
|
-
const rowNode = editor.view.state.doc.nodeAt(latestState.rowPos) ?? latestState.rowNode;
|
|
32336
|
-
if (rowNode.attrs.rowHeight !== nextHeight) {
|
|
32337
|
-
const tr = editor.view.state.tr;
|
|
32338
|
-
tr.setNodeMarkup(latestState.rowPos, void 0, {
|
|
32339
|
-
...rowNode.attrs,
|
|
32340
|
-
rowHeight: nextHeight
|
|
32341
|
-
});
|
|
32342
|
-
editor.view.dispatch(tr);
|
|
32343
|
-
}
|
|
32344
|
-
rowResizeStateRef.current = null;
|
|
32345
|
-
document.body.style.cursor = "";
|
|
32346
|
-
clearHoveredTableCell();
|
|
32347
|
-
clearAllTableResizeHover();
|
|
32348
|
-
scheduleTableLayoutSync();
|
|
32423
|
+
handleRowResizePointerUp(event);
|
|
32349
32424
|
};
|
|
32350
32425
|
const handleWindowBlur = () => {
|
|
32351
|
-
|
|
32352
|
-
if (!state) return;
|
|
32353
|
-
if (rowResizeCommitFrameRef.current !== null) {
|
|
32354
|
-
window.cancelAnimationFrame(rowResizeCommitFrameRef.current);
|
|
32355
|
-
rowResizeCommitFrameRef.current = null;
|
|
32356
|
-
}
|
|
32357
|
-
rowResizeStateRef.current = null;
|
|
32358
|
-
document.body.style.cursor = "";
|
|
32359
|
-
clearHoveredTableCell();
|
|
32360
|
-
clearAllTableResizeHover();
|
|
32361
|
-
scheduleTableLayoutSync();
|
|
32426
|
+
cancelResize();
|
|
32362
32427
|
};
|
|
32363
32428
|
proseMirror.addEventListener("mousemove", handleEditorMouseMove);
|
|
32364
32429
|
proseMirror.addEventListener("mouseleave", handleEditorMouseLeave);
|
|
@@ -32401,17 +32466,13 @@ function useUEditorTableInteractions(editor) {
|
|
|
32401
32466
|
window.cancelAnimationFrame(tableLayoutSyncFrameRef.current);
|
|
32402
32467
|
tableLayoutSyncFrameRef.current = null;
|
|
32403
32468
|
}
|
|
32404
|
-
|
|
32405
|
-
window.cancelAnimationFrame(rowResizeCommitFrameRef.current);
|
|
32406
|
-
rowResizeCommitFrameRef.current = null;
|
|
32407
|
-
}
|
|
32469
|
+
cleanupRowResize();
|
|
32408
32470
|
document.body.style.cursor = "";
|
|
32409
32471
|
clearActiveTableCell();
|
|
32410
32472
|
clearHoveredTableCell();
|
|
32411
32473
|
clearAllTableResizeHover();
|
|
32412
|
-
rowResizeStateRef.current = null;
|
|
32413
32474
|
};
|
|
32414
|
-
}, [clearActiveTableCell, clearAllTableResizeHover, clearHoveredTableCell,
|
|
32475
|
+
}, [beginResize, cancelResize, cleanupRowResize, clearActiveTableCell, clearAllTableResizeHover, clearHoveredTableCell, editor, handleRowResizePointerMove, handleRowResizePointerUp, hideColumnGuide, hideRowGuide, isRowResizing, showColumnGuide, showRowGuide, syncActiveRowResizeGuide, syncActiveTableCellFromSelection, updateActiveCellHighlight]);
|
|
32415
32476
|
return {
|
|
32416
32477
|
editorContentRef,
|
|
32417
32478
|
tableColumnGuideRef,
|
|
@@ -32422,7 +32483,7 @@ function useUEditorTableInteractions(editor) {
|
|
|
32422
32483
|
|
|
32423
32484
|
// src/components/UEditor/UEditor.tsx
|
|
32424
32485
|
var import_jsx_runtime84 = require("react/jsx-runtime");
|
|
32425
|
-
var UEditor =
|
|
32486
|
+
var UEditor = import_react54.default.forwardRef(({
|
|
32426
32487
|
content = "",
|
|
32427
32488
|
onChange,
|
|
32428
32489
|
onHtmlChange,
|
|
@@ -32453,9 +32514,9 @@ var UEditor = import_react53.default.forwardRef(({
|
|
|
32453
32514
|
}, ref) => {
|
|
32454
32515
|
const t = useSmartTranslations("UEditor");
|
|
32455
32516
|
const effectivePlaceholder = placeholder ?? t("placeholder");
|
|
32456
|
-
const inFlightPrepareRef = (0,
|
|
32457
|
-
const lastAppliedContentRef = (0,
|
|
32458
|
-
const extensions = (0,
|
|
32517
|
+
const inFlightPrepareRef = (0, import_react54.useRef)(null);
|
|
32518
|
+
const lastAppliedContentRef = (0, import_react54.useRef)(content ?? "");
|
|
32519
|
+
const extensions = (0, import_react54.useMemo)(
|
|
32459
32520
|
() => buildUEditorExtensions({
|
|
32460
32521
|
placeholder: effectivePlaceholder,
|
|
32461
32522
|
translate: t,
|
|
@@ -32469,7 +32530,7 @@ var UEditor = import_react53.default.forwardRef(({
|
|
|
32469
32530
|
}),
|
|
32470
32531
|
[effectivePlaceholder, t, maxCharacters, uploadImage, imageInsertMode, maxImageFileSize, allowedImageMimeTypes, fallbackToDataUrl, editable]
|
|
32471
32532
|
);
|
|
32472
|
-
const editor = (0,
|
|
32533
|
+
const editor = (0, import_react55.useEditor)({
|
|
32473
32534
|
immediatelyRender: false,
|
|
32474
32535
|
extensions,
|
|
32475
32536
|
content,
|
|
@@ -32515,7 +32576,7 @@ var UEditor = import_react53.default.forwardRef(({
|
|
|
32515
32576
|
tableRowGuideRef,
|
|
32516
32577
|
activeTableCellHighlightRef
|
|
32517
32578
|
} = useUEditorTableInteractions(editor);
|
|
32518
|
-
(0,
|
|
32579
|
+
(0, import_react54.useImperativeHandle)(
|
|
32519
32580
|
ref,
|
|
32520
32581
|
() => ({
|
|
32521
32582
|
prepareContentForSave: async ({ throwOnError = false } = {}) => {
|
|
@@ -32538,7 +32599,7 @@ var UEditor = import_react53.default.forwardRef(({
|
|
|
32538
32599
|
}),
|
|
32539
32600
|
[content, editor, uploadImageForSave, uploadImageConcurrency]
|
|
32540
32601
|
);
|
|
32541
|
-
(0,
|
|
32602
|
+
(0, import_react54.useEffect)(() => {
|
|
32542
32603
|
if (!editor) return;
|
|
32543
32604
|
const nextContent = content ?? "";
|
|
32544
32605
|
if (lastAppliedContentRef.current === nextContent) return;
|
|
@@ -32629,7 +32690,7 @@ var UEditor = import_react53.default.forwardRef(({
|
|
|
32629
32690
|
),
|
|
32630
32691
|
editable && /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(TableControls, { editor, containerRef: editorContentRef }),
|
|
32631
32692
|
/* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
|
|
32632
|
-
|
|
32693
|
+
import_react55.EditorContent,
|
|
32633
32694
|
{
|
|
32634
32695
|
editor,
|
|
32635
32696
|
className: "min-h-full"
|