Fix missing scrollbar in xml viewer

components/bpmn-q/modeler-component/QuantumWorkflowModeler.js

@@ -30,7 +30,8 @@ import {
 import * as editorConfig from "./editor/config/EditorConfigManager";
 import { initEditorEventHandler } from "./editor/events/EditorEventHandler";
 import $ from "jquery";
-import { edit } from "ace-builds";
+
+/* global ace */
 
 /**
  * The Quantum Workflow modeler HTML web component which contains the bpmn-js modeler to model BPMN diagrams, an editor
@@ -199,7 +200,13 @@ export class QuantumWorkflowModeler extends HTMLElement {
 
     let editor = document.getElementById("editor");
     let dragging = false;
-    let aceEditor = edit(editor);
+    let aceEditor = ace.edit(editor);
+    aceEditor.setOptions({
+      scrollPastEnd: false,
+      vScrollBarAlwaysVisible: true,
+      minLines: 10,
+      maxLines: 10,
+    });
 
     $("#editor_dragbar").mousedown(function (e) {
       e.preventDefault();
@@ -230,7 +237,12 @@ export class QuantumWorkflowModeler extends HTMLElement {
           editor_wrap.css("height", newHeight + "px");
           editorElement.css("height", editorHeight + "px");
           dragbar.css("top", newTop - dragbar.height() + "px");
-          aceEditor.resize();
+          aceEditor.setOptions({
+            minLines: editorHeight / 28 + 2,
+            maxLines: editorHeight / 28 + 2,
+          });
+          editorElement.css("height", editorHeight + "px");
+          aceEditor.resize(true);
         }
       });
     });

components/bpmn-q/modeler-component/editor/resources/styling/editor-ui.css

@@ -197,6 +197,17 @@
   background: url("../icons/save-outline-icon.png") no-repeat center center;
 }
 
+#editor {
+  position: absolute;
+  width: 100%;
+  height: 20px;
+  overflow-y: auto;
+}
+
+.ace_print-margin {
+  display: none;
+}
+
 .qwm-icon-upload:before {
   content: "";
   width: 15px;
@@ -208,3 +219,19 @@
   display: inline-block;
   float: left;
 }
+
+.qwm-icon-xml-viewer:before {
+  content: "";
+  width: 20px;
+  height: 18px;
+  margin-top: 0px;
+  background-size: contain;
+  background-image: url("../icons/xml-viewer-icon.png");
+  background-repeat: no-repeat;
+  display: inline-block;
+  float: left;
+}
+
+.ace_scrollbar.ace_scrollbar-h {
+  display: none;
+}

components/bpmn-q/modeler-component/editor/ui/XMLViewerButton.js

@@ -11,6 +11,12 @@ import { loadDiagram } from "../util/IoUtilities";
  */
 export default function XMLViewerButton() {
   const [enabledXMLView, setEnabledXMLView] = useState(false);
+
+  function update(aceEditor) {
+    let xml = aceEditor.getSession().getValue();
+    loadDiagram(xml, getModeler());
+  }
+
   function enableXMLViewer(enabledXMLView) {
     let modelerContainer = document.getElementById("modeler-container");
     let editor = document.getElementById("editor");
@@ -20,7 +26,15 @@ export default function XMLViewerButton() {
     if (!enabledXMLView) {
       modelerContainer.style.height = "93vh";
       editor.style.display = "block";
+      let height = parseInt(editor.style.height);
       editor.style.height = "93vh";
+      aceEditor.setOptions({
+        scrollPastEnd: false,
+        vScrollBarAlwaysVisible: true,
+        minLines: height / 14,
+        maxLines: height / 14,
+      });
+      aceEditor.resize(true);
       panel.style.display = "none";
       editorWrap.style.display = "block";
 
@@ -37,14 +51,8 @@ export default function XMLViewerButton() {
       editorWrap.style.display = "none";
 
       aceEditor.getSession().on("change", function () {
-        update();
+        update(aceEditor);
       });
-
-      // eslint-disable-next-line no-inner-declarations
-      function update() {
-        let xml = aceEditor.getSession().getValue();
-        loadDiagram(xml, getModeler());
-      }
     }
 
     setEnabledXMLView(!enabledXMLView);