Request for onChange Event or Value Change Subscription in react-codemirror-merge

[kwonth211]

I'm currently using react-codemirror-merge and would like to detect onChange events or subscribe to value changes.
Is there a way to achieve this functionality? Any insight or suggestions on how to implement this would be greatly appreciated. Thanks in advance!

[jaywcjlove]

@kwonth211 Upgrade v4.20.0

import CodeMirrorMerge from 'react-codemirror-merge';
const Original = CodeMirrorMerge.Original;
const Modified = CodeMirrorMerge.Modified;

<CodeMirrorMerge
  revertControls="a-to-b"
  style={{ height: 300, overflow: 'auto' }}
>
  <Original
    value={originalCode}
    onChange={(value) => {
      console.log('value3:', value)
    }}
  />
  <Modified
    value={modifiedCode}
    onChange={(value) => {
      console.log('value3:', value)
    }}
  />
</CodeMirrorMerge>

[kwonth211]

Thanks!

[kwonth211]

@jaywcjlove

I have followed your instructions and updated to version 4.20.0, and have also implemented the provided interface. However, the onChange events are still not working as expected. Could you please provide further guidance or suggestions on how to resolve this issue? Thank you.

[jaywcjlove]

@kwonth211

<CodeMirrorMerge
+  revertControls="a-to-b"
  style={{ height: 300, overflow: 'auto' }}
>

[kwonth211]

Here is my code. I have followed the provided example and used the code exactly as written,
but it does not seem to be working. 🥲

import React, { useEffect } from 'react'
import styled from 'styled-components'
import CodeMirrorMerge from 'react-codemirror-merge'
import { EditorView, ViewUpdate } from '@codemirror/view'
import { EditorState } from '@codemirror/state'
import CodeMirror, { ReactCodeMirrorProps } from '@uiw/react-codemirror'
const Original = CodeMirrorMerge.Original
const Modified = CodeMirrorMerge.Modified

export interface JsonDiffProps {
  prevJson: string
  nextJson: string
  onChangePrevJson?: (value: string) => void
  onChangeNextJson?: (value: string) => void
  prevJsonProps?: {
    readonly?: boolean
    height?: string
    width?: string
    title?: React.ReactNode
  }
  nextJsonProps?: {
    readonly?: boolean
    height?: string
    width?: string
    title?: React.ReactNode
  }
}

export const JsonDiff = function JSONDiff({
  prevJson,
  nextJson,
  onChangePrevJson,
  onChangeNextJson,
  prevJsonProps,
  nextJsonProps,
}: JsonDiffProps) {
  // console.log(A.EditorState)

  return (
    <Container>
      <CodeMirrorMerge
        revertControls="a-to-b"
        style={{ height: 300, overflow: 'auto' }}
      >
        <Original
          value={prevJson}
          onChange={(value) => {
            console.log('value3:', value)
          }}
        />
        <Modified
          value={nextJson}
          onChange={(value) => {
            console.log('value3:', value)
          }}
        />
      </CodeMirrorMerge>
    </Container>
  )
}

[kwonth211]

@jaywcjlove

I am still experiencing the same issue with the onChange events not working, even after updating to version 4.20.2. I have tried using the exact example code provided in the documentation, but it didn't resolve the problem. Could it be an issue with my current package versions? Here are my package versions for reference:

"@uiw/codemirror-theme-dracula": "4.20.2",
"@uiw/codemirror-theme-github": "4.20.2",
"@uiw/react-codemirror": "4.20.2",
"react-codemirror-merge": "4.20.2",
"react": "^18.2.0",
"@storybook/addon-actions": "^7.0.10",
"@storybook/addon-controls": "^7.0.10",
"@storybook/addon-essentials": "^7.0.10",
"@storybook/addon-links": "^7.0.10",
"@storybook/react": "^7.0.10",
"@storybook/react-webpack5": "^7.0.10",

Any assistance or guidance would be greatly appreciated. Thank you!

[jaywcjlove]

@kwonth211 Example: https://codesandbox.io/embed/react-codemirror-example-codemirror-6-https-github-com-uiwjs-react-codemirror-issues-502-min95l?fontsize=14&hidenavigation=1&theme=dark

import React, { useState } from "react";
import CodeMirrorMerge from "react-codemirror-merge";

const Original = CodeMirrorMerge.Original;
const Modified = CodeMirrorMerge.Modified;
let doc = `one
two
three
four
five`;

export default function App() {
  const [value, setValue] = useState();
  const onChange = React.useCallback((val) => {
    console.log("value:", val);
    setValue(val);
  }, []);
  return (
    <div>
      <CodeMirrorMerge>
        <Original value={doc} onChange={onChange} />
        <Modified
          value={doc.replace(/t/g, "T") + "Six"}
          onChange={(val) => {
            console.log("value:222:", val);
          }}
        />
      </CodeMirrorMerge>
      <pre>{value}</pre>
    </div>
  );
}

[vyazadji]

It's broken in react-codemirror-merge v4.21.21
It works in the example codesandbox.io/embed/react-codemirror-example-codemirror-6-https-github-com-uiwjs-react-codemirror-issues-502-min95l?fontsize=14&hidenavigation=1&theme=dark with version 4.20.2
The example in the documentation https://uiwjs.github.io/react-codemirror/#/merge/onchange also looks broken
Also, it can be related to updating version of React from 17->18

[jaywcjlove]

@vyazadji

• CodeMirrorMerge gets unfocused on value change #566 (comment)

[jaywcjlove]

<CodeMirrorMerge destroyRerender={false}>