diff --git a/.changeset/old-beds-explain.md b/.changeset/old-beds-explain.md new file mode 100644 index 0000000000..77014a7e70 --- /dev/null +++ b/.changeset/old-beds-explain.md @@ -0,0 +1,15 @@ +--- +'@udecode/react-utils': minor +'@udecode/plate-selection': minor +'@udecode/plate-combobox': minor +'@udecode/plate-floating': minor +'@udecode/plate-caption': minor +'@udecode/plate-heading': minor +'@udecode/plate-cursor': minor +'@udecode/plate-emoji': minor +'@udecode/cmdk': minor +'@udecode/plate-core': minor +'@udecode/plate-dnd': minor +--- + +feat: Add null to React.Ref related types to be compatible with react@19 diff --git a/apps/www/content/docs/api/core/store.mdx b/apps/www/content/docs/api/core/store.mdx index 1e00ae52e1..c20737b363 100644 --- a/apps/www/content/docs/api/core/store.mdx +++ b/apps/www/content/docs/api/core/store.mdx @@ -29,7 +29,7 @@ A unique ID used as a provider scope. Use it if you have multiple `Plate` in the - **Default:** random id - + A reference to the editor container element. diff --git a/apps/www/content/docs/api/resizable.mdx b/apps/www/content/docs/api/resizable.mdx index 49454388d4..b7f56631f0 100644 --- a/apps/www/content/docs/api/resizable.mdx +++ b/apps/www/content/docs/api/resizable.mdx @@ -97,7 +97,7 @@ Provides resize behavior props and handlers for resizable elements. Style props for the wrapper element: - position: 'relative' - + Reference to the wrapper element. diff --git a/apps/www/content/docs/combobox.mdx b/apps/www/content/docs/combobox.mdx index 9d8001d03f..8383a1f870 100644 --- a/apps/www/content/docs/combobox.mdx +++ b/apps/www/content/docs/combobox.mdx @@ -107,7 +107,7 @@ Hook for managing combobox input behavior and keyboard interactions. - + Reference to the input element. @@ -200,7 +200,7 @@ const MyCombobox = () => { Hook for tracking cursor position in an HTML input element. - + Reference to the input element to track. diff --git a/apps/www/content/docs/font.mdx b/apps/www/content/docs/font.mdx index d4001cf990..a9655b1cca 100644 --- a/apps/www/content/docs/font.mdx +++ b/apps/www/content/docs/font.mdx @@ -101,7 +101,7 @@ A behavior hook for the color dropdown menu component. A behavior hook for the color input component. - + A ref object that should be assigned to the color input element. diff --git a/apps/www/content/docs/media.mdx b/apps/www/content/docs/media.mdx index 9f6d37f0c9..5dc3e1b199 100644 --- a/apps/www/content/docs/media.mdx +++ b/apps/www/content/docs/media.mdx @@ -755,7 +755,7 @@ A behavior hook for resizable elements. - + A React reference to the outermost div wrapping the resizable element. diff --git a/apps/www/content/docs/toc.mdx b/apps/www/content/docs/toc.mdx index aeacdeab8c..2611dea3d5 100644 --- a/apps/www/content/docs/toc.mdx +++ b/apps/www/content/docs/toc.mdx @@ -212,7 +212,7 @@ This hook manages the state for the TOC sidebar. Function to set whether the mouse is over the TOC. - + Ref for the TOC element. @@ -240,7 +240,7 @@ This hook provides props and handlers for the TOC sidebar component. Function to set whether the mouse is over the TOC. - + Ref for the TOC element. @@ -252,7 +252,7 @@ This hook provides props and handlers for the TOC sidebar component. Props for the TOC navigation element. - + Ref for the TOC element. diff --git a/apps/www/public/r/styles/default/media-placeholder-element.json b/apps/www/public/r/styles/default/media-placeholder-element.json index 6c8ffc955e..92a75e0be3 100644 --- a/apps/www/public/r/styles/default/media-placeholder-element.json +++ b/apps/www/public/r/styles/default/media-placeholder-element.json @@ -20,7 +20,7 @@ }, "files": [ { - "content": "'use client';\n\nimport React, { useCallback, useEffect, useRef, useState } from 'react';\nimport type { ReactNode } from 'react';\n\nimport type { TPlaceholderElement } from '@udecode/plate-media';\n\nimport { cn } from '@udecode/cn';\nimport {\n insertNodes,\n removeNodes,\n withoutSavingHistory,\n} from '@udecode/plate-common';\nimport {\n findNodePath,\n useEditorPlugin,\n withHOC,\n withRef,\n} from '@udecode/plate-common/react';\nimport {\n AudioPlugin,\n FilePlugin,\n ImagePlugin,\n PlaceholderPlugin,\n PlaceholderProvider,\n VideoPlugin,\n updateUploadHistory,\n} from '@udecode/plate-media/react';\nimport { AudioLines, FileUp, Film, ImageIcon } from 'lucide-react';\nimport { useFilePicker } from 'use-file-picker';\n\nimport { useUploadFile } from '@/lib/uploadthing';\n\nimport { PlateElement } from './plate-element';\nimport { Spinner } from './spinner';\n\nconst CONTENT: Record<\n string,\n {\n accept: string[];\n content: ReactNode;\n icon: ReactNode;\n }\n> = {\n [AudioPlugin.key]: {\n accept: ['audio/*'],\n content: 'Add an audio file',\n icon: ,\n },\n [FilePlugin.key]: {\n accept: ['*'],\n content: 'Add a file',\n icon: ,\n },\n [ImagePlugin.key]: {\n accept: ['image/*'],\n content: 'Add an image',\n icon: ,\n },\n [VideoPlugin.key]: {\n accept: ['video/*'],\n content: 'Add a video',\n icon: ,\n },\n};\n\nexport const MediaPlaceholderElement = withHOC(\n PlaceholderProvider,\n withRef(\n ({ children, className, editor, nodeProps, ...props }, ref) => {\n const element = props.element as TPlaceholderElement;\n\n const { api } = useEditorPlugin(PlaceholderPlugin);\n\n const { isUploading, progress, uploadFile, uploadedFile, uploadingFile } =\n useUploadFile();\n\n const loading = isUploading && uploadingFile;\n\n const currentContent = CONTENT[element.mediaType];\n\n const isImage = element.mediaType === ImagePlugin.key;\n\n const imageRef = useRef(null);\n\n const { openFilePicker } = useFilePicker({\n accept: currentContent.accept,\n multiple: true,\n onFilesSelected: ({ plainFiles: updatedFiles }) => {\n const firstFile = updatedFiles[0];\n const restFiles = updatedFiles.slice(1);\n\n replaceCurrentPlaceholder(firstFile);\n\n restFiles.length > 0 && (editor as any).tf.insert.media(restFiles);\n },\n });\n\n const replaceCurrentPlaceholder = useCallback(\n (file: File) => {\n void uploadFile(file);\n api.placeholder.addUploadingFile(element.id as string, file);\n },\n [api.placeholder, element.id, uploadFile]\n );\n\n useEffect(() => {\n if (!uploadedFile) return;\n\n const path = findNodePath(editor, element);\n\n withoutSavingHistory(editor, () => {\n removeNodes(editor, { at: path });\n\n const node = {\n children: [{ text: '' }],\n initialHeight: imageRef.current?.height,\n initialWidth: imageRef.current?.width,\n isUpload: true,\n name: element.mediaType === FilePlugin.key ? uploadedFile.name : '',\n placeholderId: element.id as string,\n type: element.mediaType!,\n url: uploadedFile.url,\n };\n\n insertNodes(editor, node, { at: path });\n\n updateUploadHistory(editor, node);\n });\n\n api.placeholder.removeUploadingFile(element.id as string);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [uploadedFile, element.id]);\n\n // React dev mode will call useEffect twice\n const isReplaced = useRef(false);\n\n /** Paste and drop */\n useEffect(() => {\n if (isReplaced.current) return;\n\n isReplaced.current = true;\n const currentFiles = api.placeholder.getUploadingFile(\n element.id as string\n );\n\n if (!currentFiles) return;\n\n replaceCurrentPlaceholder(currentFiles);\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [isReplaced]);\n\n return (\n \n {(!loading || !isImage) && (\n !loading && openFilePicker()}\n contentEditable={false}\n >\n
\n {currentContent.icon}\n
\n
\n
\n {loading ? uploadingFile?.name : currentContent.content}\n
\n\n {loading && !isImage && (\n
\n
{formatBytes(uploadingFile?.size ?? 0)}
\n
–
\n
\n \n {progress ?? 0}%\n
\n
\n )}\n
\n \n )}\n\n {isImage && loading && (\n \n )}\n\n {children}\n \n );\n }\n )\n);\n\nexport function ImageProgress({\n className,\n file,\n imageRef,\n progress = 0,\n}: {\n file: File;\n className?: string;\n imageRef?: React.RefObject;\n progress?: number;\n}) {\n const [objectUrl, setObjectUrl] = useState(null);\n\n useEffect(() => {\n const url = URL.createObjectURL(file);\n setObjectUrl(url);\n\n return () => {\n URL.revokeObjectURL(url);\n };\n }, [file]);\n\n if (!objectUrl) {\n return null;\n }\n\n return (\n
\n \n {progress < 100 && (\n
\n \n \n {Math.round(progress)}%\n \n
\n )}\n
\n );\n}\n\nexport function formatBytes(\n bytes: number,\n opts: {\n decimals?: number;\n sizeType?: 'accurate' | 'normal';\n } = {}\n) {\n const { decimals = 0, sizeType = 'normal' } = opts;\n\n const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];\n const accurateSizes = ['Bytes', 'KiB', 'MiB', 'GiB', 'TiB'];\n\n if (bytes === 0) return '0 Byte';\n\n const i = Math.floor(Math.log(bytes) / Math.log(1024));\n\n return `${(bytes / Math.pow(1024, i)).toFixed(decimals)} ${\n sizeType === 'accurate'\n ? (accurateSizes[i] ?? 'Bytest')\n : (sizes[i] ?? 'Bytes')\n }`;\n}\n", + "content": "'use client';\n\nimport React, { useCallback, useEffect, useRef, useState } from 'react';\nimport type { ReactNode } from 'react';\n\nimport type { TPlaceholderElement } from '@udecode/plate-media';\n\nimport { cn } from '@udecode/cn';\nimport {\n insertNodes,\n removeNodes,\n withoutSavingHistory,\n} from '@udecode/plate-common';\nimport {\n findNodePath,\n useEditorPlugin,\n withHOC,\n withRef,\n} from '@udecode/plate-common/react';\nimport {\n AudioPlugin,\n FilePlugin,\n ImagePlugin,\n PlaceholderPlugin,\n PlaceholderProvider,\n VideoPlugin,\n updateUploadHistory,\n} from '@udecode/plate-media/react';\nimport { AudioLines, FileUp, Film, ImageIcon } from 'lucide-react';\nimport { useFilePicker } from 'use-file-picker';\n\nimport { useUploadFile } from '@/lib/uploadthing';\n\nimport { PlateElement } from './plate-element';\nimport { Spinner } from './spinner';\n\nconst CONTENT: Record<\n string,\n {\n accept: string[];\n content: ReactNode;\n icon: ReactNode;\n }\n> = {\n [AudioPlugin.key]: {\n accept: ['audio/*'],\n content: 'Add an audio file',\n icon: ,\n },\n [FilePlugin.key]: {\n accept: ['*'],\n content: 'Add a file',\n icon: ,\n },\n [ImagePlugin.key]: {\n accept: ['image/*'],\n content: 'Add an image',\n icon: ,\n },\n [VideoPlugin.key]: {\n accept: ['video/*'],\n content: 'Add a video',\n icon: ,\n },\n};\n\nexport const MediaPlaceholderElement = withHOC(\n PlaceholderProvider,\n withRef(\n ({ children, className, editor, nodeProps, ...props }, ref) => {\n const element = props.element as TPlaceholderElement;\n\n const { api } = useEditorPlugin(PlaceholderPlugin);\n\n const { isUploading, progress, uploadFile, uploadedFile, uploadingFile } =\n useUploadFile();\n\n const loading = isUploading && uploadingFile;\n\n const currentContent = CONTENT[element.mediaType];\n\n const isImage = element.mediaType === ImagePlugin.key;\n\n const imageRef = useRef(null);\n\n const { openFilePicker } = useFilePicker({\n accept: currentContent.accept,\n multiple: true,\n onFilesSelected: ({ plainFiles: updatedFiles }) => {\n const firstFile = updatedFiles[0];\n const restFiles = updatedFiles.slice(1);\n\n replaceCurrentPlaceholder(firstFile);\n\n restFiles.length > 0 && (editor as any).tf.insert.media(restFiles);\n },\n });\n\n const replaceCurrentPlaceholder = useCallback(\n (file: File) => {\n void uploadFile(file);\n api.placeholder.addUploadingFile(element.id as string, file);\n },\n [api.placeholder, element.id, uploadFile]\n );\n\n useEffect(() => {\n if (!uploadedFile) return;\n\n const path = findNodePath(editor, element);\n\n withoutSavingHistory(editor, () => {\n removeNodes(editor, { at: path });\n\n const node = {\n children: [{ text: '' }],\n initialHeight: imageRef.current?.height,\n initialWidth: imageRef.current?.width,\n isUpload: true,\n name: element.mediaType === FilePlugin.key ? uploadedFile.name : '',\n placeholderId: element.id as string,\n type: element.mediaType!,\n url: uploadedFile.url,\n };\n\n insertNodes(editor, node, { at: path });\n\n updateUploadHistory(editor, node);\n });\n\n api.placeholder.removeUploadingFile(element.id as string);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [uploadedFile, element.id]);\n\n // React dev mode will call useEffect twice\n const isReplaced = useRef(false);\n\n /** Paste and drop */\n useEffect(() => {\n if (isReplaced.current) return;\n\n isReplaced.current = true;\n const currentFiles = api.placeholder.getUploadingFile(\n element.id as string\n );\n\n if (!currentFiles) return;\n\n replaceCurrentPlaceholder(currentFiles);\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [isReplaced]);\n\n return (\n \n {(!loading || !isImage) && (\n !loading && openFilePicker()}\n contentEditable={false}\n >\n
\n {currentContent.icon}\n
\n
\n
\n {loading ? uploadingFile?.name : currentContent.content}\n
\n\n {loading && !isImage && (\n
\n
{formatBytes(uploadingFile?.size ?? 0)}
\n
–
\n
\n \n {progress ?? 0}%\n
\n
\n )}\n
\n \n )}\n\n {isImage && loading && (\n \n )}\n\n {children}\n \n );\n }\n )\n);\n\nexport function ImageProgress({\n className,\n file,\n imageRef,\n progress = 0,\n}: {\n file: File;\n className?: string;\n imageRef?: React.RefObject;\n progress?: number;\n}) {\n const [objectUrl, setObjectUrl] = useState(null);\n\n useEffect(() => {\n const url = URL.createObjectURL(file);\n setObjectUrl(url);\n\n return () => {\n URL.revokeObjectURL(url);\n };\n }, [file]);\n\n if (!objectUrl) {\n return null;\n }\n\n return (\n
\n \n {progress < 100 && (\n
\n \n \n {Math.round(progress)}%\n \n
\n )}\n
\n );\n}\n\nexport function formatBytes(\n bytes: number,\n opts: {\n decimals?: number;\n sizeType?: 'accurate' | 'normal';\n } = {}\n) {\n const { decimals = 0, sizeType = 'normal' } = opts;\n\n const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];\n const accurateSizes = ['Bytes', 'KiB', 'MiB', 'GiB', 'TiB'];\n\n if (bytes === 0) return '0 Byte';\n\n const i = Math.floor(Math.log(bytes) / Math.log(1024));\n\n return `${(bytes / Math.pow(1024, i)).toFixed(decimals)} ${\n sizeType === 'accurate'\n ? (accurateSizes[i] ?? 'Bytest')\n : (sizes[i] ?? 'Bytes')\n }`;\n}\n", "path": "plate-ui/media-placeholder-element.tsx", "target": "components/plate-ui/media-placeholder-element.tsx", "type": "registry:ui" diff --git a/apps/www/src/components/block-viewer.tsx b/apps/www/src/components/block-viewer.tsx index dfda1b3950..6c1cb3522d 100644 --- a/apps/www/src/components/block-viewer.tsx +++ b/apps/www/src/components/block-viewer.tsx @@ -69,7 +69,7 @@ type BlockViewerContext = { dependencies: string[]; isLoading: boolean; item: z.infer & { src?: string }; - resizablePanelRef: React.RefObject | null; + resizablePanelRef: React.RefObject | null; setActiveFile: (file: string) => void; setView: (view: 'code' | 'preview') => void; tree: ReturnType | null; diff --git a/packages/caption/src/react/components/CaptionTextarea.tsx b/packages/caption/src/react/components/CaptionTextarea.tsx index 6ff040a84a..d2a58e5469 100644 --- a/packages/caption/src/react/components/CaptionTextarea.tsx +++ b/packages/caption/src/react/components/CaptionTextarea.tsx @@ -26,7 +26,7 @@ import { TextareaAutosize } from './TextareaAutosize'; /** Focus textareaRef when focusCaptionPath is set to the image path. */ export const useCaptionTextareaFocus = ( - textareaRef: React.RefObject + textareaRef: React.RefObject ) => { const editor = useEditorRef(); const element = useElement(); diff --git a/packages/cmdk/src/cmdk.tsx b/packages/cmdk/src/cmdk.tsx index a459bad427..e6a3c37e1b 100644 --- a/packages/cmdk/src/cmdk.tsx +++ b/packages/cmdk/src/cmdk.tsx @@ -1243,8 +1243,8 @@ function useCmdk(selector: (state: State) => T): T { function useValue( id: string, - ref: React.RefObject, - deps: (React.ReactNode | React.RefObject | string)[], + ref: React.RefObject, + deps: (React.ReactNode | React.RefObject | string)[], aliases: string[] = [] ) { const valueRef = React.useRef(); diff --git a/packages/combobox/src/react/hooks/useComboboxInput.ts b/packages/combobox/src/react/hooks/useComboboxInput.ts index 9a116fb15f..a703545ae4 100644 --- a/packages/combobox/src/react/hooks/useComboboxInput.ts +++ b/packages/combobox/src/react/hooks/useComboboxInput.ts @@ -21,7 +21,7 @@ import type { } from '../../lib'; export interface UseComboboxInputOptions { - ref: RefObject; + ref: RefObject; autoFocus?: boolean; cancelInputOnArrowLeftRight?: boolean; cancelInputOnBackspace?: boolean; diff --git a/packages/combobox/src/react/hooks/useHTMLInputCursorState.ts b/packages/combobox/src/react/hooks/useHTMLInputCursorState.ts index 263db907b2..74e854163a 100644 --- a/packages/combobox/src/react/hooks/useHTMLInputCursorState.ts +++ b/packages/combobox/src/react/hooks/useHTMLInputCursorState.ts @@ -9,7 +9,7 @@ import { import type { ComboboxInputCursorState } from '../../lib'; export const useHTMLInputCursorState = ( - ref: RefObject + ref: RefObject ): ComboboxInputCursorState => { const [atStart, setAtStart] = useState(false); const [atEnd, setAtEnd] = useState(false); diff --git a/packages/core/src/react/components/EditorHotkeysEffect.tsx b/packages/core/src/react/components/EditorHotkeysEffect.tsx index 110ac53b75..24779a815e 100644 --- a/packages/core/src/react/components/EditorHotkeysEffect.tsx +++ b/packages/core/src/react/components/EditorHotkeysEffect.tsx @@ -11,7 +11,7 @@ export function EditorHotkeysEffect({ id, editableRef, }: { - editableRef: React.RefObject; + editableRef: React.RefObject; id?: string; }) { const editor = useEditorRef(id); @@ -45,7 +45,7 @@ function HotkeyEffect({ editableRef, hotkeyConfig, }: { - editableRef: React.RefObject; + editableRef: React.RefObject; hotkeyConfig: Shortcut; id?: string; }) { diff --git a/packages/core/src/react/components/Plate.tsx b/packages/core/src/react/components/Plate.tsx index 8ef273189d..e1a907422a 100644 --- a/packages/core/src/react/components/Plate.tsx +++ b/packages/core/src/react/components/Plate.tsx @@ -44,8 +44,8 @@ function PlateInner({ onSelectionChange, onValueChange, }: PlateProps & { - containerRef: React.RefObject; - scrollRef: React.RefObject; + containerRef: React.RefObject; + scrollRef: React.RefObject; }) { return ( = Nullable<{ id: string; /** A reference to the editor container element. */ - containerRef: React.RefObject; + containerRef: React.RefObject; /** * Slate editor reference. @@ -75,7 +75,7 @@ export type PlateStoreState = Nullable<{ * * @default containerRef */ - scrollRef: React.RefObject; + scrollRef: React.RefObject; }; // A list of store keys to be exposed in `editor.api.plate.set`. diff --git a/packages/cursor/src/components/CursorOverlay.tsx b/packages/cursor/src/components/CursorOverlay.tsx index e2ed3cf600..fabc3aec2f 100644 --- a/packages/cursor/src/components/CursorOverlay.tsx +++ b/packages/cursor/src/components/CursorOverlay.tsx @@ -45,9 +45,8 @@ export interface CursorProps disableSelection?: boolean; } -export interface CursorOverlayProps< - TCursorData extends UnknownObject = UnknownObject, -> extends Pick< +export interface CursorOverlayProps + extends Pick< CursorProps, | 'classNames' | 'disableCaret' @@ -59,7 +58,7 @@ export interface CursorOverlayProps< * Container the overlay will be rendered in. If set, all returned overlay * positions will be relative to this container. */ - containerRef?: React.RefObject; + containerRef?: React.RefObject; /** Cursor states to use for calculating the overlay positions, by key. */ cursors?: Record>; diff --git a/packages/cursor/src/hooks/useRefreshOnResize.ts b/packages/cursor/src/hooks/useRefreshOnResize.ts index 288251cf0b..7626f1580a 100644 --- a/packages/cursor/src/hooks/useRefreshOnResize.ts +++ b/packages/cursor/src/hooks/useRefreshOnResize.ts @@ -9,7 +9,10 @@ import { useRequestReRender } from './useRequestReRender'; export interface useRefreshOnResizeOptions extends Pick { - selectionRectCache: React.MutableRefObject>; + selectionRectCache: React.MutableRefObject | null>; } export const useRefreshOnResize = ({ diff --git a/packages/dnd/src/components/useDraggable.ts b/packages/dnd/src/components/useDraggable.ts index 42212e39fc..bec0d043a7 100644 --- a/packages/dnd/src/components/useDraggable.ts +++ b/packages/dnd/src/components/useDraggable.ts @@ -19,7 +19,7 @@ export type DraggableState = { elementOrNode: Element | React.ReactElement | React.RefObject | null ) => void; isDragging: boolean; - nodeRef: React.RefObject; + nodeRef: React.RefObject; }; export const useDraggableState = (props: { diff --git a/packages/emoji/src/react/hooks/useEmojiPicker.ts b/packages/emoji/src/react/hooks/useEmojiPicker.ts index 747a147473..92f026d6dd 100644 --- a/packages/emoji/src/react/hooks/useEmojiPicker.ts +++ b/packages/emoji/src/react/hooks/useEmojiPicker.ts @@ -22,8 +22,8 @@ import { } from '../utils'; export type MutableRefs = React.MutableRefObject<{ - content: React.RefObject | undefined; - contentRoot: React.RefObject | undefined; + content: React.RefObject | undefined; + contentRoot: React.RefObject | undefined; }>; export type UseEmojiPickerProps = { diff --git a/packages/emoji/src/react/utils/EmojiLibrary/EmojiFloatingGrid.ts b/packages/emoji/src/react/utils/EmojiLibrary/EmojiFloatingGrid.ts index 9b5486cb84..db39a121b1 100644 --- a/packages/emoji/src/react/utils/EmojiLibrary/EmojiFloatingGrid.ts +++ b/packages/emoji/src/react/utils/EmojiLibrary/EmojiFloatingGrid.ts @@ -8,12 +8,12 @@ import { } from '../../../lib'; export type EmojiFloatingGridType = IGrid< - React.RefObject, + React.RefObject, EmojiCategoryList >; export class EmojiFloatingGrid extends Grid< - React.RefObject, + React.RefObject, EmojiCategoryList > { public createRootRef() { @@ -22,7 +22,7 @@ export class EmojiFloatingGrid extends Grid< } export class EmojiGridSectionWithRoot extends AGridSection< - React.RefObject, + React.RefObject, EmojiCategoryList > { protected createRootRef() { diff --git a/packages/floating/src/hooks/useVirtualFloating.ts b/packages/floating/src/hooks/useVirtualFloating.ts index 4448f59c4c..274353aa43 100644 --- a/packages/floating/src/hooks/useVirtualFloating.ts +++ b/packages/floating/src/hooks/useVirtualFloating.ts @@ -22,11 +22,10 @@ export interface UseVirtualFloatingOptions extends Partial { open?: boolean; } -export interface UseVirtualFloatingReturn< - RT extends ReferenceType = ReferenceType, -> extends UseFloatingReturn { +export interface UseVirtualFloatingReturn + extends UseFloatingReturn { style: React.CSSProperties; - virtualElementRef: React.MutableRefObject; + virtualElementRef: React.MutableRefObject; } /** diff --git a/packages/floating/src/utils/createVirtualRef.ts b/packages/floating/src/utils/createVirtualRef.ts index d804dd7901..c3ec4397e5 100644 --- a/packages/floating/src/utils/createVirtualRef.ts +++ b/packages/floating/src/utils/createVirtualRef.ts @@ -5,9 +5,10 @@ import type { Location } from 'slate'; import { getBoundingClientRect } from './getBoundingClientRect'; -export type VirtualRef = React.RefObject< - Pick ->; +export type VirtualRef = React.RefObject | null>; export const createVirtualRef = ( editor: TEditor, diff --git a/packages/heading/src/react/hooks/useContentObserver.ts b/packages/heading/src/react/hooks/useContentObserver.ts index 56ec54ac3c..2e65b27d2e 100644 --- a/packages/heading/src/react/hooks/useContentObserver.ts +++ b/packages/heading/src/react/hooks/useContentObserver.ts @@ -10,7 +10,7 @@ import { import { getHeadingList } from '../../internal/getHeadingList'; interface UseContentObserver { - editorContentRef: React.RefObject; + editorContentRef: React.RefObject; isObserve: boolean; isScroll: boolean; rootMargin: string; diff --git a/packages/heading/src/react/hooks/useTocController.ts b/packages/heading/src/react/hooks/useTocController.ts index 43f2f10755..becc89a2e7 100644 --- a/packages/heading/src/react/hooks/useTocController.ts +++ b/packages/heading/src/react/hooks/useTocController.ts @@ -5,7 +5,7 @@ import { useTocObserver } from './useTocObserver'; interface UseTocController { activeId: string; isObserve: boolean; - tocRef: React.RefObject; + tocRef: React.RefObject; } export const useTocController = ({ diff --git a/packages/heading/src/react/hooks/useTocObserver.ts b/packages/heading/src/react/hooks/useTocObserver.ts index 252694bd88..eed39b1720 100644 --- a/packages/heading/src/react/hooks/useTocObserver.ts +++ b/packages/heading/src/react/hooks/useTocObserver.ts @@ -3,7 +3,7 @@ import React from 'react'; interface UseTocObserver { activeId: string; isObserve: boolean; - tocRef: React.RefObject; + tocRef: React.RefObject; } export const useTocObserver = ({ diff --git a/packages/heading/src/react/types.ts b/packages/heading/src/react/types.ts index 7b9415bd8a..68c7c1b524 100644 --- a/packages/heading/src/react/types.ts +++ b/packages/heading/src/react/types.ts @@ -5,7 +5,7 @@ export interface TocSideBarProps { } export interface UseContentController { - containerRef: React.RefObject; + containerRef: React.RefObject; isObserve: boolean; rootMargin: string; topOffset: number; diff --git a/packages/heading/src/react/utils/heightToTop.ts b/packages/heading/src/react/utils/heightToTop.ts index 053284f8c8..cc2ec83945 100644 --- a/packages/heading/src/react/utils/heightToTop.ts +++ b/packages/heading/src/react/utils/heightToTop.ts @@ -2,7 +2,7 @@ import type React from 'react'; export const heightToTop = ( ele: HTMLElement, - editorContentRef?: React.RefObject + editorContentRef?: React.RefObject ) => { const root = editorContentRef ? editorContentRef.current : document.body; diff --git a/packages/react-utils/src/useOnClickOutside.ts b/packages/react-utils/src/useOnClickOutside.ts index e5b4e45d2b..9d379fae6c 100644 --- a/packages/react-utils/src/useOnClickOutside.ts +++ b/packages/react-utils/src/useOnClickOutside.ts @@ -29,7 +29,7 @@ export type UseOnClickOutsideCallback = ( ) => void; type El = HTMLElement; -type Refs = React.RefObject[]; +type Refs = React.RefObject[]; export interface UseOnClickOutsideOptions { detectIFrame?: boolean; diff --git a/packages/selection/src/react/BlockSelectionPlugin.tsx b/packages/selection/src/react/BlockSelectionPlugin.tsx index 1cd8b8c605..4ede687b00 100644 --- a/packages/selection/src/react/BlockSelectionPlugin.tsx +++ b/packages/selection/src/react/BlockSelectionPlugin.tsx @@ -34,7 +34,7 @@ export type BlockSelectionConfig = PluginConfig< isSelectionAreaVisible?: boolean; rightSelectionAreaClassName?: string; selectedIds?: Set; - shadowInputRef?: React.RefObject; + shadowInputRef?: React.RefObject; onKeyDownSelecting?: (e: KeyboardEvent) => void; } & BlockSelectionSelectors, { diff --git a/packages/selection/src/react/hooks/useRefreshOnResize.ts b/packages/selection/src/react/hooks/useRefreshOnResize.ts index 643834ea15..3864bc93ba 100644 --- a/packages/selection/src/react/hooks/useRefreshOnResize.ts +++ b/packages/selection/src/react/hooks/useRefreshOnResize.ts @@ -7,8 +7,11 @@ import type { SelectionRect } from '../types'; import { useRequestReRender } from './useRequestReRender'; export interface UseRefreshOnResizeOptions { - selectionRectCache: React.MutableRefObject>; - containerRef?: React.RefObject; + selectionRectCache: React.MutableRefObject | null>; + containerRef?: React.RefObject; refreshOnResize?: boolean; } diff --git a/templates/plate-playground-template/src/components/plate-ui/media-placeholder-element.tsx b/templates/plate-playground-template/src/components/plate-ui/media-placeholder-element.tsx index d86ff8d01f..62339a306f 100644 --- a/templates/plate-playground-template/src/components/plate-ui/media-placeholder-element.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/media-placeholder-element.tsx @@ -211,7 +211,7 @@ export function ImageProgress({ }: { file: File; className?: string; - imageRef?: React.RefObject; + imageRef?: React.RefObject; progress?: number; }) { const [objectUrl, setObjectUrl] = useState(null);