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

refactor(collab): remove live document collaboration and enforce strictly read-only sharing
MindSift CI & Docker Release / Build, Test in Container & Push (push) Successful in 1m2s
Details

Browse Source
This commit is contained in:
sandrodach committed 2026-10-27 17:08:38 +01:00
1 parent aea05e868a
commit 04fa774d10
16 files changed
+179 -3556
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

frontend/src/features/workspace/OutlinerBlock.tsx
+10 -142
View File
@@ -17,10 +17,8 @@ import {
Maximize2,
Link as LinkIcon,
FileText,
Lock,
} from 'lucide-react';
import { DocumentBlock, BlockType } from '../../lib/types';
import { RemoteCursor } from '../../lib/useDocumentSync';
import { LinkModal } from './LinkModal';
export interface SlashCommand {
@@ -48,11 +46,8 @@ export interface OutlinerBlockProps {
hasChildren: boolean;
isFocused: boolean;
canEdit: boolean;
activeRemoteCursors?: RemoteCursor[];
sendCursorMoved?: (blockId: string | null, selectionStart?: number, selectionEnd?: number) => void;
levelOffset?: number;
onZoomBlock?: (blockId: string) => void;
onFocusBlock: (blockId: string) => void;
onUpdateBlock: (updated: DocumentBlock, immediate?: boolean) => void;
onCreateBlockBelow: (afterBlockId: string, currentContent: string) => void;
onDeleteBlock: (blockId: string) => void;
@@ -66,23 +61,17 @@ export interface OutlinerBlockProps {
isDragTarget?: boolean;
isTargeted?: boolean;
registerTextareaRef: (blockId: string, el: HTMLTextAreaElement | null) => void;
isLockedByOther?: boolean;
lockedByName?: string;
lockedByColor?: string;
onBlurBlock?: (blockId: string) => void;
}
export const OutlinerBlock: React.FC<OutlinerBlockProps> = ({
block,
index,
maxAllowedLevel,
hasChildren,
isFocused,
canEdit,
activeRemoteCursors = [],
sendCursorMoved,
levelOffset = 0,
onZoomBlock,
onFocusBlock,
onUpdateBlock,
onCreateBlockBelow,
onDeleteBlock,
@@ -96,10 +85,6 @@ export const OutlinerBlock: React.FC<OutlinerBlockProps> = ({
isDragTarget,
isTargeted,
registerTextareaRef,
isLockedByOther,
lockedByName,
lockedByColor,
onBlurBlock,
}) => {
const [localContent, setLocalContent] = useState<string>(block.content || '');
const [slashSearch, setSlashSearch] = useState<string | null>(null);
@@ -116,10 +101,6 @@ export const OutlinerBlock: React.FC<OutlinerBlockProps> = ({
// Callback refs to avoid stale closures in setTimeout, debounce flush, and event listeners
const onUpdateBlockRef = useRef(onUpdateBlock);
onUpdateBlockRef.current = onUpdateBlock;
const onFocusBlockRef = useRef(onFocusBlock);
onFocusBlockRef.current = onFocusBlock;
const onBlurBlockRef = useRef(onBlurBlock);
onBlurBlockRef.current = onBlurBlock;
const onCreateBlockBelowRef = useRef(onCreateBlockBelow);
onCreateBlockBelowRef.current = onCreateBlockBelow;
const onDeleteBlockRef = useRef(onDeleteBlock);
@@ -128,8 +109,6 @@ export const OutlinerBlock: React.FC<OutlinerBlockProps> = ({
onIndentBlockRef.current = onIndentBlock;
const onNavigateFocusRef = useRef(onNavigateFocus);
onNavigateFocusRef.current = onNavigateFocus;
const sendCursorMovedRef = useRef(sendCursorMoved);
sendCursorMovedRef.current = sendCursorMoved;
// Track if this input currently has actual focus in an active browser window
const isFocusedRef = useRef<boolean>(false);
@@ -177,7 +156,6 @@ export const OutlinerBlock: React.FC<OutlinerBlockProps> = ({
flushDebounce(localContentRef.current);
}
isFocusedRef.current = false;
sendCursorMovedRef.current?.(null);
};
const handleWindowFocus = () => {
@@ -290,7 +268,6 @@ export const OutlinerBlock: React.FC<OutlinerBlockProps> = ({
}
setLocalContent(val);
sendCursorMoved?.(block.id, e.target.selectionStart, e.target.selectionEnd);
if (debounceTimerRef.current !== null) {
window.clearTimeout(debounceTimerRef.current);
@@ -313,16 +290,12 @@ export const OutlinerBlock: React.FC<OutlinerBlockProps> = ({
}, 150);
};
const handleFocus = (e: React.FocusEvent<HTMLTextAreaElement>) => {
if (isLockedByOther) return;
const handleFocus = () => {
isFocusedRef.current = true;
onFocusBlockRef.current(block.id);
sendCursorMovedRef.current?.(block.id, e.target.selectionStart, e.target.selectionEnd);
};
const handleBlur = () => {
isFocusedRef.current = false;
if (isLockedByOther) return;
if (debounceTimerRef.current !== null) {
window.clearTimeout(debounceTimerRef.current);
debounceTimerRef.current = null;
@@ -330,27 +303,10 @@ export const OutlinerBlock: React.FC<OutlinerBlockProps> = ({
} else if (localContentRef.current !== latestBlockRef.current.content) {
flushDebounce(localContentRef.current);
}
sendCursorMovedRef.current?.(null);
onBlurBlockRef.current?.(block.id);
};
const handleClick = (e: React.MouseEvent<HTMLTextAreaElement>) => {
sendCursorMovedRef.current?.(block.id, e.currentTarget.selectionStart, e.currentTarget.selectionEnd);
};
const handleKeyUp = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
sendCursorMovedRef.current?.(block.id, e.currentTarget.selectionStart, e.currentTarget.selectionEnd);
};
const handleSelect = (e: React.SyntheticEvent<HTMLTextAreaElement>) => {
const target = e.currentTarget;
sendCursorMovedRef.current?.(block.id, target.selectionStart, target.selectionEnd);
};
const primaryRemoteCursor = activeRemoteCursors.length > 0 ? activeRemoteCursors[0] : null;
const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
if (!canEdit || isLockedByOther) return;
if (!canEdit) return;
// Slash command navigation
if (slashSearch !== null && filteredSlashCommands.length > 0) {
@@ -460,50 +416,16 @@ export const OutlinerBlock: React.FC<OutlinerBlockProps> = ({
? 'border-t-2 border-accent bg-accent/10'
: isTargeted
? 'bg-accent/15 ring-2 ring-accent'
: isLockedByOther
? 'bg-panel-elevated/80 border border-border/60 shadow-xs'
: isFocused
? 'bg-panel-elevated'
: 'hover:bg-panel'
}`}
style={{
paddingLeft: `${visualLevel * 22 + 4}px`,
...(isLockedByOther && lockedByColor
? { borderLeft: `3px solid ${lockedByColor}` }
: primaryRemoteCursor
? { borderLeft: `2px solid ${primaryRemoteCursor.userColor}` }
: {}),
}}
onDragOver={(e) => onDragOverBlock?.(e, index)}
onDrop={() => onDropBlock?.(index)}
>
{/* Right-aligned Lock Indicator (Zero vertical height impact, keeps bullet & line aligned) */}
{isLockedByOther && (
<div
className="absolute right-2 top-1.5 z-10 flex items-center gap-1 px-2 py-0.5 rounded-pill text-[10px] font-semibold text-white shadow-xs select-none pointer-events-none"
style={{ backgroundColor: lockedByColor || '#64748b' }}
title={`Wird gerade bearbeitet von ${lockedByName || 'anderer Nutzer'}`}
>
<Lock className="w-2.5 h-2.5 shrink-0" />
<span className="truncate max-w-[120px]">{lockedByName || 'Gesperrt'}</span>
</div>
)}
{/* Remote Cursors Floating Name Badges on Block */}
{activeRemoteCursors.length > 0 && (
<div className="absolute -top-2.5 right-2 z-20 flex items-center gap-1 select-none pointer-events-none">
{activeRemoteCursors.map((c) => (
<span
key={c.clientId}
className="text-[9px] font-bold px-1.5 py-0.5 rounded-btn text-white shadow-sm flex items-center gap-0.5"
style={{ backgroundColor: c.userColor }}
>
{c.userName}
</span>
))}
</div>
)}
{/* Indentation Guide Line */}
{visualLevel > 0 &&
Array.from({ length: visualLevel }).map((_, lvlIdx) => (
@@ -516,7 +438,7 @@ export const OutlinerBlock: React.FC<OutlinerBlockProps> = ({
{/* Bullet Controls: Drag Handle, Collapse Toggle, Bullet / Checkbox */}
<div className="flex items-center gap-0.5 pt-1 select-none shrink-0">
{canEdit && !isLockedByOther && (
{canEdit && (
<button
type="button"
draggable
@@ -550,7 +472,7 @@ export const OutlinerBlock: React.FC<OutlinerBlockProps> = ({
{block.type === 'todo' ? (
<button
type="button"
disabled={!canEdit || isLockedByOther}
disabled={!canEdit}
onClick={() =>
flushDebounce(localContent, { checked: !block.checked })
}
@@ -608,17 +530,12 @@ export const OutlinerBlock: React.FC<OutlinerBlockProps> = ({
}}
rows={1}
value={localContent}
readOnly={!canEdit || isLockedByOther}
readOnly={!canEdit}
onFocus={handleFocus}
onBlur={handleBlur}
onClick={handleClick}
onKeyUp={handleKeyUp}
onSelect={handleSelect}
onChange={handleContentChange}
onKeyDown={handleKeyDown}
className={`w-full resize-none font-mono text-xs bg-transparent text-status-ok border-0 focus:outline-none focus:ring-0 leading-relaxed ${
isLockedByOther ? 'pr-28 cursor-not-allowed opacity-90' : ''
}`}
className="w-full resize-none font-mono text-xs bg-transparent text-status-ok border-0 focus:outline-none focus:ring-0 leading-relaxed"
/>
</div>
) : block.type === 'callout' ? (
@@ -630,17 +547,12 @@ export const OutlinerBlock: React.FC<OutlinerBlockProps> = ({
}}
rows={1}
value={localContent}
readOnly={!canEdit || isLockedByOther}
readOnly={!canEdit}
onFocus={handleFocus}
onBlur={handleBlur}
onClick={handleClick}
onKeyUp={handleKeyUp}
onSelect={handleSelect}
onChange={handleContentChange}
onKeyDown={handleKeyDown}
className={`w-full resize-none bg-transparent text-sm text-main border-0 focus:outline-none focus:ring-0 leading-relaxed italic ${
isLockedByOther ? 'pr-28 cursor-not-allowed opacity-90' : ''
}`}
className="w-full resize-none bg-transparent text-sm text-main border-0 focus:outline-none focus:ring-0 leading-relaxed italic"
/>
</div>
) : (
@@ -652,12 +564,9 @@ export const OutlinerBlock: React.FC<OutlinerBlockProps> = ({
}}
rows={1}
value={localContent}
readOnly={!canEdit || isLockedByOther}
readOnly={!canEdit}
onFocus={handleFocus}
onBlur={handleBlur}
onClick={handleClick}
onKeyUp={handleKeyUp}
onSelect={handleSelect}
onChange={handleContentChange}
onKeyDown={handleKeyDown}
placeholder={
@@ -666,8 +575,6 @@ export const OutlinerBlock: React.FC<OutlinerBlockProps> = ({
: ''
}
className={`w-full resize-none overflow-hidden bg-transparent border-0 focus:outline-none focus:ring-0 leading-relaxed whitespace-pre-wrap break-words ${
isLockedByOther ? 'pr-28 cursor-not-allowed opacity-90' : ''
} ${
block.type === 'h1'
? 'text-lg font-bold text-main tracking-tight'
: block.type === 'h2'
@@ -679,45 +586,6 @@ export const OutlinerBlock: React.FC<OutlinerBlockProps> = ({
: 'text-sm text-main'
}`}
/>
{/* Remote Caret & Floating Name Tag Overlay */}
{primaryRemoteCursor &&
primaryRemoteCursor.selectionStart !== undefined &&
primaryRemoteCursor.selectionStart !== null && (
<div
aria-hidden="true"
className={`pointer-events-none absolute inset-0 overflow-hidden leading-relaxed whitespace-pre-wrap break-words select-none z-10 ${
block.type === 'h1'
? 'text-lg font-bold tracking-tight'
: block.type === 'h2'
? 'text-base font-semibold'
: block.type === 'h3'
? 'text-sm font-semibold'
: block.type === 'todo' && block.checked
? 'text-sm text-faint line-through'
: 'text-sm'
}`}
>
<span className="opacity-0">
{localContent.slice(
0,
Math.min(primaryRemoteCursor.selectionStart, localContent.length)
)}
</span>
<span className="relative inline-block align-baseline">
<span
className="inline-block w-[2px] h-[1.15em] -mb-0.5 animate-pulse"
style={{ backgroundColor: primaryRemoteCursor.userColor }}
/>
<span
className="absolute -top-3.5 left-0 text-[8px] font-bold px-1 py-0 rounded-btn text-white whitespace-nowrap shadow-sm"
style={{ backgroundColor: primaryRemoteCursor.userColor }}
>
{primaryRemoteCursor.userName}
</span>
</span>
</div>
)}
</div>
)}