CODEWITHSUNDEEP
javascriptjquerycodemirror
AlexW
AlexW

Reputation: 2589

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/

Upvotes: 4

Views: 1456

Answers (2)

Krzysztof Janiszewski
Krzysztof Janiszewski

Reputation: 3834

You added merge.js, but you did not add merge.css
Your js works properly it just is not styled.

The only thing you have to do is add this line

<link href="https://it-app-files.s3.amazonaws.com/static/home/scripts/codemirror/addons/merge.css" rel="stylesheet">

Also you can set revertButtons : true if you want to have buttons to revert changes.

JSFiddle

Upvotes: 1

apoteet
apoteet

Reputation: 784

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.

Upvotes: 0

Related Questions