xhpeditor: several refactor

- place codemirror config in proper javascript file
- refactor snippets buttons
- add codemirror niceties (WIP)

Change-Id: I6b0afd1a120026e5952823d370d5f7827b3c6fe5
Reviewed-on: https://gerrit.libreoffice.org/c/dev-tools/+/86271
Reviewed-by: Olivier Hallot <olivier.hallot@libreoffice.org>
Tested-by: Olivier Hallot <olivier.hallot@libreoffice.org>

7 files changed, 133 insertions, 255 deletions

diff --git a/help3/xhpeditor/autocomplete.js b/help3/xhpeditor/autocomplete.js
index 3ce74a31..d6804bc6 100644
--- a/help3/xhpeditor/autocomplete.js
+++ b/help3/xhpeditor/autocomplete.js
@@ -164,19 +164,4 @@ function completeIfInTag(cm) {
     });
 }
 
-var editor = CodeMirror.fromTextArea(document.getElementById("xhpeditor"), {
-    lineNumbers: true,
-    mode: "xml",
-    matchBrackets: true,
-    theme: "default",
-    lineWrapping: true,
-    extraKeys: {
-        "'<'": completeAfter,
-        "'/'": completeIfAfterLt,
-        "' '": completeIfInTag,
-        "'='": completeIfInTag,
-        "Ctrl-Space": "autocomplete"
-    },
-    hintOptions: {schemaInfo: tags}
-});
 /* vim:set shiftwidth=4 softtabstop=4 expandtab cinoptions=b1,g0,N-s cinkeys+=0=break: */
