xhpeditor: more refactoring

- split CSS into editor and renderpage (DisplayArea)
- touching CodeMirror addons (WIP)

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

4 files changed, 301 insertions, 296 deletions

diff --git a/help3/xhpeditor/DisplayArea.css b/help3/xhpeditor/DisplayArea.css
new file mode 100644
index 00000000..73dcf064
--- /dev/null
+++ b/help3/xhpeditor/DisplayArea.css
@@ -0,0 +1,297 @@
+/* -*- Mode: C++; tab-width: 4; indent-tabs-mode: nil; c-basic-offset: 4 -*- */
+/*
+ * 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/.
+ */
+
+
+/* Imported from default css for DisplayArea */
+#DisplayArea {
+    background-color: white;
+    overflow: auto;
+    padding: 10px;
+    grid-area: main;
+}
+
+#renderedpage,
+#DisplayArea p,
+#DisplayArea h1,
+#DisplayArea h2,
+#DisplayArea h3,
+#DisplayArea h4,
+#DisplayArea h5,
+#DisplayArea h6,
+.listitem,
+.listitemintable,
+.paragraph,
+.tablecontent {
+    font-family: -apple-system, system-ui, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", "DejaVu Sans", "Lucida Grande", "Helvetica Neue", Helvetica, Arial, sans-serif, FreeSerif, NanumGothic, "Noto Sans Tibetan", Taprom;
+}
+.input {
+    background-color: rgba(0,0,0,0.04);
+    transition-property: background-color;
+    transition-duration: 150ms;
+    border-bottom: 1px dashed rgba(0,0,0,0.1);
+    font-family: Menlo, Consolas, "DejaVu Sans Mono", "Nimbus Mono L", "Lucida Sans Typewriter", "Courier New", Courier, Monaco, monospace;
+}
+
+#DisplayArea  ::selection {
+    background: #BFFFB7;
+}
+#DisplayArea a {
+    text-decoration: none;
+    color: #0369AE;
+}
+#DisplayArea a:hover {
+    text-decoration: underline;
+    color: #1C99E0;
+}
+#DisplayArea pre,
+.code,
+.codeintable,
+.example,
+.exampleintable,
+.literal,
+.literalintable,
+.path,
+.pathintable {
+    background-color: rgba(0,0,0,0.04);
+    border-radius: 2px;
+    display: inline;
+    padding: 1px 3px;
+    font-family: Menlo, Consolas, "DejaVu Sans Mono", "Nimbus Mono L", "Lucida Sans Typewriter", "Courier New", Courier, Monaco, monospace;
+}
+.smathcode {
+    border-radius: 2px;
+    padding: 1px 3px;
+    font-family: Menlo, Consolas, "DejaVu Sans Mono", "Nimbus Mono L", "Lucida Sans Typewriter", "Courier New", Courier, Monaco, monospace;
+}
+
+.acronym {
+    font-weight: bold;
+}
+.related {
+    font-weight: bold;
+    margin-top: 1.67rem;
+    border-top: 1px solid black;
+}
+.emph,
+.menuitem {
+    font-weight: bold;
+}
+.keycode {
+    /*font-weight: bold;*/
+    font-family: Menlo, Consolas, "DejaVu Sans Mono", "Nimbus Mono L", "Lucida Sans Typewriter", "Courier New", Courier, Monaco, monospace;
+}
+.widget{
+    padding: 1px 10px;
+    background: #f0f0f0;
+    background: linear-gradient(to bottom,#f0f0f0,#fcfcfc);
+    border-radius: 3px;
+    color: #303030;
+    border: 1px solid #a0a0a0;
+    border-bottom-width: 2px;
+    white-space: nowrap;
+}
+/* div's for warning, tip and note */
+.note,
+.tip,
+.warning {
+    display:flex;
+    align-items: center;
+    border-radius: 0 4px 4px 0;
+    box-shadow: 0 2px 2px -2px rgba(0,0,0,0.2);
+    padding: 0.2em;
+    margin-top: 15px;
+}
+.note {
+    border-left: 4px solid #FFDE09;
+    background-color: #FFF4D0;
+}
+.tip {
+    border-left: 4px solid #38618C;
+    background-color: #DAE2EA;
+}
+.warning {
+    border-left: 4px solid #FF5964;
+    background-color: #FFE0E2;
+}
+.noteicon {
+    padding:0.3em;
+    transition: transform .2s; /* Animation */
+}
+.noteicon:hover {
+    transform: scale(2.0); /* (200% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
+}
+.notetext {
+    padding:0.3em;
+}
+#DisplayArea h1,
+#DisplayArea h2,
+#DisplayArea h3,
+#DisplayArea h4,
+#DisplayArea h5,
+#DisplayArea h6 {
+    margin-bottom: 0.67rem;
+    color: #148603;
+}
+
+#DisplayArea p,
+#DisplayArea ol,
+#DisplayArea td {
+    font-size: 1.17rem;
+    margin: 2px 2px 2px 2px;
+}
+#DisplayArea p {
+    margin-bottom: 10px;
+}
+
+#DisplayArea h1 {
+    font-size: 1.83rem;
+    font-weight: 300;
+    border-bottom: 2px solid #148603;
+    padding-bottom: 6px;
+}
+#DisplayArea h1 a {
+    text-decoration: none;
+}
+#DisplayArea h2 {
+    font-size: 1.55rem;
+}
+#DisplayArea h3 {
+    font-size: 1.33rem;
+}
+#DisplayArea h4,
+#DisplayArea h5,
+#DisplayArea h6 {
+    font-size: 1.17rem;
+}
+.avis {
+    /*    background-color: #EEEEEE;*/
+}
+.relatedtopics {
+    font-weight: normal;
+}
+.relatedbody {
+    margin-top: 2px;
+    margin-bottom: 2px;
+    margin-left: 5px;
+}
+.howtoget {
+    background: #CCF4C6;
+    border-left: 4px solid #148603;
+    border-radius: 0 4px 4px 0;
+    box-shadow: 0 2px 2px -2px rgba(0,0,0,0.2);
+    padding: 0.3em;
+    display: flex;
+    flex-direction: column;
+}
+.howtogetheader {
+    background: #FFF;
+    border-radius: 2px;
+    box-shadow: 0 2px 2px -2px rgba(0,0,0,0.2);
+    display: inline-block;
+    font-weight: bold;
+    padding: 0.3em;
+}
+.howtogetbody {
+}
+.samplefilesection{
+}
+.wide {
+    width: 100%;
+}
+.onecell{
+    box-shadow: rgba(0,0,0,0.1) 0px 1px 3px 0px;
+    border-bottom: 1px solid #E8E8E8;
+}
+/* Special case of icon table*/
+icontable {
+    display:flex;
+    align-items:center;
+}
+.iconcell {
+    padding:0.3em;
+}
+.imageicon {
+    transition: transform .2s; /* Animation */
+}
+.imageicon:hover{
+    transform: scale(2.0); /* (200% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
+}
+
+#DisplayArea table {
+    box-shadow: rgba(0,0,0,0.1) 0px 1px 3px 0px;
+    border-collapse: collapse;
+    background: #fefefe;
+}
+#DisplayArea table,
+#DisplayArea th,
+#DisplayArea td {
+    border-top: 0;
+    border-bottom: 1px solid #E8E8E8;
+    border-left: 0;
+    border-right: 0;
+    padding: 0.3em;
+}
+.tablehead,
+.tableheadintable {
+    font-weight: bold;
+    margin-top: 0px;
+}
+.tableheadcell {
+    background: #148603;
+    color: white;
+    vertical-align:top;
+}
+#DisplayArea footer {
+    border-top: 2px solid #148603;
+    padding: 15px 10px 0 10px;
+    margin: 40px 0;
+}
+#DisplayArea footer p {
+    font-size: 0.98rem;
+}
+.embedded {
+    background-color: #eeeeee;
+    border:solid 1px black;
+}
+.bug {
+    color: red;
+}
+.debugembed {
+    color: magenta;
+}
+.debug {
+    border: 1px solid black;
+    padding: 3px;
+    display: block;
+    background-color: #222;
+    color: red;
+    text-align: left;
+}
+.donation {
+    padding: 0 0 10px 0;
+    margin-bottom: 1em;
+    border-bottom: 1px dashed rgba(0,0,0,0.1);
+}
+.donation p{
+    font-size:1.2rem;
+}
+.bascode {
+    margin-top:15px;
+    margin-bottom: 15px;
+}
+.screenshot, .genericimage {
+    border-collapse: collapse;
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: 2em;
+    margin-bottom: 2em;
+    border-style:none;
+    display:block;
+    box-shadow: 10px 10px 5px grey;
+}
diff --git a/help3/xhpeditor/index.php b/help3/xhpeditor/index.php
index a174c6be..29a31fdb 100644
--- a/help3/xhpeditor/index.php
+++ b/help3/xhpeditor/index.php
@@ -17,6 +17,7 @@ $xhp = $_POST["xhpdoc"];
     <title>LibreOffice Documentation XHP Editor</title>
     <link rel="shortcut icon" href="favicon.ico"/>
     <link type="text/css" rel="stylesheet" href="xhpeditor.css">
+    <link type="text/css" rel="stylesheet" href="DisplayArea.css.css">
     <link type="text/css" rel="stylesheet" href="lib/codemirror.css">
     <link type="text/css" rel="stylesheet" href="addon/hint/show-hint.css">
     <link type="text/css" rel="stylesheet" href="helpcontent2/help3xsl/normalize.css">
diff --git a/help3/xhpeditor/xhp2html.js b/help3/xhpeditor/xhp2html.js
index 667ea064..472ebd1c 100644
--- a/help3/xhpeditor/xhp2html.js
+++ b/help3/xhpeditor/xhp2html.js
@@ -14,6 +14,7 @@ var editor = CodeMirror.fromTextArea(document.getElementById("xhpeditor"), {
     lineNumbers: true,
     theme: "default",
     mode: "xml",
+    lineWrapping: true,
     extraKeys: {
         "'<'": completeAfter,
         "'/'": completeIfAfterLt,
@@ -28,15 +29,9 @@ var editor = CodeMirror.fromTextArea(document.getElementById("xhpeditor"), {
     
     matchBrackets: true,
     
-    lineWrapping: true,
+    
     viewportMargin: Infinity,
-    extraKeys: {
-        "'<'": completeAfter,
-        "'/'": completeIfAfterLt,
-        "' '": completeIfInTag,
-        "'='": completeIfInTag,
-        "Ctrl-Space": "autocomplete"
-    }
+
 */
 
 function readSingleFile(e) {
diff --git a/help3/xhpeditor/xhpeditor.css b/help3/xhpeditor/xhpeditor.css
index 273eaa92..83e7ea01 100644
--- a/help3/xhpeditor/xhpeditor.css
+++ b/help3/xhpeditor/xhpeditor.css
@@ -147,291 +147,3 @@
     position:absolute;
     overflow-y:auto;
 }
-
-/* Imported from default css for DisplayArea */
-#DisplayArea {
-    background-color: white;
-    overflow: auto;
-    padding: 10px;
-    grid-area: main;
-}
-
-#renderedpage,
-#DisplayArea p,
-#DisplayArea h1,
-#DisplayArea h2,
-#DisplayArea h3,
-#DisplayArea h4,
-#DisplayArea h5,
-#DisplayArea h6,
-.listitem,
-.listitemintable,
-.paragraph,
-.tablecontent {
-    font-family: -apple-system, system-ui, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", "DejaVu Sans", "Lucida Grande", "Helvetica Neue", Helvetica, Arial, sans-serif, FreeSerif, NanumGothic, "Noto Sans Tibetan", Taprom;
-}
-.input {
-    background-color: rgba(0,0,0,0.04);
-    transition-property: background-color;
-    transition-duration: 150ms;
-    border-bottom: 1px dashed rgba(0,0,0,0.1);
-    font-family: Menlo, Consolas, "DejaVu Sans Mono", "Nimbus Mono L", "Lucida Sans Typewriter", "Courier New", Courier, Monaco, monospace;
-}
-
-#DisplayArea  ::selection {
-    background: #BFFFB7;
-}
-#DisplayArea a {
-    text-decoration: none;
-    color: #0369AE;
-}
-#DisplayArea a:hover {
-    text-decoration: underline;
-    color: #1C99E0;
-}
-#DisplayArea pre,
-.code,
-.codeintable,
-.example,
-.exampleintable,
-.literal,
-.literalintable,
-.path,
-.pathintable {
-    background-color: rgba(0,0,0,0.04);
-    border-radius: 2px;
-    display: inline;
-    padding: 1px 3px;
-    font-family: Menlo, Consolas, "DejaVu Sans Mono", "Nimbus Mono L", "Lucida Sans Typewriter", "Courier New", Courier, Monaco, monospace;
-}
-.smathcode {
-    border-radius: 2px;
-    padding: 1px 3px;
-    font-family: Menlo, Consolas, "DejaVu Sans Mono", "Nimbus Mono L", "Lucida Sans Typewriter", "Courier New", Courier, Monaco, monospace;
-}
-
-.acronym {
-    font-weight: bold;
-}
-.related {
-    font-weight: bold;
-    margin-top: 1.67rem;
-    border-top: 1px solid black;
-}
-.emph,
-.menuitem {
-    font-weight: bold;
-}
-.keycode {
-    /*font-weight: bold;*/
-    font-family: Menlo, Consolas, "DejaVu Sans Mono", "Nimbus Mono L", "Lucida Sans Typewriter", "Courier New", Courier, Monaco, monospace;
-}
-.widget{
-    padding: 1px 10px;
-    background: #f0f0f0;
-    background: linear-gradient(to bottom,#f0f0f0,#fcfcfc);
-    border-radius: 3px;
-    color: #303030;
-    border: 1px solid #a0a0a0;
-    border-bottom-width: 2px;
-    white-space: nowrap;
-}
-/* div's for warning, tip and note */
-.note,
-.tip,
-.warning {
-    display:flex;
-    align-items: center;
-    border-radius: 0 4px 4px 0;
-    box-shadow: 0 2px 2px -2px rgba(0,0,0,0.2);
-    padding: 0.2em;
-    margin-top: 15px;
-}
-.note {
-    border-left: 4px solid #FFDE09;
-    background-color: #FFF4D0;
-}
-.tip {
-    border-left: 4px solid #38618C;
-    background-color: #DAE2EA;
-}
-.warning {
-    border-left: 4px solid #FF5964;
-    background-color: #FFE0E2;
-}
-.noteicon {
-    padding:0.3em;
-    transition: transform .2s; /* Animation */
-}
-.noteicon:hover {
-    transform: scale(2.0); /* (200% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
-}
-.notetext {
-    padding:0.3em;
-}
-#DisplayArea h1,
-#DisplayArea h2,
-#DisplayArea h3,
-#DisplayArea h4,
-#DisplayArea h5,
-#DisplayArea h6 {
-    margin-bottom: 0.67rem;
-    color: #148603;
-}
-
-#DisplayArea p,
-#DisplayArea ol,
-#DisplayArea td {
-    font-size: 1.17rem;
-    margin: 2px 2px 2px 2px;
-}
-#DisplayArea p {
-    margin-bottom: 10px;
-}
-
-#DisplayArea h1 {
-    font-size: 1.83rem;
-    font-weight: 300;
-    border-bottom: 2px solid #148603;
-    padding-bottom: 6px;
-}
-#DisplayArea h1 a {
-    text-decoration: none;
-}
-#DisplayArea h2 {
-    font-size: 1.55rem;
-}
-#DisplayArea h3 {
-    font-size: 1.33rem;
-}
-#DisplayArea h4,
-#DisplayArea h5,
-#DisplayArea h6 {
-    font-size: 1.17rem;
-}
-.avis {
-    /*    background-color: #EEEEEE;*/
-}
-.relatedtopics {
-    font-weight: normal;
-}
-.relatedbody {
-    margin-top: 2px;
-    margin-bottom: 2px;
-    margin-left: 5px;
-}
-.howtoget {
-    background: #CCF4C6;
-    border-left: 4px solid #148603;
-    border-radius: 0 4px 4px 0;
-    box-shadow: 0 2px 2px -2px rgba(0,0,0,0.2);
-    padding: 0.3em;
-    display: flex;
-    flex-direction: column;
-}
-.howtogetheader {
-    background: #FFF;
-    border-radius: 2px;
-    box-shadow: 0 2px 2px -2px rgba(0,0,0,0.2);
-    display: inline-block;
-    font-weight: bold;
-    padding: 0.3em;
-}
-.howtogetbody {
-}
-.samplefilesection{
-}
-.wide {
-    width: 100%;
-}
-.onecell{
-    box-shadow: rgba(0,0,0,0.1) 0px 1px 3px 0px;
-    border-bottom: 1px solid #E8E8E8;
-}
-/* Special case of icon table*/
-icontable {
-    display:flex;
-    align-items:center;
-}
-.iconcell {
-    padding:0.3em;
-}
-.imageicon {
-    transition: transform .2s; /* Animation */
-}
-.imageicon:hover{
-    transform: scale(2.0); /* (200% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
-}
-
-#DisplayArea table {
-    box-shadow: rgba(0,0,0,0.1) 0px 1px 3px 0px;
-    border-collapse: collapse;
-    background: #fefefe;
-}
-#DisplayArea table,
-#DisplayArea th,
-#DisplayArea td {
-    border-top: 0;
-    border-bottom: 1px solid #E8E8E8;
-    border-left: 0;
-    border-right: 0;
-    padding: 0.3em;
-}
-.tablehead,
-.tableheadintable {
-    font-weight: bold;
-    margin-top: 0px;
-}
-.tableheadcell {
-    background: #148603;
-    color: white;
-    vertical-align:top;
-}
-#DisplayArea footer {
-    border-top: 2px solid #148603;
-    padding: 15px 10px 0 10px;
-    margin: 40px 0;
-}
-#DisplayArea footer p {
-    font-size: 0.98rem;
-}
-.embedded {
-    background-color: #eeeeee;
-    border:solid 1px black;
-}
-.bug {
-    color: red;
-}
-.debugembed {
-    color: magenta;
-}
-.debug {
-    border: 1px solid black;
-    padding: 3px;
-    display: block;
-    background-color: #222;
-    color: red;
-    text-align: left;
-}
-.donation {
-    padding: 0 0 10px 0;
-    margin-bottom: 1em;
-    border-bottom: 1px dashed rgba(0,0,0,0.1);
-}
-.donation p{
-    font-size:1.2rem;
-}
-.bascode {
-    margin-top:15px;
-    margin-bottom: 15px;
-}
-.screenshot, .genericimage {
-    border-collapse: collapse;
-    margin-left: auto;
-    margin-right: auto;
-    margin-top: 2em;
-    margin-bottom: 2em;
-    border-style:none;
-    display:block;
-    box-shadow: 10px 10px 5px grey;
-}