1. There's total of 3 panel to compare and I want to change the background-color of left and right panel which is not editable, only middle panel is editable but I could not find any method to change them.

2. I wanted to do like when user click goNextDiff or goPrevDiff button, it would change the border of the panel to other color to highlight it.

Currently my website look like this, remember to click three-way to see how it actually looks like (https://codemirror.net/demo/merge.html)

<p:commandButton styleClass="fa-tiger-bluebuttontext" value="Previous" onclick="previous();"/>
<p:commandButton styleClass="fa-tiger-bluebuttontext" value="Next" onclick="next();"/>

<script>
      var editor, leftPane, rightPane, dv, highlight = true, connect = "align", collapse = false;
      var taMergedVersion = document.getElementById("#{p:component('mergedVersion')}");
      var taOriginalValue = document.getElementById("#{p:component('originalValue')}");

      function initUI() {
            if (editor == null) return;
            var target = document.getElementById("mergeView");
            target.innerHTML = "";

            dv = CodeMirror.MergeView(target, {
                  value: editor,
                  origLeft: leftPane,
                  origRight: rightPane,
                  lineNumbers: true,
                  highlightDifferences: highlight,
                  connect: connect,
                  collapseIdentical: collapse
            });

            // 1)
            //Total of 3 panels (you can refer here https://codemirror.net/demo/merge.html)
            //How to change this so left and right panel background color can change to this rgb(248,248,248)
            dv.leftOriginal().style.backgroundColor("rgb(248,248,248)");
            dv.rightOriginal().style.backgroundColor("rgb(248,248,248)");
      }

      function next() {
            dv.edit.execCommand("goNextDiff", function(cm) {
                  // 2)
                  //CODE HERE TO CHANGE BORDER CSS WHEN BUTTON IS CLICK
            });
      }

      function previous() {
            dv.edit.execCommand("goPrevDiff", function(cm) {
                  // 2)
                  //CODE HERE TO CHANGE BORDER CSS WHEN BUTTON IS CLICK
            });
      }

      function loadCodeMirror() {
            leftPane = document.getElementById("#{p:component('mergePhysicalFile')}").value; // physical file
            rightPane = document.getElementById("#{p:component('mergeDatabase')}").value; // database
            editor = taMergedVersion.value;

            initUI();

            dv.edit.on("change", function(cm) {
                taMergedVersion.value = cm.getValue();
            });
      }

      function resetContent() {
            taMergedVersion.value = taOriginalValue.value;
      }
</script>