mirror of
https://github.com/docmost/docmost.git
synced 2026-08-30 02:25:01 +08:00
fix(base): tab from long-text editor moves to next cell instead of leaving the table
This commit is contained in:
@@ -13,6 +13,7 @@ type CellLongTextProps = {
|
|||||||
onCommit: (value: unknown) => void;
|
onCommit: (value: unknown) => void;
|
||||||
onValueChange: (value: unknown) => void;
|
onValueChange: (value: unknown) => void;
|
||||||
onCancel: () => void;
|
onCancel: () => void;
|
||||||
|
onTabNavigate?: (shiftKey: boolean) => void;
|
||||||
};
|
};
|
||||||
|
|
||||||
const toText = (value: unknown) => (typeof value === "string" ? value : "");
|
const toText = (value: unknown) => (typeof value === "string" ? value : "");
|
||||||
@@ -27,6 +28,7 @@ export function CellLongText({
|
|||||||
onCommit,
|
onCommit,
|
||||||
onValueChange,
|
onValueChange,
|
||||||
onCancel,
|
onCancel,
|
||||||
|
onTabNavigate,
|
||||||
}: CellLongTextProps) {
|
}: CellLongTextProps) {
|
||||||
const [draft, setDraft] = useState(() => toText(value));
|
const [draft, setDraft] = useState(() => toText(value));
|
||||||
const cancelledRef = useRef(false);
|
const cancelledRef = useRef(false);
|
||||||
@@ -127,7 +129,11 @@ export function CellLongText({
|
|||||||
}}
|
}}
|
||||||
onKeyDown={(e) => {
|
onKeyDown={(e) => {
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
if (e.key === "Escape") {
|
if (e.key === "Tab") {
|
||||||
|
e.preventDefault();
|
||||||
|
commit();
|
||||||
|
onTabNavigate?.(e.shiftKey);
|
||||||
|
} else if (e.key === "Escape") {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
cancel();
|
cancel();
|
||||||
} else if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
|
} else if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
|
||||||
|
|||||||
@@ -18,6 +18,7 @@ import {
|
|||||||
getDescriptor,
|
getDescriptor,
|
||||||
} from "@/ee/base/property-types/property-type.registry";
|
} from "@/ee/base/property-types/property-type.registry";
|
||||||
import { cellValuesEqual } from "@/ee/base/components/cells/cell-value-equal";
|
import { cellValuesEqual } from "@/ee/base/components/cells/cell-value-equal";
|
||||||
|
import { computeNextCell } from "@/ee/base/utils/grid-cell-nav";
|
||||||
import { useBaseEditable } from "@/ee/base/context/base-editable";
|
import { useBaseEditable } from "@/ee/base/context/base-editable";
|
||||||
import { useRowExpand } from "@/ee/base/context/row-expand";
|
import { useRowExpand } from "@/ee/base/context/row-expand";
|
||||||
import { RowNumberCell } from "./row-number-cell";
|
import { RowNumberCell } from "./row-number-cell";
|
||||||
@@ -132,6 +133,31 @@ export const GridCell = memo(function GridCell({
|
|||||||
setEditingCell(null);
|
setEditingCell(null);
|
||||||
}, [setEditingCell]);
|
}, [setEditingCell]);
|
||||||
|
|
||||||
|
const handleTabNavigate = useCallback(
|
||||||
|
(shiftKey: boolean) => {
|
||||||
|
if (!property) return;
|
||||||
|
const tableInstance = cell.getContext().table;
|
||||||
|
const colIds = tableInstance
|
||||||
|
.getVisibleLeafColumns()
|
||||||
|
.filter((c) => c.id !== "__row_number")
|
||||||
|
.map((c) => c.id);
|
||||||
|
const rowIds = tableInstance.getRowModel().rows.map((r) => r.id);
|
||||||
|
const next = computeNextCell(
|
||||||
|
rowIds,
|
||||||
|
colIds,
|
||||||
|
{ rowId, propertyId: property.id },
|
||||||
|
0,
|
||||||
|
shiftKey ? -1 : 1,
|
||||||
|
true,
|
||||||
|
);
|
||||||
|
if (next) {
|
||||||
|
setEditingCell(next);
|
||||||
|
setFocusedCell(next);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
[cell, rowId, property, setEditingCell, setFocusedCell],
|
||||||
|
);
|
||||||
|
|
||||||
if (isRowNumber) {
|
if (isRowNumber) {
|
||||||
return (
|
return (
|
||||||
<RowNumberCell
|
<RowNumberCell
|
||||||
@@ -175,6 +201,7 @@ export const GridCell = memo(function GridCell({
|
|||||||
onCommit={handleCommit}
|
onCommit={handleCommit}
|
||||||
onValueChange={handleValueChange}
|
onValueChange={handleValueChange}
|
||||||
onCancel={handleCancel}
|
onCancel={handleCancel}
|
||||||
|
onTabNavigate={handleTabNavigate}
|
||||||
/>
|
/>
|
||||||
{property.isPrimary && onExpandRow && !isEditing && (
|
{property.isPrimary && onExpandRow && !isEditing && (
|
||||||
<span className={classes.rowExpandAnchor}>
|
<span className={classes.rowExpandAnchor}>
|
||||||
|
|||||||
@@ -17,6 +17,7 @@ export type CellComponentProps = {
|
|||||||
onCommit: (value: unknown) => void;
|
onCommit: (value: unknown) => void;
|
||||||
onValueChange: (value: unknown) => void;
|
onValueChange: (value: unknown) => void;
|
||||||
onCancel: () => void;
|
onCancel: () => void;
|
||||||
|
onTabNavigate?: (shiftKey: boolean) => void;
|
||||||
};
|
};
|
||||||
|
|
||||||
export type FilterInputKind =
|
export type FilterInputKind =
|
||||||
|
|||||||
Reference in New Issue
Block a user