fix: align blocknote editor context

src/components/Editor.test.tsx

@@ -1,7 +1,21 @@
 import { render, screen, fireEvent, act } from '@testing-library/react'
-import type { ComponentProps } from 'react'
+import type { ComponentProps, PropsWithChildren } from 'react'
 import { describe, it, expect, vi } from 'vitest'
 
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: vi.fn().mockImplementation(() => ({
+    matches: false,
+    media: '',
+    onchange: null,
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+    dispatchEvent: vi.fn(),
+    addListener: vi.fn(),
+    removeListener: vi.fn(),
+  })),
+})
+
 // Hoisted mock editor — available before vi.mock factory runs.
 // Tests can reconfigure spies (e.g. mockTryParse.mockResolvedValue) before rendering.
 const mockEditor = vi.hoisted(() => ({
@@ -44,6 +58,14 @@ let capturedGetItems: ((query: string) => Promise<any[]>) | null = null
 vi.mock('@blocknote/react', () => ({
   createReactInlineContentSpec: () => ({ render: () => null }),
   useCreateBlockNote: () => mockEditor,
+  ComponentsContext: {
+    Provider: ({ children }: PropsWithChildren) => <>{children}</>,
+  },
+  BlockNoteViewRaw: ({ children, editable }: PropsWithChildren<{ editable?: boolean }>) => (
+    <div data-testid="blocknote-view" data-editable={editable !== false ? 'true' : 'false'}>
+      {children}
+    </div>
+  ),
   // eslint-disable-next-line @typescript-eslint/no-explicit-any -- mock
   SuggestionMenuController: (props: any) => {
     capturedGetItemsByTrigger[props.triggerCharacter] = props.getItems
@@ -53,7 +75,7 @@ vi.mock('@blocknote/react', () => ({
 }))
 
 vi.mock('@blocknote/mantine', () => ({
-  BlockNoteView: ({ children, editable }: { children?: React.ReactNode; editable?: boolean }) => <div data-testid="blocknote-view" data-editable={editable !== false ? 'true' : 'false'}>{children}</div>,
+  components: {},
 }))
 
 vi.mock('@blocknote/mantine/style.css', () => ({}))

src/components/SingleEditorView.tsx

@@ -1,7 +1,8 @@
-import { useEffect, useCallback, useMemo, useRef } from 'react'
+import { useEffect, useCallback, useMemo, useRef, useContext } from 'react'
 import { trackEvent } from '../lib/telemetry'
-import { useCreateBlockNote, SuggestionMenuController } from '@blocknote/react'
-import { BlockNoteView } from '@blocknote/mantine'
+import { useCreateBlockNote, SuggestionMenuController, BlockNoteViewRaw, ComponentsContext } from '@blocknote/react'
+import { components } from '@blocknote/mantine'
+import { MantineContext, MantineProvider } from '@mantine/core'
 import { useEditorTheme } from '../hooks/useTheme'
 import { useImageDrop } from '../hooks/useImageDrop'
 import { buildTypeEntryMap } from '../utils/typeColors'
@@ -24,20 +25,37 @@ type TestTableBlock = {
   content?: { type?: string; columnWidths?: Array<number | null> }
 }
 
+function SharedContextBlockNoteView(props: React.ComponentProps<typeof BlockNoteViewRaw>) {
+  const mantineContext = useContext(MantineContext)
+  const view = (
+    <ComponentsContext.Provider value={components}>
+      <BlockNoteViewRaw {...props} />
+    </ComponentsContext.Provider>
+  )
+
+  if (mantineContext) return view
+
+  return (
+    <MantineProvider
+      withCssVariables={false}
+      getRootElement={() => undefined}
+    >
+      {view}
+    </MantineProvider>
+  )
+}
+
 function applySeededColumnWidths(
   parsedBlocks: Array<TestTableBlock>,
   columnWidths?: Array<number | null>,
 ) {
-  const tableBlock = parsedBlocks[0]
-  const tableContent = tableBlock?.content
+  if (!columnWidths) return
 
-  if (
-    !columnWidths ||
-    tableBlock?.type !== 'table' ||
-    tableContent?.type !== 'tableContent'
-  ) {
-    return
-  }
+  const tableBlock = parsedBlocks[0]
+  if (tableBlock?.type !== 'table') return
+
+  const tableContent = tableBlock.content
+  if (tableContent?.type !== 'tableContent') return
 
   tableContent.columnWidths = [...columnWidths]
 }
@@ -164,7 +182,7 @@ export function SingleEditorView({ editor, entries, onNavigateWikilink, onChange
           <div className="editor__drop-overlay-label">Drop image here</div>
         </div>
       )}
-      <BlockNoteView
+      <SharedContextBlockNoteView
         editor={editor}
         theme="light"
         onChange={onChange}
@@ -182,7 +200,7 @@ export function SingleEditorView({ editor, entries, onNavigateWikilink, onChange
           suggestionMenuComponent={WikilinkSuggestionMenu}
           onItemClick={(item: WikilinkSuggestionItem) => item.onItemClick()}
         />
-      </BlockNoteView>
+      </SharedContextBlockNoteView>
     </div>
   )
 }