@underverse-ui/underverse 1.0.159 → 1.0.161
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 +580 -253
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +568 -233
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -3619,7 +3619,7 @@ var Tooltip = React10.forwardRef(({
|
|
|
3619
3619
|
setIsOpen(true);
|
|
3620
3620
|
}, delayOpen);
|
|
3621
3621
|
};
|
|
3622
|
-
const
|
|
3622
|
+
const handleMouseLeave2 = () => {
|
|
3623
3623
|
clearTimeout(timeoutRef.current);
|
|
3624
3624
|
timeoutRef.current = setTimeout(() => {
|
|
3625
3625
|
setIsOpen(false);
|
|
@@ -3744,7 +3744,7 @@ var Tooltip = React10.forwardRef(({
|
|
|
3744
3744
|
childProps.onMouseLeave,
|
|
3745
3745
|
(e) => {
|
|
3746
3746
|
triggerRef.current = e.currentTarget;
|
|
3747
|
-
|
|
3747
|
+
handleMouseLeave2();
|
|
3748
3748
|
}
|
|
3749
3749
|
),
|
|
3750
3750
|
onPointerDown: chainEventHandlers(
|
|
@@ -7779,6 +7779,23 @@ var DropdownMenu = ({
|
|
|
7779
7779
|
const itemsRef = import_react14.default.useRef([]);
|
|
7780
7780
|
const [activeIndex, setActiveIndex] = useResettingIndex(open);
|
|
7781
7781
|
const parentMenu = import_react14.default.useContext(DropdownMenuContext);
|
|
7782
|
+
const closeMenu = import_react14.default.useCallback(() => {
|
|
7783
|
+
setOpen(false);
|
|
7784
|
+
parentMenu?.closeMenu();
|
|
7785
|
+
}, [parentMenu, setOpen]);
|
|
7786
|
+
const getEnabledMenuItems = import_react14.default.useCallback(() => {
|
|
7787
|
+
const menuEl = menuRef.current;
|
|
7788
|
+
if (!menuEl) return [];
|
|
7789
|
+
return Array.from(menuEl.querySelectorAll("[data-dropdown-menu-item]")).filter((el) => !el.disabled);
|
|
7790
|
+
}, []);
|
|
7791
|
+
const focusMenuItem = import_react14.default.useCallback((index) => {
|
|
7792
|
+
const enabled = getEnabledMenuItems();
|
|
7793
|
+
const item = enabled[index];
|
|
7794
|
+
if (!item) return;
|
|
7795
|
+
setActiveIndex(index);
|
|
7796
|
+
item.focus();
|
|
7797
|
+
item.scrollIntoView({ block: "nearest" });
|
|
7798
|
+
}, [getEnabledMenuItems, setActiveIndex]);
|
|
7782
7799
|
useShadCNAnimations();
|
|
7783
7800
|
import_react14.default.useEffect(() => {
|
|
7784
7801
|
if (!open) return;
|
|
@@ -7789,38 +7806,34 @@ var DropdownMenu = ({
|
|
|
7789
7806
|
if (!active || !triggerEl || !menuEl) return;
|
|
7790
7807
|
const isInMenu = menuEl.contains(active);
|
|
7791
7808
|
const isOnTrigger = triggerEl.contains(active);
|
|
7792
|
-
|
|
7793
|
-
const enabled = itemsRef.current.filter((el) => el && !el.disabled);
|
|
7809
|
+
const enabled = getEnabledMenuItems();
|
|
7794
7810
|
if (enabled.length === 0) return;
|
|
7811
|
+
const currentIndex = enabled.findIndex((el) => el === active);
|
|
7812
|
+
const baseIndex = currentIndex >= 0 ? currentIndex : activeIndex;
|
|
7795
7813
|
if (e.key === "ArrowDown") {
|
|
7796
7814
|
e.preventDefault();
|
|
7797
|
-
const next = (
|
|
7798
|
-
|
|
7799
|
-
enabled[next]?.focus();
|
|
7815
|
+
const next = (baseIndex + 1 + enabled.length) % enabled.length;
|
|
7816
|
+
focusMenuItem(next);
|
|
7800
7817
|
} else if (e.key === "ArrowUp") {
|
|
7801
7818
|
e.preventDefault();
|
|
7802
|
-
const prev = (
|
|
7803
|
-
|
|
7804
|
-
enabled[prev]?.focus();
|
|
7819
|
+
const prev = (baseIndex - 1 + enabled.length) % enabled.length;
|
|
7820
|
+
focusMenuItem(prev);
|
|
7805
7821
|
} else if (e.key === "Home") {
|
|
7806
7822
|
e.preventDefault();
|
|
7807
|
-
|
|
7808
|
-
enabled[0]?.focus();
|
|
7823
|
+
focusMenuItem(0);
|
|
7809
7824
|
} else if (e.key === "End") {
|
|
7810
7825
|
e.preventDefault();
|
|
7811
|
-
|
|
7812
|
-
|
|
7826
|
+
focusMenuItem(enabled.length - 1);
|
|
7827
|
+
} else if (e.key === "Escape" && (isInMenu || isOnTrigger)) {
|
|
7828
|
+
e.preventDefault();
|
|
7829
|
+
closeMenu();
|
|
7813
7830
|
}
|
|
7814
7831
|
};
|
|
7815
|
-
document.addEventListener("keydown", handleKeyNav);
|
|
7832
|
+
document.addEventListener("keydown", handleKeyNav, true);
|
|
7816
7833
|
return () => {
|
|
7817
|
-
document.removeEventListener("keydown", handleKeyNav);
|
|
7834
|
+
document.removeEventListener("keydown", handleKeyNav, true);
|
|
7818
7835
|
};
|
|
7819
|
-
}, [open, activeIndex,
|
|
7820
|
-
const closeMenu = import_react14.default.useCallback(() => {
|
|
7821
|
-
setOpen(false);
|
|
7822
|
-
parentMenu?.closeMenu();
|
|
7823
|
-
}, [parentMenu, setOpen]);
|
|
7836
|
+
}, [open, activeIndex, closeMenu, focusMenuItem, getEnabledMenuItems]);
|
|
7824
7837
|
const menuContext = import_react14.default.useMemo(
|
|
7825
7838
|
() => ({
|
|
7826
7839
|
closeMenu,
|
|
@@ -7845,6 +7858,7 @@ var DropdownMenu = ({
|
|
|
7845
7858
|
onClick: () => handleItemClick(item.onClick),
|
|
7846
7859
|
disabled: item.disabled,
|
|
7847
7860
|
role: "menuitem",
|
|
7861
|
+
"data-dropdown-menu-item": "",
|
|
7848
7862
|
tabIndex: -1,
|
|
7849
7863
|
style: {
|
|
7850
7864
|
animationDelay: open ? `${Math.min(index * 20, 200)}ms` : "0ms"
|
|
@@ -7880,13 +7894,13 @@ var DropdownMenu = ({
|
|
|
7880
7894
|
if (e.key === "ArrowDown") {
|
|
7881
7895
|
e.preventDefault();
|
|
7882
7896
|
setOpen(true);
|
|
7883
|
-
requestAnimationFrame(() =>
|
|
7897
|
+
requestAnimationFrame(() => focusMenuItem(0));
|
|
7884
7898
|
} else if (e.key === "ArrowUp") {
|
|
7885
7899
|
e.preventDefault();
|
|
7886
7900
|
setOpen(true);
|
|
7887
7901
|
requestAnimationFrame(() => {
|
|
7888
|
-
const enabled =
|
|
7889
|
-
enabled
|
|
7902
|
+
const enabled = getEnabledMenuItems();
|
|
7903
|
+
focusMenuItem(enabled.length - 1);
|
|
7890
7904
|
});
|
|
7891
7905
|
} else if (e.key === "Escape") {
|
|
7892
7906
|
e.preventDefault();
|
|
@@ -7937,6 +7951,8 @@ var DropdownMenuItem = ({
|
|
|
7937
7951
|
},
|
|
7938
7952
|
disabled,
|
|
7939
7953
|
onMouseDown: (e) => e.preventDefault(),
|
|
7954
|
+
"data-dropdown-menu-item": "",
|
|
7955
|
+
tabIndex: -1,
|
|
7940
7956
|
className: cn(
|
|
7941
7957
|
"flex w-full items-center gap-2 px-3 py-2 text-sm rounded-lg transition-colors group cursor-pointer",
|
|
7942
7958
|
"hover:bg-accent hover:text-accent-foreground",
|
|
@@ -18103,18 +18119,18 @@ function OverlayControls({
|
|
|
18103
18119
|
setControlsVisible(false);
|
|
18104
18120
|
}, autoHideDelay);
|
|
18105
18121
|
};
|
|
18106
|
-
const
|
|
18107
|
-
const
|
|
18122
|
+
const handleMouseMove2 = () => resetTimer();
|
|
18123
|
+
const handleMouseLeave2 = () => {
|
|
18108
18124
|
if (hideTimerRef.current) clearTimeout(hideTimerRef.current);
|
|
18109
18125
|
hideTimerRef.current = setTimeout(() => {
|
|
18110
18126
|
setControlsVisible(false);
|
|
18111
18127
|
}, autoHideDelay);
|
|
18112
18128
|
};
|
|
18113
18129
|
resetTimer();
|
|
18114
|
-
document.addEventListener("mousemove",
|
|
18130
|
+
document.addEventListener("mousemove", handleMouseMove2);
|
|
18115
18131
|
return () => {
|
|
18116
18132
|
if (hideTimerRef.current) clearTimeout(hideTimerRef.current);
|
|
18117
|
-
document.removeEventListener("mousemove",
|
|
18133
|
+
document.removeEventListener("mousemove", handleMouseMove2);
|
|
18118
18134
|
};
|
|
18119
18135
|
}, [autoHide, autoHideDelay, showOnHover]);
|
|
18120
18136
|
const showFeedback = import_react21.default.useCallback((type, value2) => {
|
|
@@ -27219,7 +27235,8 @@ var import_core9 = require("@tiptap/core");
|
|
|
27219
27235
|
var import_react56 = require("@tiptap/react");
|
|
27220
27236
|
|
|
27221
27237
|
// src/components/UEditor/table-dom-utils.ts
|
|
27222
|
-
var
|
|
27238
|
+
var DEFAULT_TABLE_ROW_HEIGHT = 25;
|
|
27239
|
+
var MIN_TABLE_ROW_HEIGHT = DEFAULT_TABLE_ROW_HEIGHT;
|
|
27223
27240
|
var COLUMN_RESIZE_LINE_THICKNESS = 2;
|
|
27224
27241
|
var ROW_RESIZE_LINE_THICKNESS = 2;
|
|
27225
27242
|
var UEDITOR_TABLE_LAYOUT_CHANGE_EVENT = "ueditor-table-layout-change";
|
|
@@ -27705,25 +27722,29 @@ function parseRowHeight(value) {
|
|
|
27705
27722
|
const match = String(value).match(/(\d+(?:\.\d+)?)/);
|
|
27706
27723
|
if (!match) return null;
|
|
27707
27724
|
const parsed = Number.parseFloat(match[1]);
|
|
27708
|
-
return
|
|
27725
|
+
return normalizeRowHeight(parsed);
|
|
27726
|
+
}
|
|
27727
|
+
function normalizeRowHeight(value) {
|
|
27728
|
+
return typeof value === "number" && Number.isFinite(value) && value > 0 ? Math.max(MIN_TABLE_ROW_HEIGHT, Math.round(value)) : null;
|
|
27709
27729
|
}
|
|
27710
27730
|
var UEditorTableRow = import_extension_table_row.default.extend({
|
|
27711
27731
|
addAttributes() {
|
|
27712
27732
|
return {
|
|
27713
27733
|
...this.parent?.(),
|
|
27714
27734
|
rowHeight: {
|
|
27715
|
-
default:
|
|
27735
|
+
default: DEFAULT_TABLE_ROW_HEIGHT,
|
|
27716
27736
|
parseHTML: (element) => {
|
|
27717
27737
|
if (!(element instanceof HTMLElement)) return null;
|
|
27718
27738
|
return parseRowHeight(element.getAttribute("data-row-height")) ?? parseRowHeight(element.style.height);
|
|
27719
27739
|
},
|
|
27720
27740
|
renderHTML: (attributes) => {
|
|
27721
|
-
|
|
27741
|
+
const rowHeight = normalizeRowHeight(attributes.rowHeight);
|
|
27742
|
+
if (!rowHeight) {
|
|
27722
27743
|
return {};
|
|
27723
27744
|
}
|
|
27724
27745
|
return {
|
|
27725
|
-
"data-row-height": String(
|
|
27726
|
-
style: `height: ${
|
|
27746
|
+
"data-row-height": String(rowHeight),
|
|
27747
|
+
style: `height: ${rowHeight}px; min-height: ${rowHeight}px;`
|
|
27727
27748
|
};
|
|
27728
27749
|
}
|
|
27729
27750
|
}
|
|
@@ -27878,7 +27899,362 @@ var letter_spacing_default = LetterSpacing;
|
|
|
27878
27899
|
|
|
27879
27900
|
// src/components/UEditor/table-align.ts
|
|
27880
27901
|
var import_extension_table = require("@tiptap/extension-table");
|
|
27902
|
+
var import_state7 = require("@tiptap/pm/state");
|
|
27903
|
+
var import_tables2 = require("@tiptap/pm/tables");
|
|
27904
|
+
|
|
27905
|
+
// src/components/UEditor/table-column-resize.ts
|
|
27881
27906
|
var import_state6 = require("@tiptap/pm/state");
|
|
27907
|
+
var import_view2 = require("@tiptap/pm/view");
|
|
27908
|
+
var import_tables = require("@tiptap/pm/tables");
|
|
27909
|
+
var DEFAULT_TABLE_COLUMN_WIDTH = 100;
|
|
27910
|
+
var MIN_RESIZED_TABLE_COLUMN_WIDTH = 25;
|
|
27911
|
+
function getDynamicColumnMinWidth(startWidth, fallbackMinWidth) {
|
|
27912
|
+
return Math.max(fallbackMinWidth, Math.round(startWidth / 3));
|
|
27913
|
+
}
|
|
27914
|
+
function setColumnStyle(column, width) {
|
|
27915
|
+
if (width == null) {
|
|
27916
|
+
column.style.width = "";
|
|
27917
|
+
column.style.minWidth = `${DEFAULT_TABLE_COLUMN_WIDTH}px`;
|
|
27918
|
+
return;
|
|
27919
|
+
}
|
|
27920
|
+
column.style.width = `${Math.max(width, MIN_RESIZED_TABLE_COLUMN_WIDTH)}px`;
|
|
27921
|
+
column.style.minWidth = "";
|
|
27922
|
+
}
|
|
27923
|
+
function isTableColumnElement(node) {
|
|
27924
|
+
return node instanceof HTMLElement && node.tagName.toLowerCase() === "col";
|
|
27925
|
+
}
|
|
27926
|
+
function updateDynamicColumns(node, colgroup, table, overrideCol, overrideValue) {
|
|
27927
|
+
let totalWidth = 0;
|
|
27928
|
+
let fixedWidth = true;
|
|
27929
|
+
let nextDOM = colgroup.firstChild;
|
|
27930
|
+
const row = node.firstChild;
|
|
27931
|
+
if (row) {
|
|
27932
|
+
for (let rowCellIndex = 0, col = 0; rowCellIndex < row.childCount; rowCellIndex += 1) {
|
|
27933
|
+
const { colspan, colwidth } = row.child(rowCellIndex).attrs;
|
|
27934
|
+
for (let spanIndex = 0; spanIndex < colspan; spanIndex += 1, col += 1) {
|
|
27935
|
+
const rawWidth = overrideCol === col ? overrideValue : colwidth?.[spanIndex];
|
|
27936
|
+
const width = rawWidth ? Math.max(rawWidth, MIN_RESIZED_TABLE_COLUMN_WIDTH) : null;
|
|
27937
|
+
totalWidth += width ?? DEFAULT_TABLE_COLUMN_WIDTH;
|
|
27938
|
+
if (!width) {
|
|
27939
|
+
fixedWidth = false;
|
|
27940
|
+
}
|
|
27941
|
+
const colElement = isTableColumnElement(nextDOM) ? nextDOM : colgroup.appendChild(document.createElement("col"));
|
|
27942
|
+
setColumnStyle(colElement, width);
|
|
27943
|
+
nextDOM = colElement.nextSibling;
|
|
27944
|
+
}
|
|
27945
|
+
}
|
|
27946
|
+
}
|
|
27947
|
+
while (nextDOM) {
|
|
27948
|
+
const after = nextDOM.nextSibling;
|
|
27949
|
+
nextDOM.parentNode?.removeChild(nextDOM);
|
|
27950
|
+
nextDOM = after;
|
|
27951
|
+
}
|
|
27952
|
+
const hasUserWidth = typeof node.attrs.style === "string" && /\bwidth\s*:/i.test(node.attrs.style);
|
|
27953
|
+
if (fixedWidth && !hasUserWidth) {
|
|
27954
|
+
table.style.width = `${totalWidth}px`;
|
|
27955
|
+
table.style.minWidth = "";
|
|
27956
|
+
} else {
|
|
27957
|
+
table.style.width = "";
|
|
27958
|
+
table.style.minWidth = `${totalWidth}px`;
|
|
27959
|
+
}
|
|
27960
|
+
}
|
|
27961
|
+
var UEditorTableView = class {
|
|
27962
|
+
constructor(node) {
|
|
27963
|
+
this.node = node;
|
|
27964
|
+
this.dom = document.createElement("div");
|
|
27965
|
+
this.dom.className = "tableWrapper";
|
|
27966
|
+
this.table = this.dom.appendChild(document.createElement("table"));
|
|
27967
|
+
if (node.attrs.style) {
|
|
27968
|
+
this.table.style.cssText = node.attrs.style;
|
|
27969
|
+
}
|
|
27970
|
+
this.colgroup = this.table.appendChild(document.createElement("colgroup"));
|
|
27971
|
+
updateDynamicColumns(node, this.colgroup, this.table);
|
|
27972
|
+
this.contentDOM = this.table.appendChild(document.createElement("tbody"));
|
|
27973
|
+
}
|
|
27974
|
+
update(node) {
|
|
27975
|
+
if (node.type !== this.node.type) return false;
|
|
27976
|
+
this.node = node;
|
|
27977
|
+
updateDynamicColumns(node, this.colgroup, this.table);
|
|
27978
|
+
return true;
|
|
27979
|
+
}
|
|
27980
|
+
ignoreMutation(mutation) {
|
|
27981
|
+
const target = mutation.target;
|
|
27982
|
+
const isInsideWrapper = this.dom.contains(target);
|
|
27983
|
+
const isInsideContent = this.contentDOM.contains(target);
|
|
27984
|
+
if (isInsideWrapper && !isInsideContent) {
|
|
27985
|
+
return mutation.type === "attributes" || mutation.type === "childList" || mutation.type === "characterData";
|
|
27986
|
+
}
|
|
27987
|
+
return false;
|
|
27988
|
+
}
|
|
27989
|
+
};
|
|
27990
|
+
function getDraggedWidth(dragging, event) {
|
|
27991
|
+
const offset = event.clientX - dragging.startX;
|
|
27992
|
+
return Math.max(dragging.minWidth, Math.round(dragging.startWidth + offset));
|
|
27993
|
+
}
|
|
27994
|
+
function getCurrentColWidth(view, cellPos, { colspan, colwidth }) {
|
|
27995
|
+
const width = colwidth?.[colwidth.length - 1];
|
|
27996
|
+
if (width) return width;
|
|
27997
|
+
const dom = view.domAtPos(cellPos);
|
|
27998
|
+
const cellElement = dom.node.childNodes[dom.offset];
|
|
27999
|
+
let domWidth = cellElement instanceof HTMLElement ? cellElement.offsetWidth : 0;
|
|
28000
|
+
let parts = Math.max(1, colspan);
|
|
28001
|
+
if (colwidth) {
|
|
28002
|
+
for (let index = 0; index < colspan; index += 1) {
|
|
28003
|
+
const partWidth = colwidth[index];
|
|
28004
|
+
if (partWidth) {
|
|
28005
|
+
domWidth -= partWidth;
|
|
28006
|
+
parts -= 1;
|
|
28007
|
+
}
|
|
28008
|
+
}
|
|
28009
|
+
}
|
|
28010
|
+
return domWidth / Math.max(1, parts);
|
|
28011
|
+
}
|
|
28012
|
+
function domCellAround(target) {
|
|
28013
|
+
let node = target instanceof Node ? target : null;
|
|
28014
|
+
while (node && node.nodeName !== "TD" && node.nodeName !== "TH") {
|
|
28015
|
+
const element = node instanceof Element ? node : null;
|
|
28016
|
+
if (element?.classList.contains("ProseMirror")) return null;
|
|
28017
|
+
node = node.parentNode;
|
|
28018
|
+
}
|
|
28019
|
+
return node instanceof HTMLElement ? node : null;
|
|
28020
|
+
}
|
|
28021
|
+
function edgeCell(view, event, side, handleWidth) {
|
|
28022
|
+
const offset = side === "right" ? -handleWidth : handleWidth;
|
|
28023
|
+
const found2 = view.posAtCoords({
|
|
28024
|
+
left: event.clientX + offset,
|
|
28025
|
+
top: event.clientY
|
|
28026
|
+
});
|
|
28027
|
+
if (!found2) return -1;
|
|
28028
|
+
const $cell = (0, import_tables.cellAround)(view.state.doc.resolve(found2.pos));
|
|
28029
|
+
if (!$cell) return -1;
|
|
28030
|
+
if (side === "right") return $cell.pos;
|
|
28031
|
+
const map = import_tables.TableMap.get($cell.node(-1));
|
|
28032
|
+
const start = $cell.start(-1);
|
|
28033
|
+
const index = map.map.indexOf($cell.pos - start);
|
|
28034
|
+
return index % map.width === 0 ? -1 : start + map.map[index - 1];
|
|
28035
|
+
}
|
|
28036
|
+
function updateHandle(view, value) {
|
|
28037
|
+
view.dispatch(view.state.tr.setMeta(import_tables.columnResizingPluginKey, { setHandle: value }));
|
|
28038
|
+
}
|
|
28039
|
+
function handleMouseMove(view, event, handleWidth, lastColumnResizable) {
|
|
28040
|
+
if (!view.editable) return;
|
|
28041
|
+
const pluginState = import_tables.columnResizingPluginKey.getState(view.state);
|
|
28042
|
+
if (!pluginState || pluginState.dragging) return;
|
|
28043
|
+
const target = domCellAround(event.target);
|
|
28044
|
+
let cell = -1;
|
|
28045
|
+
if (target) {
|
|
28046
|
+
const { left, right } = target.getBoundingClientRect();
|
|
28047
|
+
if (event.clientX - left <= handleWidth) cell = edgeCell(view, event, "left", handleWidth);
|
|
28048
|
+
else if (right - event.clientX <= handleWidth) cell = edgeCell(view, event, "right", handleWidth);
|
|
28049
|
+
}
|
|
28050
|
+
if (cell === pluginState.activeHandle) return;
|
|
28051
|
+
if (!lastColumnResizable && cell !== -1) {
|
|
28052
|
+
const $cell = view.state.doc.resolve(cell);
|
|
28053
|
+
const table = $cell.node(-1);
|
|
28054
|
+
const map = import_tables.TableMap.get(table);
|
|
28055
|
+
const tableStart = $cell.start(-1);
|
|
28056
|
+
const nodeAfter = $cell.nodeAfter;
|
|
28057
|
+
if (!nodeAfter) return;
|
|
28058
|
+
if (map.colCount($cell.pos - tableStart) + nodeAfter.attrs.colspan - 1 === map.width - 1) return;
|
|
28059
|
+
}
|
|
28060
|
+
updateHandle(view, cell);
|
|
28061
|
+
}
|
|
28062
|
+
function handleMouseLeave(view) {
|
|
28063
|
+
if (!view.editable) return;
|
|
28064
|
+
const pluginState = import_tables.columnResizingPluginKey.getState(view.state);
|
|
28065
|
+
if (pluginState && pluginState.activeHandle > -1 && !pluginState.dragging) {
|
|
28066
|
+
updateHandle(view, -1);
|
|
28067
|
+
}
|
|
28068
|
+
}
|
|
28069
|
+
function updateColumnWidth(view, cell, width) {
|
|
28070
|
+
const $cell = view.state.doc.resolve(cell);
|
|
28071
|
+
const table = $cell.node(-1);
|
|
28072
|
+
const map = import_tables.TableMap.get(table);
|
|
28073
|
+
const start = $cell.start(-1);
|
|
28074
|
+
const nodeAfter = $cell.nodeAfter;
|
|
28075
|
+
if (!nodeAfter) return;
|
|
28076
|
+
const col = map.colCount($cell.pos - start) + nodeAfter.attrs.colspan - 1;
|
|
28077
|
+
const tr = view.state.tr;
|
|
28078
|
+
for (let row = 0; row < map.height; row += 1) {
|
|
28079
|
+
const mapIndex = row * map.width + col;
|
|
28080
|
+
if (row && map.map[mapIndex] === map.map[mapIndex - map.width]) continue;
|
|
28081
|
+
const pos = map.map[mapIndex];
|
|
28082
|
+
const cellNode = table.nodeAt(pos);
|
|
28083
|
+
if (!cellNode) continue;
|
|
28084
|
+
const attrs = cellNode.attrs;
|
|
28085
|
+
const index = attrs.colspan === 1 ? 0 : col - map.colCount(pos);
|
|
28086
|
+
if (attrs.colwidth?.[index] === width) continue;
|
|
28087
|
+
const colwidth = attrs.colwidth ? attrs.colwidth.slice() : Array.from({ length: attrs.colspan }, () => 0);
|
|
28088
|
+
colwidth[index] = width;
|
|
28089
|
+
tr.setNodeMarkup(start + pos, null, {
|
|
28090
|
+
...attrs,
|
|
28091
|
+
colwidth
|
|
28092
|
+
});
|
|
28093
|
+
}
|
|
28094
|
+
if (tr.docChanged) view.dispatch(tr);
|
|
28095
|
+
}
|
|
28096
|
+
function getActiveDragging(state) {
|
|
28097
|
+
const dragging = import_tables.columnResizingPluginKey.getState(state)?.dragging;
|
|
28098
|
+
return dragging ? dragging : null;
|
|
28099
|
+
}
|
|
28100
|
+
function getColumnResizeGhost(view) {
|
|
28101
|
+
const doc = view.dom.ownerDocument;
|
|
28102
|
+
let ghost = doc.querySelector("[data-ueditor-column-resize-ghost]");
|
|
28103
|
+
if (!ghost) {
|
|
28104
|
+
ghost = doc.createElement("div");
|
|
28105
|
+
ghost.setAttribute("data-ueditor-column-resize-ghost", "");
|
|
28106
|
+
ghost.style.position = "fixed";
|
|
28107
|
+
ghost.style.zIndex = "99999";
|
|
28108
|
+
ghost.style.pointerEvents = "none";
|
|
28109
|
+
ghost.style.width = "2px";
|
|
28110
|
+
ghost.style.backgroundColor = "var(--primary, #2563eb)";
|
|
28111
|
+
ghost.style.opacity = "1";
|
|
28112
|
+
ghost.style.borderRadius = "9999px";
|
|
28113
|
+
ghost.style.boxShadow = "0 0 0 1px color-mix(in oklch, var(--background, #fff) 80%, transparent)";
|
|
28114
|
+
ghost.style.transform = "translateX(-1px)";
|
|
28115
|
+
ghost.style.willChange = "left";
|
|
28116
|
+
doc.body.appendChild(ghost);
|
|
28117
|
+
}
|
|
28118
|
+
return ghost;
|
|
28119
|
+
}
|
|
28120
|
+
function hideColumnResizeGhost(view) {
|
|
28121
|
+
view.dom.ownerDocument.querySelector("[data-ueditor-column-resize-ghost]")?.remove();
|
|
28122
|
+
}
|
|
28123
|
+
function getTableElementAtCell(view, cell) {
|
|
28124
|
+
const $cell = view.state.doc.resolve(cell);
|
|
28125
|
+
let dom = view.domAtPos($cell.start(-1)).node;
|
|
28126
|
+
while (dom && dom.nodeName !== "TABLE") dom = dom.parentNode;
|
|
28127
|
+
return dom instanceof HTMLTableElement ? dom : null;
|
|
28128
|
+
}
|
|
28129
|
+
function showColumnResizeGhost(view, cell, dragging, width) {
|
|
28130
|
+
const table = getTableElementAtCell(view, cell);
|
|
28131
|
+
if (!table) return;
|
|
28132
|
+
const rect = table.getBoundingClientRect();
|
|
28133
|
+
const left = dragging.startX + width - dragging.startWidth;
|
|
28134
|
+
const ghost = getColumnResizeGhost(view);
|
|
28135
|
+
ghost.style.left = `${left}px`;
|
|
28136
|
+
ghost.style.top = `${rect.top}px`;
|
|
28137
|
+
ghost.style.height = `${rect.height}px`;
|
|
28138
|
+
}
|
|
28139
|
+
function handleMouseDown(view, event, cellMinWidth) {
|
|
28140
|
+
if (!view.editable) return false;
|
|
28141
|
+
const win = view.dom.ownerDocument.defaultView ?? window;
|
|
28142
|
+
const pluginState = import_tables.columnResizingPluginKey.getState(view.state);
|
|
28143
|
+
if (!pluginState || pluginState.activeHandle === -1 || pluginState.dragging) return false;
|
|
28144
|
+
const cell = view.state.doc.nodeAt(pluginState.activeHandle);
|
|
28145
|
+
if (!cell) return false;
|
|
28146
|
+
const attrs = cell.attrs;
|
|
28147
|
+
const width = getCurrentColWidth(view, pluginState.activeHandle, {
|
|
28148
|
+
colspan: attrs.colspan ?? 1,
|
|
28149
|
+
colwidth: attrs.colwidth
|
|
28150
|
+
});
|
|
28151
|
+
const minWidth = getDynamicColumnMinWidth(width, cellMinWidth);
|
|
28152
|
+
const dragging = {
|
|
28153
|
+
startX: event.clientX,
|
|
28154
|
+
startWidth: width,
|
|
28155
|
+
minWidth
|
|
28156
|
+
};
|
|
28157
|
+
view.dispatch(view.state.tr.setMeta(import_tables.columnResizingPluginKey, { setDragging: dragging }));
|
|
28158
|
+
function finish(nextEvent) {
|
|
28159
|
+
win.removeEventListener("mouseup", finish);
|
|
28160
|
+
win.removeEventListener("mousemove", move);
|
|
28161
|
+
const activeDragging = getActiveDragging(view.state);
|
|
28162
|
+
const activeHandle = import_tables.columnResizingPluginKey.getState(view.state)?.activeHandle ?? -1;
|
|
28163
|
+
if (activeDragging && activeHandle > -1) {
|
|
28164
|
+
updateColumnWidth(view, activeHandle, getDraggedWidth(activeDragging, nextEvent));
|
|
28165
|
+
view.dispatch(view.state.tr.setMeta(import_tables.columnResizingPluginKey, { setDragging: null }));
|
|
28166
|
+
}
|
|
28167
|
+
hideColumnResizeGhost(view);
|
|
28168
|
+
}
|
|
28169
|
+
function move(nextEvent) {
|
|
28170
|
+
if (!nextEvent.buttons) return finish(nextEvent);
|
|
28171
|
+
const activeDragging = getActiveDragging(view.state);
|
|
28172
|
+
const activeHandle = import_tables.columnResizingPluginKey.getState(view.state)?.activeHandle ?? -1;
|
|
28173
|
+
if (activeDragging && activeHandle > -1) {
|
|
28174
|
+
showColumnResizeGhost(view, activeHandle, activeDragging, getDraggedWidth(activeDragging, nextEvent));
|
|
28175
|
+
}
|
|
28176
|
+
}
|
|
28177
|
+
showColumnResizeGhost(view, pluginState.activeHandle, dragging, width);
|
|
28178
|
+
win.addEventListener("mouseup", finish);
|
|
28179
|
+
win.addEventListener("mousemove", move);
|
|
28180
|
+
event.preventDefault();
|
|
28181
|
+
return true;
|
|
28182
|
+
}
|
|
28183
|
+
function handleDecorations(state, cell) {
|
|
28184
|
+
const decorations = [];
|
|
28185
|
+
const $cell = state.doc.resolve(cell);
|
|
28186
|
+
const table = $cell.node(-1);
|
|
28187
|
+
if (!table) return import_view2.DecorationSet.empty;
|
|
28188
|
+
const map = import_tables.TableMap.get(table);
|
|
28189
|
+
const start = $cell.start(-1);
|
|
28190
|
+
const nodeAfter = $cell.nodeAfter;
|
|
28191
|
+
if (!nodeAfter) return import_view2.DecorationSet.empty;
|
|
28192
|
+
const col = map.colCount($cell.pos - start) + nodeAfter.attrs.colspan - 1;
|
|
28193
|
+
for (let row = 0; row < map.height; row += 1) {
|
|
28194
|
+
const index = col + row * map.width;
|
|
28195
|
+
if ((col === map.width - 1 || map.map[index] !== map.map[index + 1]) && (row === 0 || map.map[index] !== map.map[index - map.width])) {
|
|
28196
|
+
const cellPos = map.map[index];
|
|
28197
|
+
const cellNode = table.nodeAt(cellPos);
|
|
28198
|
+
if (!cellNode) continue;
|
|
28199
|
+
const pos = start + cellPos + cellNode.nodeSize - 1;
|
|
28200
|
+
const dom = document.createElement("div");
|
|
28201
|
+
dom.className = "column-resize-handle";
|
|
28202
|
+
if (import_tables.columnResizingPluginKey.getState(state)?.dragging) {
|
|
28203
|
+
decorations.push(import_view2.Decoration.node(start + cellPos, start + cellPos + cellNode.nodeSize, { class: "column-resize-dragging" }));
|
|
28204
|
+
}
|
|
28205
|
+
decorations.push(import_view2.Decoration.widget(pos, dom));
|
|
28206
|
+
}
|
|
28207
|
+
}
|
|
28208
|
+
return import_view2.DecorationSet.create(state.doc, decorations);
|
|
28209
|
+
}
|
|
28210
|
+
function dynamicColumnResizing({
|
|
28211
|
+
handleWidth = 5,
|
|
28212
|
+
cellMinWidth = MIN_RESIZED_TABLE_COLUMN_WIDTH,
|
|
28213
|
+
defaultCellMinWidth = DEFAULT_TABLE_COLUMN_WIDTH,
|
|
28214
|
+
View = UEditorTableView,
|
|
28215
|
+
lastColumnResizable = true
|
|
28216
|
+
} = {}) {
|
|
28217
|
+
const plugin = new import_state6.Plugin({
|
|
28218
|
+
key: import_tables.columnResizingPluginKey,
|
|
28219
|
+
state: {
|
|
28220
|
+
init(_, state) {
|
|
28221
|
+
const nodeViews = plugin.spec.props?.nodeViews;
|
|
28222
|
+
const tableName = (0, import_tables.tableNodeTypes)(state.schema).table.name;
|
|
28223
|
+
if (View && nodeViews) {
|
|
28224
|
+
nodeViews[tableName] = (node, view) => new View(node, defaultCellMinWidth, view);
|
|
28225
|
+
}
|
|
28226
|
+
return new import_tables.ResizeState(-1, false);
|
|
28227
|
+
},
|
|
28228
|
+
apply(tr, prev) {
|
|
28229
|
+
return prev.apply(tr);
|
|
28230
|
+
}
|
|
28231
|
+
},
|
|
28232
|
+
props: {
|
|
28233
|
+
attributes: (state) => {
|
|
28234
|
+
const pluginState = import_tables.columnResizingPluginKey.getState(state);
|
|
28235
|
+
return pluginState && pluginState.activeHandle > -1 ? { class: "resize-cursor" } : {};
|
|
28236
|
+
},
|
|
28237
|
+
handleDOMEvents: {
|
|
28238
|
+
mousemove: (view, event) => {
|
|
28239
|
+
handleMouseMove(view, event, handleWidth, lastColumnResizable);
|
|
28240
|
+
},
|
|
28241
|
+
mouseleave: (view) => {
|
|
28242
|
+
handleMouseLeave(view);
|
|
28243
|
+
},
|
|
28244
|
+
mousedown: (view, event) => handleMouseDown(view, event, cellMinWidth)
|
|
28245
|
+
},
|
|
28246
|
+
decorations: (state) => {
|
|
28247
|
+
const pluginState = import_tables.columnResizingPluginKey.getState(state);
|
|
28248
|
+
if (pluginState && pluginState.activeHandle > -1) {
|
|
28249
|
+
return handleDecorations(state, pluginState.activeHandle);
|
|
28250
|
+
}
|
|
28251
|
+
return void 0;
|
|
28252
|
+
},
|
|
28253
|
+
nodeViews: {}
|
|
28254
|
+
}
|
|
28255
|
+
});
|
|
28256
|
+
return plugin;
|
|
28257
|
+
}
|
|
27882
28258
|
|
|
27883
28259
|
// src/components/UEditor/table-align-utils.ts
|
|
27884
28260
|
function findTableNodeInfoAtResolvedPos($pos) {
|
|
@@ -28015,9 +28391,20 @@ var UEditorTable = import_extension_table.Table.extend({
|
|
|
28015
28391
|
};
|
|
28016
28392
|
},
|
|
28017
28393
|
addProseMirrorPlugins() {
|
|
28394
|
+
const isResizable = this.options.resizable && this.editor.isEditable;
|
|
28018
28395
|
return [
|
|
28019
|
-
...
|
|
28020
|
-
|
|
28396
|
+
...isResizable ? [
|
|
28397
|
+
dynamicColumnResizing({
|
|
28398
|
+
handleWidth: this.options.handleWidth,
|
|
28399
|
+
cellMinWidth: this.options.cellMinWidth,
|
|
28400
|
+
defaultCellMinWidth: DEFAULT_TABLE_COLUMN_WIDTH,
|
|
28401
|
+
lastColumnResizable: this.options.lastColumnResizable
|
|
28402
|
+
})
|
|
28403
|
+
] : [],
|
|
28404
|
+
(0, import_tables2.tableEditing)({
|
|
28405
|
+
allowTableNodeSelection: this.options.allowTableNodeSelection
|
|
28406
|
+
}),
|
|
28407
|
+
new import_state7.Plugin({
|
|
28021
28408
|
appendTransaction(_transactions, _oldState, newState) {
|
|
28022
28409
|
const { doc, schema } = newState;
|
|
28023
28410
|
const paragraphType = schema.nodes.paragraph;
|
|
@@ -28502,12 +28889,12 @@ function buildUEditorExtensions({
|
|
|
28502
28889
|
table_row_default,
|
|
28503
28890
|
CustomTableCell.configure({
|
|
28504
28891
|
HTMLAttributes: {
|
|
28505
|
-
class: "border border-
|
|
28892
|
+
class: "border border-black px-2 py-0 min-w-25"
|
|
28506
28893
|
}
|
|
28507
28894
|
}),
|
|
28508
28895
|
CustomTableHeader.configure({
|
|
28509
28896
|
HTMLAttributes: {
|
|
28510
|
-
class: "border border-
|
|
28897
|
+
class: "border border-black px-2 py-0 bg-muted font-semibold min-w-25"
|
|
28511
28898
|
}
|
|
28512
28899
|
}),
|
|
28513
28900
|
import_extension_character_count.default.configure({
|
|
@@ -28799,7 +29186,7 @@ var EditorColorPalette = ({
|
|
|
28799
29186
|
};
|
|
28800
29187
|
|
|
28801
29188
|
// src/components/UEditor/image-commands.ts
|
|
28802
|
-
var
|
|
29189
|
+
var import_state8 = require("@tiptap/pm/state");
|
|
28803
29190
|
var IMAGE_WIDTHS_BY_LAYOUT = {
|
|
28804
29191
|
block: {
|
|
28805
29192
|
sm: 180,
|
|
@@ -28814,7 +29201,7 @@ var IMAGE_WIDTHS_BY_LAYOUT = {
|
|
|
28814
29201
|
};
|
|
28815
29202
|
function isSelectedImage(editor) {
|
|
28816
29203
|
const { selection } = editor.state;
|
|
28817
|
-
return selection instanceof
|
|
29204
|
+
return selection instanceof import_state8.NodeSelection && selection.node.type.name === "image";
|
|
28818
29205
|
}
|
|
28819
29206
|
function toPositiveNumber(value) {
|
|
28820
29207
|
if (typeof value === "number" && Number.isFinite(value) && value > 0) return value;
|
|
@@ -28856,7 +29243,7 @@ function getImagePresetAttributes(editor, width, preset, attrs, pos) {
|
|
|
28856
29243
|
function applyImageLayout(editor, layout) {
|
|
28857
29244
|
const { state, view } = editor;
|
|
28858
29245
|
const { selection, schema } = state;
|
|
28859
|
-
if (!(selection instanceof
|
|
29246
|
+
if (!(selection instanceof import_state8.NodeSelection) || selection.node.type.name !== "image") {
|
|
28860
29247
|
editor.chain().focus().updateAttributes("image", { imageLayout: layout }).run();
|
|
28861
29248
|
return;
|
|
28862
29249
|
}
|
|
@@ -28874,10 +29261,10 @@ function applyImageLayout(editor, layout) {
|
|
|
28874
29261
|
}
|
|
28875
29262
|
}
|
|
28876
29263
|
const resolvedPos = transaction.doc.resolve(Math.min(nextPos + 1, transaction.doc.content.size));
|
|
28877
|
-
transaction = transaction.setSelection(
|
|
29264
|
+
transaction = transaction.setSelection(import_state8.TextSelection.near(resolvedPos));
|
|
28878
29265
|
} else {
|
|
28879
29266
|
const resolvedPos = transaction.doc.resolve(selection.from);
|
|
28880
|
-
transaction = transaction.setSelection(
|
|
29267
|
+
transaction = transaction.setSelection(import_state8.NodeSelection.create(transaction.doc, resolvedPos.pos));
|
|
28881
29268
|
}
|
|
28882
29269
|
view.dispatch(transaction.scrollIntoView());
|
|
28883
29270
|
view.focus();
|
|
@@ -29024,8 +29411,8 @@ var ImageInput = ({ onSubmit, onCancel }) => {
|
|
|
29024
29411
|
};
|
|
29025
29412
|
|
|
29026
29413
|
// src/components/UEditor/table-cell-commands.ts
|
|
29027
|
-
var
|
|
29028
|
-
var
|
|
29414
|
+
var import_state9 = require("@tiptap/pm/state");
|
|
29415
|
+
var import_tables3 = require("@tiptap/pm/tables");
|
|
29029
29416
|
function getCellSelectionPositions(selection) {
|
|
29030
29417
|
const value = selection;
|
|
29031
29418
|
const anchor = value.$anchorCell?.pos;
|
|
@@ -29058,7 +29445,7 @@ function getFocusableCellPos(editor, cellPos) {
|
|
|
29058
29445
|
return node?.isTextblock ? offset + 1 : cellPos + 1;
|
|
29059
29446
|
}
|
|
29060
29447
|
function focusCell(editor, cellPos) {
|
|
29061
|
-
const selection =
|
|
29448
|
+
const selection = import_state9.TextSelection.near(editor.state.doc.resolve(getFocusableCellPos(editor, cellPos)));
|
|
29062
29449
|
editor.view.dispatch(editor.state.tr.setSelection(selection));
|
|
29063
29450
|
editor.view.focus();
|
|
29064
29451
|
}
|
|
@@ -29117,7 +29504,7 @@ function getSelectedTableRect(editor) {
|
|
|
29117
29504
|
if (cellSelection) {
|
|
29118
29505
|
const tableInfo = findTableInfoFromCellPos(editor, cellSelection.anchor);
|
|
29119
29506
|
if (tableInfo) {
|
|
29120
|
-
const map =
|
|
29507
|
+
const map = import_tables3.TableMap.get(tableInfo.table);
|
|
29121
29508
|
const rect = map.rectBetween(
|
|
29122
29509
|
cellSelection.anchor - tableInfo.tableStart,
|
|
29123
29510
|
cellSelection.head - tableInfo.tableStart
|
|
@@ -29130,7 +29517,7 @@ function getSelectedTableRect(editor) {
|
|
|
29130
29517
|
};
|
|
29131
29518
|
}
|
|
29132
29519
|
}
|
|
29133
|
-
return (0,
|
|
29520
|
+
return (0, import_tables3.selectedRect)(editor.state);
|
|
29134
29521
|
}
|
|
29135
29522
|
function parsePixelWidth(value) {
|
|
29136
29523
|
if (!value) return null;
|
|
@@ -29213,7 +29600,7 @@ function runTableCommandAtCellPos(editor, cellPos, command) {
|
|
|
29213
29600
|
function getTableCornerCellPos(editor, activePos) {
|
|
29214
29601
|
const tableInfo = findTableInfoFromCellPos(editor, activePos);
|
|
29215
29602
|
if (!tableInfo) return null;
|
|
29216
|
-
const map =
|
|
29603
|
+
const map = import_tables3.TableMap.get(tableInfo.table);
|
|
29217
29604
|
return tableInfo.tableStart + map.positionAt(map.height - 1, map.width - 1, tableInfo.table);
|
|
29218
29605
|
}
|
|
29219
29606
|
function replaceTableAtCellPos(editor, cellPos, updateTable) {
|
|
@@ -29237,7 +29624,7 @@ function duplicateTableRowAt(editor, rowIndex, cellPos) {
|
|
|
29237
29624
|
}
|
|
29238
29625
|
function clearTableRowAt(editor, rowIndex, cellPos) {
|
|
29239
29626
|
return replaceTableAtCellPos(editor, cellPos, (tableNode) => {
|
|
29240
|
-
const map =
|
|
29627
|
+
const map = import_tables3.TableMap.get(tableNode);
|
|
29241
29628
|
if (rowIndex < 0 || rowIndex >= map.height) return null;
|
|
29242
29629
|
const rows = getTableRows(tableNode).map((rowInfo) => {
|
|
29243
29630
|
const cells = collectChildren(rowInfo.node);
|
|
@@ -29253,7 +29640,7 @@ function clearTableRowAt(editor, rowIndex, cellPos) {
|
|
|
29253
29640
|
}
|
|
29254
29641
|
function duplicateTableColumnAt(editor, columnIndex, cellPos) {
|
|
29255
29642
|
return replaceTableAtCellPos(editor, cellPos, (tableNode) => {
|
|
29256
|
-
const map =
|
|
29643
|
+
const map = import_tables3.TableMap.get(tableNode);
|
|
29257
29644
|
if (columnIndex < 0 || columnIndex >= map.width) return null;
|
|
29258
29645
|
const rows = getTableRows(tableNode).map((rowInfo, rowIndex) => {
|
|
29259
29646
|
const cells = collectChildren(rowInfo.node);
|
|
@@ -29275,7 +29662,7 @@ function duplicateTableColumnAt(editor, columnIndex, cellPos) {
|
|
|
29275
29662
|
}
|
|
29276
29663
|
function clearTableColumnAt(editor, columnIndex, cellPos) {
|
|
29277
29664
|
return replaceTableAtCellPos(editor, cellPos, (tableNode) => {
|
|
29278
|
-
const map =
|
|
29665
|
+
const map = import_tables3.TableMap.get(tableNode);
|
|
29279
29666
|
if (columnIndex < 0 || columnIndex >= map.width) return null;
|
|
29280
29667
|
const rows = getTableRows(tableNode).map((rowInfo) => {
|
|
29281
29668
|
const cells = collectChildren(rowInfo.node);
|
|
@@ -29314,6 +29701,16 @@ function normalizeStyleValue(value) {
|
|
|
29314
29701
|
}
|
|
29315
29702
|
function getDefaultFontFamilies(t) {
|
|
29316
29703
|
return [
|
|
29704
|
+
{ label: "\uAD74\uB9BC", value: '"Gulim", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif' },
|
|
29705
|
+
{ label: "\uAD74\uB9BC\uCCB4", value: '"GulimChe", "Gulim", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif' },
|
|
29706
|
+
{ label: "\uAD81\uC11C", value: '"Gungsuh", "Nanum Myeongjo", serif' },
|
|
29707
|
+
{ label: "\uAD81\uC11C\uCCB4", value: '"GungsuhChe", "Gungsuh", "Nanum Myeongjo", serif' },
|
|
29708
|
+
{ label: "\uB3CB\uC6C0", value: '"Dotum", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif' },
|
|
29709
|
+
{ label: "\uB3CB\uC6C0\uCCB4", value: '"DotumChe", "Dotum", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif' },
|
|
29710
|
+
{ label: "\uBC14\uD0D5", value: '"Batang", "Nanum Myeongjo", serif' },
|
|
29711
|
+
{ label: "\uBC14\uD0D5\uCCB4", value: '"BatangChe", "Batang", "Nanum Myeongjo", serif' },
|
|
29712
|
+
{ label: "\uB9D1\uC740\uACE0\uB515", value: '"Malgun Gothic", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif' },
|
|
29713
|
+
{ label: "\uB098\uB214\uBA85\uC870", value: '"Nanum Myeongjo", "Batang", serif' },
|
|
29317
29714
|
{ label: "Inter", value: '"Inter", "Noto Sans", "Noto Sans CJK KR", "Noto Sans CJK JP", "Segoe UI", sans-serif' },
|
|
29318
29715
|
{ label: "System UI", value: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif' },
|
|
29319
29716
|
{ label: "Roboto", value: '"Roboto", "Noto Sans", "Apple SD Gothic Neo", "Hiragino Kaku Gothic ProN", sans-serif' },
|
|
@@ -29335,13 +29732,21 @@ function getDefaultFontSizes() {
|
|
|
29335
29732
|
{ label: "10", value: "10px" },
|
|
29336
29733
|
{ label: "11", value: "11px" },
|
|
29337
29734
|
{ label: "12", value: "12px" },
|
|
29735
|
+
{ label: "13", value: "13px" },
|
|
29338
29736
|
{ label: "14", value: "14px" },
|
|
29737
|
+
{ label: "15", value: "15px" },
|
|
29339
29738
|
{ label: "16", value: "16px" },
|
|
29739
|
+
{ label: "17", value: "17px" },
|
|
29340
29740
|
{ label: "18", value: "18px" },
|
|
29741
|
+
{ label: "19", value: "19px" },
|
|
29341
29742
|
{ label: "20", value: "20px" },
|
|
29743
|
+
{ label: "21", value: "21px" },
|
|
29342
29744
|
{ label: "22", value: "22px" },
|
|
29745
|
+
{ label: "23", value: "23px" },
|
|
29343
29746
|
{ label: "24", value: "24px" },
|
|
29747
|
+
{ label: "25", value: "25px" },
|
|
29344
29748
|
{ label: "26", value: "26px" },
|
|
29749
|
+
{ label: "27", value: "27px" },
|
|
29345
29750
|
{ label: "28", value: "28px" },
|
|
29346
29751
|
{ label: "36", value: "36px" },
|
|
29347
29752
|
{ label: "48", value: "48px" },
|
|
@@ -29517,10 +29922,15 @@ var EditorToolbar = ({
|
|
|
29517
29922
|
const availableLetterSpacings = import_react62.default.useMemo(() => letterSpacings ?? getDefaultLetterSpacings(), [letterSpacings]);
|
|
29518
29923
|
const currentFontFamilyDisplayValue = currentFontFamily.split(",")[0]?.trim() ?? currentFontFamily;
|
|
29519
29924
|
const currentFontFamilyLabel = availableFontFamilies.find((option) => normalizeStyleValue(option.value) === currentFontFamily)?.label ?? (currentFontFamilyDisplayValue || t("toolbar.fontDefault"));
|
|
29520
|
-
const currentFontSizeLabel = availableFontSizes.find((option) => normalizeStyleValue(option.value) === currentFontSize)?.label ??
|
|
29925
|
+
const currentFontSizeLabel = availableFontSizes.find((option) => normalizeStyleValue(option.value) === currentFontSize)?.label ?? "13";
|
|
29521
29926
|
const currentLineHeightLabel = availableLineHeights.find((option) => normalizeStyleValue(option.value) === currentLineHeight)?.label ?? t("toolbar.lineHeightDefault");
|
|
29522
29927
|
const currentLetterSpacingLabel = availableLetterSpacings.find((option) => normalizeStyleValue(option.value) === currentLetterSpacing)?.label ?? t("toolbar.letterSpacingDefault");
|
|
29523
|
-
const
|
|
29928
|
+
const defaultFontFamily = availableFontFamilies[0];
|
|
29929
|
+
const defaultFontFamilyValue = defaultFontFamily?.value ?? "";
|
|
29930
|
+
const displayedFontFamilyLabel = currentFontFamily ? currentFontFamilyLabel : defaultFontFamily?.label ?? t("toolbar.fontDefault");
|
|
29931
|
+
const displayedFontFamilyValue = currentFontFamily || defaultFontFamilyValue;
|
|
29932
|
+
const displayedFontSizeLabel = currentFontSize ? currentFontSizeLabel : "13";
|
|
29933
|
+
const activeFontSize = currentFontSize || "13px";
|
|
29524
29934
|
const tableCommandAnchorPos = tableCommandAnchorPosRef.current ?? tableAnchorPos ?? void 0;
|
|
29525
29935
|
const insertImageFiles = async (files) => {
|
|
29526
29936
|
if (files.length === 0) return;
|
|
@@ -29558,70 +29968,48 @@ var EditorToolbar = ({
|
|
|
29558
29968
|
] });
|
|
29559
29969
|
}
|
|
29560
29970
|
return /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: "flex flex-wrap items-center gap-0.5 border-b border-border/35 bg-linear-to-r from-muted/25 to-transparent p-1.5", children: [
|
|
29561
|
-
/* @__PURE__ */ (0, import_jsx_runtime86.
|
|
29971
|
+
/* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
|
|
29562
29972
|
DropdownMenu,
|
|
29563
29973
|
{
|
|
29564
29974
|
trigger: /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(ToolbarButton, { onClick: () => {
|
|
29565
|
-
}, title: t("toolbar.fontFamily"), className: "px-1.5 w-auto gap-
|
|
29566
|
-
/* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
|
|
29975
|
+
}, title: t("toolbar.fontFamily"), className: "min-w-0 max-w-40 px-1.5 w-auto gap-1", children: [
|
|
29976
|
+
/* @__PURE__ */ (0, import_jsx_runtime86.jsx)("span", { className: "max-w-28 truncate text-xs font-medium", style: { fontFamily: displayedFontFamilyValue || void 0 }, children: displayedFontFamilyLabel }),
|
|
29567
29977
|
/* @__PURE__ */ (0, import_jsx_runtime86.jsx)(import_lucide_react49.ChevronDown, { className: "h-3 w-3 text-muted-foreground" })
|
|
29568
29978
|
] }),
|
|
29569
29979
|
contentClassName: "max-h-80 overflow-y-auto min-w-56 p-2",
|
|
29570
|
-
children:
|
|
29571
|
-
|
|
29572
|
-
|
|
29573
|
-
|
|
29574
|
-
|
|
29575
|
-
|
|
29576
|
-
|
|
29577
|
-
|
|
29578
|
-
|
|
29579
|
-
|
|
29580
|
-
availableFontFamilies.map((option) => /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
|
|
29581
|
-
DropdownMenuItem,
|
|
29582
|
-
{
|
|
29583
|
-
label: option.label,
|
|
29584
|
-
onClick: () => editor.chain().focus().setFontFamily(option.value).run(),
|
|
29585
|
-
active: normalizeStyleValue(option.value) === currentFontFamily,
|
|
29586
|
-
className: "font-medium"
|
|
29587
|
-
},
|
|
29588
|
-
option.value
|
|
29589
|
-
))
|
|
29590
|
-
]
|
|
29980
|
+
children: availableFontFamilies.map((option) => /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
|
|
29981
|
+
DropdownMenuItem,
|
|
29982
|
+
{
|
|
29983
|
+
label: option.label,
|
|
29984
|
+
onClick: () => editor.chain().focus().setFontFamily(option.value).run(),
|
|
29985
|
+
active: normalizeStyleValue(option.value) === (currentFontFamily || normalizeStyleValue(defaultFontFamilyValue)),
|
|
29986
|
+
className: "font-medium"
|
|
29987
|
+
},
|
|
29988
|
+
option.value
|
|
29989
|
+
))
|
|
29591
29990
|
}
|
|
29592
29991
|
),
|
|
29593
|
-
/* @__PURE__ */ (0, import_jsx_runtime86.
|
|
29992
|
+
/* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
|
|
29594
29993
|
DropdownMenu,
|
|
29595
29994
|
{
|
|
29596
29995
|
trigger: /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(ToolbarButton, { onClick: () => {
|
|
29597
|
-
}, title: t("toolbar.fontSize"), className: "px-1.5 w-auto gap-
|
|
29996
|
+
}, title: t("toolbar.fontSize"), className: "px-1.5 w-auto gap-1", children: [
|
|
29598
29997
|
/* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: "flex items-center gap-0.5", children: [
|
|
29599
29998
|
/* @__PURE__ */ (0, import_jsx_runtime86.jsx)(import_lucide_react49.ChevronsUpDown, { className: "h-3 w-3 text-muted-foreground", strokeWidth: 2.5 }),
|
|
29600
|
-
/* @__PURE__ */ (0, import_jsx_runtime86.jsx)("span", { className: "text-xs font-
|
|
29999
|
+
/* @__PURE__ */ (0, import_jsx_runtime86.jsx)("span", { className: "min-w-4 text-center text-xs font-semibold leading-none", children: displayedFontSizeLabel })
|
|
29601
30000
|
] }),
|
|
29602
30001
|
/* @__PURE__ */ (0, import_jsx_runtime86.jsx)(import_lucide_react49.ChevronDown, { className: "h-3 w-3 text-muted-foreground" })
|
|
29603
30002
|
] }),
|
|
29604
30003
|
contentClassName: "max-h-80 overflow-y-auto min-w-32 p-2",
|
|
29605
|
-
children:
|
|
29606
|
-
|
|
29607
|
-
|
|
29608
|
-
|
|
29609
|
-
|
|
29610
|
-
|
|
29611
|
-
|
|
29612
|
-
|
|
29613
|
-
|
|
29614
|
-
),
|
|
29615
|
-
availableFontSizes.map((option) => /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
|
|
29616
|
-
DropdownMenuItem,
|
|
29617
|
-
{
|
|
29618
|
-
label: option.label,
|
|
29619
|
-
onClick: () => editor.chain().focus().setFontSize(option.value).run(),
|
|
29620
|
-
active: normalizeStyleValue(option.value) === currentFontSize
|
|
29621
|
-
},
|
|
29622
|
-
option.value
|
|
29623
|
-
))
|
|
29624
|
-
]
|
|
30004
|
+
children: availableFontSizes.map((option) => /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
|
|
30005
|
+
DropdownMenuItem,
|
|
30006
|
+
{
|
|
30007
|
+
label: option.label,
|
|
30008
|
+
onClick: () => editor.chain().focus().setFontSize(option.value).run(),
|
|
30009
|
+
active: normalizeStyleValue(option.value) === activeFontSize
|
|
30010
|
+
},
|
|
30011
|
+
option.value
|
|
30012
|
+
))
|
|
29625
30013
|
}
|
|
29626
30014
|
),
|
|
29627
30015
|
/* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(
|
|
@@ -30336,12 +30724,12 @@ var EditorToolbar = ({
|
|
|
30336
30724
|
// src/components/UEditor/menus.tsx
|
|
30337
30725
|
var import_react64 = require("react");
|
|
30338
30726
|
var import_react65 = require("@tiptap/react");
|
|
30339
|
-
var
|
|
30727
|
+
var import_tables5 = require("@tiptap/pm/tables");
|
|
30340
30728
|
var import_react_dom8 = require("react-dom");
|
|
30341
30729
|
var import_lucide_react50 = require("lucide-react");
|
|
30342
30730
|
|
|
30343
30731
|
// src/components/UEditor/table-formula-commands.ts
|
|
30344
|
-
var
|
|
30732
|
+
var import_tables4 = require("@tiptap/pm/tables");
|
|
30345
30733
|
|
|
30346
30734
|
// src/components/UEditor/table-formula.ts
|
|
30347
30735
|
var CELL_ADDRESS_RE = /^([A-Z]+)([1-9]\d*)$/i;
|
|
@@ -30875,7 +31263,7 @@ function getSelectionTableCellLabel(editor) {
|
|
|
30875
31263
|
const tableNode = $from.node(tableDepth);
|
|
30876
31264
|
const tableStart = $from.start(tableDepth);
|
|
30877
31265
|
const relativeCellPos = $from.before(cellDepth) - tableStart;
|
|
30878
|
-
const rect = safeFindCell2(
|
|
31266
|
+
const rect = safeFindCell2(import_tables4.TableMap.get(tableNode), relativeCellPos);
|
|
30879
31267
|
if (!rect) return null;
|
|
30880
31268
|
return `${indexToColumnName(rect.left)}${rect.top + 1}`;
|
|
30881
31269
|
}
|
|
@@ -30891,7 +31279,7 @@ function createCellDisplayContent(cellNode, displayValue) {
|
|
|
30891
31279
|
return [paragraphType.create(null, cellNode.type.schema.text(displayValue))];
|
|
30892
31280
|
}
|
|
30893
31281
|
function buildTableValueMap(tableNode) {
|
|
30894
|
-
const map =
|
|
31282
|
+
const map = import_tables4.TableMap.get(tableNode);
|
|
30895
31283
|
const values = /* @__PURE__ */ new Map();
|
|
30896
31284
|
for (const rowInfo of getTableRows2(tableNode)) {
|
|
30897
31285
|
for (const entry of rowInfo.cells) {
|
|
@@ -30913,8 +31301,8 @@ function setSelectedTableCellFormula(editor, formula) {
|
|
|
30913
31301
|
const normalized = normalizeFormulaInput(formula);
|
|
30914
31302
|
const { state, view } = editor;
|
|
30915
31303
|
if (!normalized) {
|
|
30916
|
-
const clearedFormula = (0,
|
|
30917
|
-
const clearedValue2 = (0,
|
|
31304
|
+
const clearedFormula = (0, import_tables4.setCellAttr)("formula", null)(state, view.dispatch.bind(view));
|
|
31305
|
+
const clearedValue2 = (0, import_tables4.setCellAttr)("computedValue", null)(editor.state, view.dispatch.bind(view));
|
|
30918
31306
|
if (clearedFormula || clearedValue2) {
|
|
30919
31307
|
recalculateActiveTableFormulas(editor);
|
|
30920
31308
|
view.focus();
|
|
@@ -30923,8 +31311,8 @@ function setSelectedTableCellFormula(editor, formula) {
|
|
|
30923
31311
|
}
|
|
30924
31312
|
return false;
|
|
30925
31313
|
}
|
|
30926
|
-
const appliedFormula = (0,
|
|
30927
|
-
const clearedValue = (0,
|
|
31314
|
+
const appliedFormula = (0, import_tables4.setCellAttr)("formula", normalized)(state, view.dispatch.bind(view));
|
|
31315
|
+
const clearedValue = (0, import_tables4.setCellAttr)("computedValue", null)(editor.state, view.dispatch.bind(view));
|
|
30928
31316
|
if (appliedFormula || clearedValue) {
|
|
30929
31317
|
recalculateActiveTableFormulas(editor);
|
|
30930
31318
|
view.focus();
|
|
@@ -30939,7 +31327,7 @@ function clearSelectedTableCellFormula(editor) {
|
|
|
30939
31327
|
function setSelectedTableCellNumberFormat(editor, numberFormat) {
|
|
30940
31328
|
const value = numberFormat && numberFormat !== "text" ? numberFormat : null;
|
|
30941
31329
|
const { state, view } = editor;
|
|
30942
|
-
const applied = (0,
|
|
31330
|
+
const applied = (0, import_tables4.setCellAttr)("numberFormat", value)(state, view.dispatch.bind(view));
|
|
30943
31331
|
if (!applied) return false;
|
|
30944
31332
|
recalculateSelectedTable(editor);
|
|
30945
31333
|
view.focus();
|
|
@@ -31011,7 +31399,7 @@ function promoteFormulaTextInTableNode(tableNode) {
|
|
|
31011
31399
|
function recalculateTableNode(tableNode, options) {
|
|
31012
31400
|
const promoted = promoteFormulaTextInTableNode(tableNode);
|
|
31013
31401
|
tableNode = promoted.tableNode;
|
|
31014
|
-
const map =
|
|
31402
|
+
const map = import_tables4.TableMap.get(tableNode);
|
|
31015
31403
|
const values = buildTableValueMap(tableNode);
|
|
31016
31404
|
const formulaEntries = /* @__PURE__ */ new Map();
|
|
31017
31405
|
let changed = false;
|
|
@@ -31082,7 +31470,7 @@ function recalculateTableNode(tableNode, options) {
|
|
|
31082
31470
|
return tableNode.type.create(tableNode.attrs, rows);
|
|
31083
31471
|
}
|
|
31084
31472
|
function recalculateSelectedTable(editor) {
|
|
31085
|
-
const rect = (0,
|
|
31473
|
+
const rect = (0, import_tables4.selectedRect)(editor.state);
|
|
31086
31474
|
const tableNode = rect.table;
|
|
31087
31475
|
const nextTable = recalculateTableNode(tableNode);
|
|
31088
31476
|
if (!nextTable) return false;
|
|
@@ -31137,7 +31525,7 @@ var import_jsx_runtime87 = require("react/jsx-runtime");
|
|
|
31137
31525
|
function applyTableCellBackground(editor, color) {
|
|
31138
31526
|
const value = color || null;
|
|
31139
31527
|
const { state, view } = editor;
|
|
31140
|
-
const applied = (0,
|
|
31528
|
+
const applied = (0, import_tables5.setCellAttr)("backgroundColor", value)(state, view.dispatch.bind(view));
|
|
31141
31529
|
if (applied) {
|
|
31142
31530
|
view.focus();
|
|
31143
31531
|
return;
|
|
@@ -31147,7 +31535,7 @@ function applyTableCellBackground(editor, color) {
|
|
|
31147
31535
|
function applyTableCellAttribute(editor, name, value, options = {}) {
|
|
31148
31536
|
const shouldFocus = options.focus ?? true;
|
|
31149
31537
|
const { state, view } = editor;
|
|
31150
|
-
const applied = (0,
|
|
31538
|
+
const applied = (0, import_tables5.setCellAttr)(name, value)(state, view.dispatch.bind(view));
|
|
31151
31539
|
if (applied) {
|
|
31152
31540
|
if (shouldFocus) view.focus();
|
|
31153
31541
|
return;
|
|
@@ -31211,7 +31599,7 @@ var BubbleMenuContent = ({
|
|
|
31211
31599
|
const currentCellNumberFormat = normalizeStyleValue(editor.getAttributes("tableCell").numberFormat || editor.getAttributes("tableHeader").numberFormat) || "text";
|
|
31212
31600
|
const currentCellBorderStyle = editor.getAttributes("tableCell").borderStyle || editor.getAttributes("tableHeader").borderStyle || "solid";
|
|
31213
31601
|
const currentCellBorderWidth = editor.getAttributes("tableCell").borderWidth || editor.getAttributes("tableHeader").borderWidth || "1px";
|
|
31214
|
-
const isInTable2 = (0,
|
|
31602
|
+
const isInTable2 = (0, import_tables5.isInTable)(editor.state);
|
|
31215
31603
|
const canMergeCells = isInTable2 && editor.can().mergeCells();
|
|
31216
31604
|
const canSplitCell = isInTable2 && editor.can().splitCell();
|
|
31217
31605
|
const currentFontSize = normalizeStyleValue(textStyleAttrs.fontSize);
|
|
@@ -31838,9 +32226,14 @@ var CustomBubbleMenu = ({
|
|
|
31838
32226
|
}) => {
|
|
31839
32227
|
const SHOW_DELAY_MS = 180;
|
|
31840
32228
|
const BUBBLE_MENU_OFFSET = 16;
|
|
32229
|
+
const BUBBLE_MENU_ESTIMATED_HEIGHT = 44;
|
|
31841
32230
|
const [isVisible, setIsVisible] = (0, import_react64.useState)(false);
|
|
31842
32231
|
const [linkInputOpen, setLinkInputOpen] = (0, import_react64.useState)(false);
|
|
31843
|
-
const [position, setPosition] = (0, import_react64.useState)({
|
|
32232
|
+
const [position, setPosition] = (0, import_react64.useState)({
|
|
32233
|
+
top: 0,
|
|
32234
|
+
left: 0,
|
|
32235
|
+
placement: "top"
|
|
32236
|
+
});
|
|
31844
32237
|
const menuRef = (0, import_react64.useRef)(null);
|
|
31845
32238
|
const keepOpenRef = (0, import_react64.useRef)(false);
|
|
31846
32239
|
const showTimeoutRef = (0, import_react64.useRef)(null);
|
|
@@ -31897,12 +32290,18 @@ var CustomBubbleMenu = ({
|
|
|
31897
32290
|
return;
|
|
31898
32291
|
}
|
|
31899
32292
|
const viewportPadding = 8;
|
|
32293
|
+
const menuHeight = menuRef.current?.getBoundingClientRect().height || BUBBLE_MENU_ESTIMATED_HEIGHT;
|
|
32294
|
+
const editorTop = view.dom.getBoundingClientRect().top;
|
|
32295
|
+
const selectionTop = Math.min(start.top, end.top);
|
|
32296
|
+
const selectionBottom = Math.max(start.bottom, end.bottom);
|
|
32297
|
+
const hasRoomAboveEditor = selectionTop - BUBBLE_MENU_OFFSET - menuHeight >= editorTop + viewportPadding;
|
|
32298
|
+
const placement = hasRoomAboveEditor ? "top" : "bottom";
|
|
31900
32299
|
const left = Math.min(
|
|
31901
32300
|
window.innerWidth - viewportPadding,
|
|
31902
32301
|
Math.max(viewportPadding, (start.left + end.left) / 2)
|
|
31903
32302
|
);
|
|
31904
|
-
const top = Math.max(viewportPadding,
|
|
31905
|
-
setPosition({ top, left });
|
|
32303
|
+
const top = placement === "top" ? Math.max(viewportPadding, selectionTop - BUBBLE_MENU_OFFSET) : Math.min(window.innerHeight - viewportPadding, selectionBottom + BUBBLE_MENU_OFFSET);
|
|
32304
|
+
setPosition({ top, left, placement });
|
|
31906
32305
|
if (keepOpenRef.current) {
|
|
31907
32306
|
clearShowTimeout();
|
|
31908
32307
|
setIsVisible(true);
|
|
@@ -31947,7 +32346,7 @@ var CustomBubbleMenu = ({
|
|
|
31947
32346
|
style: {
|
|
31948
32347
|
top: `${position.top}px`,
|
|
31949
32348
|
left: `${position.left}px`,
|
|
31950
|
-
transform: "translate(-50%, -100%)"
|
|
32349
|
+
transform: position.placement === "top" ? "translate(-50%, -100%)" : "translate(-50%, 0)"
|
|
31951
32350
|
},
|
|
31952
32351
|
onMouseDown: (e) => {
|
|
31953
32352
|
const target = e.target;
|
|
@@ -35669,7 +36068,7 @@ if (typeof WeakMap != "undefined") {
|
|
|
35669
36068
|
return cache[cachePos++] = value;
|
|
35670
36069
|
};
|
|
35671
36070
|
}
|
|
35672
|
-
var
|
|
36071
|
+
var TableMap4 = class {
|
|
35673
36072
|
constructor(width, height, map, problems) {
|
|
35674
36073
|
this.width = width;
|
|
35675
36074
|
this.height = height;
|
|
@@ -35806,7 +36205,7 @@ function computeMap(table) {
|
|
|
35806
36205
|
pos++;
|
|
35807
36206
|
}
|
|
35808
36207
|
if (width === 0 || height === 0) (problems || (problems = [])).push({ type: "zero_sized" });
|
|
35809
|
-
const tableMap = new
|
|
36208
|
+
const tableMap = new TableMap4(width, height, map, problems);
|
|
35810
36209
|
let badWidths = false;
|
|
35811
36210
|
for (let i = 0; !badWidths && i < colWidths.length; i += 2) if (colWidths[i] != null && colWidths[i + 1] < height) badWidths = true;
|
|
35812
36211
|
if (badWidths) findBadColWidths(tableMap, colWidths, table);
|
|
@@ -35863,7 +36262,7 @@ function freshColWidth(attrs) {
|
|
|
35863
36262
|
for (let i = 0; i < attrs.colspan; i++) result.push(0);
|
|
35864
36263
|
return result;
|
|
35865
36264
|
}
|
|
35866
|
-
function
|
|
36265
|
+
function tableNodeTypes2(schema) {
|
|
35867
36266
|
let result = schema.cached.tableNodeTypes;
|
|
35868
36267
|
if (!result) {
|
|
35869
36268
|
result = schema.cached.tableNodeTypes = {};
|
|
@@ -35875,7 +36274,7 @@ function tableNodeTypes(schema) {
|
|
|
35875
36274
|
return result;
|
|
35876
36275
|
}
|
|
35877
36276
|
var tableEditingKey = new PluginKey5("selectingCells");
|
|
35878
|
-
function
|
|
36277
|
+
function cellAround2($pos) {
|
|
35879
36278
|
for (let d = $pos.depth - 1; d > 0; d--) if ($pos.node(d).type.spec.tableRole == "row") return $pos.node(0).resolve($pos.before(d + 1));
|
|
35880
36279
|
return null;
|
|
35881
36280
|
}
|
|
@@ -35888,7 +36287,7 @@ function selectionCell(state) {
|
|
|
35888
36287
|
const sel = state.selection;
|
|
35889
36288
|
if ("$anchorCell" in sel && sel.$anchorCell) return sel.$anchorCell.pos > sel.$headCell.pos ? sel.$anchorCell : sel.$headCell;
|
|
35890
36289
|
else if ("node" in sel && sel.node && sel.node.type.spec.tableRole == "cell") return sel.$anchor;
|
|
35891
|
-
const $cell =
|
|
36290
|
+
const $cell = cellAround2(sel.$head) || cellNear(sel.$head);
|
|
35892
36291
|
if ($cell) return $cell;
|
|
35893
36292
|
throw new RangeError(`No cell found around position ${sel.head}`);
|
|
35894
36293
|
}
|
|
@@ -35902,7 +36301,7 @@ function cellNear($pos) {
|
|
|
35902
36301
|
if (role == "cell" || role == "header_cell") return $pos.doc.resolve(pos - before.nodeSize);
|
|
35903
36302
|
}
|
|
35904
36303
|
}
|
|
35905
|
-
function
|
|
36304
|
+
function pointsAtCell2($pos) {
|
|
35906
36305
|
return $pos.parent.type.spec.tableRole == "row" && !!$pos.nodeAfter;
|
|
35907
36306
|
}
|
|
35908
36307
|
function inSameTable($cellA, $cellB) {
|
|
@@ -35910,7 +36309,7 @@ function inSameTable($cellA, $cellB) {
|
|
|
35910
36309
|
}
|
|
35911
36310
|
function nextCell($pos, axis, dir) {
|
|
35912
36311
|
const table = $pos.node(-1);
|
|
35913
|
-
const map =
|
|
36312
|
+
const map = TableMap4.get(table);
|
|
35914
36313
|
const tableStart = $pos.start(-1);
|
|
35915
36314
|
const moved = map.nextCell($pos.pos - tableStart, axis, dir);
|
|
35916
36315
|
return moved == null ? null : $pos.node(0).resolve(tableStart + moved);
|
|
@@ -35930,7 +36329,7 @@ function removeColSpan(attrs, pos, n = 1) {
|
|
|
35930
36329
|
var CellSelection = class CellSelection2 extends Selection {
|
|
35931
36330
|
constructor($anchorCell, $headCell = $anchorCell) {
|
|
35932
36331
|
const table = $anchorCell.node(-1);
|
|
35933
|
-
const map =
|
|
36332
|
+
const map = TableMap4.get(table);
|
|
35934
36333
|
const tableStart = $anchorCell.start(-1);
|
|
35935
36334
|
const rect = map.rectBetween($anchorCell.pos - tableStart, $headCell.pos - tableStart);
|
|
35936
36335
|
const doc = $anchorCell.node(0);
|
|
@@ -35949,7 +36348,7 @@ var CellSelection = class CellSelection2 extends Selection {
|
|
|
35949
36348
|
map(doc, mapping) {
|
|
35950
36349
|
const $anchorCell = doc.resolve(mapping.map(this.$anchorCell.pos));
|
|
35951
36350
|
const $headCell = doc.resolve(mapping.map(this.$headCell.pos));
|
|
35952
|
-
if (
|
|
36351
|
+
if (pointsAtCell2($anchorCell) && pointsAtCell2($headCell) && inSameTable($anchorCell, $headCell)) {
|
|
35953
36352
|
const tableChanged = this.$anchorCell.node(-1) != $anchorCell.node(-1);
|
|
35954
36353
|
if (tableChanged && this.isRowSelection()) return CellSelection2.rowSelection($anchorCell, $headCell);
|
|
35955
36354
|
else if (tableChanged && this.isColSelection()) return CellSelection2.colSelection($anchorCell, $headCell);
|
|
@@ -35959,7 +36358,7 @@ var CellSelection = class CellSelection2 extends Selection {
|
|
|
35959
36358
|
}
|
|
35960
36359
|
content() {
|
|
35961
36360
|
const table = this.$anchorCell.node(-1);
|
|
35962
|
-
const map =
|
|
36361
|
+
const map = TableMap4.get(table);
|
|
35963
36362
|
const tableStart = this.$anchorCell.start(-1);
|
|
35964
36363
|
const rect = map.rectBetween(this.$anchorCell.pos - tableStart, this.$headCell.pos - tableStart);
|
|
35965
36364
|
const seen = {};
|
|
@@ -36013,7 +36412,7 @@ var CellSelection = class CellSelection2 extends Selection {
|
|
|
36013
36412
|
}
|
|
36014
36413
|
forEachCell(f) {
|
|
36015
36414
|
const table = this.$anchorCell.node(-1);
|
|
36016
|
-
const map =
|
|
36415
|
+
const map = TableMap4.get(table);
|
|
36017
36416
|
const tableStart = this.$anchorCell.start(-1);
|
|
36018
36417
|
const cells = map.cellsInRect(map.rectBetween(this.$anchorCell.pos - tableStart, this.$headCell.pos - tableStart));
|
|
36019
36418
|
for (let i = 0; i < cells.length; i++) f(table.nodeAt(cells[i]), tableStart + cells[i]);
|
|
@@ -36028,7 +36427,7 @@ var CellSelection = class CellSelection2 extends Selection {
|
|
|
36028
36427
|
}
|
|
36029
36428
|
static colSelection($anchorCell, $headCell = $anchorCell) {
|
|
36030
36429
|
const table = $anchorCell.node(-1);
|
|
36031
|
-
const map =
|
|
36430
|
+
const map = TableMap4.get(table);
|
|
36032
36431
|
const tableStart = $anchorCell.start(-1);
|
|
36033
36432
|
const anchorRect = map.findCell($anchorCell.pos - tableStart);
|
|
36034
36433
|
const headRect = map.findCell($headCell.pos - tableStart);
|
|
@@ -36044,7 +36443,7 @@ var CellSelection = class CellSelection2 extends Selection {
|
|
|
36044
36443
|
}
|
|
36045
36444
|
isRowSelection() {
|
|
36046
36445
|
const table = this.$anchorCell.node(-1);
|
|
36047
|
-
const map =
|
|
36446
|
+
const map = TableMap4.get(table);
|
|
36048
36447
|
const tableStart = this.$anchorCell.start(-1);
|
|
36049
36448
|
const anchorLeft = map.colCount(this.$anchorCell.pos - tableStart);
|
|
36050
36449
|
const headLeft = map.colCount(this.$headCell.pos - tableStart);
|
|
@@ -36058,7 +36457,7 @@ var CellSelection = class CellSelection2 extends Selection {
|
|
|
36058
36457
|
}
|
|
36059
36458
|
static rowSelection($anchorCell, $headCell = $anchorCell) {
|
|
36060
36459
|
const table = $anchorCell.node(-1);
|
|
36061
|
-
const map =
|
|
36460
|
+
const map = TableMap4.get(table);
|
|
36062
36461
|
const tableStart = $anchorCell.start(-1);
|
|
36063
36462
|
const anchorRect = map.findCell($anchorCell.pos - tableStart);
|
|
36064
36463
|
const headRect = map.findCell($headCell.pos - tableStart);
|
|
@@ -36107,7 +36506,7 @@ var CellBookmark = class CellBookmark2 {
|
|
|
36107
36506
|
};
|
|
36108
36507
|
var fixTablesKey = new PluginKey5("fix-tables");
|
|
36109
36508
|
function convertTableNodeToArrayOfRows(tableNode) {
|
|
36110
|
-
const map =
|
|
36509
|
+
const map = TableMap4.get(tableNode);
|
|
36111
36510
|
const rows = [];
|
|
36112
36511
|
const rowCount = map.height;
|
|
36113
36512
|
const colCount$1 = map.width;
|
|
@@ -36138,7 +36537,7 @@ function convertTableNodeToArrayOfRows(tableNode) {
|
|
|
36138
36537
|
}
|
|
36139
36538
|
function convertArrayOfRowsToTableNode(tableNode, arrayOfNodes) {
|
|
36140
36539
|
const newRows = [];
|
|
36141
|
-
const map =
|
|
36540
|
+
const map = TableMap4.get(tableNode);
|
|
36142
36541
|
const rowCount = map.height;
|
|
36143
36542
|
const colCount$1 = map.width;
|
|
36144
36543
|
for (let rowIndex = 0; rowIndex < rowCount; rowIndex++) {
|
|
@@ -36187,7 +36586,7 @@ function findParentNode(predicate, $pos) {
|
|
|
36187
36586
|
function getCellsInColumn(columnIndex, selection) {
|
|
36188
36587
|
const table = findTable(selection.$from);
|
|
36189
36588
|
if (!table) return;
|
|
36190
|
-
const map =
|
|
36589
|
+
const map = TableMap4.get(table.node);
|
|
36191
36590
|
if (columnIndex < 0 || columnIndex > map.width - 1) return;
|
|
36192
36591
|
return map.cellsInRect({
|
|
36193
36592
|
left: columnIndex,
|
|
@@ -36208,7 +36607,7 @@ function getCellsInColumn(columnIndex, selection) {
|
|
|
36208
36607
|
function getCellsInRow(rowIndex, selection) {
|
|
36209
36608
|
const table = findTable(selection.$from);
|
|
36210
36609
|
if (!table) return;
|
|
36211
|
-
const map =
|
|
36610
|
+
const map = TableMap4.get(table.node);
|
|
36212
36611
|
if (rowIndex < 0 || rowIndex > map.height - 1) return;
|
|
36213
36612
|
return map.cellsInRect({
|
|
36214
36613
|
left: 0,
|
|
@@ -36337,7 +36736,7 @@ function moveColumn(moveColParams) {
|
|
|
36337
36736
|
const newTable = moveTableColumn$1(table.node, indexesOriginColumn, indexesTargetColumn, 0);
|
|
36338
36737
|
tr.replaceWith(table.pos, table.pos + table.node.nodeSize, newTable);
|
|
36339
36738
|
if (!select) return true;
|
|
36340
|
-
const map =
|
|
36739
|
+
const map = TableMap4.get(newTable);
|
|
36341
36740
|
const start = table.start;
|
|
36342
36741
|
const index = targetIndex;
|
|
36343
36742
|
const lastCell = map.positionAt(map.height - 1, index, newTable);
|
|
@@ -36365,7 +36764,7 @@ function moveRow(moveRowParams) {
|
|
|
36365
36764
|
const newTable = moveTableRow$1(table.node, indexesOriginRow, indexesTargetRow, 0);
|
|
36366
36765
|
tr.replaceWith(table.pos, table.pos + table.node.nodeSize, newTable);
|
|
36367
36766
|
if (!select) return true;
|
|
36368
|
-
const map =
|
|
36767
|
+
const map = TableMap4.get(newTable);
|
|
36369
36768
|
const start = table.start;
|
|
36370
36769
|
const index = targetIndex;
|
|
36371
36770
|
const lastCell = map.positionAt(index, map.width - 1, newTable);
|
|
@@ -36385,7 +36784,7 @@ function selectedRect3(state) {
|
|
|
36385
36784
|
const $pos = selectionCell(state);
|
|
36386
36785
|
const table = $pos.node(-1);
|
|
36387
36786
|
const tableStart = $pos.start(-1);
|
|
36388
|
-
const map =
|
|
36787
|
+
const map = TableMap4.get(table);
|
|
36389
36788
|
return {
|
|
36390
36789
|
...sel instanceof CellSelection ? map.rectBetween(sel.$anchorCell.pos - tableStart, sel.$headCell.pos - tableStart) : map.findCell($pos.pos - tableStart),
|
|
36391
36790
|
tableStart,
|
|
@@ -36397,7 +36796,7 @@ function deprecated_toggleHeader(type) {
|
|
|
36397
36796
|
return function(state, dispatch) {
|
|
36398
36797
|
if (!isInTable(state)) return false;
|
|
36399
36798
|
if (dispatch) {
|
|
36400
|
-
const types =
|
|
36799
|
+
const types = tableNodeTypes2(state.schema);
|
|
36401
36800
|
const rect = selectedRect3(state), tr = state.tr;
|
|
36402
36801
|
const cells = rect.map.cellsInRect(type == "column" ? {
|
|
36403
36802
|
left: rect.left,
|
|
@@ -36437,7 +36836,7 @@ function toggleHeader(type, options) {
|
|
|
36437
36836
|
return function(state, dispatch) {
|
|
36438
36837
|
if (!isInTable(state)) return false;
|
|
36439
36838
|
if (dispatch) {
|
|
36440
|
-
const types =
|
|
36839
|
+
const types = tableNodeTypes2(state.schema);
|
|
36441
36840
|
const rect = selectedRect3(state), tr = state.tr;
|
|
36442
36841
|
const isHeaderRowEnabled = isHeaderEnabledByType("row", rect, types);
|
|
36443
36842
|
const isHeaderColumnEnabled = isHeaderEnabledByType("column", rect, types);
|
|
@@ -36472,7 +36871,7 @@ function deleteCellSelection(state, dispatch) {
|
|
|
36472
36871
|
if (!(sel instanceof CellSelection)) return false;
|
|
36473
36872
|
if (dispatch) {
|
|
36474
36873
|
const tr = state.tr;
|
|
36475
|
-
const baseContent =
|
|
36874
|
+
const baseContent = tableNodeTypes2(state.schema).cell.createAndFill().content;
|
|
36476
36875
|
sel.forEachCell((cell, pos) => {
|
|
36477
36876
|
if (!cell.content.eq(baseContent)) tr.replace(tr.mapping.map(pos + 1), tr.mapping.map(pos + cell.nodeSize - 1), new Slice(baseContent, 0, 0));
|
|
36478
36877
|
});
|
|
@@ -36583,13 +36982,13 @@ function atEndOfCell(view, axis, dir) {
|
|
|
36583
36982
|
}
|
|
36584
36983
|
return null;
|
|
36585
36984
|
}
|
|
36586
|
-
var
|
|
36985
|
+
var columnResizingPluginKey2 = new PluginKey5("tableColumnResizing");
|
|
36587
36986
|
|
|
36588
36987
|
// src/components/UEditor/table-controls.tsx
|
|
36589
36988
|
var import_lucide_react53 = require("lucide-react");
|
|
36590
36989
|
|
|
36591
36990
|
// src/components/UEditor/table-layout-model.ts
|
|
36592
|
-
var FALLBACK_TABLE_ROW_HEIGHT =
|
|
36991
|
+
var FALLBACK_TABLE_ROW_HEIGHT = DEFAULT_TABLE_ROW_HEIGHT;
|
|
36593
36992
|
var FALLBACK_TABLE_COLUMN_WIDTH = 160;
|
|
36594
36993
|
function getVisibleTableBounds(layout) {
|
|
36595
36994
|
const left = Math.max(layout.tableLeft, layout.wrapperLeft);
|
|
@@ -36671,7 +37070,7 @@ function buildLogicalColumnMetrics({
|
|
|
36671
37070
|
tableLeft,
|
|
36672
37071
|
tableWidth
|
|
36673
37072
|
}) {
|
|
36674
|
-
const map =
|
|
37073
|
+
const map = TableMap4.get(tableInfo.node);
|
|
36675
37074
|
const fallbackWidth = metricOrFallback(tableWidth / map.width, FALLBACK_TABLE_COLUMN_WIDTH);
|
|
36676
37075
|
const firstRow = tableElement.rows.item(0);
|
|
36677
37076
|
const visualColumns = [];
|
|
@@ -36724,7 +37123,7 @@ function buildLogicalRowMetrics({
|
|
|
36724
37123
|
tableHeight,
|
|
36725
37124
|
cornerCell
|
|
36726
37125
|
}) {
|
|
36727
|
-
const map =
|
|
37126
|
+
const map = TableMap4.get(tableInfo.node);
|
|
36728
37127
|
const fallbackHeight = metricOrFallback(tableHeight / map.height, FALLBACK_TABLE_ROW_HEIGHT);
|
|
36729
37128
|
const visualRows = [];
|
|
36730
37129
|
const seenCellPositions = /* @__PURE__ */ new Set();
|
|
@@ -36778,7 +37177,7 @@ function buildTableControlLayout(editor, surface, cell) {
|
|
|
36778
37177
|
if (rows.length === 0 || !tableInfo || !(cornerCell instanceof HTMLTableCellElement)) {
|
|
36779
37178
|
return null;
|
|
36780
37179
|
}
|
|
36781
|
-
const map =
|
|
37180
|
+
const map = TableMap4.get(tableInfo.node);
|
|
36782
37181
|
const surfaceRect = surface.getBoundingClientRect();
|
|
36783
37182
|
const tableRect = table.getBoundingClientRect();
|
|
36784
37183
|
const wrapperElement = table.closest(".tableWrapper");
|
|
@@ -37412,7 +37811,7 @@ function TableControls({ editor, containerRef }) {
|
|
|
37412
37811
|
const handleSurfaceMouseMove = (event) => {
|
|
37413
37812
|
updateHoverState(event);
|
|
37414
37813
|
};
|
|
37415
|
-
const
|
|
37814
|
+
const handleMouseLeave2 = () => {
|
|
37416
37815
|
if (dragStateRef.current) return;
|
|
37417
37816
|
setHoverState(DEFAULT_TABLE_HOVER_STATE);
|
|
37418
37817
|
};
|
|
@@ -37422,7 +37821,7 @@ function TableControls({ editor, containerRef }) {
|
|
|
37422
37821
|
syncFromCell(cell ?? getSelectedCell(editor));
|
|
37423
37822
|
};
|
|
37424
37823
|
proseMirror.addEventListener("mouseover", handleMouseOver);
|
|
37425
|
-
proseMirror.addEventListener("mouseleave",
|
|
37824
|
+
proseMirror.addEventListener("mouseleave", handleMouseLeave2);
|
|
37426
37825
|
proseMirror.addEventListener("click", handleFocusIn);
|
|
37427
37826
|
proseMirror.addEventListener("mouseup", handleFocusIn);
|
|
37428
37827
|
proseMirror.addEventListener("focusin", handleFocusIn);
|
|
@@ -37436,7 +37835,7 @@ function TableControls({ editor, containerRef }) {
|
|
|
37436
37835
|
syncFromSelection();
|
|
37437
37836
|
return () => {
|
|
37438
37837
|
proseMirror.removeEventListener("mouseover", handleMouseOver);
|
|
37439
|
-
proseMirror.removeEventListener("mouseleave",
|
|
37838
|
+
proseMirror.removeEventListener("mouseleave", handleMouseLeave2);
|
|
37440
37839
|
proseMirror.removeEventListener("click", handleFocusIn);
|
|
37441
37840
|
proseMirror.removeEventListener("mouseup", handleFocusIn);
|
|
37442
37841
|
proseMirror.removeEventListener("focusin", handleFocusIn);
|
|
@@ -37535,7 +37934,7 @@ function TableControls({ editor, containerRef }) {
|
|
|
37535
37934
|
document.body.style.cursor = "grabbing";
|
|
37536
37935
|
}, []);
|
|
37537
37936
|
import_react66.default.useEffect(() => {
|
|
37538
|
-
const
|
|
37937
|
+
const handleMouseMove2 = (event) => {
|
|
37539
37938
|
const dragState = dragStateRef.current;
|
|
37540
37939
|
const activeLayout = layoutRef.current;
|
|
37541
37940
|
const surface = containerRef.current;
|
|
@@ -37614,11 +38013,11 @@ function TableControls({ editor, containerRef }) {
|
|
|
37614
38013
|
}
|
|
37615
38014
|
clearDrag();
|
|
37616
38015
|
};
|
|
37617
|
-
window.addEventListener("mousemove",
|
|
38016
|
+
window.addEventListener("mousemove", handleMouseMove2);
|
|
37618
38017
|
window.addEventListener("mouseup", handleMouseUp);
|
|
37619
38018
|
window.addEventListener("blur", clearDrag);
|
|
37620
38019
|
return () => {
|
|
37621
|
-
window.removeEventListener("mousemove",
|
|
38020
|
+
window.removeEventListener("mousemove", handleMouseMove2);
|
|
37622
38021
|
window.removeEventListener("mouseup", handleMouseUp);
|
|
37623
38022
|
window.removeEventListener("blur", clearDrag);
|
|
37624
38023
|
};
|
|
@@ -37906,6 +38305,10 @@ var UEDITOR_PROSEMIRROR_CLASS_NAME = cn(
|
|
|
37906
38305
|
"[&_th]:px-2",
|
|
37907
38306
|
"[&_th]:py-0",
|
|
37908
38307
|
"[&_th_p]:my-0",
|
|
38308
|
+
"[&_td[colwidth]]:min-w-0",
|
|
38309
|
+
"[&_th[colwidth]]:min-w-0",
|
|
38310
|
+
"[&_td[data-colwidth]]:min-w-0",
|
|
38311
|
+
"[&_th[data-colwidth]]:min-w-0",
|
|
37909
38312
|
"[&_.selectedCell]:after:content-['']",
|
|
37910
38313
|
"[&_.selectedCell]:after:absolute",
|
|
37911
38314
|
"[&_.selectedCell]:after:inset-0",
|
|
@@ -37935,6 +38338,7 @@ var UEDITOR_PROSEMIRROR_CLASS_NAME = cn(
|
|
|
37935
38338
|
"[&_.column-resize-handle]:after:content-['']",
|
|
37936
38339
|
"[&.resize-cursor_.column-resize-handle]:opacity-100",
|
|
37937
38340
|
"[&.resize-cursor_.column-resize-handle]:after:bg-primary",
|
|
38341
|
+
"[&_.column-resize-dragging]:min-w-0",
|
|
37938
38342
|
"[&.resize-cursor]:cursor-col-resize",
|
|
37939
38343
|
"[&.resize-row-cursor]:cursor-row-resize",
|
|
37940
38344
|
"[&_img.ProseMirror-selectednode]:ring-2",
|
|
@@ -38007,55 +38411,12 @@ function useTableRowResize({
|
|
|
38007
38411
|
clearAllTableResizeHover,
|
|
38008
38412
|
scheduleTableLayoutSync
|
|
38009
38413
|
}) {
|
|
38010
|
-
const commitFrameRef = (0, import_react67.useRef)(null);
|
|
38011
38414
|
const stateRef = (0, import_react67.useRef)(null);
|
|
38012
|
-
const commitPreview = import_react67.default.useCallback(() => {
|
|
38013
|
-
if (!editor) return;
|
|
38014
|
-
const state = stateRef.current;
|
|
38015
|
-
if (!state) return;
|
|
38016
|
-
const nextHeight = state.pendingHeight;
|
|
38017
|
-
if (nextHeight === state.previewHeight) {
|
|
38018
|
-
document.body.style.cursor = "row-resize";
|
|
38019
|
-
showRowGuide(state.tableElement, state.rowElement, state.cellElement);
|
|
38020
|
-
scheduleTableLayoutSync();
|
|
38021
|
-
return;
|
|
38022
|
-
}
|
|
38023
|
-
state.previewHeight = nextHeight;
|
|
38024
|
-
const tr = editor.view.state.tr;
|
|
38025
|
-
tr.setNodeMarkup(state.rowPos, void 0, {
|
|
38026
|
-
...state.rowNode.attrs,
|
|
38027
|
-
rowHeight: nextHeight
|
|
38028
|
-
});
|
|
38029
|
-
tr.setMeta("addToHistory", false);
|
|
38030
|
-
editor.view.dispatch(tr);
|
|
38031
|
-
state.rowNode = editor.view.state.doc.nodeAt(state.rowPos) ?? state.rowNode;
|
|
38032
|
-
const rowIndex = state.rowElement.rowIndex;
|
|
38033
|
-
if (rowIndex >= 0) {
|
|
38034
|
-
const refreshedRow = state.tableElement.rows.item(rowIndex);
|
|
38035
|
-
if (refreshedRow instanceof HTMLTableRowElement) {
|
|
38036
|
-
state.rowElement = refreshedRow;
|
|
38037
|
-
const refreshedCell = refreshedRow.cells.item(state.cellIndex);
|
|
38038
|
-
if (refreshedCell instanceof HTMLTableCellElement) {
|
|
38039
|
-
state.cellElement = refreshedCell;
|
|
38040
|
-
}
|
|
38041
|
-
}
|
|
38042
|
-
}
|
|
38043
|
-
document.body.style.cursor = "row-resize";
|
|
38044
|
-
showRowGuide(state.tableElement, state.rowElement, state.cellElement);
|
|
38045
|
-
scheduleTableLayoutSync();
|
|
38046
|
-
}, [editor, scheduleTableLayoutSync, showRowGuide]);
|
|
38047
|
-
const scheduleCommit = import_react67.default.useCallback(() => {
|
|
38048
|
-
if (commitFrameRef.current !== null) return;
|
|
38049
|
-
commitFrameRef.current = window.requestAnimationFrame(() => {
|
|
38050
|
-
commitFrameRef.current = null;
|
|
38051
|
-
commitPreview();
|
|
38052
|
-
});
|
|
38053
|
-
}, [commitPreview]);
|
|
38054
38415
|
const syncActiveGuide = import_react67.default.useCallback(() => {
|
|
38055
38416
|
const state = stateRef.current;
|
|
38056
38417
|
if (!state) return false;
|
|
38057
38418
|
setHoveredTableCell(state.cellElement);
|
|
38058
|
-
showRowGuide(state.tableElement, state.rowElement, state.cellElement);
|
|
38419
|
+
showRowGuide(state.tableElement, state.rowElement, state.cellElement, state.pendingHeight);
|
|
38059
38420
|
return true;
|
|
38060
38421
|
}, [setHoveredTableCell, showRowGuide]);
|
|
38061
38422
|
const isResizing = import_react67.default.useCallback(() => stateRef.current !== null, []);
|
|
@@ -38079,7 +38440,7 @@ function useTableRowResize({
|
|
|
38079
38440
|
previewHeight: startHeight,
|
|
38080
38441
|
pendingHeight: startHeight
|
|
38081
38442
|
};
|
|
38082
|
-
showRowGuide(table, row, cell);
|
|
38443
|
+
showRowGuide(table, row, cell, startHeight);
|
|
38083
38444
|
document.body.style.cursor = "row-resize";
|
|
38084
38445
|
event.preventDefault();
|
|
38085
38446
|
event.stopPropagation();
|
|
@@ -38094,13 +38455,14 @@ function useTableRowResize({
|
|
|
38094
38455
|
);
|
|
38095
38456
|
if (nextHeight === state.pendingHeight) {
|
|
38096
38457
|
document.body.style.cursor = "row-resize";
|
|
38097
|
-
showRowGuide(state.tableElement, state.rowElement, state.cellElement);
|
|
38458
|
+
showRowGuide(state.tableElement, state.rowElement, state.cellElement, state.pendingHeight);
|
|
38098
38459
|
return;
|
|
38099
38460
|
}
|
|
38100
38461
|
state.pendingHeight = nextHeight;
|
|
38462
|
+
state.previewHeight = nextHeight;
|
|
38101
38463
|
document.body.style.cursor = "row-resize";
|
|
38102
|
-
|
|
38103
|
-
}, [
|
|
38464
|
+
showRowGuide(state.tableElement, state.rowElement, state.cellElement, nextHeight);
|
|
38465
|
+
}, [showRowGuide]);
|
|
38104
38466
|
const handlePointerUp = import_react67.default.useCallback((event) => {
|
|
38105
38467
|
if (!editor) return;
|
|
38106
38468
|
const state = stateRef.current;
|
|
@@ -38110,16 +38472,10 @@ function useTableRowResize({
|
|
|
38110
38472
|
Math.round(state.startHeight + (event.clientY - state.startY))
|
|
38111
38473
|
);
|
|
38112
38474
|
state.pendingHeight = nextHeight;
|
|
38113
|
-
|
|
38114
|
-
window.cancelAnimationFrame(commitFrameRef.current);
|
|
38115
|
-
commitFrameRef.current = null;
|
|
38116
|
-
}
|
|
38117
|
-
commitPreview();
|
|
38118
|
-
const latestState = stateRef.current ?? state;
|
|
38119
|
-
const rowNode = editor.view.state.doc.nodeAt(latestState.rowPos) ?? latestState.rowNode;
|
|
38475
|
+
const rowNode = editor.view.state.doc.nodeAt(state.rowPos) ?? state.rowNode;
|
|
38120
38476
|
if (rowNode.attrs.rowHeight !== nextHeight) {
|
|
38121
38477
|
const tr = editor.view.state.tr;
|
|
38122
|
-
tr.setNodeMarkup(
|
|
38478
|
+
tr.setNodeMarkup(state.rowPos, void 0, {
|
|
38123
38479
|
...rowNode.attrs,
|
|
38124
38480
|
rowHeight: nextHeight
|
|
38125
38481
|
});
|
|
@@ -38130,13 +38486,9 @@ function useTableRowResize({
|
|
|
38130
38486
|
clearHoveredTableCell();
|
|
38131
38487
|
clearAllTableResizeHover();
|
|
38132
38488
|
scheduleTableLayoutSync();
|
|
38133
|
-
}, [clearAllTableResizeHover, clearHoveredTableCell,
|
|
38489
|
+
}, [clearAllTableResizeHover, clearHoveredTableCell, editor, scheduleTableLayoutSync]);
|
|
38134
38490
|
const cancelResize = import_react67.default.useCallback(() => {
|
|
38135
38491
|
if (!stateRef.current) return;
|
|
38136
|
-
if (commitFrameRef.current !== null) {
|
|
38137
|
-
window.cancelAnimationFrame(commitFrameRef.current);
|
|
38138
|
-
commitFrameRef.current = null;
|
|
38139
|
-
}
|
|
38140
38492
|
stateRef.current = null;
|
|
38141
38493
|
document.body.style.cursor = "";
|
|
38142
38494
|
clearHoveredTableCell();
|
|
@@ -38144,10 +38496,6 @@ function useTableRowResize({
|
|
|
38144
38496
|
scheduleTableLayoutSync();
|
|
38145
38497
|
}, [clearAllTableResizeHover, clearHoveredTableCell, scheduleTableLayoutSync]);
|
|
38146
38498
|
const cleanup = import_react67.default.useCallback(() => {
|
|
38147
|
-
if (commitFrameRef.current !== null) {
|
|
38148
|
-
window.cancelAnimationFrame(commitFrameRef.current);
|
|
38149
|
-
commitFrameRef.current = null;
|
|
38150
|
-
}
|
|
38151
38499
|
stateRef.current = null;
|
|
38152
38500
|
document.body.style.cursor = "";
|
|
38153
38501
|
}, []);
|
|
@@ -38257,13 +38605,15 @@ function useUEditorTableInteractions(editor, editable = true) {
|
|
|
38257
38605
|
getProseMirrorElement()?.classList.add("resize-cursor");
|
|
38258
38606
|
setEditorResizeCursor("col-resize");
|
|
38259
38607
|
}, [getProseMirrorElement, setEditorResizeCursor]);
|
|
38260
|
-
const showRowGuide = import_react68.default.useCallback((table, row, cell) => {
|
|
38608
|
+
const showRowGuide = import_react68.default.useCallback((table, row, cell, previewHeight) => {
|
|
38261
38609
|
const surface = editorContentRef.current;
|
|
38262
38610
|
const guide = tableRowGuideRef.current;
|
|
38263
38611
|
if (!surface || !guide) return;
|
|
38264
38612
|
const metrics = getRelativeBoundaryMetrics(surface, table, row, cell);
|
|
38613
|
+
const rowRect = row.getBoundingClientRect();
|
|
38614
|
+
const previewBottom = typeof previewHeight === "number" ? metrics.rowBottom - rowRect.height + previewHeight : metrics.rowBottom;
|
|
38265
38615
|
guide.style.left = `${metrics.left}px`;
|
|
38266
|
-
guide.style.top = `${
|
|
38616
|
+
guide.style.top = `${previewBottom - ROW_RESIZE_LINE_THICKNESS / 2}px`;
|
|
38267
38617
|
guide.style.width = `${metrics.width}px`;
|
|
38268
38618
|
guide.style.height = `${ROW_RESIZE_LINE_THICKNESS}px`;
|
|
38269
38619
|
guide.style.opacity = "1";
|
|
@@ -38475,7 +38825,7 @@ var import_react70 = require("@tiptap/react");
|
|
|
38475
38825
|
var import_lucide_react54 = require("lucide-react");
|
|
38476
38826
|
|
|
38477
38827
|
// src/components/UEditor/preview-html.ts
|
|
38478
|
-
var
|
|
38828
|
+
var DEFAULT_TABLE_COLUMN_WIDTH2 = 100;
|
|
38479
38829
|
var TIPTAP_TABLE_MIN_COLUMN_WIDTH = 25;
|
|
38480
38830
|
function parsePixelWidth2(value) {
|
|
38481
38831
|
if (!value) return null;
|
|
@@ -38502,7 +38852,7 @@ function getCellWidths(cell) {
|
|
|
38502
38852
|
const width = parsePixelWidth2(cell.getAttribute("width")) ?? parseStyleWidth(cell.style);
|
|
38503
38853
|
if (!width) return null;
|
|
38504
38854
|
const colspan = getCellColspan(cell);
|
|
38505
|
-
return Array.from({ length: colspan }, () => Math.max(
|
|
38855
|
+
return Array.from({ length: colspan }, () => Math.max(DEFAULT_TABLE_COLUMN_WIDTH2, Math.round(width / colspan)));
|
|
38506
38856
|
}
|
|
38507
38857
|
function getColumnCount(table) {
|
|
38508
38858
|
const colCount = table.querySelectorAll("colgroup > col").length;
|
|
@@ -38517,7 +38867,7 @@ function getColumnCount(table) {
|
|
|
38517
38867
|
function resolveColumnWidths(table) {
|
|
38518
38868
|
const columnCount = getColumnCount(table);
|
|
38519
38869
|
if (columnCount <= 0) return [];
|
|
38520
|
-
const widths = Array.from({ length: columnCount }, () =>
|
|
38870
|
+
const widths = Array.from({ length: columnCount }, () => DEFAULT_TABLE_COLUMN_WIDTH2);
|
|
38521
38871
|
const cols = Array.from(table.querySelectorAll("colgroup > col"));
|
|
38522
38872
|
cols.slice(0, columnCount).forEach((col, index) => {
|
|
38523
38873
|
const width = parsePixelWidth2(col.getAttribute("width")) ?? parseStyleWidth(col.style);
|
|
@@ -38551,11 +38901,10 @@ function resolveExplicitRowHeight(row) {
|
|
|
38551
38901
|
const height = parsePixelWidth2(cell.getAttribute("height")) ?? parseStyleHeight(cell.style);
|
|
38552
38902
|
return height ? Math.max(maxHeight, height) : maxHeight;
|
|
38553
38903
|
}, 0);
|
|
38554
|
-
return cellHeight ? Math.max(MIN_TABLE_ROW_HEIGHT, cellHeight) :
|
|
38904
|
+
return cellHeight ? Math.max(MIN_TABLE_ROW_HEIGHT, cellHeight) : DEFAULT_TABLE_ROW_HEIGHT;
|
|
38555
38905
|
}
|
|
38556
38906
|
function normalizePreviewRowHeight(row) {
|
|
38557
38907
|
const rowHeight = resolveExplicitRowHeight(row);
|
|
38558
|
-
if (!rowHeight) return;
|
|
38559
38908
|
row.style.height = `${rowHeight}px`;
|
|
38560
38909
|
row.style.minHeight = `${rowHeight}px`;
|
|
38561
38910
|
Array.from(row.cells).forEach((cell) => {
|
|
@@ -38987,17 +39336,6 @@ function buildTableMenuItems(t, editor, onInsertTable) {
|
|
|
38987
39336
|
label: t("menubar.row"),
|
|
38988
39337
|
disabled: !inTable,
|
|
38989
39338
|
items: [
|
|
38990
|
-
{
|
|
38991
|
-
type: "action",
|
|
38992
|
-
label: t("menubar.addRowBefore"),
|
|
38993
|
-
onClick: () => editor.chain().focus().addRowBefore().run()
|
|
38994
|
-
},
|
|
38995
|
-
{
|
|
38996
|
-
type: "action",
|
|
38997
|
-
label: t("menubar.addRowAfter"),
|
|
38998
|
-
onClick: () => editor.chain().focus().addRowAfter().run()
|
|
38999
|
-
},
|
|
39000
|
-
{ type: "separator" },
|
|
39001
39339
|
{
|
|
39002
39340
|
type: "action",
|
|
39003
39341
|
label: t("menubar.deleteRow"),
|
|
@@ -39011,17 +39349,6 @@ function buildTableMenuItems(t, editor, onInsertTable) {
|
|
|
39011
39349
|
label: t("menubar.column"),
|
|
39012
39350
|
disabled: !inTable,
|
|
39013
39351
|
items: [
|
|
39014
|
-
{
|
|
39015
|
-
type: "action",
|
|
39016
|
-
label: t("menubar.addColumnBefore"),
|
|
39017
|
-
onClick: () => editor.chain().focus().addColumnBefore().run()
|
|
39018
|
-
},
|
|
39019
|
-
{
|
|
39020
|
-
type: "action",
|
|
39021
|
-
label: t("menubar.addColumnAfter"),
|
|
39022
|
-
onClick: () => editor.chain().focus().addColumnAfter().run()
|
|
39023
|
-
},
|
|
39024
|
-
{ type: "separator" },
|
|
39025
39352
|
{
|
|
39026
39353
|
type: "action",
|
|
39027
39354
|
label: t("menubar.deleteColumn"),
|
|
@@ -39357,8 +39684,8 @@ var MenuBar = ({
|
|
|
39357
39684
|
};
|
|
39358
39685
|
|
|
39359
39686
|
// src/components/UEditor/table-formula-range-picker.ts
|
|
39360
|
-
var
|
|
39361
|
-
var
|
|
39687
|
+
var import_state10 = require("@tiptap/pm/state");
|
|
39688
|
+
var import_tables6 = require("@tiptap/pm/tables");
|
|
39362
39689
|
function getCellText2(cellNode) {
|
|
39363
39690
|
return cellNode.textBetween(0, cellNode.content.size, "\n").trim();
|
|
39364
39691
|
}
|
|
@@ -39413,7 +39740,7 @@ function getPickedCellLabel(view, target, tablePos) {
|
|
|
39413
39740
|
const domPos = view.posAtDOM(cell, 0);
|
|
39414
39741
|
const tableInfo = findTableForPos(view, domPos);
|
|
39415
39742
|
if (!tableInfo || tableInfo.pos !== tablePos) return null;
|
|
39416
|
-
const map =
|
|
39743
|
+
const map = import_tables6.TableMap.get(tableInfo.node);
|
|
39417
39744
|
const relativeCellPos = getCellRelativePosFromDomPos2(map, tableInfo.start, domPos);
|
|
39418
39745
|
if (relativeCellPos == null) return null;
|
|
39419
39746
|
const rect = map.findCell(relativeCellPos);
|
|
@@ -39435,7 +39762,7 @@ function replacePickedLabel(view, pickState, nextLabel, currentCell) {
|
|
|
39435
39762
|
}
|
|
39436
39763
|
let tr = view.state.tr.insertText(nextLabel, pickState.insertedFrom, pickState.insertedTo);
|
|
39437
39764
|
const nextTo = pickState.insertedFrom + nextLabel.length;
|
|
39438
|
-
tr = tr.setSelection(
|
|
39765
|
+
tr = tr.setSelection(import_state10.TextSelection.create(tr.doc, nextTo));
|
|
39439
39766
|
view.dispatch(tr);
|
|
39440
39767
|
return {
|
|
39441
39768
|
...pickState,
|
|
@@ -39452,7 +39779,7 @@ function beginFormulaRangePick(view, event) {
|
|
|
39452
39779
|
if (!picked || picked.cell === formulaCell.cellDom) return null;
|
|
39453
39780
|
const { from, to } = view.state.selection;
|
|
39454
39781
|
let tr = view.state.tr.insertText(picked.label, from, to);
|
|
39455
|
-
tr = tr.setSelection(
|
|
39782
|
+
tr = tr.setSelection(import_state10.TextSelection.create(tr.doc, from + picked.label.length));
|
|
39456
39783
|
view.dispatch(tr);
|
|
39457
39784
|
view.focus();
|
|
39458
39785
|
event.preventDefault();
|