diff --git a/src/features/editor/ui/Editor.tsx b/src/features/editor/ui/Editor.tsx index 0666858..da99eb1 100644 --- a/src/features/editor/ui/Editor.tsx +++ b/src/features/editor/ui/Editor.tsx @@ -178,7 +178,6 @@ const PASS_THROUGH_KEYS = new Set([ 'fileDeleteButton', 'fileDownloadButton', 'filePreviewButton', - 'addTiptapCommentButton', ]) /** @@ -216,6 +215,13 @@ export const Editor = forwardRef(function Editor( }, ref ) { + /** + * Tracks whether the editor is still loading initial content. + * + * While `true`, `handleChange` exits early to prevent auto-save from + * firing on programmatic content population (e.g. `replaceBlocks`). + * Set to `false` once the note content has been fully applied. + */ const loadingRef = useRef(true) /** * Whether the editor content has finished loading and is safe to display. @@ -226,11 +232,16 @@ export const Editor = forwardRef(function Editor( * to the editor inside the content-loading `useEffect`. */ const [contentReady, setContentReady] = useState(false) + /** Resolved theme ("light" or "dark") passed to BlockNoteView. */ const { resolvedTheme } = useTheme() + /** User-configured editor font size in pixels. */ const { fontSize } = useEditorFontSize() + /** User-configured editor font family string. */ const { fontFamily } = useEditorFont() + /** User-configured toolbar item order and visibility from the persistent store. */ const { items: toolbarItemConfigs } = useToolbarConfig() + /** Keeps the cursor vertically centered in the viewport during navigation. */ useCursorCentering() /** @@ -271,17 +282,21 @@ export const Editor = forwardRef(function Editor( return [...passThroughItems, ...configuredItems] }, [toolbarItemConfigs]) + /** Debounced auto-save hook (500 ms delay). Only active when `noteId` is non-null. */ const { scheduleSave, saveStatus } = useAutoSave( 500, noteId ?? undefined, onNoteSaved ) + /** Intercepts pasted content to extract and handle embedded links. */ const pasteHandler = useLinkPreview() + /** Propagates the current save status to the parent component. */ useEffect(() => { onStatusChange?.(saveStatus) }, [saveStatus, onStatusChange]) + /** BlockNote editor instance with custom schema, extensions, and image handling. */ const editor = useCreateBlockNote({ schema, initialContent: DEFAULT_BLOCKS, @@ -300,6 +315,7 @@ export const Editor = forwardRef(function Editor( resolveFileUrl: resolveImageUrl, }) + /** Exposes the editor instance to parent components via the forwarded ref. */ useImperativeHandle(ref, () => ({ editor }), [editor]) // Sync the locked prop to the module-level flag read by the ProseMirror plugin. @@ -307,7 +323,9 @@ export const Editor = forwardRef(function Editor( setReadOnly(locked) }, [locked]) + /** Intercepts Cmd/Ctrl+Click on links inside the editor to open them in the browser. */ useLinkClickHandler(editor) + /** Shows a toast notification when the user copies content from the editor. */ useCopyToast(editor) // Rewrite clipboard text/plain so Markdown lists are tight (no blank lines between items). useClipboardTightenList(editor) @@ -414,6 +432,7 @@ export const Editor = forwardRef(function Editor( } }, [editor, onSuggestionMenuOpen]) + /** Search & replace state for the {@link SearchReplacePanel}. */ const search = useSearchReplace(editor) /** diff --git a/src/features/settings/lib/toolbarConfig.ts b/src/features/settings/lib/toolbarConfig.ts index ba13f31..3c0bab8 100644 --- a/src/features/settings/lib/toolbarConfig.ts +++ b/src/features/settings/lib/toolbarConfig.ts @@ -31,7 +31,6 @@ export const TOOLBAR_ITEM_LABELS: Record = { nestBlockButton: 'Indent', unnestBlockButton: 'Outdent', createLinkButton: 'Create Link', - addCommentButton: 'Comment', } /** Default toolbar layout — all items visible, in canonical order. */ @@ -48,7 +47,6 @@ export const DEFAULT_TOOLBAR_CONFIG: ToolbarItemConfig[] = [ { key: 'nestBlockButton', visible: true }, { key: 'unnestBlockButton', visible: true }, { key: 'createLinkButton', visible: true }, - { key: 'addCommentButton', visible: true }, ] /** Store key for persistence via configStore. */ diff --git a/src/features/settings/ui/ToolbarOption.tsx b/src/features/settings/ui/ToolbarOption.tsx index 35e6ccd..dc5618e 100644 --- a/src/features/settings/ui/ToolbarOption.tsx +++ b/src/features/settings/ui/ToolbarOption.tsx @@ -29,7 +29,6 @@ import { RiAlignLeft, RiAlignRight, RiBold, - RiChat3Line, RiIndentDecrease, RiIndentIncrease, RiItalic, @@ -51,7 +50,9 @@ import type { ToolbarItemConfig } from '@/features/settings/lib/toolbarConfig' import { TOOLBAR_ITEM_LABELS } from '@/features/settings/lib/toolbarConfig' import { cn } from '@/lib/utils' +/** Icon size in pixels used for all toolbar item icons in this settings panel. */ const ICON_SIZE = 14 +/** Shared CSS class that prevents icons from shrinking in a flex layout. */ const ICON_CLASS = 'shrink-0' /** Icons matching the actual BubbleMenu buttons. */ @@ -76,7 +77,6 @@ const TOOLBAR_ITEM_ICONS: Record = { ), createLinkButton: , - addCommentButton: , } /** @@ -160,6 +160,7 @@ export function ToolbarOption() { const { items, reorder, toggleVisibility, reset, isCustomized } = useToolbarConfig() + /** DnD sensors: pointer drag (5 px activation distance) and keyboard arrow keys. */ const sensors = useSensors( useSensor(PointerSensor, { activationConstraint: { distance: 5 } }), useSensor(KeyboardSensor, { @@ -167,6 +168,12 @@ export function ToolbarOption() { }) ) + /** + * Handles the end of a drag event by computing the old and new indices + * and delegating to the `reorder` callback from the toolbar config provider. + * + * @param event - The drag-end event from `@dnd-kit/core`. + */ const handleDragEnd = useCallback( (event: DragEndEvent) => { const { active, over } = event