diff --git a/src/components/Editor.test.tsx b/src/components/Editor.test.tsx index 38bf6a42..3ba4b8fa 100644 --- a/src/components/Editor.test.tsx +++ b/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) | null = null vi.mock('@blocknote/react', () => ({ createReactInlineContentSpec: () => ({ render: () => null }), useCreateBlockNote: () => mockEditor, + ComponentsContext: { + Provider: ({ children }: PropsWithChildren) => <>{children}, + }, + BlockNoteViewRaw: ({ children, editable }: PropsWithChildren<{ editable?: boolean }>) => ( +
+ {children} +
+ ), // 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 }) =>
{children}
, + components: {}, })) vi.mock('@blocknote/mantine/style.css', () => ({})) diff --git a/src/components/SingleEditorView.tsx b/src/components/SingleEditorView.tsx index fd85a196..29d5c19f 100644 --- a/src/components/SingleEditorView.tsx +++ b/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 } } +function SharedContextBlockNoteView(props: React.ComponentProps) { + const mantineContext = useContext(MantineContext) + const view = ( + + + + ) + + if (mantineContext) return view + + return ( + undefined} + > + {view} + + ) +} + function applySeededColumnWidths( parsedBlocks: Array, columnWidths?: Array, ) { - 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
Drop image here
)} - item.onItemClick()} /> - + ) }