diff --git a/help3/xhpeditor/buttons.php b/help3/xhpeditor/buttons.php
index 27dd8906..ead4776f 100644
--- a/help3/xhpeditor/buttons.php
+++ b/help3/xhpeditor/buttons.php
@@ -1,76 +1,86 @@
-<?php
-echo '<div class="snip_heading">
-        <div class="snip_div">Open:</div><input type="file" id="file-input" accept=".xhp"/>
-        <div class="snip_div">Save:</div><button onclick="download(editor.getValue(),getFileNameFromXML(),\'text/xml\')" class="snip_buttons">Save local file</button>
-    </div>
-    <div class="snip_heading"><div class="snip_div">Edit:</div>
-        <button onclick="editor.undo()">Undo</button>
-        <button onclick="editor.redo()">Redo</button>
-    </div>
-    <div class="snip_heading"><div class="snip_div">Document:</div>
-        <button onclick="startNewXHPDoc()" class="snip_buttons">Start new XHP document</button>
-        <button onclick="docHeading()" class="snip_buttons">DocHeading</button>
-        <button onclick="snippet7()" class="snip_buttons">ahelp</button>
-    </div>
-    <div class="snip_heading"><div class="snip_div">Bookmarks: </div>
-        <button onclick="bookmarkValue()" class="snip_buttons">bk-value</button>
-        <button onclick="bookmarkBranch()" class="snip_buttons">bk-hid</button>
-        <button onclick="bookmarkIndex()" class="snip_buttons">bk-index</button>
-        <button onclick="bookmarkNoWidget()" class="snip_buttons">bk-nowidget</button>
-    </div>
-    <div class="snip_heading"><div class="snip_div">Sections: </div>
-        <button onclick="section_div()" class="snip_buttons">Section</button>
-        <button onclick="related_topics()" class="snip_buttons">Related Topics</button>
-        <button onclick="howtoget()" class="snip_buttons">How to get</button>
-        <button onclick="bascode_div()" class="snip_buttons">bascode div</button>
-        <button onclick="pycode_div()" class="snip_buttons">pycode div</button>
-    </div>
-    <div class="snip_heading"><div class="snip_div">Tables:</div>
-        <button onclick="table2R3C()" class="snip_buttons">Table Full</button>
-        <button onclick="tableRow()" class="snip_buttons">Table Row</button>
-        <button onclick="tableCell()" class="snip_buttons">Table Cell</button>
-        <button onclick="iconTable()" class="snip_buttons">Icon Table</button>
-    </div>
-    <div class="snip_heading"><div class="snip_div">Paragraph:</div>
-        <button onclick="paragraph(\'paragraph\')" class="snip_buttons">paragraph</button>
-        <button onclick="note()" class="snip_buttons">note</button>
-        <button onclick="warning()" class="snip_buttons">warning</button>
-        <button onclick="tip()" class="snip_buttons">tip</button>
-        <button onclick="bascode_par()" class="snip_buttons">bascode-par</button>
-        <button onclick="pycode_par()" class="snip_buttons">pycode-par</button>
-        <button onclick="image_par()" class="snip_buttons">image-par</button>
-    </div>
-    <div class="snip_heading"><div class="snip_div">Characters:</div>
-        <button onclick="emph()" class="snip_buttons">emph</button>
-        <button onclick="c_menuitem()" class="snip_buttons">menuitem</button>
-        <button onclick="_input()" class="snip_buttons">input</button>
-        <button onclick="_literal()" class="snip_buttons">literal</button>
-        <button onclick="_keystroke()" class="snip_buttons">keystroke</button>
-        <button onclick="_widget()" class="snip_buttons">widget</button>
-    </div>
-    <div class="snip_heading"><div class="snip_div">Headings:</div>
-        <button onclick="heading(\'1\')" class="snip_buttons">H1</button>
-        <button onclick="heading(\'2\')" class="snip_buttons">H2</button>
-        <button onclick="heading(\'3\')" class="snip_buttons">H3</button>
-        <button onclick="heading(\'4\')" class="snip_buttons">H4</button>
-    </div>
-    <div class="snip_heading"><div class="snip_div">Switches:</div>
-        <button onclick="switchXHP(\'appl\')" class="snip_buttons">Switch appl</button>
-        <button onclick="switchXHP(\'sys\')" class="snip_buttons">Switch sys</button>
-        <button onclick="switchInline(\'appl\')" class="snip_buttons">Switchinline appl</button>
-        <button onclick="switchInline(\'sys\')" class="snip_buttons">Switchinline sys</button>
-        <button onclick="MenuPrefMAC()" class="snip_buttons">Menu MAC</button>
-        <button onclick="KeyMAC()" class="snip_buttons">Key MAC</button>
-    </div>
-    <div class="snip_heading"><div class="snip_div">Lists:</div>
-        <button onclick="tList(\'unordered\')" class="snip_buttons">UL</button>
-        <button onclick="tList(\'ordered\')" class="snip_buttons">OL</button>
-        <button onclick="listItem()" class="snip_buttons">List Item</button>
-    </div>
-    <div class="snip_heading"><div class="snip_div">Links:</div>
-        <button onclick="tVariable()" class="snip_buttons">Variable</button>
-        <button onclick="tEmbed()" class="snip_buttons">Embed</button>
-        <button onclick="tEmbedvar()" class="snip_buttons">Embedvar</button>
-        <button onclick="tLink()" class="snip_buttons">Link</button>
-    </div>'
-?>
+<div class="buttonrow">
+    <div class="snip_heading">File:</div>
+    <div class="snip_buttons">Open: <input type="file" id="file-input" accept=".xhp"/></div>
+    <button onclick="download(editor.getValue(),getFileNameFromXML(),'text/xml')" class="snip_buttons">Save local file</button>
+</div>
+<div class="buttonrow">
+    <div class="snip_heading">Edit: </div>
+    <button class="snip_buttons" onclick="editor.undo()">Undo</button>
+    <button class="snip_buttons" onclick="editor.redo()">Redo</button>
+</div>
+<div class="buttonrow">
+    <div class="snip_heading">Document: </div>
+    <button onclick="startNewXHPDoc()" class="snip_buttons">Start new XHP document</button>
+    <button onclick="docHeading()" class="snip_buttons">DocHeading</button>
+    <button onclick="snippet7()" class="snip_buttons">&lt;ahelp&gt;</button>
+</div>
+<div class="buttonrow">
+    <div class="snip_heading">Bookmarks: </div>
+    <button onclick="bookmarkValue()" class="snip_buttons">bmk-value</button>
+    <button onclick="bookmarkBranch()" class="snip_buttons">bmk-hid</button>
+    <button onclick="bookmarkIndex()" class="snip_buttons">bmk-index</button>
+    <button onclick="bookmarkNoWidget()" class="snip_buttons">bmk-nowidget</button>
+</div>
+<div class="buttonrow">
+    <div class="snip_heading">Sections: </div>
+    <button onclick="section_div()" class="snip_buttons">Section</button>
+    <button onclick="related_topics()" class="snip_buttons">Related Topics</button>
+    <button onclick="howtoget()" class="snip_buttons">How to get</button>
+    <button onclick="bascode_div()" class="snip_buttons">bascode div</button>
+    <button onclick="pycode_div()" class="snip_buttons">pycode div</button>
+</div>
+<div class="buttonrow">
+    <div class="snip_heading">Tables: </div>
+    <button onclick="table2R3C()" class="snip_buttons">Table Full</button>
+    <button onclick="tableRow()" class="snip_buttons">Table Row</button>
+    <button onclick="tableCell()" class="snip_buttons">Table Cell</button>
+    <button onclick="iconTable()" class="snip_buttons">Icon Table</button>
+</div>
+<div class="buttonrow">
+    <div class="snip_heading">Paragraph: </div>
+    <button onclick="paragraph('paragraph')" class="snip_buttons">&lt;paragraph&gt;</button>
+    <button onclick="note()" class="snip_buttons">&lt;note&gt;</button>
+    <button onclick="warning()" class="snip_buttons">&lt;warning&gt;</button>
+    <button onclick="tip()" class="snip_buttons">&lt;tip&gt;</button>
+    <button onclick="bascode_par()" class="snip_buttons">bascode-par</button>
+    <button onclick="pycode_par()" class="snip_buttons">pycode-par</button>
+    <button onclick="image_par()" class="snip_buttons">image-par</button>
+</div>
+<div class="buttonrow">
+    <div class="snip_heading">Characters: </div>
+    <button onclick="emph()" class="snip_buttons">&lt;emph&gt;</button>
+    <button onclick="c_menuitem()" class="snip_buttons">&lt;menuitem&gt;</button>
+    <button onclick="_input()" class="snip_buttons">&lt;input&gt;</button>
+    <button onclick="_literal()" class="snip_buttons">&lt;literal&gt;</button>
+    <button onclick="_keystroke()" class="snip_buttons">&lt;keycode&gt;</button>
+    <button onclick="_widget()" class="snip_buttons">&lt;widget&gt;</button>
+</div>
+<div class="buttonrow">
+    <div class="snip_heading">Headings:</div>
+    <button onclick="heading('1')" class="snip_buttons">&lt;H1&gt;</button>
+    <button onclick="heading('2')" class="snip_buttons">&lt;H2&gt;</button>
+    <button onclick="heading('3')" class="snip_buttons">&lt;H3&gt;</button>
+    <button onclick="heading('4')" class="snip_buttons">&lt;H4&gt;</button>
+</div>
+<div class="buttonrow">
+    <div class="snip_heading">Switches: </div>
+    <button onclick="switchXHP('appl')" class="snip_buttons">Switch appl</button>
+    <button onclick="switchXHP('sys')" class="snip_buttons">Switch sys</button>
+    <button onclick="switchInline('appl')" class="snip_buttons">Switchinline appl</button>
+    <button onclick="switchInline('sys')" class="snip_buttons">Switchinline sys</button>
+    <button onclick="MenuPrefMAC()" class="snip_buttons">Menu MAC</button>
+    <button onclick="KeyMAC()" class="snip_buttons">Key MAC</button>
+</div>
+<div class="buttonrow">
+    <div class="snip_heading">Lists: </div>
+    <button onclick="tList('unordered')" class="snip_buttons">&lt;ul&gt;</button>
+    <button onclick="tList('ordered')" class="snip_buttons">&lt;ol&gt;</button>
+    <button onclick="listItem()" class="snip_buttons">&lt;listitem&gt;</button>
+</div>
+<div class="buttonrow">
+    <div class="snip_heading">Links:</div>
+    <button onclick="tVariable()" class="snip_buttons">&lt;variable&gt;</button>
+    <button onclick="tEmbed()" class="snip_buttons">&lt;embed&gt;</button>
+    <button onclick="tEmbedvar()" class="snip_buttons">&lt;embedvar&gt;</button>
+    <button onclick="tLink()" class="snip_buttons">&lt;link&gt;</button>
+</div>
diff --git a/help3/xhpeditor/index.html b/help3/xhpeditor/index.html
deleted file mode 100644
index 9be92ca2..00000000
--- a/help3/xhpeditor/index.html
+++ /dev/null
@@ -1,117 +0,0 @@
-<!DOCTYPE html>
-<!--
-* This file is part of the LibreOffice project.
-*
-* This Source Code Form is subject to the terms of the Mozilla Public
-* License, v. 2.0. If a copy of the MPL was not distributed with this
-* file, You can obtain one at http://mozilla.org/MPL/2.0/.
--->
-
-<html>
-<meta charset="utf-8"/>
-<head>
-    <title>LibreOffice Documentation XHP Editor</title>
-    <link rel="stylesheet" href="xhpeditor.css">
-    <link rel="stylesheet" href="lib/codemirror.css">
-    <link rel="stylesheet" href="addon/hint/show-hint.css">
-    <link rel="stylesheet" href="/help_editor/hc2/help3xsl/normalize.css">
-    <link rel="stylesheet" href="/help_editor/hc2/help3xsl/prism.css">
-
-    <script type="text/javascript" src="lib/codemirror.js"></script>
-    <script type="text/javascript" src="addon/hint/show-hint.js"></script>
-    <script type="text/javascript" src="addon/hint/xml-hint.js"></script>
-    <script type="text/javascript" src="mode/xml/xml.js"></script>
-    <script type="text/javascript" src="xhp2html.js"></script>
-    <script type="text/javascript" src="/help_editor/hc2/help3xsl/help2.js"></script>
-    <script type="text/javascript" src="/help_editor/hc2/help3xsl/prism.js"></script>
-</head>
-
-<body style="font-family:sans-serif;">
-<div class="leftside">
-    <h2>LibreOffice Documentation XHP Editor</h2>
-    <form class="form_area">
-        <textarea id="xhpeditor"></textarea>
-    </form>
-    <br />
-    <div class="snip_heading"><div class="snip_div">Actions: </div>
-        <p>File name: source/text/<input type="text" id="01" name="filename" value=""/><button onclick="loadText('source/text/'+document.getElementById('01').value);">Open File</button></p>
-        <p>File name: <input type="text" id="02" name="filename" value=""/><button onclick="alert('Not yet implemented, but you can copy the text to the clipboard!');">Save Changes</button>
-        <button onclick="displayResult()">Render page</button></p>
-    </div>
-    <div class="snip_heading"><div class="snip_div">Edit:</div>
-        <button onclick="editor.undo()">Undo</button>
-        <button onclick="editor.redo()">Redo</button>
-    </div>
-    <div class="snip_heading"><div class="snip_div">Document:</div>
-        <button onclick="startNewXHPDoc()" class="snip_buttons">Start new XHP document</button>
-        <button onclick="docHeading()" class="snip_buttons">DocHeading</button>
-        <button onclick="snippet7()" class="snip_buttons">ahelp</button>
-    </div>
-    <div class="snip_heading"><div class="snip_div">Bookmarks: </div>
-        <button onclick="bookmarkValue()" class="snip_buttons">bk-value</button>
-        <button onclick="bookmarkBranch()" class="snip_buttons">bk-hid</button>
-        <button onclick="bookmarkIndex()" class="snip_buttons">bk-index</button>
-        <button onclick="bookmarkNoWidget()" class="snip_buttons">bk-nowidget</button>
-    </div>
-    <div class="snip_heading"><div class="snip_div">Sections: </div>
-        <button onclick="section_div()" class="snip_buttons">Section</button>
-        <button onclick="related_topics()" class="snip_buttons">Related Topics</button>
-        <button onclick="howtoget()" class="snip_buttons">How to get</button>
-        <button onclick="bascode_div()" class="snip_buttons">bascode div</button>
-        <button onclick="pycode_div()" class="snip_buttons">pycode div</button>
-    </div>
-    <div class="snip_heading"><div class="snip_div">Tables: </div>
-        <button onclick="table2R3C()" class="snip_buttons">Table Full</button>
-        <button onclick="tableRow()" class="snip_buttons">TableRow</button>
-        <button onclick="tableCell()" class="snip_buttons">Table Cell</button>
-        <button onclick="iconTable()" class="snip_buttons">Icon Table</button>
-    </div>
-    <div class="snip_heading"><div class="snip_div">Paragraph: </div>
-        <button onclick="paragraph('paragraph')" class="snip_buttons">paragraph</button>
-        <button onclick="note()" class="snip_buttons">note</button>
-        <button onclick="warning()" class="snip_buttons">warning</button>
-        <button onclick="tip()" class="snip_buttons">tip</button>
-        <button onclick="bascode_par()" class="snip_buttons">bascode-par</button>
-        <button onclick="pycode_par()" class="snip_buttons">pycode-par</button>
-    </div>
-    <div class="snip_heading"><div class="snip_div">Characters: </div>
-        <button onclick="emph()" class="snip_buttons">emph</button>
-        <button onclick="c_menuitem()" class="snip_buttons">menuitem</button>
-        <button onclick="_input()" class="snip_buttons">input</button>
-        <button onclick="_literal()" class="snip_buttons">literal</button>
-        <button onclick="_keystroke()" class="snip_buttons">keystroke</button>
-        <button onclick="_widget()" class="snip_buttons">widget</button>
-    </div>
-    <div class="snip_heading"><div class="snip_div">Headings: </div>
-        <button onclick="heading('1')" class="snip_buttons">H1</button>
-        <button onclick="heading('2')" class="snip_buttons">H2</button>
-        <button onclick="heading('3')" class="snip_buttons">H3</button>
-        <button onclick="heading('4')" class="snip_buttons">H4</button>
-    </div>
-    <div class="snip_heading"><div class="snip_div">Switches: </div>
-        <button onclick="switchXHP('appl')" class="snip_buttons">Switch appl</button>
-        <button onclick="switchXHP('sys')" class="snip_buttons">Switch sys</button>
-        <button onclick="switchInline('appl')" class="snip_buttons">Switchinline appl</button>
-        <button onclick="switchInline('sys')" class="snip_buttons">Switchinline sys</button>
-    </div>
-    <div class="snip_heading"><div class="snip_div">Lists: </div>
-        <button onclick="tList('unordered')" class="snip_buttons">UL</button>
-        <button onclick="tList('ordered')" class="snip_buttons">OL</button>
-        <button onclick="listItem()" class="snip_buttons">List Item</button>
-    </div>
-    <div class="snip_heading"><div class="snip_div">Links: </div>
-        <button onclick="tVariable()" class="snip_buttons">Variable</button>
-        <button onclick="tEmbed()" class="snip_buttons">Embed</button>
-        <button onclick="tEmbedvar()" class="snip_buttons">Embedvar</button>
-        <button onclick="tLink()" class="snip_buttons">Link</button>
-    </div>
-</div>
-<div class="rightside">
-    <h2>Rendered page</h2> 
-    <div id="renderedpage"></div>
-</div>
-</body>
-<script type="text/javascript" src="/help_editor/hc2/help3xsl/help.js"></script>
-<script type="text/javascript" src="autocomplete.js"></script>
-<script type="text/javascript" src="snippets.js"></script>
-</html>
diff --git a/help3/xhpeditor/index.php b/help3/xhpeditor/index.php
index 1ae2b341..e386b1e7 100644
--- a/help3/xhpeditor/index.php
+++ b/help3/xhpeditor/index.php
@@ -21,15 +21,20 @@ $xhp = $_POST["xhpdoc"];
     <link type="text/css" rel="stylesheet" href="helpcontent2/help3xsl/normalize.css">
     <link type="text/css" rel="stylesheet" href="helpcontent2/help3xsl/prism.css">
 
