docs: update placeholder prop to ContentEditable impl

facebook · Feb 17, 2025 · a5d2afc · a5d2afc
1 parent 43ceb5f
commit a5d2afc
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 10 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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}
 />
 ```