how can I use addon merge

[hesiman]

hi，first, thanks for react-codemirror2

There's a codemirror merge demo on the official website. https://codemirror.net/demo/merge.html#

I have tried to apply the configuration like the demo in the options, But it didn't work. Is this application supported?

import {PureComponent} from 'react'
import {Controlled as CodeMirror} from 'react-codemirror2'
import styles from './index.less';

require('codemirror/lib/codemirror.css');
require('codemirror/theme/eclipse.css')
require('codemirror/theme/neat.css')
require('codemirror/addon/lint/lint.css')
require('codemirror/addon/merge/merge.css')
require('codemirror/mode/javascript/javascript')
require('codemirror/addon/lint/lint')
require('codemirror/addon/lint/javascript-lint')
require('codemirror/addon/merge/merge')

if(!window.JSHINT)  window.JSHINT =  require('jshint').JSHINT

class CodeMergeTextArea extends PureComponent{

  constructor(props){
    super(props)
    const value = props.value? props.value: ''
    this.state = {
      value
    }
  }

  handleValueChange = (editor, data, value) => {
    const {onChange} = this.props;
    if(onChange) onChange(value)
  }

  render(){
    const {value} = this.state;
    const {language='javascript',theme="eclipse",lineNumbers=true,origLeft,origRight} = this.props
    return (
      <CodeMirror className={styles.codeMirror}
        value = {value}
        options = {{
          mode: language,
          theme: theme,
          lineNumbers: lineNumbers,
          gutters: ['CodeMirror-lint-markers'],
          lint: true,
          origLeft: origLeft,
          origRight: origRight,
          highlightDifferences: true,
          connect: 'align',
          collapseIdentical: false
        }}
        onBeforeChange = {(editor, data, value)=>{this.setState({value})}}
        onChange = {this.handleValueChange}
      />
    )
  }

}

export default CodeMergeTextArea

[hesiman]

I have implemented it by codemirror

import {PureComponent} from 'react'
import CodeMirror from 'codemirror/lib/codemirror'

require('codemirror/lib/codemirror.css');
require('codemirror/theme/eclipse.css')
require('codemirror/theme/neat.css')
require('codemirror/addon/lint/lint.css')
require('codemirror/addon/merge/merge.css')
require('codemirror/mode/javascript/javascript')
require('codemirror/addon/lint/lint')
require('codemirror/addon/lint/javascript-lint')
require('codemirror/addon/merge/merge')

if(!window.JSHINT)  window.JSHINT =  require('jshint').JSHINT

class MergeCodeTextArea extends PureComponent{

  constructor(props){
    super(props)
    this.state = {
      value: {
        val: '',
        orig: ''
      }
    }
  }

  componentDidMount(){
    const {value:{val,orig}} = this.state;
    const {language='javascript',theme="eclipse",lineNumbers=true} = this.props
    const dv = CodeMirror.MergeView(this._ref, {
      theme: theme,
      value: val,
      origLeft: null,
      origRight: orig,
      allowEditingOriginals: true,
      lineNumbers: lineNumbers,
      mode: language,
      highlightDifferences: true,
      gutters: ['CodeMirror-lint-markers'],
      lint: true,
      connect: 'align'
    })
  }

  render(){
    return (
      <div ref={ref=>this._ref=ref}>
      </div>
    )
  }

}

export default MergeCodeTextArea

[ashwintastic]

getting this ReferenceError: diff_match_patch is not defined

[wancun]

getting this ReferenceError: diff_match_patch is not defined

me too, have you solved it?

[rowanc1]

Either adding the script in your window:

<script src="https://cdnjs.cloudflare.com/ajax/libs/diff_match_patch/20121119/diff_match_patch.js"></script>

OR in node:

const DMP = require('diff_match_patch');
Object.keys(DMP).forEach((key) => { window[key] = DMP[key]; });

[jayeshchoudhary]

I am not getting any MergeView from CodeMirror component Can you provide an example in functional component using react-codemirror2?