lix/mnote
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

git save current version as 0.02

Browse Source
This commit is contained in:
liaibo
2025-11-29 09:35:36 +08:00
parent d350b02fba
commit e5ae2c173e
4 changed files with 217 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
wolai-frontend/src/app/globals.css
+5
View File
@@ -407,4 +407,9 @@
.wolai-media__resize-handle.is-dragging {
background: rgba(37, 99, 235, 0.85);
}
/* 提升 Luckysheet 内联编辑浮层的层级，避免被全屏遮罩挡住 */
.luckysheet-input-box,
#luckysheet-rich-text-editor {
z-index: 100 !important;
}
}
wolai-frontend/src/app/tables/[tableId]/view/page.tsx
+2 -2
View File
@@ -13,11 +13,11 @@ export default async function TableViewerPage({ params, searchParams }: TableVie
const resolvedSearch = await searchParams;
const tableId = resolvedParams.tableId;
const embedMode = resolvedSearch?.embed === "1";
const allowEditing = resolvedSearch?.readonly !== "1";
return (
<div className={embedMode ? "min-h-screen bg-transparent" : "min-h-screen bg-white"}>
<HeadlessTableViewer tableId={tableId} embed={embedMode} />
<HeadlessTableViewer tableId={tableId} embed={embedMode} editable={allowEditing} />
</div>
);
}
wolai-frontend/src/components/online-table/FullScreenTableEditor.tsx
+67 -9
View File
@@ -41,6 +41,15 @@ const isPrintableKey = (event: KeyboardEvent) => {
return event.key === "Process" || event.key === "Unidentified";
};
const isInlineEditorVisible = () => {
const inputBox = document.getElementById("luckysheet-input-box");
if (!inputBox) {
return false;
}
const style = window.getComputedStyle(inputBox);
return style.top !== "-10000px" && style.display !== "none";
};
const isElementInsideEditorToolbar = (element: HTMLElement | null) => {
if (!element) return false;
if (element.closest(".luckysheet-wa-editor")) {
@@ -209,11 +218,23 @@ const FullScreenTableEditor: React.FC<FullScreenTableEditorProps> = ({ tableId,
}, [isLuckysheetReady]);
const focusLuckysheetEditor = useCallback(() => {
requestAnimationFrame(() => {
const applyFocus = () => {
const editor = document.getElementById("luckysheet-rich-text-editor");
if (editor && typeof editor.focus === "function") {
editor.focus();
const selection = window.getSelection();
if (selection && editor.childNodes.length > 0) {
const range = document.createRange();
range.selectNodeContents(editor);
range.collapse(false);
selection.removeAllRanges();
selection.addRange(range);
}
}
};
requestAnimationFrame(() => {
applyFocus();
setTimeout(applyFocus, 0);
});
}, []);
@@ -325,18 +346,53 @@ const FullScreenTableEditor: React.FC<FullScreenTableEditorProps> = ({ tableId,
if (!isSingleCellSelection(range)) {
return;
}
setTimeout(() => {
const editor = document.getElementById("luckysheet-rich-text-editor");
if (editor && document.activeElement === editor) {
return;
}
luckysheetInstance.enterEditMode();
focusLuckysheetEditor();
}, 0);
setTimeout(() => {
const editor = document.getElementById("luckysheet-rich-text-editor");
if (editor && document.activeElement === editor && isInlineEditorVisible()) {
return;
}
luckysheetInstance.enterEditMode();
focusLuckysheetEditor();
}, 0);
},
[focusLuckysheetEditor, isSingleCellSelection],
);
useEffect(() => {
if (!isLuckysheetReady) {
return;
}
const container = document.getElementById(LUCKY_SHEET_CONTAINER_ID);
if (!container) {
return;
}
const handlePointerUp = (event: PointerEvent | MouseEvent | TouchEvent) => {
const target = event.target instanceof Node ? event.target : null;
if (target && !container.contains(target)) {
return;
}
requestAnimationFrame(() => {
const selection = window.luckysheet?.getluckysheet_select_save?.();
if (!selection) {
return;
}
const normalized = Array.isArray(selection)
? (selection as LuckysheetSelection[])
: [selection as LuckysheetSelection];
tryEnterSingleClickEdit(normalized);
});
};
const events: Array<keyof DocumentEventMap> = ["pointerup", "mouseup", "touchend"];
events.forEach((eventName) => {
container.addEventListener(eventName, handlePointerUp, true);
});
return () => {
events.forEach((eventName) => {
container.removeEventListener(eventName, handlePointerUp, true);
});
};
}, [isLuckysheetReady, tryEnterSingleClickEdit]);
// Luckysheet 初始化和清理
useEffect(() => {
if (!isLuckysheetReady || !tableData || !containerRef.current || !window.luckysheet) {
@@ -372,6 +428,8 @@ const FullScreenTableEditor: React.FC<FullScreenTableEditorProps> = ({ tableId,
allowUpdate: false,
gridKey,
loadUrl,
pointEdit: true,
pointEditZoom: typeof window !== "undefined" && window.devicePixelRatio ? window.devicePixelRatio : 1,
uploadImage: async (file: File) => {
const formData = new FormData();
formData.append("image", file);
wolai-frontend/src/components/online-table/HeadlessTableViewer.tsx
+143 -14
View File
@@ -15,14 +15,41 @@ import { useLuckysheetLoader } from "@/components/online-table/useLuckysheetLoad
import { useDebouncedCallback } from "@/hooks/use-debounced-callback";
import { extractRowsForPreview } from "@/components/online-table/utils";
type LuckysheetSelection =
| {
row?: [number, number];
column?: [number, number];
row_focus?: number;
column_focus?: number;
}
| undefined;
const isPrintableKey = (event: KeyboardEvent) => {
if (event.defaultPrevented) return false;
if (event.metaKey || event.ctrlKey || event.altKey) return false;
if (event.key === "Enter" || event.key === "Tab" || event.key === "Escape") return false;
if (event.key.length === 1) return true;
return event.key === "Process" || event.key === "Unidentified";
};
const isInlineEditorVisible = () => {
const inputBox = document.getElementById("luckysheet-input-box");
if (!inputBox) {
return false;
}
const style = window.getComputedStyle(inputBox);
return style.top !== "-10000px" && style.display !== "none";
};
interface HeadlessTableViewerProps {
tableId: string;
embed?: boolean;
editable?: boolean;
}
const VIEWER_CONTAINER_PREFIX = "headless-table-viewer-";
const HeadlessTableViewer: React.FC<HeadlessTableViewerProps> = ({ tableId, embed = false }) => {
const HeadlessTableViewer: React.FC<HeadlessTableViewerProps> = ({ tableId, embed = false, editable }) => {
const containerId = useMemo(() => `${VIEWER_CONTAINER_PREFIX}${tableId}`, [tableId]);
const containerRef = useRef<HTMLDivElement>(null);
const isLuckysheetReady = useLuckysheetLoader();
@@ -62,13 +89,72 @@ const HeadlessTableViewer: React.FC<HeadlessTableViewerProps> = ({ tableId, embe
};
}, [tableId, reloadVersion]);
const allowInlineEdit = editable ?? embed;
const focusLuckysheetEditor = useCallback(() => {
const applyFocus = () => {
const editor = document.getElementById("luckysheet-rich-text-editor");
if (editor && typeof editor.focus === "function") {
editor.focus();
const selection = window.getSelection();
if (selection && editor.childNodes.length > 0) {
const range = document.createRange();
range.selectNodeContents(editor);
range.collapse(false);
selection.removeAllRanges();
selection.addRange(range);
}
}
};
requestAnimationFrame(() => {
applyFocus();
setTimeout(applyFocus, 0);
});
}, []);
const isSingleCellSelection = useCallback((range: LuckysheetSelection[] | undefined) => {
if (!Array.isArray(range) || range.length !== 1) return false;
const target = range[0];
if (!target) {
return false;
}
const rowRange = target.row ?? (typeof target.row_focus === "number" ? [target.row_focus, target.row_focus] : undefined);
const columnRange = target.column ?? (typeof target.column_focus === "number" ? [target.column_focus, target.column_focus] : undefined);
if (!rowRange || !columnRange) {
return false;
}
return rowRange[0] === rowRange[1] && columnRange[0] === columnRange[1];
}, []);
const tryEnterInlineEdit = useCallback(() => {
if (!allowInlineEdit) {
return false;
}
const luckysheetInstance = window.luckysheet;
if (!luckysheetInstance || typeof luckysheetInstance.enterEditMode !== "function") {
return false;
}
const selection = luckysheetInstance.getluckysheet_select_save?.();
const normalized = Array.isArray(selection)
? (selection as LuckysheetSelection[])
: selection
? [selection as LuckysheetSelection]
: undefined;
if (!isSingleCellSelection(normalized)) {
return false;
}
setTimeout(() => {
const editor = document.getElementById("luckysheet-rich-text-editor");
if (editor && document.activeElement === editor && isInlineEditorVisible()) {
return;
}
luckysheetInstance.enterEditMode();
focusLuckysheetEditor();
}, 0);
return true;
}, [allowInlineEdit, focusLuckysheetEditor, isSingleCellSelection]);
const persistSnapshot = useCallback(async () => {
if (
!embed ||
!table ||
!window.luckysheet ||
typeof window.luckysheet.getluckysheetfile !== "function"
) {
if (!allowInlineEdit || !table || !window.luckysheet || typeof window.luckysheet.getluckysheetfile !== "function") {
return;
}
setIsSaving(true);
@@ -97,7 +183,7 @@ const HeadlessTableViewer: React.FC<HeadlessTableViewerProps> = ({ tableId, embe
} finally {
setIsSaving(false);
}
}, [embed, table, tableId]);
}, [allowInlineEdit, table, tableId]);
const debouncedPersist = useDebouncedCallback(() => {
void persistSnapshot();
@@ -132,21 +218,21 @@ const HeadlessTableViewer: React.FC<HeadlessTableViewerProps> = ({ tableId, embe
showtoolbar: false,
showsheetbar: sheets.length > 1,
showstatisticBar: false,
allowEdit: embed,
allowEdit: allowInlineEdit,
allowUpdate: false,
enableAddBackTop: false,
enableAddRow: false,
row: DEFAULT_TABLE_ROWS,
column: DEFAULT_TABLE_COLUMNS,
data: sheets,
pointEdit: embed,
pointEdit: allowInlineEdit,
pointEditZoom: window.devicePixelRatio ?? 1,
pointEditUpdate: embed
pointEditUpdate: allowInlineEdit
? () => {
debouncedPersist();
}
: undefined,
hook: embed
hook: allowInlineEdit
? {
updated: () => {
debouncedPersist();
@@ -160,7 +246,50 @@ const HeadlessTableViewer: React.FC<HeadlessTableViewerProps> = ({ tableId, embe
window.luckysheet.destroy(containerId);
}
};
}, [containerId, isLuckysheetReady, table, tableId]);
}, [allowInlineEdit, containerId, debouncedPersist, isLuckysheetReady, table, tableId]);
useEffect(() => {
if (!allowInlineEdit || !isLuckysheetReady) {
return;
}
const container = document.getElementById(containerId);
if (!container) {
return;
}
const handlePointerUp = (event: PointerEvent | MouseEvent | TouchEvent) => {
const target = event.target instanceof Node ? event.target : null;
if (target && !container.contains(target)) {
return;
}
tryEnterInlineEdit();
};
const events: Array<keyof DocumentEventMap> = ["pointerup", "mouseup", "touchend"];
events.forEach((eventName) => container.addEventListener(eventName, handlePointerUp, true));
return () => {
events.forEach((eventName) => container.removeEventListener(eventName, handlePointerUp, true));
};
}, [allowInlineEdit, containerId, isLuckysheetReady, tryEnterInlineEdit]);
useEffect(() => {
if (!allowInlineEdit || !isLuckysheetReady) {
return;
}
const handleKeydown = (event: KeyboardEvent) => {
if (!isPrintableKey(event)) {
return;
}
tryEnterInlineEdit();
};
const handleCompositionStart = () => {
tryEnterInlineEdit();
};
window.addEventListener("keydown", handleKeydown, true);
window.addEventListener("compositionstart", handleCompositionStart, true);
return () => {
window.removeEventListener("keydown", handleKeydown, true);
window.removeEventListener("compositionstart", handleCompositionStart, true);
};
}, [allowInlineEdit, isLuckysheetReady, tryEnterInlineEdit]);
const overlayVisible = isLoading || !isLuckysheetReady;
const overlayText = !isLuckysheetReady ? "正在加载 Luckysheet 资源..." : "正在加载表格数据...";
@@ -203,7 +332,7 @@ const HeadlessTableViewer: React.FC<HeadlessTableViewerProps> = ({ tableId, embe
</button>
</div>
)}
{embed && (isSaving || saveError) && (
{allowInlineEdit && (isSaving || saveError) && (
<div className="pointer-events-none absolute bottom-2 right-3 flex flex-col items-end text-xs">
{isSaving && <span className="rounded-md bg-white/80 px-2 py-0.5 text-gray-500 shadow">同步中...</span>}
{saveError && <span className="mt-1 rounded-md bg-white/80 px-2 py-0.5 text-red-500 shadow">{saveError}</span>}