diff --git a/app/src/protyle/render/av/keydown.ts b/app/src/protyle/render/av/keydown.ts index 80ea92915..5d0d5f59b 100644 --- a/app/src/protyle/render/av/keydown.ts +++ b/app/src/protyle/render/av/keydown.ts @@ -1,8 +1,8 @@ import {matchHotKey} from "../../util/hotKey"; import {selectRow, updateHeader} from "./row"; -import {cellScrollIntoView} from "./cell"; +import {cellScrollIntoView, popTextCell} from "./cell"; -export const avKeydown = (event: KeyboardEvent, nodeElement: HTMLElement) => { +export const avKeydown = (event: KeyboardEvent, nodeElement: HTMLElement, protyle: IProtyle) => { if (!nodeElement.classList.contains("av")) { return false; } @@ -15,7 +15,7 @@ export const avKeydown = (event: KeyboardEvent, nodeElement: HTMLElement) => { event.preventDefault(); return true; } - const selectCellElement = nodeElement.querySelector(".av__cell--select") + const selectCellElement = nodeElement.querySelector(".av__cell--select") as HTMLElement; if (selectCellElement) { if (event.key === "Escape") { selectCellElement.classList.remove("av__cell--select"); @@ -24,29 +24,69 @@ export const avKeydown = (event: KeyboardEvent, nodeElement: HTMLElement) => { return true; } if (event.key === "Enter") { - // TODO + popTextCell(protyle, [selectCellElement]); event.preventDefault(); return true; } - let cellRect + let newCellElement if (event.key === "ArrowLeft") { const previousRowElement = selectCellElement.parentElement.previousElementSibling if (selectCellElement.previousElementSibling && selectCellElement.previousElementSibling.classList.contains("av__cell")) { - selectCellElement.classList.remove("av__cell--select"); - selectCellElement.previousElementSibling.classList.add("av__cell--select"); - cellRect = nodeElement.querySelector(".av__cell--select").getBoundingClientRect(); + newCellElement = selectCellElement.previousElementSibling } else if (previousRowElement && !previousRowElement.classList.contains("av__row--header")) { - selectCellElement.classList.remove("av__cell--select"); - previousRowElement.lastElementChild.previousElementSibling.classList.add("av__cell--select"); - cellRect = nodeElement.querySelector(".av__cell--select").getBoundingClientRect(); + newCellElement = previousRowElement.lastElementChild.previousElementSibling } - if (cellRect) { - cellScrollIntoView(nodeElement, cellRect); + if (newCellElement) { + selectCellElement.classList.remove("av__cell--select"); + newCellElement.classList.add("av__cell--select"); + cellScrollIntoView(nodeElement, newCellElement.getBoundingClientRect()); + } + event.preventDefault(); + return true; + } + if (event.key === "ArrowRight") { + const nextRowElement = selectCellElement.parentElement.nextElementSibling + if (selectCellElement.nextElementSibling && selectCellElement.nextElementSibling.classList.contains("av__cell")) { + newCellElement = selectCellElement.nextElementSibling + } else if (nextRowElement && !nextRowElement.classList.contains("av__row--footer")) { + newCellElement = nextRowElement.querySelector(".av__cell") + } + if (newCellElement) { + selectCellElement.classList.remove("av__cell--select"); + newCellElement.classList.add("av__cell--select"); + cellScrollIntoView(nodeElement, newCellElement.getBoundingClientRect()); + } + event.preventDefault(); + return true; + } + if (event.key === "ArrowUp") { + const previousRowElement = selectCellElement.parentElement.previousElementSibling + if (previousRowElement && !previousRowElement.classList.contains("av__row--header")) { + newCellElement = previousRowElement.querySelector(`.av__cell[data-col-id="${selectCellElement.dataset.colId}"]`) + } + if (newCellElement) { + selectCellElement.classList.remove("av__cell--select"); + newCellElement.classList.add("av__cell--select"); + cellScrollIntoView(nodeElement, newCellElement.getBoundingClientRect()); + } + event.preventDefault(); + return true; + } + if (event.key === "ArrowDown") { + const nextRowElement = selectCellElement.parentElement.nextElementSibling + if (nextRowElement && !nextRowElement.classList.contains("av__row--footer")) { + newCellElement = nextRowElement.querySelector(`.av__cell[data-col-id="${selectCellElement.dataset.colId}"]`) + } + if (newCellElement) { + selectCellElement.classList.remove("av__cell--select"); + newCellElement.classList.add("av__cell--select"); + cellScrollIntoView(nodeElement, newCellElement.getBoundingClientRect()); } event.preventDefault(); return true; } } + const selectRowElement = nodeElement.querySelector(".av__row--select:not(.av__row--header)") as HTMLElement; if (selectRowElement) { if (event.key === "Escape") { diff --git a/app/src/protyle/render/av/render.ts b/app/src/protyle/render/av/render.ts index 9d2405cca..31d892cc7 100644 --- a/app/src/protyle/render/av/render.ts +++ b/app/src/protyle/render/av/render.ts @@ -4,6 +4,7 @@ import {Constants} from "../../../constants"; import {getCalcValue} from "./cell"; import * as dayjs from "dayjs"; import {unicode2Emoji} from "../../../emoji"; +import {focusBlock} from "../../util/selection"; export const avRender = (element: Element, protyle: IProtyle, cb?: () => void) => { let avElements: Element[] = []; @@ -40,6 +41,11 @@ export const avRender = (element: Element, protyle: IProtyle, cb?: () => void) = const left = e.querySelector(".av__scroll")?.scrollLeft || 0; const headerTransform = (e.querySelector(".av__row--header") as HTMLElement)?.style.transform; const footerTransform = (e.querySelector(".av__row--footer") as HTMLElement)?.style.transform; + let selectCellId = ""; + const selectCellElement = e.querySelector(".av__cell--select") as HTMLElement; + if (selectCellElement) { + selectCellId = selectCellElement.parentElement.dataset.id + Constants.ZWSP + selectCellElement.getAttribute("data-col-id"); + } fetchPost("/api/av/renderAttributeView", { id: e.getAttribute("data-av-id"), }, (response) => { @@ -212,6 +218,13 @@ ${cell.color ? `color:${cell.color};` : ""}">${text}`; if (footerTransform) { (e.querySelector(".av__row--footer") as HTMLElement).style.transform = footerTransform; } + if (selectCellId) { + const newCellElement = e.querySelector(`.av__row[data-id="${selectCellId.split(Constants.ZWSP)[0]}"] .av__cell[data-col-id="${selectCellId.split(Constants.ZWSP)[1]}"]`); + if (newCellElement) { + newCellElement.classList.add("av__cell--select"); + } + focusBlock(e) + } if (cb) { cb(); } diff --git a/app/src/protyle/wysiwyg/keydown.ts b/app/src/protyle/wysiwyg/keydown.ts index 50359c2fd..c09a14464 100644 --- a/app/src/protyle/wysiwyg/keydown.ts +++ b/app/src/protyle/wysiwyg/keydown.ts @@ -119,7 +119,7 @@ export const keydown = (protyle: IProtyle, editorElement: HTMLElement) => { return; } - if (avKeydown(event, nodeElement)) { + if (avKeydown(event, nodeElement, protyle)) { return; }