Cursor is being reset to the start of document

[savsandra]

The cursor resets to the beginning of the document when you try to enter text chaotically and quickly. This problem also occurs if you type two characters at the same time.
I tried to reproduce the problem in codesandbox https://codesandbox.io/p/sandbox/zp9j4s but it is not reproduced there: only locally.
The project I am running locally that is experiencing this problem is a copy of the project on codesandbox. There are no additional dependencies or styles.

Also the problem only appears in Chrome (Safari and Firefox have no problem)
Chrome version 129.0.6668.59

What could be the problem? Could this be a codemirror problem? I will be grateful for any help

2024-10-09.17.49.58.mov

[jaywcjlove]

2024-10-10.14.32.58.mp4

I can’t reproduce your issue in Chrome.

[savsandra]

2024-10-10.14.32.58.mp4
I can’t reproduce your issue in Chrome.

I'm talking about the same thing, I can't reproduce the problem in codesandbox either, but it appears when this project is run locally through the code editor. (I tried creating a project through create react app and adding markdown editor component to it, removing all styles - the problem appeared there.)

[marcusbory]

@savsandra

I came across this error before on my local machine, think it has to something to do with useState, as the setState function is asynchronous in nature. I created a temporary workaround for this which seemed to solve the problem, but I am unsure if it fits your use case.

For my use case, because I was intending to do an autosave function 500ms after the user stops typing, I used a setTimeout in the onChange handler, and only set the state after the user finishes typing. This did not affect the display of the MarkdownEditor at all, fixed the cursor issue despite erratic typing / double characters being typed, and is able to capture the updated value, provided your screen / app does not get closed after 500ms.

Here is a codesandbox snippet, adapted from yours: https://codesandbox.io/p/sandbox/bold-rhodes-y6gflx

[epshone]

The core problem here is React state and CodeMirror state being out of sync. If you type "abc", and code mirror updates to the state "ab" put React passes a new value "abc" to the component then CodeMirror gets confused, re-renders, and moves the cursor back to the beginning.

Using it as an uncontrolled component is a good path forward, here's an example in nextjs:

// UncontrolledMarkdownEditor.tsx
import { forwardRef, useImperativeHandle, useMemo, useRef } from 'react';
import { EditorView } from '@codemirror/view';
import type { IMarkdownEditor as MDEditorProps } from '@uiw/react-markdown-editor';
import dynamic from 'next/dynamic';

// needed for nextjs
const MarkdownEditor = dynamic(
  () => import('@uiw/react-markdown-editor').then((mod) => mod.default),
  { ssr: false }
);

export type UncontrolledMarkdownEditorRef = {
  editorView: EditorView | null;
  getValue: () => string;
};

type Props = {
  initialValue: string;
  onEditorReady?: (ref: UncontrolledMarkdownEditorRef) => void;
  onChange?: (value: string) => void;
} & Omit<MDEditorProps, 'value' | 'onChange'>;

export const UncontrolledMarkdownEditor = forwardRef<
  UncontrolledMarkdownEditorRef,
  Props
>(({ initialValue, onEditorReady, onChange, ...rest }, ref) => {
  // Force the value to never be updated internally
  const internalValue = useRef(initialValue);
  const viewRef = useRef<EditorView | null>(null);

  const editorRef = useMemo(
    () => ({
      get editorView() {
        return viewRef.current;
      },
      getValue: () => viewRef.current?.state.doc.toString() || ''
    }),
    []
  );

  useImperativeHandle(ref, () => editorRef);

  return (
    <MarkdownEditor
      value={internalValue.current}
      onChange={(value) => {
        onChange?.(value);
      }}
      onCreateEditor={(editor) => {
        viewRef.current = editor;
        onEditorReady?.(editorRef);
      }}
      {...rest}
    />
  );
});

And in use:

// Example usage of UncontrolledMarkdownEditor
import { useRef } from 'react';
import { UncontrolledMarkdownEditor, UncontrolledMarkdownEditorRef } from './UncontrolledMarkdownEditor';

const ExampleMarkdownPage = () => {
  const editorRef = useRef<UncontrolledMarkdownEditorRef>(null);

  const handleSave = () => {
    // Get the latest value from the editor
    const currentContent = editorRef.current?.getValue() || '';
    
    // Example save implementation
    console.log('Saving content:', currentContent);
    // You would typically make an API call here
    // await saveToServer(currentContent);
  };

  const handleUpdateContent = () => {
    const editor = editorRef.current?.editorView;
    if (!editor) return;

    // Example new content, (undo, redo, clear functionality)
    const newContent = "# Updated Content\n\nThis content was updated programmatically!";

    // Update the editor content using dispatch
    editor.dispatch({
      changes: {
        from: 0,
        to: editor.state.doc.length,
        insert: newContent
      }
    });
  };

  return (
    <div className="p-4">
      <UncontrolledMarkdownEditor
        ref={editorRef}
        // Or onEditorReady() to pull the ref as soon as it's ready
        initialValue="# Hello World\n\nStart typing here..."
        visible={true}
        height="400px"
      />
      
      <button
        onClick={handleSave}
        className="mt-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 focus:ring-2 focus:ring-blue-300"
        aria-label="Save content"
      >
        Save
      </button>
    </div>
  );
};