add content editable ref

mdx-editor · Nov 12, 2024 · 26107ee · 26107ee
1 parent 483b196
commit 26107ee
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 6 deletions.
diff --git a/src/MDXEditor.tsx b/src/MDXEditor.tsx
@@ -17,7 +17,8 @@ import {
   setMarkdown$,
   topAreaChildren$,
   useTranslation,
-  viewMode$
+  viewMode$,
+  contentEditableRef$
 } from './plugins/core'
 
 import { ContentEditable } from '@lexical/react/LexicalContentEditable.js'
@@ -45,6 +46,11 @@ const LexicalProvider: React.FC<{
 
 const RichTextEditor: React.FC = () => {
   const t = useTranslation()
+  const setContentEditableRef = usePublisher(contentEditableRef$)
+  const onRef = (_contentEditableRef: HTMLDivElement) => {
+    setContentEditableRef({ current: _contentEditableRef })
+  }
+
   const [contentEditableClassName, spellCheck, composerChildren, topAreaChildren, editorWrappers, placeholder] = useCellValues(
     contentEditableClassName$,
     spellCheck$,
@@ -62,11 +68,13 @@ const RichTextEditor: React.FC = () => {
         <div className={classNames(styles.rootContentEditableWrapper, 'mdxeditor-root-contenteditable')}>
           <RichTextPlugin
             contentEditable={
-              <ContentEditable
-                className={classNames(styles.contentEditable, contentEditableClassName)}
-                ariaLabel={t('contentArea.editableMarkdown', 'editable markdown')}
-                spellCheck={spellCheck}
-              />
+              <div ref={onRef}>
+                <ContentEditable
+                  className={classNames(styles.contentEditable, contentEditableClassName)}
+                  ariaLabel={t('contentArea.editableMarkdown', 'editable markdown')}
+                  spellCheck={spellCheck}
+                />
+              </div>
             }
             placeholder={
               <div className={classNames(styles.contentEditable, styles.placeholder, contentEditableClassName)}>

diff --git a/src/plugins/core/index.ts b/src/plugins/core/index.ts
@@ -293,6 +293,12 @@ export const codeBlockEditorDescriptors$ = Cell<CodeBlockEditorDescriptor[]>([])
  */
 export const editorRootElementRef$ = Cell<React.RefObject<HTMLDivElement> | null>(null)
 
+/**
+ * A reference to the content editable element.
+ * @group Core
+ */
+export const contentEditableRef$ = Cell<React.RefObject<HTMLDivElement> | null>(null)
+
 /**
  * Registers a lexical node to be used in the editor.
  * @group Core