* refactor: decompose Editor.tsx into focused subcomponents and hooks Extract from the monolithic Editor component (cc=35, 213 LoC, score 7.82): - useDiffMode hook: diff state + toggle/commit-diff handlers - useEditorFocus hook: new-note focus event listener - editorSchema: WikiLink spec + BlockNote schema (module-level) - SingleEditorView: BlockNote editor + suggestion menus - EditorContent: breadcrumb bar + diff/editor/loading views - EditorRightPanel: AI chat / Inspector panel switching - suggestionEnrichment util: shared enrichment logic (eliminates duplication) Editor.tsx is now 10.0 code health (was 7.82). All 25 existing tests pass. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * refactor: extract standalone functions from NoteList and Sidebar to reduce cc NoteList: extract createNoteStatusResolver and toggleSetMember from NoteListInner (cc 13→8, score 9.04→9.38). Sidebar: extract applyCustomization from Sidebar (cc 10→7, score 9.09→10.0). Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * test: add tests for useDiffMode, useEditorFocus, and suggestionEnrichment Cover extracted hook/utility logic: diff toggle/reset, editor focus event listener with adaptive timing, and suggestion item enrichment pipeline. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * docs: update architecture for editor decomposition and write .claude-done Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
109 lines
4.4 KiB
TypeScript
109 lines
4.4 KiB
TypeScript
import { useEffect, useCallback, useMemo, useRef } from 'react'
|
|
import { useCreateBlockNote, SuggestionMenuController } from '@blocknote/react'
|
|
import { BlockNoteView } from '@blocknote/mantine'
|
|
import { useEditorTheme } from '../hooks/useTheme'
|
|
import { useImageDrop } from '../hooks/useImageDrop'
|
|
import { buildTypeEntryMap } from '../utils/typeColors'
|
|
import { preFilterWikilinks, deduplicateByPath, MIN_QUERY_LENGTH } from '../utils/wikilinkSuggestions'
|
|
import { filterPersonMentions, PERSON_MENTION_MIN_QUERY } from '../utils/personMentionSuggestions'
|
|
import { attachClickHandlers, enrichSuggestionItems } from '../utils/suggestionEnrichment'
|
|
import { WikilinkSuggestionMenu, type WikilinkSuggestionItem } from './WikilinkSuggestionMenu'
|
|
import type { VaultEntry } from '../types'
|
|
import { _wikilinkEntriesRef } from './editorSchema'
|
|
|
|
/** Single BlockNote editor view — content is swapped via replaceBlocks */
|
|
export function SingleEditorView({ editor, entries, onNavigateWikilink, onChange }: {
|
|
editor: ReturnType<typeof useCreateBlockNote>
|
|
entries: VaultEntry[]
|
|
onNavigateWikilink: (target: string) => void
|
|
onChange?: () => void
|
|
}) {
|
|
const navigateRef = useRef(onNavigateWikilink)
|
|
useEffect(() => { navigateRef.current = onNavigateWikilink }, [onNavigateWikilink])
|
|
const { cssVars } = useEditorTheme()
|
|
const containerRef = useRef<HTMLDivElement>(null)
|
|
const { isDragOver } = useImageDrop({ containerRef })
|
|
|
|
useEffect(() => {
|
|
_wikilinkEntriesRef.current = entries
|
|
}, [entries])
|
|
|
|
useEffect(() => {
|
|
const container = document.querySelector('.editor__blocknote-container')
|
|
if (!container) return
|
|
const handler = (e: MouseEvent) => {
|
|
const wikilink = (e.target as HTMLElement).closest('.wikilink')
|
|
if (wikilink) {
|
|
e.preventDefault()
|
|
e.stopPropagation()
|
|
const target = (wikilink as HTMLElement).dataset.target
|
|
if (target) navigateRef.current(target)
|
|
}
|
|
}
|
|
container.addEventListener('click', handler as EventListener, true)
|
|
return () => container.removeEventListener('click', handler as EventListener, true)
|
|
}, [editor])
|
|
|
|
const typeEntryMap = useMemo(() => buildTypeEntryMap(entries), [entries])
|
|
|
|
const baseItems = useMemo(
|
|
() => deduplicateByPath(entries.map(entry => ({
|
|
title: entry.title,
|
|
aliases: [...new Set([entry.filename.replace(/\.md$/, ''), ...entry.aliases])],
|
|
group: entry.isA || 'Note',
|
|
entryTitle: entry.title,
|
|
path: entry.path,
|
|
}))),
|
|
[entries]
|
|
)
|
|
|
|
const insertWikilink = useCallback((target: string) => {
|
|
editor.insertInlineContent([
|
|
{ type: 'wikilink' as const, props: { target } },
|
|
" ",
|
|
])
|
|
}, [editor])
|
|
|
|
const getWikilinkItems = useCallback(async (query: string): Promise<WikilinkSuggestionItem[]> => {
|
|
if (query.length < MIN_QUERY_LENGTH) return []
|
|
const candidates = preFilterWikilinks(baseItems, query)
|
|
const items = attachClickHandlers(candidates, insertWikilink)
|
|
return enrichSuggestionItems(items, query, typeEntryMap)
|
|
}, [baseItems, insertWikilink, typeEntryMap])
|
|
|
|
const getPersonMentionItems = useCallback(async (query: string): Promise<WikilinkSuggestionItem[]> => {
|
|
if (query.length < PERSON_MENTION_MIN_QUERY) return []
|
|
const candidates = filterPersonMentions(baseItems, query)
|
|
const items = attachClickHandlers(candidates, insertWikilink)
|
|
return enrichSuggestionItems(items, query, typeEntryMap)
|
|
}, [baseItems, insertWikilink, typeEntryMap])
|
|
|
|
return (
|
|
<div ref={containerRef} className={`editor__blocknote-container${isDragOver ? ' editor__blocknote-container--drag-over' : ''}`} style={cssVars as React.CSSProperties}>
|
|
{isDragOver && (
|
|
<div className="editor__drop-overlay">
|
|
<div className="editor__drop-overlay-label">Drop image here</div>
|
|
</div>
|
|
)}
|
|
<BlockNoteView
|
|
editor={editor}
|
|
theme="light"
|
|
onChange={onChange}
|
|
>
|
|
<SuggestionMenuController
|
|
triggerCharacter="[["
|
|
getItems={getWikilinkItems}
|
|
suggestionMenuComponent={WikilinkSuggestionMenu}
|
|
onItemClick={(item: WikilinkSuggestionItem) => item.onItemClick()}
|
|
/>
|
|
<SuggestionMenuController
|
|
triggerCharacter="@"
|
|
getItems={getPersonMentionItems}
|
|
suggestionMenuComponent={WikilinkSuggestionMenu}
|
|
onItemClick={(item: WikilinkSuggestionItem) => item.onItemClick()}
|
|
/>
|
|
</BlockNoteView>
|
|
</div>
|
|
)
|
|
}
|