= ({
)}
- {/* Badges: Priority, Status, Tags */}
+ {/* Badges: In Notiz, Priority, Status, Tags */}
e.stopPropagation()}>
+ {(task.convertedType === 'document_block' || task.docId) && (
+
+ )}
{task.priority === 'urgent' && (
- {/* Right Status & Action Buttons */}
+ {/* Right Action Buttons */}
- {/* Active Presence Avatars (Immer rund: rounded-full mit Überlappung) */}
- {activeUsers.length > 0 && (
-
- {activeUsers.map((u) => {
- const initials = (u.userName || 'A')
- .split(' ')
- .map((n) => n[0])
- .slice(0, 2)
- .join('')
- .toUpperCase();
- return (
-
-
- {initials}
-
- {/* Tooltip */}
-
- {u.userName}
-
-
- );
- })}
-
- )}
-
- {/* Sharing Section (1:1 styling from SharedListsView) */}
+ {/* Sharing Section */}
{doc && (() => {
const isOwner = doc.isOwner !== false && (doc.userId === currentUser?.id || !doc.userId || currentUser?.role === 'admin');
const sharesCount = doc.sharedWith?.length || 0;
@@ -790,14 +873,21 @@ export const DocumentEditor: React.FC
= ({
+
+ Dieses Dokument wurde schreibgeschützt mit dir geteilt (Nur Lesen).
+
+ )}
+
{/* Main Content Area */}
-
+
{zoomedBlock ? (
/* =========================================================================
FOKUS-MODUS & ZOOM-IN (HOISTED SUBTREE VIEW)
========================================================================= */
- {/* Prominent Zoomed Ast-Heading */}
@@ -846,7 +936,6 @@ export const DocumentEditor: React.FC = ({
- {/* Subtree Children or Empty State */}
{childBlocks.length === 0 ? (
Dieser Ast hat noch keine Unterpunkte.
@@ -878,12 +967,13 @@ export const DocumentEditor: React.FC
= ({
canEdit={canEdit}
levelOffset={levelOffset}
onZoomBlock={setZoomedBlockId}
- remoteCursors={remoteCursors}
- sendCursorMoved={sendCursorMoved}
onUpdateBlock={handleUpdateBlock}
+ onUpdateBlocks={handleUpdateBlocks}
onCreateBlock={handleCreateBlock}
+ onInsertBlocks={handleInsertBlocks}
onDeleteBlock={handleDeleteBlock}
onMoveBlock={handleMoveBlock}
+ onOpenTask={onOpenTask}
onTagClick={onSelectTag}
onWikiLinkClick={onWikiLinkClick}
initialFocusedBlockId={initialFocusedBlockId}
@@ -907,47 +997,119 @@ export const DocumentEditor: React.FC = ({
{doc?.icon || '📝'}
{showEmojiPicker && canEdit && (
-
- {EMOJI_PALETTE.map((emoji) => (
+
e.stopPropagation()}
+ >
+
+
+ setEmojiSearch(e.target.value)}
+ placeholder="Icon suchen oder Emoji eingeben…"
+ className="input-field w-full pl-7 pr-2 py-1 text-xs"
+ />
+
+ {doc?.icon && (
- ))}
+ )}
+ {emojiSearch.trim() && (
+
+ )}
+
+ {filteredEmojis.map((item) => (
+
+ ))}
+ {filteredEmojis.length === 0 && (
+
+ Kein passendes Standard-Icon
+
+ )}
+
)}
{/* Logseq Outliner Tree */}
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;
+ onCreateBlockBelow: (afterBlockId: string, newContent?: string) => void;
+ onDeleteBlock: (blockId: string, deleteSubtree?: boolean) => void;
onIndentBlock: (blockId: string, delta: 1 | -1) => void;
onNavigateFocus: (blockId: string, direction: 'up' | 'down') => void;
+ onFocusBlock?: (blockId: string) => void;
+ onOpenTask?: (taskId: string) => void;
onTagClick?: (tag: string) => void;
onWikiLinkClick?: (pageTitle: string) => void;
onDragStartBlock?: (index: number) => void;
@@ -65,24 +69,27 @@ export interface OutlinerBlockProps {
isDragTarget?: boolean;
isTargeted?: boolean;
registerTextareaRef: (blockId: string, el: HTMLTextAreaElement | null) => void;
+ onPasteMultiLines?: (blockId: string, textBefore: string, textAfter: string, rawLines: string[]) => void;
}
export const OutlinerBlock: React.FC = ({
+ docId,
block,
index,
+ isLast,
+ maxAllowedLevel,
hasChildren,
isFocused,
canEdit,
- activeRemoteCursors = [],
- sendCursorMoved,
levelOffset = 0,
onZoomBlock,
- onFocusBlock,
onUpdateBlock,
onCreateBlockBelow,
onDeleteBlock,
onIndentBlock,
onNavigateFocus,
+ onFocusBlock,
+ onOpenTask,
onTagClick,
onWikiLinkClick,
onDragStartBlock,
@@ -91,11 +98,15 @@ export const OutlinerBlock: React.FC = ({
isDragTarget,
isTargeted,
registerTextareaRef,
+ onPasteMultiLines,
}) => {
const [localContent, setLocalContent] = useState(block.content || '');
+ const [isLocallyFocused, setIsLocallyFocused] = useState(false);
+ const activeFocus = isFocused || isLocallyFocused;
const [slashSearch, setSlashSearch] = useState(null);
const [slashIndex, setSlashIndex] = useState(0);
const [showLinkModal, setShowLinkModal] = useState(false);
+ const [showTodoMenu, setShowTodoMenu] = useState(false);
const textareaRef = useRef(null);
const debounceTimerRef = useRef(null);
@@ -107,18 +118,17 @@ export const OutlinerBlock: React.FC = ({
// 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 onCreateBlockBelowRef = useRef(onCreateBlockBelow);
onCreateBlockBelowRef.current = onCreateBlockBelow;
+ const onPasteMultiLinesRef = useRef(onPasteMultiLines);
+ onPasteMultiLinesRef.current = onPasteMultiLines;
const onDeleteBlockRef = useRef(onDeleteBlock);
onDeleteBlockRef.current = onDeleteBlock;
const onIndentBlockRef = useRef(onIndentBlock);
onIndentBlockRef.current = onIndentBlock;
const onNavigateFocusRef = useRef(onNavigateFocus);
onNavigateFocusRef.current = onNavigateFocus;
- const sendCursorMovedRef = useRef(sendCursorMoved);
- sendCursorMovedRef.current = sendCursorMoved;
+ const isPastingRef = useRef(false);
// Track if this input currently has actual focus in an active browser window
const isFocusedRef = useRef(false);
@@ -166,7 +176,6 @@ export const OutlinerBlock: React.FC = ({
flushDebounce(localContentRef.current);
}
isFocusedRef.current = false;
- sendCursorMovedRef.current?.(null);
};
const handleWindowFocus = () => {
@@ -203,7 +212,7 @@ export const OutlinerBlock: React.FC = ({
useLayoutEffect(() => {
adjustHeight();
- }, [localContent, block.type, block.level, adjustHeight]);
+ }, [localContent, block.type, block.level, activeFocus, adjustHeight]);
useEffect(() => {
window.addEventListener('resize', adjustHeight);
@@ -279,7 +288,6 @@ export const OutlinerBlock: React.FC = ({
}
setLocalContent(val);
- sendCursorMoved?.(block.id, e.target.selectionStart, e.target.selectionEnd);
if (debounceTimerRef.current !== null) {
window.clearTimeout(debounceTimerRef.current);
@@ -302,14 +310,20 @@ export const OutlinerBlock: React.FC = ({
}, 150);
};
- const handleFocus = (e: React.FocusEvent) => {
+ const handleFocus = () => {
isFocusedRef.current = true;
- onFocusBlockRef.current(block.id);
- sendCursorMovedRef.current?.(block.id, e.target.selectionStart, e.target.selectionEnd);
+ setIsLocallyFocused(true);
+ onFocusBlock?.(block.id);
+ setTimeout(adjustHeight, 0);
};
const handleBlur = () => {
isFocusedRef.current = false;
+ setIsLocallyFocused(false);
+ if (isPastingRef.current) {
+ isPastingRef.current = false;
+ return;
+ }
if (debounceTimerRef.current !== null) {
window.clearTimeout(debounceTimerRef.current);
debounceTimerRef.current = null;
@@ -317,23 +331,30 @@ export const OutlinerBlock: React.FC = ({
} else if (localContentRef.current !== latestBlockRef.current.content) {
flushDebounce(localContentRef.current);
}
- sendCursorMovedRef.current?.(null);
};
- const handleClick = (e: React.MouseEvent) => {
- sendCursorMovedRef.current?.(block.id, e.currentTarget.selectionStart, e.currentTarget.selectionEnd);
- };
+ const handlePaste = (e: React.ClipboardEvent) => {
+ if (!canEdit || block.type === 'code') return;
+ const pastedText = e.clipboardData.getData('text');
+ if (!pastedText || !pastedText.includes('\n')) return;
- const handleKeyUp = (e: React.KeyboardEvent) => {
- sendCursorMovedRef.current?.(block.id, e.currentTarget.selectionStart, e.currentTarget.selectionEnd);
- };
+ e.preventDefault();
+ const rawLines = pastedText.split(/\r?\n/);
+ if (rawLines.length <= 1) return;
- const handleSelect = (e: React.SyntheticEvent) => {
- const target = e.currentTarget;
- sendCursorMovedRef.current?.(block.id, target.selectionStart, target.selectionEnd);
- };
+ const start = e.currentTarget.selectionStart ?? localContent.length;
+ const end = e.currentTarget.selectionEnd ?? start;
+ const textBefore = localContent.slice(0, start);
+ const textAfter = localContent.slice(end);
- const primaryRemoteCursor = activeRemoteCursors.length > 0 ? activeRemoteCursors[0] : null;
+ if (debounceTimerRef.current !== null) {
+ window.clearTimeout(debounceTimerRef.current);
+ debounceTimerRef.current = null;
+ }
+
+ isPastingRef.current = true;
+ onPasteMultiLinesRef.current?.(block.id, textBefore, textAfter, rawLines);
+ };
const handleKeyDown = (e: React.KeyboardEvent) => {
if (!canEdit) return;
@@ -374,13 +395,49 @@ export const OutlinerBlock: React.FC = ({
return;
}
- // 2. Enter (without Shift) -> Create new block on same level
+ // 2. Enter (without Shift) -> If block is completely empty:
+ // - If level > minLevel, outdent (Shift+Tab behaviour)
+ // - If already at minLevel and is the last block, do NOT create another empty block below
+ // - Otherwise split paragraph at cursor and create new block below
if (e.key === 'Enter' && !e.shiftKey && block.type !== 'code') {
e.preventDefault();
e.stopPropagation();
setSlashSearch(null);
- flushDebounce(localContent);
- onCreateBlockBelowRef.current(block.id, localContent);
+
+ const minLevel = levelOffset || 0;
+ if (localContent === '') {
+ if (Math.max(0, block.level || 0) > minLevel) {
+ flushDebounce(localContent);
+ onIndentBlockRef.current(block.id, -1);
+ return;
+ }
+ if (isLast) {
+ // Bereits auf oberster Ebene und der letzte Block: kein weiterer leerer Block
+ return;
+ }
+ }
+
+ const start = e.currentTarget.selectionStart ?? localContent.length;
+ const end = e.currentTarget.selectionEnd ?? start;
+ let beforeText = localContent.slice(0, start);
+ let afterText = localContent.slice(end);
+
+ // Clean linebreaks at the split boundary if present
+ if (beforeText.endsWith('\r\n')) {
+ beforeText = beforeText.slice(0, -2);
+ } else if (beforeText.endsWith('\n')) {
+ beforeText = beforeText.slice(0, -1);
+ }
+ if (afterText.startsWith('\r\n')) {
+ afterText = afterText.slice(2);
+ } else if (afterText.startsWith('\n')) {
+ afterText = afterText.slice(1);
+ }
+
+ setLocalContent(beforeText);
+ localContentRef.current = beforeText;
+ flushDebounce(beforeText);
+ onCreateBlockBelowRef.current(block.id, afterText);
return;
}
@@ -422,6 +479,7 @@ export const OutlinerBlock: React.FC = ({
const level = Math.max(0, block.level || 0);
const visualLevel = Math.max(0, level - (levelOffset || 0));
+ const isEmpty = (!localContent || localContent.trim() === '') && !hasChildren;
// Parse rich tokens (WikiLinks [[Page]], Markdown Links [Title](url), raw URLs, and #Tags)
const tokens = useMemo(() => {
@@ -441,39 +499,29 @@ export const OutlinerBlock: React.FC = ({
return (
onDragOverBlock?.(e, index)}
onDrop={() => onDropBlock?.(index)}
+ onClick={(e) => {
+ if ((e.target as HTMLElement).closest('button, a, input, select')) return;
+ if (!activeFocus && canEdit && textareaRef.current) {
+ textareaRef.current.focus();
+ const len = textareaRef.current.value.length;
+ textareaRef.current.setSelectionRange(len, len);
+ }
+ }}
>
- {/* Remote Cursors Floating Name Badges on Block */}
- {activeRemoteCursors.length > 0 && (
-
- {activeRemoteCursors.map((c) => (
-
- {c.userName}
-
- ))}
-
- )}
-
{/* Indentation Guide Line */}
{visualLevel > 0 &&
Array.from({ length: visualLevel }).map((_, lvlIdx) => (
@@ -484,20 +532,8 @@ export const OutlinerBlock: React.FC
= ({
/>
))}
- {/* Bullet Controls: Drag Handle, Collapse Toggle, Bullet / Checkbox */}
+ {/* Bullet Controls: Collapse Toggle & Bullet (Drag-Handle & Zoom) / Checkbox */}
- {canEdit && (
-
- )}
-
{hasChildren ? (
{/* Main Block Content */}
-
+
{block.type === 'divider' ? (
@@ -581,9 +631,6 @@ export const OutlinerBlock: React.FC = ({
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"
@@ -601,16 +648,133 @@ export const OutlinerBlock: React.FC = ({
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"
/>
) : (
-
+
+ {/* View Layer with Inline Markdown & Actions (3-dots or Erweitert Badge) directly behind text */}
+
{
+ if (!activeFocus && canEdit && textareaRef.current) {
+ textareaRef.current.focus();
+ const len = textareaRef.current.value.length;
+ textareaRef.current.setSelectionRange(len, len);
+ }
+ }}
+ className={`w-full min-h-[1.5rem] leading-relaxed whitespace-pre-wrap break-words [overflow-wrap:anywhere] ${
+ activeFocus ? 'absolute inset-0 pointer-events-none' : 'relative cursor-text'
+ } ${
+ block.type === 'h1'
+ ? 'text-lg font-bold text-main tracking-tight'
+ : block.type === 'h2'
+ ? 'text-base font-semibold text-main'
+ : block.type === 'h3'
+ ? 'text-sm font-semibold text-main'
+ : block.type === 'todo' && block.checked
+ ? 'text-sm text-faint line-through'
+ : 'text-sm text-main'
+ }`}
+ >
+ {/* When actively focused, ghost text is invisible so textarea renders text/caret directly */}
+
+ {localContent ? renderInlineMarkdown(localContent) : '\u200b'}
+
+
+ {/* Inline Badge and 3-Dots directly behind the text */}
+ {block.type === 'todo' && (
+
+ {block.taskId && (
+
+
+ Erweitert
+
+ )}
+
+ {canEdit && (
+
+
+ {showTodoMenu && (
+ e.stopPropagation()}
+ >
+ {!block.taskId ? (
+
+ ) : (
+
+ )}
+
+ )}
+
+ )}
+
+ )}
+
+