$1`);
- // bold
- s = s.replace(/\*\*(.+?)\*\*/g, '$1');
- // italic
- s = s.replace(/\*(.+?)\*/g, '$1');
- // strikethrough
- s = s.replace(/~~(.+?)~~/g, '${codeLines.join('\n')}`);
+ while (j < lines.length && !lines[j].startsWith(fence)) { codeLines.push(lines[j]); j++; }
+ blocks.push({ id: genBlockId(), type: 'code', content: codeLines.join('\n') });
i = j + 1; continue;
}
-
+ // Divider
+ if (/^(---+|___+|\*\*\*+)$/.test(line.trim())) { blocks.push({ id: genBlockId(), type: 'divider', content: '' }); i++; continue; }
// Headings
const h3 = line.match(/^### (.+)/);
- if (h3) { parts.push(`, keywords: ['quote', 'blockquote'] }, + { type: 'code', label: 'Code', description: 'Code block', icon:
${inlineFormat(line)}
`); - i++; - } + // ─── Redo: ⌘⇧Z ────────────────────────────────────── + if (meta && e.shiftKey && e.key === 'z') { + e.preventDefault(); + redo(); + return; + } - return parts.join(''); -} + // ─── Enter: split block ────────────────────────────── + if (e.key === 'Enter' && !e.shiftKey && !meta) { + e.preventDefault(); + pushHistory(true); // save state before split + const offset = getCursorOffset(el); + const text = el?.textContent || ''; + const before = text.slice(0, offset); + const after = text.slice(offset); + + // Empty list/checkbox → convert to paragraph + if (['bullet', 'ordered', 'checkbox'].includes(block.type) && !before && !after) { + setBlocks(prev => prev.map(b => b.id === blockId ? { ...b, type: 'paragraph' } : b)); + pushHistory(true); + return; + } + + // Continue same type for lists + const newType = ['bullet', 'ordered', 'checkbox'].includes(block.type) ? block.type : 'paragraph'; + const newBlock: Block = { + id: genBlockId(), + type: newType as BlockType, + content: after, + checked: newType === 'checkbox' ? false : undefined, + }; + + // Update current block content + insert new block + if (el) el.textContent = before; + setBlocks(prev => { + const idx = prev.findIndex(b => b.id === blockId); + const updated = [...prev]; + updated[idx] = { ...block, content: before }; + updated.splice(idx + 1, 0, newBlock); + return updated; + }); + focusBlock(newBlock.id, 0); + pushHistory(true); + return; + } -// Also keep the React version for search preview -function renderMarkdownPreview(md: string, accentColor: string): React.ReactNode { - if (!md.trim()) return Start writing...; - // Use dangerouslySetInnerHTML for the HTML version - return ; + // ─── Backspace at start ────────────────────────────── + if (e.key === 'Backspace' && !meta) { + const offset = getCursorOffset(el); + const sel = window.getSelection(); + if (offset === 0 && sel?.isCollapsed) { + e.preventDefault(); + pushHistory(true); // save state before merge/convert + if (block.type !== 'paragraph') { + // Convert to paragraph + setBlocks(prev => prev.map(b => b.id === blockId ? { ...b, type: 'paragraph', checked: undefined } : b)); + } else { + // Merge with previous block + const idx = blocksRef.current.findIndex(b => b.id === blockId); + if (idx > 0) { + const prev = blocksRef.current[idx - 1]; + if (prev.type === 'divider') { + setBlocks(p => p.filter((_, i) => i !== idx - 1)); + focusBlock(blockId, 0); + } else { + const mergeOffset = prev.content.length; + const mergedContent = prev.content + block.content; + const prevEl = blockElsRef.current.get(prev.id); + if (prevEl) prevEl.textContent = mergedContent; + setBlocks(p => { + const u = [...p]; + u[idx - 1] = { ...prev, content: mergedContent }; + u.splice(idx, 1); + return u; + }); + focusBlock(prev.id, mergeOffset); + } + } + } + pushHistory(true); + return; + } + } + + // ─── Arrow navigation between blocks ───────────────── + + // ArrowDown at end of block → start of next block + if (e.key === 'ArrowDown' && !meta && !e.shiftKey) { + const offset = getCursorOffset(el); + const textLen = el?.textContent?.length || 0; + if (offset >= textLen) { + const idx = blocksRef.current.findIndex(b => b.id === blockId); + if (idx < blocksRef.current.length - 1) { + e.preventDefault(); + const next = blocksRef.current[idx + 1]; + focusBlock(next.id, 0); + } + } + } + + // ArrowUp at start of block → end of previous block + if (e.key === 'ArrowUp' && !meta && !e.shiftKey) { + const offset = getCursorOffset(el); + if (offset === 0) { + const idx = blocksRef.current.findIndex(b => b.id === blockId); + if (idx > 0) { + e.preventDefault(); + const prev = blocksRef.current[idx - 1]; + focusBlock(prev.id, prev.content.length); + } + } + } + + // ArrowLeft at start of block → end of previous block + if (e.key === 'ArrowLeft' && !meta && !e.shiftKey && !e.altKey) { + const offset = getCursorOffset(el); + const sel = window.getSelection(); + if (offset === 0 && sel?.isCollapsed) { + const idx = blocksRef.current.findIndex(b => b.id === blockId); + if (idx > 0) { + e.preventDefault(); + const prev = blocksRef.current[idx - 1]; + focusBlock(prev.id, prev.content.length); + } + } + } + + // ArrowRight at end of block → start of next block + if (e.key === 'ArrowRight' && !meta && !e.shiftKey && !e.altKey) { + const offset = getCursorOffset(el); + const textLen = el?.textContent?.length || 0; + const sel = window.getSelection(); + if (offset >= textLen && sel?.isCollapsed) { + const idx = blocksRef.current.findIndex(b => b.id === blockId); + if (idx < blocksRef.current.length - 1) { + e.preventDefault(); + const next = blocksRef.current[idx + 1]; + focusBlock(next.id, 0); + } + } + } + + // ─── Formatting shortcuts ──────────────────────────── + if (meta && !e.shiftKey && !e.altKey && e.key === 'b') { e.preventDefault(); pushHistory(true); wrapSelection('**', '**'); pushHistory(true); return; } + if (meta && !e.shiftKey && !e.altKey && e.key === 'i') { e.preventDefault(); pushHistory(true); wrapSelection('*', '*'); pushHistory(true); return; } + if (meta && e.shiftKey && e.key === 's') { e.preventDefault(); pushHistory(true); wrapSelection('~~', '~~'); pushHistory(true); return; } + if (meta && !e.shiftKey && !e.altKey && e.key === 'e') { e.preventDefault(); pushHistory(true); wrapSelection('`', '`'); pushHistory(true); return; } + if (meta && !e.shiftKey && !e.altKey && e.key === 'u') { e.preventDefault(); pushHistory(true); wrapSelection('', ''); pushHistory(true); return; } + if (meta && e.shiftKey && (e.key === 'm' || e.key === 'M')) { e.preventDefault(); pushHistory(true); wrapSelection('$', '$'); pushHistory(true); return; } + + // ─── ⌘+Enter: toggle checkbox ─────────────────────── + if (meta && e.key === 'Enter') { + if (block.type === 'checkbox') { + e.preventDefault(); + pushHistory(true); + setBlocks(prev => prev.map(b => b.id === blockId ? { ...b, checked: !b.checked } : b)); + pushHistory(true); + return; + } + } + }, [slashMenu, focusBlock, undo, redo, pushHistory]); + + // Wrap selection with prefix/suffix + const wrapSelection = useCallback((prefix: string, suffix: string) => { + const sel = window.getSelection(); + if (!sel || sel.rangeCount === 0) return; + const range = sel.getRangeAt(0); + const selected = range.toString(); + if (!selected) return; + const text = prefix + selected + suffix; + range.deleteContents(); + range.insertNode(document.createTextNode(text)); + // Update block content + const el = range.startContainer.parentElement?.closest('[data-block-id]') as HTMLElement; + if (el) { + const blockId = el.dataset.blockId; + if (blockId) { + setBlocks(prev => prev.map(b => b.id === blockId ? { ...b, content: el.textContent || '' } : b)); + } + } + }, []); + + // ─── Drag & Drop ───────────────────────────────────────────── + const handleDragStart = useCallback((e: React.DragEvent, idx: number) => { + e.dataTransfer.effectAllowed = 'move'; + e.dataTransfer.setData('text/plain', String(idx)); + setDragIdx(idx); + }, []); + + const handleDragOver = useCallback((e: React.DragEvent, idx: number) => { + e.preventDefault(); + e.dataTransfer.dropEffect = 'move'; + setDropIdx(idx); + }, []); + + const handleDrop = useCallback((e: React.DragEvent, toIdx: number) => { + e.preventDefault(); + const fromIdx = dragIdx; + setDragIdx(null); + setDropIdx(null); + if (fromIdx === null || fromIdx === toIdx) return; + setBlocks(prev => { + const updated = [...prev]; + const [moved] = updated.splice(fromIdx, 1); + updated.splice(toIdx > fromIdx ? toIdx - 1 : toIdx, 0, moved); + return updated; + }); + }, [dragIdx]); + + const handleDragEnd = useCallback(() => { + setDragIdx(null); + setDropIdx(null); + }, []); + + // ─── Render ────────────────────────────────────────────────── + return ( +