feat: add editorContainerProps to EditorProvider (#5661)

ueberdosis · Sep 26, 2024 · 26056aa · 26056aa
1 parent e8e4df3
commit 26056aa
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 3 deletions.
diff --git a/.changeset/bright-apples-reflect.md b/.changeset/bright-apples-reflect.md
@@ -0,0 +1,5 @@
+---
+"@tiptap/react": patch
+---
+
+Add editorContainerProps to EditorProvider. This allows for any HTML attributes to be added to the EditorContent when using EditorProvider
diff --git a/packages/react/src/Context.tsx b/packages/react/src/Context.tsx
@@ -1,5 +1,7 @@
 import { Editor } from '@tiptap/core'
-import React, { createContext, ReactNode, useContext } from 'react'
+import React, {
+  createContext, HTMLAttributes, ReactNode, useContext,
+} from 'react'
 
 import { EditorContent } from './EditorContent.js'
 import { useEditor, UseEditorOptions } from './useEditor.js'
@@ -23,6 +25,7 @@ export type EditorProviderProps = {
   children?: ReactNode;
   slotBefore?: ReactNode;
   slotAfter?: ReactNode;
+  editorContainerProps?: HTMLAttributes<HTMLDivElement>;
 } & UseEditorOptions
 
 /**
@@ -31,7 +34,7 @@ export type EditorProviderProps = {
  * with `useCurrentEditor`.
  */
 export function EditorProvider({
-  children, slotAfter, slotBefore, ...editorOptions
+  children, slotAfter, slotBefore, editorContainerProps = {}, ...editorOptions
 }: EditorProviderProps) {
   const editor = useEditor(editorOptions)
 
@@ -44,7 +47,7 @@ export function EditorProvider({
       {slotBefore}
       <EditorConsumer>
         {({ editor: currentEditor }) => (
-          <EditorContent editor={currentEditor} />
+          <EditorContent editor={currentEditor} {...editorContainerProps} />
         )}
       </EditorConsumer>
       {children}