From a5d2afc78091bfee97b05a7055e88eb8b32d3586 Mon Sep 17 00:00:00 2001
From: robhannay <rob@joinblink.com>
Date: Mon, 17 Feb 2025 16:14:39 +0000
Subject: [PATCH] docs: update `placeholder` prop to `ContentEditable` impl

---
 README.md                                        |  2 +-
 packages/lexical-react/README.md                 |  8 ++++++--
 .../docs/getting-started/react.md                |  2 +-
 .../docs/getting-started/theming.md              |  8 ++++++--
 packages/lexical-website/docs/react/plugins.md   | 16 ++++++++++++----
 5 files changed, 26 insertions(+), 10 deletions(-)

diff --git a/README.md b/README.md
index 7fa9e59303f..8a1a7118c06 100644
--- a/README.md
+++ b/README.md
@@ -115,8 +115,8 @@ function Editor() {
       <PlainTextPlugin
         contentEditable={
           <ContentEditable
-            placeholder={<div>Enter some text...</div>}
             aria-placeholder={'Enter some text...'}
+            placeholder={<div>Enter some text...</div>}
           />
         }
         ErrorBoundary={LexicalErrorBoundary}
diff --git a/packages/lexical-react/README.md b/packages/lexical-react/README.md
index 922cef51f0c..8fe1d695e95 100644
--- a/packages/lexical-react/README.md
+++ b/packages/lexical-react/README.md
@@ -74,8 +74,12 @@ function Editor() {
 return (
     <LexicalComposer initialConfig={initialConfig}>
       <PlainTextPlugin
-        contentEditable={<ContentEditable />}
-        placeholder={<div>Enter some text...</div>}
+        contentEditable={
+          <ContentEditable
+            aria-placeholder={'Enter some text...'}
+            placeholder={<div>Enter some text...</div>}
+          />
+        }
       />
       <OnChangePlugin onChange={onChange} />
       <HistoryPlugin />
diff --git a/packages/lexical-website/docs/getting-started/react.md b/packages/lexical-website/docs/getting-started/react.md
index 36d98276659..1501fdf1d5f 100644
--- a/packages/lexical-website/docs/getting-started/react.md
+++ b/packages/lexical-website/docs/getting-started/react.md
@@ -63,8 +63,8 @@ function Editor() {
       <RichTextPlugin
         contentEditable={
           <ContentEditable
-            placeholder={<div>Enter some text...</div>}
             aria-placeholder={'Enter some text...'}
+            placeholder={<div>Enter some text...</div>}
           />
         }
         ErrorBoundary={LexicalErrorBoundary}
diff --git a/packages/lexical-website/docs/getting-started/theming.md b/packages/lexical-website/docs/getting-started/theming.md
index 497c0b0ba16..445cfe271dc 100644
--- a/packages/lexical-website/docs/getting-started/theming.md
+++ b/packages/lexical-website/docs/getting-started/theming.md
@@ -57,8 +57,12 @@ export default function Editor() {
   return (
     <LexicalComposer initialConfig={initialConfig}>
       <PlainTextPlugin
-        contentEditable={<ContentEditable />}
-        placeholder={<div className="editor-placeholder">Enter some text...</div>}
+        contentEditable={
+          <ContentEditable
+            aria-placeholder={'Enter some text...'}
+            placeholder={<div className="editor-placeholder">Enter some text...</div>}
+          />
+        }
         ErrorBoundary={LexicalErrorBoundary}
       />
     </LexicalComposer>
diff --git a/packages/lexical-website/docs/react/plugins.md b/packages/lexical-website/docs/react/plugins.md
index ca97f7935ca..d49b8af0ae3 100644
--- a/packages/lexical-website/docs/react/plugins.md
+++ b/packages/lexical-website/docs/react/plugins.md
@@ -45,8 +45,12 @@ React wrapper for `@lexical/plain-text` that adds major features for plain text
 
 ```jsx
 <PlainTextPlugin
-  contentEditable={<ContentEditable />}
-  placeholder={<div>Enter some text...</div>}
+  contentEditable={
+    <ContentEditable
+      aria-placeholder={'Enter some text...'}
+      placeholder={<div>Enter some text...</div>}
+    />
+  }
   ErrorBoundary={LexicalErrorBoundary}
 />
 ```
@@ -57,8 +61,12 @@ React wrapper for `@lexical/rich-text` that adds major features for rich text ed
 
 ```jsx
 <RichTextPlugin
-  contentEditable={<ContentEditable />}
-  placeholder={<div>Enter some text...</div>}
+  contentEditable={
+    <ContentEditable
+      aria-placeholder={'Enter some text...'}
+      placeholder={<div>Enter some text...</div>}
+    />
+  }
   ErrorBoundary={LexicalErrorBoundary}
 />
 ```