a tool for shared writing and social publishing
leaflet.pub
1import {
2 AsyncValueAutosizeTextarea,
3 AutosizeTextareaProps,
4} from "components/utils/AutosizeTextarea";
5import { BlockProps } from "./Block";
6import { getCoordinatesInTextarea } from "src/utils/getCoordinatesInTextarea";
7import { focusBlock } from "src/utils/focusBlock";
8
9export function BaseTextareaBlock(
10 props: AutosizeTextareaProps & {
11 block: Pick<BlockProps, "previousBlock" | "nextBlock">;
12 },
13) {
14 let { block, ...passDownProps } = props;
15 return (
16 <AsyncValueAutosizeTextarea
17 {...passDownProps}
18 noWrap
19 onKeyDown={(e) => {
20 if (e.key === "ArrowUp") {
21 let selection = e.currentTarget.selectionStart;
22
23 let lastLineBeforeCursor = e.currentTarget.value
24 .slice(0, selection)
25 .lastIndexOf("\n");
26 if (lastLineBeforeCursor !== -1) return;
27 let block = props.block.previousBlock;
28 let coord = getCoordinatesInTextarea(e.currentTarget, selection);
29 if (block) {
30 focusBlock(block, {
31 left: coord.left + e.currentTarget.getBoundingClientRect().left,
32 type: "bottom",
33 });
34 return true;
35 }
36 }
37 if (e.key === "ArrowDown") {
38 let selection = e.currentTarget.selectionStart;
39
40 let lastLine = e.currentTarget.value.lastIndexOf("\n");
41 let lastLineBeforeCursor = e.currentTarget.value
42 .slice(0, selection)
43 .lastIndexOf("\n");
44 if (lastLine !== lastLineBeforeCursor) return;
45 e.preventDefault();
46 let block = props.block.nextBlock;
47
48 let coord = getCoordinatesInTextarea(e.currentTarget, selection);
49 console.log(coord);
50 if (block) {
51 focusBlock(block, {
52 left: coord.left + e.currentTarget.getBoundingClientRect().left,
53 type: "top",
54 });
55 return true;
56 }
57 }
58 }}
59 />
60 );
61}