Search code examples
javascriptjquerycodemirror

CodeMirror - merge view curved arch appearing in middle of page, diff not highlighting

Im attempting to setup a basic codemirror merge view as per https://codemirror.net/demo/merge.html

I have my html and scripts as per the below

<link href="{% static 'home/scripts/codemirror/codemirror.css' %}" rel="stylesheet">
<link href="{% static 'home/scripts/codemirror/addons/dialog.css' %}" rel="stylesheet">
<div class="col-lg-12">
    <div id="editor"></div>
</div>   
<script src="{% static 'home/scripts/codemirror/codemirror.js' %}"></script>
<script src="{% static 'home/scripts/codemirror/addons/search.js' %}"></script>
<script src="{% static 'home/scripts/codemirror/addons/searchcursor.js' %}"></script>
<script src="{% static 'home/scripts/codemirror/addons/jump-to-line.js' %}"></script>
<script src="{% static 'home/scripts/codemirror/addons/dialog.js' %}"></script>
<script src="{% static 'home/scripts/codemirror/addons/diff_match_patch.js' %}"></script>
<script src="{% static 'home/scripts/codemirror/addons/merge.js' %}"></script>
<script type="text/javascript"> 
    var original = 'test';
    var historic = 'test test';
    var target = document.getElementById("editor");
    diff = CodeMirror.MergeView(
        target, {
            value: original,
            origLeft: null,
            orig: historic ,
            lineNumbers: true,
            mode: "text/html",
            highlightDifferences: true,
            showDifferences: true,
            lineWrapping : true,
            revertButtons : false,
        }
    );
</script>

When I load my page I get an odd black curve as per the below am I missing any dependencies. the page doesnt look to be working at all at the moment

enter image description here

EDIT: jsfiddle example https://jsfiddle.net/xpvt214o/208320/

Solution

  • To get the weird curve svg out of the way, add this to your mergeview options:

    connect: 'align'

    I also tried to see why the page stacked the panels on top of each other instead of placing them side by side, and why highlighting isn't working. To do so, i copied the code from CodeMirror's documentation page that you linked into jsfiddle: https://jsfiddle.net/xpvt214o/218015/

    I used your import statements, since i don't have access to ../lib/codemirror.js, etc. I also had to manually invoke window.onload() from the fiddle code, since clicking run on the js fiddle page doesn't technically load the browser window.

    The code that worked on their page is behaving very differently on jsfiddle...I guess my main suggestion would be to make sure you're importing the right js files, and grabbing all the needed stylesheets.