[add] keyhelp

webapp/static/clients/codemirror/grail.html

@@ -168,11 +168,11 @@
 
  <dialog id="popHelp" popover>
         <form>
-            <header>Help
+            <header>Commands and keys
                 <button type="button" class="btn-close"  aria-label="Close"
                  onclick="$('popHelp').hidePopover(); "></button>
             </header>
-            <div id="popHelpInfo" class="modal-body">
+            <div id="popHelpInfo" class="modal-body" style="height: 50vh;overflow:scroll;">
                 TODO
             </div>
             <div class="modal-footer">

webapp/static/clients/codemirror/script.js

@@ -87,14 +87,20 @@ $("symbols2").onclick = e => {
 
 $("cmd").onclick = e => {
     let cmds = lsp.listCommands(view);
-    [...cmds.keys()].forEach(key => {
-        console.log(`${key} ${cmds.get(key).key}`)
+    let result="";
+    [...cmds.keys()].sort().forEach(key => {
+        result+=`<li>${key} ${cmds.get(key).key}</li>`
     });
-
+    $("popHelpInfo").innerHTML=`<ul>${result}</ul>`
+    $("popHelp").showPopover()
+    console.log(result)
 };
 
-$("symList").addEventListener("itemSelected", e => {
-    console.log("SYM itemSelected",e.detail);
+$("symList").addEventListener("itemSelected", e => { 
+    const sel=e.detail.selectionRange;
+    console.log("SYM selection range",sel);
+    const an=17*e.detail.kind
+    view.dispatch({selection: {anchor: an,head:an+34},scrollIntoView:true});
 });
 
 $("lint").onclick = async e => {