uiwjs / react-codemirror

CodeMirror 6 component for React. @codemirror https://uiwjs.github.io/react-codemirror/
https://uiwjs.github.io/react-codemirror/
MIT License
1.66k stars 132 forks source link

How to achieve editorDidMount functionality #675

Open IntelligaiaVivek opened 3 months ago

IntelligaiaVivek commented 3 months ago

@jaywcjlove When the CodeMirror editor is mounted (i.e., initialized). It takes an _editorReference parameter like in codemirror2 same i need this here in @uiw/code-mirror , so it can perform custom initialization tasks when the editor is mounted, and also ensure that the editor is properly configured

<codemirror
editorDidMount={editorDidMount}
/>

so i can use this _editorReferenece state const editorDidMount = (_editorReferenece: Editor) => { } and this _editorReferenece give like this image Appreciate your response

jaywcjlove commented 3 months ago

https://github.com/uiwjs/react-codemirror/blob/3b02cab2cfed5b050eff54b0d063f2639fdd4d8c/core/src/index.tsx#L63-L64

@IntelligaiaVivek I think you can use editorDidMount instead of componentDidMount.

IntelligaiaVivek commented 3 months ago

@jaywcjlove Thanks will check for this and i also need to maintain the undo redo state for the editor can you show which option to add for that. Appreciate for your response

jaywcjlove commented 3 months ago

The history feature can be enabled via a prop, and it is enabled by default. If you need to manage the history yourself, you should use history and disable the default history. @IntelligaiaVivek

https://github.com/uiwjs/react-codemirror/blob/3b02cab2cfed5b050eff54b0d063f2639fdd4d8c/extensions/basic-setup/src/index.ts#L146

import { history, redo, undo, historyKeymap } from "@codemirror/commands";

<CodeMirror
  extensions={[history(config: { joinToEvent:() => { /*....*/}  })]}
  basicSetup={{
    history: false,
  }}
/>