diff --git a/examples/react-rich/src/App.tsx b/examples/react-rich/src/App.tsx
index 665d654054b..1686f3b1d52 100644
--- a/examples/react-rich/src/App.tsx
+++ b/examples/react-rich/src/App.tsx
@@ -16,9 +16,7 @@ import ExampleTheme from './ExampleTheme';
 import ToolbarPlugin from './plugins/ToolbarPlugin';
 import TreeViewPlugin from './plugins/TreeViewPlugin';
 
-function Placeholder() {
-  return <div className="editor-placeholder">Enter some rich text...</div>;
-}
+const placeholder = 'Enter some rich text...';
 
 const editorConfig = {
   namespace: 'React.js Demo',
@@ -38,8 +36,15 @@ export default function App() {
         <ToolbarPlugin />
         <div className="editor-inner">
           <RichTextPlugin
-            contentEditable={<ContentEditable className="editor-input" />}
-            placeholder={<Placeholder />}
+            contentEditable={
+              <ContentEditable
+                className="editor-input"
+                aria-placeholder={placeholder}
+                placeholder={
+                  <div className="editor-placeholder">{placeholder}</div>
+                }
+              />
+            }
             ErrorBoundary={LexicalErrorBoundary}
           />
           <HistoryPlugin />
diff --git a/packages/lexical-playground/__tests__/e2e/Placeholder.spec.mjs b/packages/lexical-playground/__tests__/e2e/Placeholder.spec.mjs
index 3df7624f30c..40882785499 100644
--- a/packages/lexical-playground/__tests__/e2e/Placeholder.spec.mjs
+++ b/packages/lexical-playground/__tests__/e2e/Placeholder.spec.mjs
@@ -25,7 +25,7 @@ test.describe('Placeholder', () => {
     isCollab,
   }) => {
     await focusEditor(page);
-    const content = await textContent(page, '.Placeholder__root');
+    const content = await textContent(page, '.ContentEditable__placeholder');
     if (isCollab) {
       expect(content).toBe('Enter some collaborative rich text...');
     } else if (isRichText) {
diff --git a/packages/lexical-playground/__tests__/e2e/Toolbar.spec.mjs b/packages/lexical-playground/__tests__/e2e/Toolbar.spec.mjs
index 0eab008b6c0..39c2795c5d9 100644
--- a/packages/lexical-playground/__tests__/e2e/Toolbar.spec.mjs
+++ b/packages/lexical-playground/__tests__/e2e/Toolbar.spec.mjs
@@ -79,6 +79,7 @@ test.describe('Toolbar', () => {
             </div>
             <div>
               <div
+                aria-placeholder="Enter a caption..."
                 contenteditable="true"
                 role="textbox"
                 spellcheck="true"
diff --git a/packages/lexical-playground/src/Editor.tsx b/packages/lexical-playground/src/Editor.tsx
index 096770f184e..af2b07c74e2 100644
--- a/packages/lexical-playground/src/Editor.tsx
+++ b/packages/lexical-playground/src/Editor.tsx
@@ -69,7 +69,6 @@ import TreeViewPlugin from './plugins/TreeViewPlugin';
 import TwitterPlugin from './plugins/TwitterPlugin';
 import YouTubePlugin from './plugins/YouTubePlugin';
 import ContentEditable from './ui/ContentEditable';
-import Placeholder from './ui/Placeholder';
 
 const skipCollaborationInit =
   // @ts-expect-error
@@ -94,12 +93,11 @@ export default function Editor(): JSX.Element {
     },
   } = useSettings();
   const isEditable = useLexicalEditable();
-  const text = isCollab
+  const placeholder = isCollab
     ? 'Enter some collaborative rich text...'
     : isRichText
     ? 'Enter some rich text...'
     : 'Enter some plain text...';
-  const placeholder = <Placeholder>{text}</Placeholder>;
   const [floatingAnchorElem, setFloatingAnchorElem] =
     useState<HTMLDivElement | null>(null);
   const [isSmallWidthViewport, setIsSmallWidthViewport] =
@@ -168,11 +166,10 @@ export default function Editor(): JSX.Element {
               contentEditable={
                 <div className="editor-scroller">
                   <div className="editor" ref={onRef}>
-                    <ContentEditable />
+                    <ContentEditable placeholder={placeholder} />
                   </div>
                 </div>
               }
-              placeholder={placeholder}
               ErrorBoundary={LexicalErrorBoundary}
             />
             <MarkdownShortcutPlugin />
@@ -224,8 +221,7 @@ export default function Editor(): JSX.Element {
         ) : (
           <>
             <PlainTextPlugin
-              contentEditable={<ContentEditable />}
-              placeholder={placeholder}
+              contentEditable={<ContentEditable placeholder={placeholder} />}
               ErrorBoundary={LexicalErrorBoundary}
             />
             <HistoryPlugin externalHistoryState={historyState} />
diff --git a/packages/lexical-playground/src/nodes/ImageComponent.tsx b/packages/lexical-playground/src/nodes/ImageComponent.tsx
index 23c891e12d4..d53eb30db33 100644
--- a/packages/lexical-playground/src/nodes/ImageComponent.tsx
+++ b/packages/lexical-playground/src/nodes/ImageComponent.tsx
@@ -62,7 +62,6 @@ import MentionsPlugin from '../plugins/MentionsPlugin';
 import TreeViewPlugin from '../plugins/TreeViewPlugin';
 import ContentEditable from '../ui/ContentEditable';
 import ImageResizer from '../ui/ImageResizer';
-import Placeholder from '../ui/Placeholder';
 import {EmojiNode} from './EmojiNode';
 import {$isImageNode} from './ImageNode';
 import {KeywordNode} from './KeywordNode';
@@ -452,12 +451,11 @@ export default function ImageComponent({
               )}
               <RichTextPlugin
                 contentEditable={
-                  <ContentEditable className="ImageNode__contentEditable" />
-                }
-                placeholder={
-                  <Placeholder className="ImageNode__placeholder">
-                    Enter a caption...
-                  </Placeholder>
+                  <ContentEditable
+                    placeholder="Enter a caption..."
+                    placeholderClassName="ImageNode__placeholder"
+                    className="ImageNode__contentEditable"
+                  />
                 }
                 ErrorBoundary={LexicalErrorBoundary}
               />
diff --git a/packages/lexical-playground/src/nodes/InlineImageNode/InlineImageComponent.tsx b/packages/lexical-playground/src/nodes/InlineImageNode/InlineImageComponent.tsx
index 7cc9428f465..ad2861ba3d0 100644
--- a/packages/lexical-playground/src/nodes/InlineImageNode/InlineImageComponent.tsx
+++ b/packages/lexical-playground/src/nodes/InlineImageNode/InlineImageComponent.tsx
@@ -39,7 +39,6 @@ import LinkPlugin from '../../plugins/LinkPlugin';
 import Button from '../../ui/Button';
 import ContentEditable from '../../ui/ContentEditable';
 import {DialogActions} from '../../ui/Dialog';
-import Placeholder from '../../ui/Placeholder';
 import Select from '../../ui/Select';
 import TextInput from '../../ui/TextInput';
 import {$isInlineImageNode, InlineImageNode} from './InlineImageNode';
@@ -388,12 +387,11 @@ export default function InlineImageComponent({
               <LinkPlugin />
               <RichTextPlugin
                 contentEditable={
-                  <ContentEditable className="InlineImageNode__contentEditable" />
-                }
-                placeholder={
-                  <Placeholder className="InlineImageNode__placeholder">
-                    Enter a caption...
-                  </Placeholder>
+                  <ContentEditable
+                    placeholder="Enter a caption..."
+                    placeholderClassName="InlineImageNode__placeholder"
+                    className="InlineImageNode__contentEditable"
+                  />
                 }
                 ErrorBoundary={LexicalErrorBoundary}
               />
diff --git a/packages/lexical-playground/src/nodes/StickyComponent.tsx b/packages/lexical-playground/src/nodes/StickyComponent.tsx
index ec3ebf6fa6b..469ac869457 100644
--- a/packages/lexical-playground/src/nodes/StickyComponent.tsx
+++ b/packages/lexical-playground/src/nodes/StickyComponent.tsx
@@ -27,7 +27,6 @@ import {createWebsocketProvider} from '../collaboration';
 import {useSharedHistoryContext} from '../context/SharedHistoryContext';
 import StickyEditorTheme from '../themes/StickyEditorTheme';
 import ContentEditable from '../ui/ContentEditable';
-import Placeholder from '../ui/Placeholder';
 import {$isStickyNode} from './StickyNode';
 
 type Positioning = {
@@ -254,12 +253,11 @@ export default function StickyComponent({
           )}
           <PlainTextPlugin
             contentEditable={
-              <ContentEditable className="StickyNode__contentEditable" />
-            }
-            placeholder={
-              <Placeholder className="StickyNode__placeholder">
-                What's up?
-              </Placeholder>
+              <ContentEditable
+                placeholder="What's up?"
+                placeholderClassName="StickyNode__placeholder"
+                className="StickyNode__contentEditable"
+              />
             }
             ErrorBoundary={LexicalErrorBoundary}
           />
diff --git a/packages/lexical-playground/src/plugins/CommentPlugin/index.tsx b/packages/lexical-playground/src/plugins/CommentPlugin/index.tsx
index 1d446889f5d..66915aacf01 100644
--- a/packages/lexical-playground/src/plugins/CommentPlugin/index.tsx
+++ b/packages/lexical-playground/src/plugins/CommentPlugin/index.tsx
@@ -67,7 +67,6 @@ import useModal from '../../hooks/useModal';
 import CommentEditorTheme from '../../themes/CommentEditorTheme';
 import Button from '../../ui/Button';
 import ContentEditable from '../../ui/ContentEditable';
-import Placeholder from '../../ui/Placeholder';
 
 export const INSERT_INLINE_COMMAND: LexicalCommand<void> = createCommand(
   'INSERT_INLINE_COMMAND',
@@ -168,8 +167,9 @@ function PlainTextEditor({
     <LexicalComposer initialConfig={initialConfig}>
       <div className="CommentPlugin_CommentInputBox_EditorContainer">
         <PlainTextPlugin
-          contentEditable={<ContentEditable className={className} />}
-          placeholder={<Placeholder>{placeholder}</Placeholder>}
+          contentEditable={
+            <ContentEditable placeholder={placeholder} className={className} />
+          }
           ErrorBoundary={LexicalErrorBoundary}
         />
         <OnChangePlugin onChange={onChange} />
diff --git a/packages/lexical-playground/src/ui/ContentEditable.css b/packages/lexical-playground/src/ui/ContentEditable.css
index 319b2ca1839..efced7fc1bc 100644
--- a/packages/lexical-playground/src/ui/ContentEditable.css
+++ b/packages/lexical-playground/src/ui/ContentEditable.css
@@ -21,3 +21,24 @@
     padding-right: 8px;
   }
 }
+
+.ContentEditable__placeholder {
+  font-size: 15px;
+  color: #999;
+  overflow: hidden;
+  position: absolute;
+  text-overflow: ellipsis;
+  top: 8px;
+  left: 28px;
+  right: 28px;
+  user-select: none;
+  white-space: nowrap;
+  display: inline-block;
+  pointer-events: none;
+}
+@media (max-width: 1025px) {
+  .ContentEditable__placeholder {
+    left: 8px;
+    right: 8px;
+  }
+}
diff --git a/packages/lexical-playground/src/ui/ContentEditable.tsx b/packages/lexical-playground/src/ui/ContentEditable.tsx
index 9301f5f0c2c..b1ee20b2103 100644
--- a/packages/lexical-playground/src/ui/ContentEditable.tsx
+++ b/packages/lexical-playground/src/ui/ContentEditable.tsx
@@ -11,10 +11,26 @@ import './ContentEditable.css';
 import {ContentEditable} from '@lexical/react/LexicalContentEditable';
 import * as React from 'react';
 
+type Props = {
+  className?: string;
+  placeholderClassName?: string;
+  placeholder: string;
+};
+
 export default function LexicalContentEditable({
   className,
-}: {
-  className?: string;
-}): JSX.Element {
-  return <ContentEditable className={className || 'ContentEditable__root'} />;
+  placeholder,
+  placeholderClassName,
+}: Props): JSX.Element {
+  return (
+    <ContentEditable
+      className={className ?? 'ContentEditable__root'}
+      aria-placeholder={placeholder}
+      placeholder={
+        <div className={placeholderClassName ?? 'ContentEditable__placeholder'}>
+          {placeholder}
+        </div>
+      }
+    />
+  );
 }
diff --git a/packages/lexical-playground/src/ui/Placeholder.css b/packages/lexical-playground/src/ui/Placeholder.css
deleted file mode 100644
index 61e3df765fb..00000000000
--- a/packages/lexical-playground/src/ui/Placeholder.css
+++ /dev/null
@@ -1,28 +0,0 @@
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- *
- */
-
-.Placeholder__root {
-  font-size: 15px;
-  color: #999;
-  overflow: hidden;
-  position: absolute;
-  text-overflow: ellipsis;
-  top: 8px;
-  left: 28px;
-  right: 28px;
-  user-select: none;
-  white-space: nowrap;
-  display: inline-block;
-  pointer-events: none;
-}
-@media (max-width: 1025px) {
-  .Placeholder__root {
-    left: 8px;
-  }
-}
diff --git a/packages/lexical-playground/src/ui/Placeholder.tsx b/packages/lexical-playground/src/ui/Placeholder.tsx
deleted file mode 100644
index 67677688683..00000000000
--- a/packages/lexical-playground/src/ui/Placeholder.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-import './Placeholder.css';
-
-import * as React from 'react';
-import {ReactNode} from 'react';
-
-export default function Placeholder({
-  children,
-  className,
-}: {
-  children: ReactNode;
-  className?: string;
-}): JSX.Element {
-  return <div className={className || 'Placeholder__root'}>{children}</div>;
-}
diff --git a/packages/lexical-react/flow/LexicalContentEditable.js.flow b/packages/lexical-react/flow/LexicalContentEditable.js.flow
index b6b63a4f2cc..ff45922df9a 100644
--- a/packages/lexical-react/flow/LexicalContentEditable.js.flow
+++ b/packages/lexical-react/flow/LexicalContentEditable.js.flow
@@ -9,7 +9,13 @@
 
 import * as React from 'react';
 
-export type Props = $ReadOnly<{
+export type Props = ({} | $ReadOnly<{
+  'aria-placeholder': string;
+  placeholder:
+    | ((isEditable: boolean) => null | React$Node)
+    | null
+    | React$Node;
+}>) & $ReadOnly<{
   ...Partial<HTMLDivElement>,
   ariaActiveDescendant?: string,
   ariaAutoComplete?: string,
diff --git a/packages/lexical-react/src/LexicalContentEditable.tsx b/packages/lexical-react/src/LexicalContentEditable.tsx
index 1dbfe1201b0..2ca5839087e 100644
--- a/packages/lexical-react/src/LexicalContentEditable.tsx
+++ b/packages/lexical-react/src/LexicalContentEditable.tsx
@@ -6,102 +6,65 @@
  *
  */
 
+import type {Props as ElementProps} from './shared/LexicalContentEditableElement';
+
 import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
-import * as React from 'react';
-import {useCallback, useState} from 'react';
-import useLayoutEffect from 'shared/useLayoutEffect';
+import {useLexicalEditable} from '@lexical/react/useLexicalEditable';
 
-export type Props = {
-  ariaActiveDescendant?: React.AriaAttributes['aria-activedescendant'];
-  ariaAutoComplete?: React.AriaAttributes['aria-autocomplete'];
-  ariaControls?: React.AriaAttributes['aria-controls'];
-  ariaDescribedBy?: React.AriaAttributes['aria-describedby'];
-  ariaExpanded?: React.AriaAttributes['aria-expanded'];
-  ariaLabel?: React.AriaAttributes['aria-label'];
-  ariaLabelledBy?: React.AriaAttributes['aria-labelledby'];
-  ariaMultiline?: React.AriaAttributes['aria-multiline'];
-  ariaOwns?: React.AriaAttributes['aria-owns'];
-  ariaRequired?: React.AriaAttributes['aria-required'];
-  autoCapitalize?: HTMLDivElement['autocapitalize'];
-  'data-testid'?: string | null | undefined;
-} & React.AllHTMLAttributes<HTMLDivElement>;
+import {ContentEditableElement} from './shared/LexicalContentEditableElement';
+import {useCanShowPlaceholder} from './shared/useCanShowPlaceholder';
 
-export function ContentEditable({
-  ariaActiveDescendant,
-  ariaAutoComplete,
-  ariaControls,
-  ariaDescribedBy,
-  ariaExpanded,
-  ariaLabel,
-  ariaLabelledBy,
-  ariaMultiline,
-  ariaOwns,
-  ariaRequired,
-  autoCapitalize,
-  className,
-  id,
-  role = 'textbox',
-  spellCheck = true,
-  style,
-  tabIndex,
-  'data-testid': testid,
-  ...rest
-}: Props): JSX.Element {
-  const [editor] = useLexicalComposerContext();
-  const [isEditable, setEditable] = useState(false);
+/* eslint-disable @typescript-eslint/ban-types */
+export type Props = (
+  | {}
+  | {
+      'aria-placeholder': string;
+      placeholder:
+        | ((isEditable: boolean) => null | JSX.Element)
+        | null
+        | JSX.Element;
+    }
+) &
+  ElementProps;
+/* eslint-enable @typescript-eslint/ban-types */
 
-  const ref = useCallback(
-    (rootElement: null | HTMLElement) => {
-      // defaultView is required for a root element.
-      // In multi-window setups, the defaultView may not exist at certain points.
-      if (
-        rootElement &&
-        rootElement.ownerDocument &&
-        rootElement.ownerDocument.defaultView
-      ) {
-        editor.setRootElement(rootElement);
-      }
-    },
-    [editor],
-  );
-
-  useLayoutEffect(() => {
-    setEditable(editor.isEditable());
-    return editor.registerEditableListener((currentIsEditable) => {
-      setEditable(currentIsEditable);
-    });
-  }, [editor]);
+export function ContentEditable(props: Props): JSX.Element {
+  let placeholder = null;
+  let rest = props;
+  if ('placeholder' in props) {
+    ({placeholder, ...rest} = props);
+  }
 
   return (
-    <div
-      {...rest}
-      aria-activedescendant={!isEditable ? undefined : ariaActiveDescendant}
-      aria-autocomplete={!isEditable ? 'none' : ariaAutoComplete}
-      aria-controls={!isEditable ? undefined : ariaControls}
-      aria-describedby={ariaDescribedBy}
-      aria-expanded={
-        !isEditable
-          ? undefined
-          : role === 'combobox'
-          ? !!ariaExpanded
-          : undefined
-      }
-      aria-label={ariaLabel}
-      aria-labelledby={ariaLabelledBy}
-      aria-multiline={ariaMultiline}
-      aria-owns={!isEditable ? undefined : ariaOwns}
-      aria-readonly={!isEditable ? true : undefined}
-      aria-required={ariaRequired}
-      autoCapitalize={autoCapitalize}
-      className={className}
-      contentEditable={isEditable}
-      data-testid={testid}
-      id={id}
-      ref={ref}
-      role={role}
-      spellCheck={spellCheck}
-      style={style}
-      tabIndex={tabIndex}
-    />
+    <>
+      <ContentEditableElement {...rest} />
+      <Placeholder content={placeholder} />
+    </>
   );
 }
+
+function Placeholder({
+  content,
+}: {
+  content: ((isEditable: boolean) => null | JSX.Element) | null | JSX.Element;
+}): null | JSX.Element {
+  const [editor] = useLexicalComposerContext();
+  const showPlaceholder = useCanShowPlaceholder(editor);
+  const editable = useLexicalEditable();
+
+  if (!showPlaceholder) {
+    return null;
+  }
+
+  let placeholder = null;
+  if (typeof content === 'function') {
+    placeholder = content(editable);
+  } else if (content !== null) {
+    placeholder = content;
+  }
+
+  if (placeholder === null) {
+    return null;
+  }
+  return <div aria-hidden={true}>{placeholder}</div>;
+}
diff --git a/packages/lexical-react/src/LexicalPlainTextPlugin.tsx b/packages/lexical-react/src/LexicalPlainTextPlugin.tsx
index 3a13ca672eb..108e6aa1914 100644
--- a/packages/lexical-react/src/LexicalPlainTextPlugin.tsx
+++ b/packages/lexical-react/src/LexicalPlainTextPlugin.tsx
@@ -16,11 +16,12 @@ import {usePlainTextSetup} from './shared/usePlainTextSetup';
 
 export function PlainTextPlugin({
   contentEditable,
-  placeholder,
+  // TODO Remove. This property is now part of ContentEditable
+  placeholder = null,
   ErrorBoundary,
 }: {
   contentEditable: JSX.Element;
-  placeholder:
+  placeholder?:
     | ((isEditable: boolean) => null | JSX.Element)
     | null
     | JSX.Element;
@@ -39,6 +40,7 @@ export function PlainTextPlugin({
   );
 }
 
+// TODO Remove
 function Placeholder({
   content,
 }: {
diff --git a/packages/lexical-react/src/LexicalRichTextPlugin.tsx b/packages/lexical-react/src/LexicalRichTextPlugin.tsx
index abc46555749..40ce57544d5 100644
--- a/packages/lexical-react/src/LexicalRichTextPlugin.tsx
+++ b/packages/lexical-react/src/LexicalRichTextPlugin.tsx
@@ -16,11 +16,12 @@ import {useRichTextSetup} from './shared/useRichTextSetup';
 
 export function RichTextPlugin({
   contentEditable,
-  placeholder,
+  // TODO Remove. This property is now part of ContentEditable
+  placeholder = null,
   ErrorBoundary,
 }: {
   contentEditable: JSX.Element;
-  placeholder:
+  placeholder?:
     | ((isEditable: boolean) => null | JSX.Element)
     | null
     | JSX.Element;
@@ -39,6 +40,7 @@ export function RichTextPlugin({
   );
 }
 
+// TODO remove
 function Placeholder({
   content,
 }: {
diff --git a/packages/lexical-react/src/shared/LexicalContentEditableElement.tsx b/packages/lexical-react/src/shared/LexicalContentEditableElement.tsx
new file mode 100644
index 00000000000..25ab75abc26
--- /dev/null
+++ b/packages/lexical-react/src/shared/LexicalContentEditableElement.tsx
@@ -0,0 +1,107 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
+import * as React from 'react';
+import {useCallback, useState} from 'react';
+import useLayoutEffect from 'shared/useLayoutEffect';
+
+export type Props = {
+  ariaActiveDescendant?: React.AriaAttributes['aria-activedescendant'];
+  ariaAutoComplete?: React.AriaAttributes['aria-autocomplete'];
+  ariaControls?: React.AriaAttributes['aria-controls'];
+  ariaDescribedBy?: React.AriaAttributes['aria-describedby'];
+  ariaExpanded?: React.AriaAttributes['aria-expanded'];
+  ariaLabel?: React.AriaAttributes['aria-label'];
+  ariaLabelledBy?: React.AriaAttributes['aria-labelledby'];
+  ariaMultiline?: React.AriaAttributes['aria-multiline'];
+  ariaOwns?: React.AriaAttributes['aria-owns'];
+  ariaRequired?: React.AriaAttributes['aria-required'];
+  autoCapitalize?: HTMLDivElement['autocapitalize'];
+  'data-testid'?: string | null | undefined;
+} & Omit<React.AllHTMLAttributes<HTMLDivElement>, 'placeholder'>;
+
+export function ContentEditableElement({
+  ariaActiveDescendant,
+  ariaAutoComplete,
+  ariaControls,
+  ariaDescribedBy,
+  ariaExpanded,
+  ariaLabel,
+  ariaLabelledBy,
+  ariaMultiline,
+  ariaOwns,
+  ariaRequired,
+  autoCapitalize,
+  className,
+  id,
+  role = 'textbox',
+  spellCheck = true,
+  style,
+  tabIndex,
+  'data-testid': testid,
+  ...rest
+}: Props): JSX.Element {
+  const [editor] = useLexicalComposerContext();
+  const [isEditable, setEditable] = useState(false);
+
+  const ref = useCallback(
+    (rootElement: null | HTMLElement) => {
+      // defaultView is required for a root element.
+      // In multi-window setups, the defaultView may not exist at certain points.
+      if (
+        rootElement &&
+        rootElement.ownerDocument &&
+        rootElement.ownerDocument.defaultView
+      ) {
+        editor.setRootElement(rootElement);
+      }
+    },
+    [editor],
+  );
+
+  useLayoutEffect(() => {
+    setEditable(editor.isEditable());
+    return editor.registerEditableListener((currentIsEditable) => {
+      setEditable(currentIsEditable);
+    });
+  }, [editor]);
+
+  return (
+    <div
+      {...rest}
+      aria-activedescendant={!isEditable ? undefined : ariaActiveDescendant}
+      aria-autocomplete={!isEditable ? 'none' : ariaAutoComplete}
+      aria-controls={!isEditable ? undefined : ariaControls}
+      aria-describedby={ariaDescribedBy}
+      aria-expanded={
+        !isEditable
+          ? undefined
+          : role === 'combobox'
+          ? !!ariaExpanded
+          : undefined
+      }
+      aria-label={ariaLabel}
+      aria-labelledby={ariaLabelledBy}
+      aria-multiline={ariaMultiline}
+      aria-owns={!isEditable ? undefined : ariaOwns}
+      aria-readonly={!isEditable ? true : undefined}
+      aria-required={ariaRequired}
+      autoCapitalize={autoCapitalize}
+      className={className}
+      contentEditable={isEditable}
+      data-testid={testid}
+      id={id}
+      ref={ref}
+      role={role}
+      spellCheck={spellCheck}
+      style={style}
+      tabIndex={tabIndex}
+    />
+  );
+}
diff --git a/scripts/__tests__/integration/fixtures/lexical-esm-astro-react/src/components/App.tsx b/scripts/__tests__/integration/fixtures/lexical-esm-astro-react/src/components/App.tsx
index 46c35127143..8150efce6c2 100644
--- a/scripts/__tests__/integration/fixtures/lexical-esm-astro-react/src/components/App.tsx
+++ b/scripts/__tests__/integration/fixtures/lexical-esm-astro-react/src/components/App.tsx
@@ -27,9 +27,7 @@ import { useEffect } from "react";
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
 import { $getRoot } from "lexical";
 
-function Placeholder() {
-  return <div className="editor-placeholder">Enter some rich text...</div>;
-}
+const placeholder = 'Enter some rich text...';
 
 const editorConfig = {
   namespace: "React.js Demo",
@@ -63,8 +61,15 @@ export default function App() {
         <ToolbarPlugin />
         <div className="editor-inner">
           <RichTextPlugin
-            contentEditable={<ContentEditable className="editor-input" />}
-            placeholder={<Placeholder />}
+            contentEditable={
+              <ContentEditable
+                className="editor-input"
+                aria-placeholder={placeholder}
+                placeholder={
+                  <div className="editor-placeholder">{placeholder}</div>
+                }
+              />
+            }
             ErrorBoundary={LexicalErrorBoundary}
           />
           <HistoryPlugin />
diff --git a/scripts/__tests__/integration/fixtures/lexical-esm-nextjs/app/EditorUseClient.tsx b/scripts/__tests__/integration/fixtures/lexical-esm-nextjs/app/EditorUseClient.tsx
index 7d626911e23..11cb9015058 100644
--- a/scripts/__tests__/integration/fixtures/lexical-esm-nextjs/app/EditorUseClient.tsx
+++ b/scripts/__tests__/integration/fixtures/lexical-esm-nextjs/app/EditorUseClient.tsx
@@ -28,10 +28,6 @@ import { useEffect } from "react";
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
 import { $getRoot } from "lexical";
 
-function Placeholder() {
-  return <div className="editor-placeholder">Enter some rich text...</div>;
-}
-
 const editorConfig = {
   namespace: "React.js Demo",
   nodes: [CodeNode, CodeHighlightNode],
@@ -43,6 +39,8 @@ const editorConfig = {
   theme: ExampleTheme,
 };
 
+const placeholder = 'Enter some rich text...';
+
 function CodeHighlightingPlugin() {
   const [editor] = useLexicalComposerContext();
   useEffect(() => {
@@ -64,8 +62,15 @@ export default function App() {
         <ToolbarPlugin />
         <div className="editor-inner">
           <RichTextPlugin
-            contentEditable={<ContentEditable className="editor-input" />}
-            placeholder={<Placeholder />}
+            contentEditable={
+              <ContentEditable
+                className="editor-input"
+                aria-placeholder={placeholder}
+                placeholder={
+                  <div className="editor-placeholder">{placeholder}</div>
+                }
+              />
+            }
             ErrorBoundary={LexicalErrorBoundary}
           />
           <HistoryPlugin />
diff --git a/scripts/error-codes/codes.json b/scripts/error-codes/codes.json
index 0d90d5e1a65..9663b42e464 100644
--- a/scripts/error-codes/codes.json
+++ b/scripts/error-codes/codes.json
@@ -186,5 +186,6 @@
   "184": "Element point must be an element node",
   "185": "%s doesn't extend the %s",
   "186": "Lexical node with constructor %s attempted to re-use key from node in active editor state with constructor %s. Keys must not be re-used when the type is changed.",
-  "187": "Lexical node with constructor %s attempted to re-use key from node in active editor state with different constructor with the same name (possibly due to invalid Hot Module Replacement). Keys must not be re-used when the type is changed."
+  "187": "Lexical node with constructor %s attempted to re-use key from node in active editor state with different constructor with the same name (possibly due to invalid Hot Module Replacement). Keys must not be re-used when the type is changed.",
+  "188": "Expected a RangeSelection or TableSelection"
 }