Open kwonth211 opened 1 year ago
@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>
Thanks!
@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.
@kwonth211
<CodeMirrorMerge
+ revertControls="a-to-b"
style={{ height: 300, overflow: 'auto' }}
>
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>
)
}
@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!
@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>
);
}
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
<CodeMirrorMerge destroyRerender={false}>
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!