diff --git a/src/MDXEditor.tsx b/src/MDXEditor.tsx index b52fb778..86839255 100644 --- a/src/MDXEditor.tsx +++ b/src/MDXEditor.tsx @@ -104,7 +104,7 @@ export interface MDXEditorProps { /** * pass if you would like to have the editor automatically focused when mounted. */ - autoFocus?: boolean | 'rootStart' | 'rootEnd' + autoFocus?: boolean | { defaultSelection?: 'rootStart' | 'rootEnd'; preventScroll?: boolean } /** * Triggered when focus leaves the editor */ @@ -147,7 +147,7 @@ export interface MDXEditorMethods { /** * Sets focus on input */ - focus: (callbackFn?: (() => void) | undefined, defaultSelection?: 'rootStart' | 'rootEnd') => void + focus: (callbackFn?: (() => void) | undefined, opts?: { defaultSelection?: 'rootStart' | 'rootEnd'; preventScroll?: boolean }) => void } const RenderRecurisveWrappers: React.FC<{ wrappers: React.ComponentType<{ children: React.ReactNode }>[]; children: React.ReactNode }> = ({ @@ -208,8 +208,8 @@ const Methods: React.FC<{ mdxRef: React.ForwardedRef }> = ({ m setMarkdown: (markdown) => { realm.pubKey('setMarkdown', markdown) }, - focus: (callbackFn?: (() => void) | undefined, defaultSelection?: 'rootStart' | 'rootEnd') => { - realm.getKeyValue('rootEditor')?.focus(callbackFn, { defaultSelection }) + focus: (callbackFn?: (() => void) | undefined, opts?: { defaultSelection?: 'rootStart' | 'rootEnd'; preventScroll?: boolean }) => { + realm.getKeyValue('rootEditor')?.focus(callbackFn, opts) } } }, diff --git a/src/plugins/core/index.ts b/src/plugins/core/index.ts index 74d33bf4..7fd3c1ba 100644 --- a/src/plugins/core/index.ts +++ b/src/plugins/core/index.ts @@ -94,7 +94,7 @@ export const coreSystem = system((r) => { const contentEditableClassName = r.node('') const readOnly = r.node(false) const placeholder = r.node('') - const autoFocus = r.node(false) + const autoFocus = r.node(false) const inFocus = r.node(false, true) const currentFormat = r.node(0, true) @@ -251,7 +251,17 @@ export const coreSystem = system((r) => { const autoFocusValue = r.getValue(autoFocus) if (autoFocusValue) { - setTimeout(() => theRootEditor.focus(noop, { defaultSelection: autoFocusValue === true ? 'rootStart' : autoFocusValue })) + if (autoFocusValue === true) { + // Default 'on' state + setTimeout(() => theRootEditor.focus(noop, { defaultSelection: 'rootStart' })) + return + } + setTimeout(() => + theRootEditor.focus(noop, { + defaultSelection: autoFocusValue.defaultSelection ?? 'rootStart', + preventScroll: autoFocusValue.preventScroll ?? false + }) + ) } }) @@ -493,7 +503,7 @@ interface CorePluginParams { initialMarkdown: string contentEditableClassName: string placeholder?: React.ReactNode - autoFocus: boolean | 'rootStart' | 'rootEnd' + autoFocus: boolean | { defaultSelection?: 'rootStart' | 'rootEnd'; preventScroll?: boolean } onChange: (markdown: string) => void onBlur?: (e: FocusEvent) => void toMarkdownOptions: NonNullable