| import { Editor } from '@tiptap/core' | |
| import React, { | |
| createContext, HTMLAttributes, ReactNode, useContext, | |
| } from 'react' | |
| import { EditorContent } from './EditorContent.js' | |
| import { useEditor, UseEditorOptions } from './useEditor.js' | |
| export type EditorContextValue = { | |
| editor: Editor | null; | |
| } | |
| export const EditorContext = createContext<EditorContextValue>({ | |
| editor: null, | |
| }) | |
| export const EditorConsumer = EditorContext.Consumer | |
| /** | |
| * A hook to get the current editor instance. | |
| */ | |
| export const useCurrentEditor = () => useContext(EditorContext) | |
| export type EditorProviderProps = { | |
| children?: ReactNode; | |
| slotBefore?: ReactNode; | |
| slotAfter?: ReactNode; | |
| editorContainerProps?: HTMLAttributes<HTMLDivElement>; | |
| } & UseEditorOptions | |
| /** | |
| * This is the provider component for the editor. | |
| * It allows the editor to be accessible across the entire component tree | |
| * with `useCurrentEditor`. | |
| */ | |
| export function EditorProvider({ | |
| children, slotAfter, slotBefore, editorContainerProps = {}, ...editorOptions | |
| }: EditorProviderProps) { | |
| const editor = useEditor(editorOptions) | |
| if (!editor) { | |
| return null | |
| } | |
| return ( | |
| <EditorContext.Provider value={{ editor }}> | |
| {slotBefore} | |
| <EditorConsumer> | |
| {({ editor: currentEditor }) => ( | |
| <EditorContent editor={currentEditor} {...editorContainerProps} /> | |
| )} | |
| </EditorConsumer> | |
| {children} | |
| {slotAfter} | |
| </EditorContext.Provider> | |
| ) | |
| } | |
Xet Storage Details
- Size:
- 1.46 kB
- Xet hash:
- 522912ef3ef0eb99a83c1e3190b504a5a97ed44d6f8bf86c9472b0735cd40c4d
·
Xet efficiently stores files, intelligently splitting them into unique chunks and accelerating uploads and downloads. More info.