-    <script type="text/javascript" src="lib/codemirror.js"></script>
-    <script type="text/javascript" src="addon/hint/show-hint.js"></script>
-    <script type="text/javascript" src="addon/hint/xml-hint.js"></script>
-    <script type="text/javascript" src="mode/xml/xml.js"></script>
-    <script type="text/javascript" src="xhp2html.js" defer=""></script>
-    <script type="text/javascript" src="helpcontent2/help3xsl/prism.js"></script>
-    <script type="text/javascript" src="autocomplete.js" defer=""></script>
-    <script type="text/javascript" src="snippets.js" defer=""></script>
-    <script type="text/javascript" src="DisplayArea.js"></script>
+    <script type="application/javascript" src="lib/codemirror.js"></script>
+    <script type="application/javascript" src="addon/hint/show-hint.js"></script>
+    <script type="application/javascript" src="addon/hint/xml-hint.js"></script>
+    <script type="application/javascript" src="addon/edit/matchtags.js"></script>
+    <script type="application/javascript" src="addon/edit/closetags.js"></script>
+    <script type="application/javascript" src="mode/xml/xml.js"></script>
+    <script type="application/javascript" src="addon/fold/xml-fold.js"></script>
+    <script type="application/javascript" src="addon/fold/foldcode.js"></script>
+    
+    <script type="application/javascript" src="helpcontent2/help3xsl/prism.js"></script>
+    <script type="application/javascript" src="autocomplete.js" defer=""></script>
+    <script type="application/javascript" src="xhp2html.js" defer></script>
+    <script type="application/javascript" src="snippets.js" defer=""></script>
+    <script type="application/javascript" src="DisplayArea.js"></script>
 </head>
 
 <body style="font-family:sans-serif;">
