import { Fragment, useRef, useState } from 'react'; import CodeMirrorMerge, { CodeMirrorMergeProps } from 'react-codemirror-merge'; import { EditorView } from 'codemirror'; import { EditorState } from '@codemirror/state'; import { langs } from '@uiw/codemirror-extensions-langs'; import { originalCode, modifiedCode } from './code'; import { useTheme } from '../../utils/useTheme'; const Original = CodeMirrorMerge.Original; const Modified = CodeMirrorMerge.Modified; export const MergeExample = () => { const [orientation, setOrientation] = useState('a-b'); const [revertControls, setRevertControls] = useState(); const [highlightChanges, setHighlightChanges] = useState(true); const [gutter, setGutter] = useState(true); const [collapseUnchanged, setCollapseUnchanged] = useState({}); const { theme } = useTheme(); const handleOrientation = (evn: React.ChangeEvent) => { setOrientation(evn.target.value as CodeMirrorMergeProps['orientation']); }; const [originalValue, setOriginalValue] = useState(originalCode); const random = useRef(); const click = () => { random.current = Math.floor(Math.random() * 101); const code = '// hello world' + random.current + '\n' + originalCode; setOriginalValue(code); }; return ( { // console.log('::::::::::', val) }} /> Orientation
Revert buttons
Highlight changes setHighlightChanges(evn.target.checked)} />
Gutter markers setGutter(evn.target.checked)} /> Collapse unchanged code setCollapseUnchanged(evn.target.checked ? {} : undefined)} /> ); };