sandrodach/MindSift
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(workspace): enable automatic multi-line text wrapping for note blocks without horizontal scrolling
MindSift CI & Docker Release / Build, Test in Container & Push (push) Failing after 20s
Details

Browse Source
This commit is contained in:
sandrodach committed 2026-10-26 15:35:33 +01:00
1 parent ef8cf8f022
commit 58f02e0927
1 file changed
+151 -320
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/features/workspace/WorkspaceView.tsx
+151 -320
View File
@@ -183,6 +183,12 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
setActiveCursorOffset(offset);
};
const autoResizeTextarea = (el: HTMLTextAreaElement | null) => {
if (!el) return;
el.style.height = 'auto';
el.style.height = `${el.scrollHeight}px`;
};
// Drag and Drop reordering state for blocks
const [draggingBlockId, setDraggingBlockId] = useState<string | null>(null);
const [dragOverBlockTarget, setDragOverBlockTarget] = useState<{ blockId: string; position: 'before' | 'after' | 'inside' } | null>(null);
@@ -2180,9 +2186,12 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
if (!activeEditingBlockId) return;
const el = blockInputRefs.current[activeEditingBlockId];
if (!el) return;
const segStartAttr = el.getAttribute('data-seg-start');
if (segStartAttr !== null && 'setSelectionRange' in el && typeof el.value === 'string') {
const segStart = parseInt(segStartAttr, 10) || 0;
if (el instanceof HTMLTextAreaElement) {
autoResizeTextarea(el);
}
if ('setSelectionRange' in el && typeof el.value === 'string') {
const segStartAttr = el.getAttribute('data-seg-start');
const segStart = segStartAttr !== null ? parseInt(segStartAttr, 10) || 0 : 0;
const desiredOffset = activeCursorOffsetRef.current;
const localPos = Math.max(0, Math.min(el.value.length, desiredOffset - segStart));
if (document.activeElement !== el) {
@@ -2257,6 +2266,9 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
const nextCursor = cursor + 1;
setBlockCursor(block.id, nextCursor);
updateBlock(block.id, { content: nextContent });
if (target instanceof HTMLTextAreaElement) {
setTimeout(() => autoResizeTextarea(target), 0);
}
}
return;
}
@@ -2269,7 +2281,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
let afterContent = '';
let updatedCurrent: { id: string; content: string } | undefined = undefined;
if (!fullContent.includes('\n') && target && typeof target.selectionStart === 'number') {
if (target && typeof target.selectionStart === 'number') {
const cursor = segStart + target.selectionStart;
const before = fullContent.slice(0, cursor);
const after = fullContent.slice(cursor);
@@ -2278,7 +2290,6 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
afterContent = after;
}
} else if (fullContent.endsWith('\n')) {
// Clean up trailing empty line if user pressed Shift+Enter then immediately Enter
const trimmedTrailing = fullContent.replace(/\n+$/, '');
if (trimmedTrailing !== fullContent) {
updatedCurrent = { id: block.id, content: trimmedTrailing };
@@ -2309,90 +2320,61 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
deleteSingleBlock(block.id, true);
return;
} else if (
segStart > 0 &&
target &&
target.selectionStart === 0 &&
target.selectionEnd === 0
) {
e.preventDefault();
if (fullContent[segStart - 1] === '\n') {
// Join current line with previous line within the same bullet
const joined = fullContent.slice(0, segStart - 1) + fullContent.slice(segStart);
setBlockCursor(block.id, segStart - 1);
handleContentChange(block, joined);
} else {
// Move cursor into preceding inline token to unwrap it
setBlockCursor(block.id, segStart - 1);
if ((block.level || 0) > 0) {
outdentBlock(block.id);
return;
}
if (selectedDoc && index > 0) {
const prevBlock = selectedDoc.blocks[index - 1];
if (prevBlock && prevBlock.type !== 'divider') {
const prevLen = (prevBlock.content || '').length;
const mergedContent = (prevBlock.content || '') + fullContent;
const nextBlocks = selectedDoc.blocks
.map((b) => (b.id === prevBlock.id ? { ...b, content: mergedContent } : b))
.filter((b) => b.id !== block.id);
persistDocument({ ...selectedDoc, blocks: nextBlocks }, true);
focusBlock(prevBlock.id, prevLen);
}
}
}
} else if (!e.shiftKey && e.key === 'ArrowLeft') {
const target = e.target as HTMLTextAreaElement | HTMLInputElement;
if (segStart > 0 && target && target.selectionStart === 0 && target.selectionEnd === 0) {
e.preventDefault();
setBlockCursor(block.id, segStart - 1);
return;
}
requestAnimationFrame(() => {
if (target && typeof target.selectionStart === 'number') {
setBlockCursor(block.id, segStart + target.selectionStart);
}
});
} else if (!e.shiftKey && e.key === 'ArrowRight') {
const target = e.target as HTMLTextAreaElement | HTMLInputElement;
const fullContent = block.content || '';
if (
target &&
typeof target.selectionStart === 'number' &&
target.selectionStart === target.value.length &&
segStart + target.value.length < fullContent.length
) {
e.preventDefault();
setBlockCursor(block.id, segStart + target.value.length + 1);
return;
}
requestAnimationFrame(() => {
if (target && typeof target.selectionStart === 'number') {
setBlockCursor(block.id, segStart + target.selectionStart);
}
});
} else if (!e.shiftKey && (e.key === 'ArrowUp' || e.key === 'ArrowDown')) {
const target = e.target as HTMLTextAreaElement | HTMLInputElement;
const fullContent = block.content || '';
if (fullContent.includes('\n') && target && typeof target.selectionStart === 'number') {
const cursor = segStart + target.selectionStart;
const rawLines = fullContent.split('\n');
let run = 0;
const lineMeta = rawLines.map((lt) => {
const start = run;
const end = start + lt.length;
run = end + 1;
return { start, end, len: lt.length };
});
const curLineIdx = lineMeta.findIndex((m) => cursor >= m.start && cursor <= m.end);
if (curLineIdx !== -1) {
const col = cursor - lineMeta[curLineIdx].start;
if (e.key === 'ArrowUp' && curLineIdx > 0) {
e.preventDefault();
const prevLine = lineMeta[curLineIdx - 1];
setBlockCursor(block.id, prevLine.start + Math.min(col, prevLine.len));
return;
if (target && typeof target.selectionStart === 'number') {
const cursor = target.selectionStart;
if (e.key === 'ArrowUp') {
const firstNewline = fullContent.indexOf('\n');
if (firstNewline === -1 || cursor <= firstNewline) {
if (index > 0 && selectedDoc) {
const prev = selectedDoc.blocks[index - 1];
if (prev) {
e.preventDefault();
focusBlock(prev.id);
return;
}
}
}
if (e.key === 'ArrowDown' && curLineIdx < lineMeta.length - 1) {
e.preventDefault();
const nextLine = lineMeta[curLineIdx + 1];
setBlockCursor(block.id, nextLine.start + Math.min(col, nextLine.len));
return;
} else if (e.key === 'ArrowDown') {
const lastNewline = fullContent.lastIndexOf('\n');
if (lastNewline === -1 || cursor > lastNewline) {
if (selectedDoc && index < selectedDoc.blocks.length - 1) {
const next = selectedDoc.blocks[index + 1];
if (next) {
e.preventDefault();
focusBlock(next.id, 0);
return;
}
}
}
}
}
} else if (!e.shiftKey && (e.key === 'Home' || e.key === 'End')) {
const target = e.target as HTMLTextAreaElement | HTMLInputElement;
requestAnimationFrame(() => {
if (target && typeof target.selectionStart === 'number') {
setBlockCursor(block.id, segStart + target.selectionStart);
}
});
} else if (e.key === 'Escape') {
setSlashBlockId(null);
setActiveEditingBlockId(null);
(e.target as HTMLElement)?.blur();
}
@@ -2484,6 +2466,9 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
const tryFocus = () => {
const el = blockInputRefs.current[blockId];
if (el) {
if (el instanceof HTMLTextAreaElement) {
autoResizeTextarea(el);
}
el.focus();
if ('setSelectionRange' in el && typeof (el as any).value === 'string') {
const segStartAttr = el.getAttribute('data-seg-start');
@@ -3062,8 +3047,9 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
);
};
// Live inline token-aware editor: splits multi-line bullets (Shift+Enter) into visual rows and renders
// completed #hashtags and links inline as pills on each line while unwrapping any token touched by the cursor.
// Auto-resizing textarea / formatted view for bullet points and tasks:
// - When editing: renders an auto-expanding textarea that naturally wraps text (no horizontal scrolling).
// - When inactive: renders full rich tokens (Wiki-Links, external URLs, #hashtags) with word wrapping.
const renderLiveInlineBlock = (
block: DocumentBlock,
originalIndex: number,
@@ -3072,240 +3058,59 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
const text = block.content || '';
if (isReadOnly) {
return (
<div className={`w-full text-sm leading-relaxed break-words min-h-[22px] cursor-default ${extraTextClass}`}>
<div className={`w-full text-sm leading-relaxed break-words whitespace-pre-wrap min-h-[22px] cursor-default ${extraTextClass}`}>
{renderFormattedText(text, block.id)}
</div>
);
}
const isEditing = activeEditingBlockId === block.id;
const cursor = isEditing ? Math.max(0, Math.min(text.length, activeCursorOffset)) : text.length;
const rawLines = text.split('\n');
let runningOffset = 0;
const lines = rawLines.map((lineText, lineIdx) => {
const lineStart = runningOffset;
const lineEnd = lineStart + lineText.length;
runningOffset = lineEnd + 1; // +1 for the '\n' delimiter
return { lineIdx, lineText, lineStart, lineEnd };
});
let activeLineIdx = lines.findIndex((l) => cursor >= l.lineStart && cursor <= l.lineEnd);
if (activeLineIdx === -1) {
activeLineIdx = lines.length - 1;
if (!isEditing) {
return (
<div
onClick={(e) => {
if (isReadOnly) return;
if ((e.target as HTMLElement).closest('button, a')) return;
focusBlock(block.id);
}}
className={`w-full text-sm leading-relaxed break-words whitespace-pre-wrap min-h-[22px] cursor-text ${extraTextClass}`}
>
{text ? (
renderFormattedText(text, block.id)
) : (
<span className="text-faint italic select-none">&nbsp;</span>
)}
</div>
);
}
type InlineSegment =
| { kind: 'text'; start: number; end: number; text: string }
| { kind: 'token'; start: number; end: number; raw: string };
return (
<div className={`w-full space-y-0.5 ${extraTextClass}`}>
{lines.map((line) => {
const isLineActive = isEditing && line.lineIdx === activeLineIdx;
const lineTokens = findRichTokens(line.lineText).map((t) => ({
start: line.lineStart + t.start,
end: line.lineStart + t.end,
raw: t.raw,
}));
// Non-active line (or block not currently focused)
if (!isLineActive) {
const segments: InlineSegment[] = [];
let lastIdx = line.lineStart;
for (const t of lineTokens) {
if (t.start > lastIdx) {
segments.push({
kind: 'text',
start: lastIdx,
end: t.start,
text: text.slice(lastIdx, t.start),
});
}
segments.push({ kind: 'token', start: t.start, end: t.end, raw: t.raw });
lastIdx = t.end;
}
if (lastIdx < line.lineEnd) {
segments.push({
kind: 'text',
start: lastIdx,
end: line.lineEnd,
text: text.slice(lastIdx, line.lineEnd),
});
}
return (
<div
key={`line-${line.lineIdx}`}
onMouseDown={(e) => {
if (e.target === e.currentTarget) {
e.preventDefault();
focusBlock(block.id, line.lineEnd);
}
}}
onClick={(e) => {
if (e.target === e.currentTarget) {
focusBlock(block.id, line.lineEnd);
}
}}
className="flex flex-wrap items-center gap-y-0.5 w-full text-sm leading-relaxed break-words min-h-[22px] cursor-text"
>
{segments.length === 0 ? (
<span
onMouseDown={(e) => {
e.preventDefault();
focusBlock(block.id, line.lineStart);
}}
className="w-full min-h-[22px] inline-block"
>
&nbsp;
</span>
) : (
segments.map((seg, i) =>
seg.kind === 'token' ? (
renderSingleRichToken(seg.raw, block.id, `tok-${seg.start}-${i}`)
) : (
<span
key={`txt-${seg.start}-${i}`}
onClick={(e) => {
e.stopPropagation();
const sel = window.getSelection();
const localOffset =
sel && sel.anchorNode && e.currentTarget.contains(sel.anchorNode)
? sel.anchorOffset
: seg.text.length;
focusBlock(block.id, seg.start + localOffset);
}}
className="whitespace-pre-wrap"
>
{seg.text}
</span>
)
)
)}
</div>
);
<textarea
ref={(el) => {
blockInputRefs.current[block.id] = el;
if (el) {
autoResizeTextarea(el);
}
// Active line being edited
const renderedTokens = lineTokens.filter((t) => !(cursor >= t.start && cursor <= t.end));
const segments: InlineSegment[] = [];
let lastIdx = line.lineStart;
for (const t of renderedTokens) {
segments.push({
kind: 'text',
start: lastIdx,
end: t.start,
text: text.slice(lastIdx, t.start),
});
segments.push({
kind: 'token',
start: t.start,
end: t.end,
raw: t.raw,
});
lastIdx = t.end;
}
segments.push({
kind: 'text',
start: lastIdx,
end: line.lineEnd,
text: text.slice(lastIdx, line.lineEnd),
});
let activeSegIdx = segments.findIndex(
(s) => s.kind === 'text' && cursor >= s.start && cursor <= s.end
);
if (activeSegIdx === -1) {
activeSegIdx = segments.length - 1;
}
return (
<div
key={`line-${line.lineIdx}`}
onMouseDown={(e) => {
if (e.target === e.currentTarget) {
e.preventDefault();
focusBlock(block.id, line.lineEnd);
}
}}
className="flex flex-wrap items-center gap-y-0.5 w-full min-h-[22px] cursor-text"
>
{segments.map((seg, idx) => {
if (seg.kind === 'token') {
return renderSingleRichToken(seg.raw, block.id, `tok-${seg.start}-${idx}`);
}
if (idx === activeSegIdx) {
const isLastSeg = idx === segments.length - 1;
return (
<input
key="live-input"
ref={(el) => (blockInputRefs.current[block.id] = el)}
data-seg-start={seg.start}
type="text"
readOnly={isReadOnly}
value={seg.text}
style={
!isLastSeg
? { width: `${Math.max(1, seg.text.length + 0.5)}ch` }
: undefined
}
onFocus={(e) => {
const localPos =
typeof e.currentTarget.selectionStart === 'number'
? e.currentTarget.selectionStart
: seg.text.length;
setBlockCursor(block.id, seg.start + localPos);
handleBlockFocus();
}}
onClick={(e) => {
if (
e.currentTarget.selectionStart === e.currentTarget.selectionEnd &&
typeof e.currentTarget.selectionStart === 'number'
) {
setBlockCursor(block.id, seg.start + e.currentTarget.selectionStart);
}
}}
onBlur={() => {
setActiveEditingBlockId((prev) => (prev === block.id ? null : prev));
handleBlockBlur();
}}
onChange={(e) => {
const newSegVal = e.target.value;
const localCursor =
typeof e.target.selectionStart === 'number'
? e.target.selectionStart
: newSegVal.length;
const newFull = text.slice(0, seg.start) + newSegVal + text.slice(seg.end);
const newGlobalCursor = seg.start + localCursor;
setBlockCursor(block.id, newGlobalCursor);
handleContentChange(block, newFull);
}}
onKeyDown={(e) => handleKeyDown(e, block, originalIndex, seg.start)}
className={`${
isLastSeg ? 'flex-1 min-w-[60px]' : 'flex-shrink-0'
} bg-transparent text-sm leading-relaxed focus:outline-none placeholder:text-faint ${extraTextClass}`}
/>
);
}
if (!seg.text) return null;
return (
<span
key={`txt-${seg.start}-${idx}`}
onMouseDown={(e) => {
e.preventDefault();
focusBlock(block.id, seg.end);
}}
className="whitespace-pre-wrap text-sm leading-relaxed cursor-text"
>
{seg.text}
</span>
);
})}
</div>
);
})}
</div>
}}
rows={1}
readOnly={isReadOnly}
value={block.content || ''}
placeholder="Notiz eingeben… (/ für Befehle)"
onFocus={() => {
handleBlockFocus();
}}
onBlur={() => {
setActiveEditingBlockId((prev) => (prev === block.id ? null : prev));
handleBlockBlur();
}}
onChange={(e) => {
autoResizeTextarea(e.target);
handleContentChange(block, e.target.value);
}}
onKeyDown={(e) => handleKeyDown(e, block, originalIndex)}
className={`w-full bg-transparent text-sm leading-relaxed focus:outline-none resize-none overflow-hidden break-words whitespace-pre-wrap placeholder:text-faint p-0 m-0 border-0 ${extraTextClass}`}
/>
);
};
@@ -4512,8 +4317,11 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
</div>
)}
<input
type="text"
<textarea
rows={1}
ref={(el) => {
if (el) autoResizeTextarea(el);
}}
readOnly={isReadOnly}
value={selectedDoc.title}
onFocus={handleBlockFocus}
@@ -4521,6 +4329,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
onChange={(e) => {
if (!isReadOnly) {
ensureLock();
autoResizeTextarea(e.target);
persistDocument({ ...selectedDoc, title: e.target.value });
}
}}
@@ -4536,7 +4345,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
}
}}
placeholder="Dokument-Titel…"
className={`w-full bg-transparent text-xl sm:text-2xl font-bold text-main focus:outline-none placeholder:text-faint ${
className={`w-full bg-transparent text-xl sm:text-2xl font-bold text-main focus:outline-none resize-none overflow-hidden break-words whitespace-pre-wrap placeholder:text-faint p-0 m-0 border-0 ${
isReadOnly ? 'cursor-default' : ''
}`}
/>
@@ -4547,8 +4356,11 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
{zoomedBlock && (
<div className="pb-2 border-b border-border flex items-center gap-2.5">
<span className="w-2.5 h-2.5 rounded-pill bg-accent flex-shrink-0" />
<input
type="text"
<textarea
rows={1}
ref={(el) => {
if (el) autoResizeTextarea(el);
}}
readOnly={isReadOnly}
value={zoomedBlock.content}
onFocus={handleBlockFocus}
@@ -4556,6 +4368,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
onChange={(e) => {
if (!isReadOnly) {
ensureLock();
autoResizeTextarea(e.target);
updateBlock(zoomedBlock.id, { content: e.target.value });
}
}}
@@ -4576,7 +4389,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
}
}}
placeholder="Aufzählungspunkt…"
className={`w-full bg-transparent text-xl font-bold text-main focus:outline-none placeholder:text-faint ${
className={`w-full bg-transparent text-xl font-bold text-main focus:outline-none resize-none overflow-hidden break-words whitespace-pre-wrap placeholder:text-faint p-0 m-0 border-0 ${
isReadOnly ? 'cursor-default' : ''
}`}
/>
@@ -4820,16 +4633,22 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
{/* TYPE: H1 */}
{block.type === 'h1' && (
<input
ref={(el) => (blockInputRefs.current[block.id] = el)}
type="text"
<textarea
ref={(el) => {
blockInputRefs.current[block.id] = el;
if (el) autoResizeTextarea(el);
}}
rows={1}
readOnly={isReadOnly}
value={block.content}
onFocus={handleBlockFocus}
onBlur={handleBlockBlur}
onChange={(e) => handleContentChange(block, e.target.value)}
onChange={(e) => {
autoResizeTextarea(e.target);
handleContentChange(block, e.target.value);
}}
onKeyDown={(e) => handleKeyDown(e, block, originalIndex)}
className={`w-full bg-transparent text-lg font-bold text-main focus:outline-none ${
className={`w-full bg-transparent text-lg font-bold text-main focus:outline-none resize-none overflow-hidden break-words whitespace-pre-wrap p-0 m-0 border-0 ${
isReadOnly ? 'cursor-default' : ''
}`}
/>
@@ -4837,16 +4656,22 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
{/* TYPE: H2 */}
{block.type === 'h2' && (
<input
ref={(el) => (blockInputRefs.current[block.id] = el)}
type="text"
<textarea
ref={(el) => {
blockInputRefs.current[block.id] = el;
if (el) autoResizeTextarea(el);
}}
rows={1}
readOnly={isReadOnly}
value={block.content}
onFocus={handleBlockFocus}
onBlur={handleBlockBlur}
onChange={(e) => handleContentChange(block, e.target.value)}
onChange={(e) => {
autoResizeTextarea(e.target);
handleContentChange(block, e.target.value);
}}
onKeyDown={(e) => handleKeyDown(e, block, originalIndex)}
className={`w-full bg-transparent text-base font-semibold text-accent focus:outline-none ${
className={`w-full bg-transparent text-base font-semibold text-accent focus:outline-none resize-none overflow-hidden break-words whitespace-pre-wrap p-0 m-0 border-0 ${
isReadOnly ? 'cursor-default' : ''
}`}
/>
@@ -4854,16 +4679,22 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
{/* TYPE: H3 */}
{block.type === 'h3' && (
<input
ref={(el) => (blockInputRefs.current[block.id] = el)}
type="text"
<textarea
ref={(el) => {
blockInputRefs.current[block.id] = el;
if (el) autoResizeTextarea(el);
}}
rows={1}
readOnly={isReadOnly}
value={block.content}
onFocus={handleBlockFocus}
onBlur={handleBlockBlur}
onChange={(e) => handleContentChange(block, e.target.value)}
onChange={(e) => {
autoResizeTextarea(e.target);
handleContentChange(block, e.target.value);
}}
onKeyDown={(e) => handleKeyDown(e, block, originalIndex)}
className={`w-full bg-transparent text-sm font-semibold text-main focus:outline-none ${
className={`w-full bg-transparent text-sm font-semibold text-main focus:outline-none resize-none overflow-hidden break-words whitespace-pre-wrap p-0 m-0 border-0 ${
isReadOnly ? 'cursor-default' : ''
}`}
/>