@@ -44,7 +49,7 @@ $xhp = $_POST["xhpdoc"];
         <textarea id="xhpeditor" name="xhpdoc" form="CMtextarea"><?php echo $xhp;?></textarea></br>
     </form>
     <div class="buttonsdiv">
-    <?php include './buttons.php';?>
+        <?php include './buttons.php';?>
     </div>
 </div>
 <div class="rightside">
@@ -97,7 +102,7 @@ $xhp = $_POST["xhpdoc"];
                 $oldNode = $old->getElementsByTagName($root)->item(0);
                 $newNode = $new->importNode($oldNode, true);
                 $new->appendChild($newNode);
-
+                libxml_clear_errors();
                 echo '<h2>Check XHP:</h2>';
                 if (!$new->validate()) {
                     echo '<p class="bug">This document does not verify the DTD and is NOT VALID!</p>';
diff --git a/help3/xhpeditor/snippets.js b/help3/xhpeditor/snippets.js
index bab3b1ba..0bdc47c5 100644
--- a/help3/xhpeditor/snippets.js
+++ b/help3/xhpeditor/snippets.js
@@ -163,7 +163,7 @@ function _literal() {
     editor.replaceSelection('<literal>'+ editor.doc.getSelection() +'</literal>','');
 }
 function _keystroke() {
-    editor.replaceSelection('<keystroke>'+ editor.doc.getSelection() +'</keystroke>','');
+    editor.replaceSelection('<keycode>'+ editor.doc.getSelection() +'</keycode>','');
 }
 function _input() {
     editor.replaceSelection('<input>'+ editor.doc.getSelection() +'</input>','');
@@ -192,11 +192,11 @@ function MenuPrefMAC(){
     editor.replaceRange('<switchinline select="sys"><caseinline select="MAC"><menuitem>%PRODUCTNAME - Preferences</menuitem></caseinline><defaultinline><menuitem>Tools - Options</menuitem></defaultinline></switchinline><menuitem> - </menuitem> ', editor.doc.getCursor());
 }
 function KeyMAC(){
-    editor.replaceRange('<switchinline select="sys"><caseinline select="MAC"><keystroke>command</keystroke></caseinline><defaultinline><keystroke>Ctrl</keystroke></defaultinline></switchinline><keystroke>+</keystroke>', editor.doc.getCursor());
+    editor.replaceRange('<switchinline select="sys"><caseinline select="MAC"><keycode>command</keycode></caseinline><defaultinline><keycode>Ctrl</keycode></defaultinline></switchinline><keycode>+</keycode>', editor.doc.getCursor());
 }
 // lists
 function tList(mode){
-    var a1 = '<list type="' + mode + '">\n\n</list>';
+    var a1 = '<list type="' + mode + '">\n\n</list>\n';
     editor.replaceRange(a1, editor.doc.getCursor());
 }
 
diff --git a/help3/xhpeditor/xhp2html.js b/help3/xhpeditor/xhp2html.js
index 8b57cb93..6ff45afe 100644
--- a/help3/xhpeditor/xhp2html.js
+++ b/help3/xhpeditor/xhp2html.js
@@ -9,31 +9,6 @@
 
 /* change these parameters to fit your installation */
 
-
-var xhttp;
-function loadDoc(filename, isXML)
-{
-    if (window.ActiveXObject)
-    {
-        xhttp = new ActiveXObject("Msxml2.XMLHTTP");
-    }
-    else
-    {
-        xhttp = new XMLHttpRequest();
-    }
-    xhttp.open("GET", filename, false);
-    try {xhttp.responseType = "msxml-document"} catch(err) {} // Helping IE11
-//     if isXML=true return XML otherwise return a text string
-    xhttp.send(null);
-    var response =  (isXML) ? xhttp.responseXML : xhttp.responseText;
-    return response;
-}
-
-function loadText(filename){
-    var text = loadDoc(filename,false);
-    editor.doc.setValue(text);
-}
-
 function readSingleFile(e) {
   var file = e.target.files[0];
 
@@ -78,3 +53,22 @@ function download(data, filename, type) {
         }, 0); 
     }
 }
