From 26056aa0c2a24c5fdf265d76bb16c78eb4609f5e Mon Sep 17 00:00:00 2001
From: Kartikeya Choudhary <89142612+kart-c@users.noreply.github.com>
Date: Thu, 26 Sep 2024 15:17:19 +0530
Subject: [PATCH] feat: add `editorContainerProps` to `EditorProvider` (#5661)

---
 .changeset/bright-apples-reflect.md | 5 +++++
 packages/react/src/Context.tsx      | 9 ++++++---
 2 files changed, 11 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/bright-apples-reflect.md

diff --git a/.changeset/bright-apples-reflect.md b/.changeset/bright-apples-reflect.md
new file mode 100644
index 00000000000..b435954b687
--- /dev/null
+++ 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
index 2cd029b6db6..8c285d83706 100644
--- 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}