[mod] settings apply

webapp/static/clients/codemirror/grail.css

@@ -29,7 +29,9 @@ body {
   .navbar * {
     box-sizing: content-box;
   }
-
+form header {
+  background-color: burlywood;
+}
  details {
   padding:2px;
   padding-left: 3px;

webapp/static/clients/codemirror/grail.html

@@ -176,10 +176,13 @@
             <div class="modal-body">
 
                 <div class="mb-3 form-check">
-                    <input name="wrap-lines" type="checkbox" class="form-check-input" id="exampleCheck1">
-                    <label class="form-check-label" for="exampleCheck1">Wrap lines</label>
+                    <input name="wrapLines" type="checkbox" class="form-check-input" id="lineWrap">
+                    <label class="form-check-label" for="lineWrap">Wrap lines</label>
+                </div>
+               <div class="mb-3 form-check">
+                    <input name="minimap" type="checkbox" class="form-check-input" id="minimap">
+                    <label class="form-check-label" for="minimap">Show minimap</label>
                 </div>
-
             </div>
             <div class="modal-footer">
                 <button type="submit" class="btn btn-primary">Apply</button>

webapp/static/clients/codemirror/list.js

@@ -8,7 +8,7 @@ class ListComponent extends HTMLElement {
     #iconKinds; //array from kind integer to codicon name
     constructor() {
         super();
-        this.#shadow = this.attachShadow({ mode: "open" });
+        this.#shadow = this.attachShadow({ mode: "open" ,delegatesFocus: true});
         this.#data = [];
         this.#iconKinds = [];
         this.render();
@@ -38,7 +38,7 @@ class ListComponent extends HTMLElement {
         const shad=this.#shadow;
         this.#data.forEach((item, index) => {
             const listItem = document.createElement('li');
-            listItem.innerHTML = `<a><i  class='codicon codicon-${this.#iconKinds[item.kind]}'></i>
+            listItem.innerHTML = `<a href="#"><i  class='codicon codicon-${this.#iconKinds[item.kind]}'></i>
             <span>${item.name} - ${item.detail}</span></a>`;
             // Adding a click event listener for user interaction
             listItem.addEventListener('click', () => {

webapp/static/clients/codemirror/lsp.bundle.js

@@ -31302,12 +31302,35 @@ ${text}</tr>
   });
 
   let create = (v) => {
-    const dom = document.createElement('div');
-    return { dom }
+      const dom = document.createElement('div');
+      return { dom }
   };
+  const compartment = new Compartment();
+  let curOpts = {
+      lineWrap: true,
+      minimap: true
+  };
+  // array of extensions reflecting opts
+  function optExts(opts) {
+      let exts = [];
+      if (opts.lineWrap) exts.push(EditorView.lineWrapping);
+      if (opts.minimap) exts.push(
+          showMinimap.compute(['doc'], (state) => {
+              return {
+                  create,
+                  /* optional   showOverlay: 'mouse-over' */
+                  displayText: 'characters'
 
+              }
+          }));
+      return exts
+  }
 
-
+  function updateCompartment(opts) {
+      view.dispatch({
+          effects: [compartment.reconfigure(optExts(opts))]
+      });
+  }
 
   // return promise with socket map or reject if no connect
   function simpleWebSocketTransport(uri) {
@@ -31336,7 +31359,7 @@ ${text}</tr>
       drawSelection(),
       dropCursor(),
       EditorState.allowMultipleSelections.of(true),
-      EditorView.lineWrapping,
+
       keymap.of([indentWithTab]),
       indentOnInput(),
       syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
@@ -31357,14 +31380,7 @@ ${text}</tr>
           ...lintKeymap
       ]),
       StreamLanguage.define(xQuery),
-      showMinimap.compute(['doc'], (state) => {
-        return {
-          create,
-          /* optional   showOverlay: 'mouse-over' */
-          displayText: 'characters'
-        
-        }
-      })
+      compartment.of(optExts(curOpts))
   ];
 
 
@@ -31389,6 +31405,7 @@ ${text}</tr>
   exports.LSPPlugin = LSPPlugin;
   exports.StateEffect = StateEffect;
   exports.baseExts = baseExts;
+  exports.curOpts = curOpts;
   exports.formatDocument = formatDocument;
   exports.formatKeymap = formatKeymap;
   exports.keymap = keymap;
@@ -31399,6 +31416,7 @@ ${text}</tr>
   exports.openLintPanel = openLintPanel;
   exports.openSearchPanel = openSearchPanel;
   exports.simpleWebSocketTransport = simpleWebSocketTransport;
+  exports.updateCompartment = updateCompartment;
 
   return exports;
 

webapp/static/clients/codemirror/script.js

@@ -38,6 +38,7 @@ $("search").onclick = e => lsp.openSearchPanel(view);
 
 $("fullscreen").onclick = e => $("editor").requestFullscreen();
 
+
 $("wordAt").onclick = e => {
     let pos = view.state.selection.main.head;
     let w = view.state.wordAt(pos);
@@ -127,7 +128,13 @@ $("load").onchange = e => {
 
 function updateSettings(event) {
     event.preventDefault();
-    alert("TODO");
+    console.log("COPTS",lsp.curOpts);
+    const opts={lineWrap: $("lineWrap").checked,
+                minimap:$("minimap").checked
+    }
+    console.log(opts)
+    lsp.updateCompartment(opts);
+    $('popSettings').hidePopover();
 };
 
 $("fSettings").addEventListener("submit", updateSettings);