+
+// Codemirror configuration 
+var editor = CodeMirror.fromTextArea(document.getElementById("xhpeditor"), {
+    lineNumbers: true,
+    indentUnit: 4,
+    indentWithTabs: false,
+    mode: "xml",
+    matchBrackets: true,
+    theme: "default",
+    lineWrapping: true,
+    extraKeys: {
+        "'<'": completeAfter,
+        "'/'": completeIfAfterLt,
+        "' '": completeIfInTag,
+        "'='": completeIfInTag,
+        "Ctrl-Space": "autocomplete"
+    },
+    hintOptions: {schemaInfo: tags}
+});
diff --git a/help3/xhpeditor/xhpeditor.css b/help3/xhpeditor/xhpeditor.css
index cfa21d4c..10d262b8 100644
--- a/help3/xhpeditor/xhpeditor.css
+++ b/help3/xhpeditor/xhpeditor.css
@@ -13,14 +13,18 @@
     border:1px solid grey;
 }
 .snip_buttons{
-    margin-top:5px;
-}
-.snip_div{
     display:inline-block;
-    width:5em;
 }
 .snip_heading{
-    margin-top:10px;
+    display:inline-block;
+    width:6em;
+}
+.buttonrow{
+    margin-top:5px;
+    margin-left:10px;
+}
+.buttonsdiv{
+    display:block;
 }
 
 .leftside{
@@ -44,8 +48,6 @@
     overflow: scroll;
     border:1px solid grey;
 }
-.buttonrow{    
-}
 .systembuttons{
     float:left;
 }
@@ -58,7 +60,6 @@
     line-height: normal;
     clear:left;
 }
-.buttonsdiv{}
 
 /* Imported from default css for DisplayArea */
 #DisplayArea {