shinuwa/sokko-g
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Update memo layout and library import examples
All checks were successful
Deploy Sokko G / deploy (push) Successful in 16s
Details

Browse source
This commit is contained in:
Shinuwa 2026-08-25 19:17:19 +02:00
parent 6125336338
commit 91d99d6ca4
6 changed files with 86 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

26
website/src/features/toolboxes/modules/MemosModule.jsx
View file

@ -2,7 +2,7 @@
import { CompactDropdown } from "../../../components/CompactDropdown.jsx";
import { Icon } from "../../../components/Icon.jsx";
import { moveItem, useGroupedReorder } from "../../../hooks/useGroupedReorder.js";
import { useEffect, useMemo, useState } from "react";
import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
import { TextExchangeActions } from "./TextExchangeActions.jsx";
import { TEXT_COLORS } from "./notepadUtils.js";
@ -11,6 +11,7 @@ export function MemosModule({ toolboxId, moduleId, context, editing, textExchang
const data = useMemo(() => context.normalizeMemosData(storedData), [context, storedData]);
const textContent = context.moduleText?.memos || {};
const tickerItems = data.tickerEnabled ? data.items : [];
const textareaRefs = useRef(new Map());
const [drafts, setDrafts] = useState({});
const {
itemReorder,
@ -32,6 +33,16 @@ export function MemosModule({ toolboxId, moduleId, context, editing, textExchang
setDrafts(Object.fromEntries(data.items.map((item) => [item.id, item.text])));
}, [data.items]);
useLayoutEffect(() => {
data.items.forEach((item) => resizeMemoTextarea(textareaRefs.current.get(item.id)));
}, [data.items, drafts]);
function resizeMemoTextarea(element) {
if (!element) return;
element.style.height = "auto";
element.style.height = `${element.scrollHeight}px`;
}
function save(nextData) {
context.setModuleData(toolboxId, moduleId, nextData, "memos");
}
@ -133,10 +144,21 @@ export function MemosModule({ toolboxId, moduleId, context, editing, textExchang
<Icon name="drag" />
</button>
<textarea
ref={(element) => {
if (element) {
textareaRefs.current.set(memo.id, element);
resizeMemoTextarea(element);
} else {
textareaRefs.current.delete(memo.id);
}
}}
value={drafts[memo.id] ?? memo.text}
rows={3}
placeholder={textContent.placeholder || "Mémo court..."}
onChange={(event) => setDrafts((current) => ({ ...current, [memo.id]: event.target.value }))}
onChange={(event) => {
resizeMemoTextarea(event.currentTarget);
setDrafts((current) => ({ ...current, [memo.id]: event.target.value }));
}}
onBlur={() => commitMemoText(memo.id)}
aria-label={textContent.editLabel || "Modifier le mémo"}
/>