gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-11-04 05:28:59 +01:00
Code Issues Actions 26 Packages Projects Releases Wiki Activity

chore(collections/board): basic multiline editing

Browse Source
This commit is contained in:
Elian Doran 2025-09-12 15:58:38 +03:00
parent 79e51b543a
commit 3825fb24f4
No known key found for this signature in database
3 changed files with 20 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
apps/client/src/widgets/collections/board/card.tsx
View File

@ -82,6 +82,7 @@ export default function Card({
setTitle(newTitle); setTitle(newTitle);
}} }}
dismiss={() => api.dismissEditingTitle()} dismiss={() => api.dismissEditingTitle()}
multiline
/> />
)} )}
</div> </div>

12
apps/client/src/widgets/collections/board/index.css
View File

@ -175,9 +175,11 @@
border-color: var(--main-text-color); border-color: var(--main-text-color);
display: flex; display: flex;
align-items: center; align-items: center;
padding: 0;
} }
.board-view-container .board-note.editing input { .board-view-container .board-note.editing input,
.board-view-container .board-note.editing textarea {
background: transparent; background: transparent;
border: none; border: none;
outline: none; outline: none;
@ -185,7 +187,13 @@
font-size: inherit; font-size: inherit;
color: inherit; color: inherit;
width: 100%; width: 100%;
padding: 0; padding: 0.5em;
}
.board-view-container .board-note.editing textarea {
height: auto;
field-sizing: content;
resize: none;
} }
.board-view-container .board-note .icon { .board-view-container .board-note .icon {

13
apps/client/src/widgets/collections/board/index.tsx
View File

@ -11,6 +11,7 @@ import { createContext } from "preact";
import { onWheelHorizontalScroll } from "../../widget_utils"; import { onWheelHorizontalScroll } from "../../widget_utils";
import Column from "./column"; import Column from "./column";
import BoardApi from "./api"; import BoardApi from "./api";
import FormTextArea from "../../react/FormTextArea";
export interface BoardViewData { export interface BoardViewData {
columns?: BoardColumnData[]; columns?: BoardColumnData[];
@ -256,22 +257,26 @@ function AddNewColumn({ viewConfig, saveConfig }: { viewConfig?: BoardViewData,
) )
} }
export function TitleEditor({ currentValue, save, dismiss }: { export function TitleEditor({ currentValue, save, dismiss, multiline }: {
currentValue: string, currentValue: string,
save: (newValue: string) => void, save: (newValue: string) => void,
dismiss: () => void dismiss: () => void,
multiline?: boolean
}) { }) {
const inputRef = useRef<HTMLInputElement>(null); const inputRef = useRef<any>(null);
useEffect(() => { useEffect(() => {
inputRef.current?.focus(); inputRef.current?.focus();
inputRef.current?.select(); inputRef.current?.select();
}, [ inputRef ]); }, [ inputRef ]);
const Element = multiline ? FormTextArea : FormTextBox;
return ( return (
<FormTextBox <Element
inputRef={inputRef} inputRef={inputRef}
currentValue={currentValue} currentValue={currentValue}
rows={multiline ? 4 : undefined}
onKeyDown={(e) => { onKeyDown={(e) => {
if (e.key === "Enter") { if (e.key === "Enter") {
const newValue = e.currentTarget.value; const newValue = e.currentTarget.value;