[mod] style

package-lock.json

@@ -7,6 +7,7 @@
       "dependencies": {
         "@codemirror/commands": "^6.1.2",
         "@codemirror/lang-javascript": "^6.1.1",
+        "@codemirror/lang-markdown": "^6.3.4",
         "@codemirror/lang-xml": "^6.1.0",
         "@codemirror/lint": "^6.8.5",
         "@codemirror/lsp-client": "^6.0.0",
@@ -46,6 +47,36 @@
         "@lezer/common": "^1.1.0"
       }
     },
+    "node_modules/@codemirror/lang-css": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-css/-/lang-css-6.3.1.tgz",
+      "integrity": "sha512-kr5fwBGiGtmz6l0LSJIbno9QrifNMUusivHbnA1H6Dmqy4HZFte3UAICix1VuKo0lMPKQr2rqB+0BkKi/S3Ejg==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/autocomplete": "^6.0.0",
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@lezer/common": "^1.0.2",
+        "@lezer/css": "^1.1.7"
+      }
+    },
+    "node_modules/@codemirror/lang-html": {
+      "version": "6.4.9",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-html/-/lang-html-6.4.9.tgz",
+      "integrity": "sha512-aQv37pIMSlueybId/2PVSP6NPnmurFDVmZwzc7jszd2KAF8qd4VBbvNYPXWQq90WIARjsdVkPbw29pszmHws3Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/autocomplete": "^6.0.0",
+        "@codemirror/lang-css": "^6.0.0",
+        "@codemirror/lang-javascript": "^6.0.0",
+        "@codemirror/language": "^6.4.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.17.0",
+        "@lezer/common": "^1.0.0",
+        "@lezer/css": "^1.1.0",
+        "@lezer/html": "^1.3.0"
+      }
+    },
     "node_modules/@codemirror/lang-javascript": {
       "version": "6.2.4",
       "resolved": "https://registry.npmjs.org/@codemirror/lang-javascript/-/lang-javascript-6.2.4.tgz",
@@ -61,6 +92,21 @@
         "@lezer/javascript": "^1.0.0"
       }
     },
+    "node_modules/@codemirror/lang-markdown": {
+      "version": "6.3.4",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-markdown/-/lang-markdown-6.3.4.tgz",
+      "integrity": "sha512-fBm0BO03azXnTAsxhONDYHi/qWSI+uSEIpzKM7h/bkIc9fHnFp9y7KTMXKON0teNT97pFhc1a9DQTtWBYEZ7ug==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/autocomplete": "^6.7.1",
+        "@codemirror/lang-html": "^6.0.0",
+        "@codemirror/language": "^6.3.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0",
+        "@lezer/common": "^1.2.1",
+        "@lezer/markdown": "^1.0.0"
+      }
+    },
     "node_modules/@codemirror/lang-xml": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/@codemirror/lang-xml/-/lang-xml-6.1.0.tgz",
@@ -215,6 +261,17 @@
       "integrity": "sha512-w7ojc8ejBqr2REPsWxJjrMFsA/ysDCFICn8zEOR9mrqzOu2amhITYuLD8ag6XZf0CFXDrhKqw7+tW8cX66NaDA==",
       "license": "MIT"
     },
+    "node_modules/@lezer/css": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@lezer/css/-/css-1.3.0.tgz",
+      "integrity": "sha512-pBL7hup88KbI7hXnZV3PQsn43DHy6TWyzuyk2AO9UyoXcDltvIdqWKE1dLL/45JVZ+YZkHe1WVHqO6wugZZWcw==",
+      "license": "MIT",
+      "dependencies": {
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.3.0"
+      }
+    },
     "node_modules/@lezer/highlight": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/@lezer/highlight/-/highlight-1.2.1.tgz",
@@ -224,6 +281,17 @@
         "@lezer/common": "^1.0.0"
       }
     },
+    "node_modules/@lezer/html": {
+      "version": "1.3.10",
+      "resolved": "https://registry.npmjs.org/@lezer/html/-/html-1.3.10.tgz",
+      "integrity": "sha512-dqpT8nISx/p9Do3AchvYGV3qYc4/rKr3IBZxlHmpIKam56P47RSHkSF5f13Vu9hebS1jM0HmtJIwLbWz1VIY6w==",
+      "license": "MIT",
+      "dependencies": {
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0"
+      }
+    },
     "node_modules/@lezer/javascript": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/@lezer/javascript/-/javascript-1.5.1.tgz",
@@ -244,6 +312,16 @@
         "@lezer/common": "^1.0.0"
       }
     },
+    "node_modules/@lezer/markdown": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/@lezer/markdown/-/markdown-1.4.3.tgz",
+      "integrity": "sha512-kfw+2uMrQ/wy/+ONfrH83OkdFNM0ye5Xq96cLlaCy7h5UT9FO54DU4oRoIc0CSBh5NWmWuiIJA7NGLMJbQ+Oxg==",
+      "license": "MIT",
+      "dependencies": {
+        "@lezer/common": "^1.0.0",
+        "@lezer/highlight": "^1.0.0"
+      }
+    },
     "node_modules/@lezer/xml": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/@lezer/xml/-/xml-1.0.6.tgz",

package.json

@@ -1,13 +1,15 @@
 {
   "dependencies": {
     "@codemirror/commands": "^6.1.2",
-    "@codemirror/lang-javascript": "^6.1.1",
+   
-    "@codemirror/lang-xml": "^6.1.0",
     "@codemirror/lsp-client": "^6.0.0",
     "@codemirror/search": "^6.2.3",
     "@codemirror/theme-one-dark": "^6.1.0",
     "@codemirror/view": "^6.6.0",
-    "@codemirror/lint": "^6.8.5"
+    "@codemirror/lint": "^6.8.5",
+     "@codemirror/lang-markdown": "^6.3.4",
+     "@codemirror/lang-javascript": "^6.1.1",
+     "@codemirror/lang-xml": "^6.1.0"
   },
   "devDependencies": {
     "minify": "^9.1.0",

src/lsp.js

@@ -5,7 +5,7 @@ import { indentWithTab, history, defaultKeymap, historyKeymap } from '@codemirro
 import { foldGutter, indentOnInput, indentUnit, bracketMatching, foldKeymap, syntaxHighlighting, defaultHighlightStyle } from '@codemirror/language';
 import { closeBrackets, autocompletion, closeBracketsKeymap, completionKeymap } from '@codemirror/autocomplete';
 import { lineNumbers, highlightActiveLineGutter, highlightSpecialChars, drawSelection, dropCursor, rectangularSelection, crosshairCursor, highlightActiveLine, keymap, EditorView } from '@codemirror/view';
-
+import {markdown} from "@codemirror/lang-markdown";
 // Theme
 import { oneDark } from "@codemirror/theme-one-dark";
 import { LSPClient, languageServerSupport } from "@codemirror/lsp-client";
@@ -61,6 +61,7 @@ const baseExts = [
         ...lintKeymap
     ]),
     xml(),
+    markdown(),
     syntaxHighlighting(defaultHighlightStyle, { fallback: true })
 ];
 

webapp/lsp/lsp-text.xqm

@@ -23,13 +23,16 @@ as map(*)?
     "jsonrpc": "2.0",
     "id": $json?id,
     "result":{
-  "contents": [{
+  "contents": [
-      "language": "PlainText",
+    {
-      "value": "VPCONFLICTQ : [NONE,AVX512_CD] Detect Conflicts Within a Vector of Packed Dword/Qword Values into Dense Memory/ Register\n"
+      "language": "markdown",
+      "value": `this is **bold** markdown
+      a link (here)[http://google.com]
+      The last line`
     },
     {
-      "language": "Markdown",
+      "language": "plaintext",
-      "value": "```text\n                                      µOps   µOps     µOps                                              \nArchitecture  Instruction             Fused  Unfused  Port                Latency  Throughput           \nSkylakeX      VPCONFLICTQ x,x         3      3        p01 p5              4        2                    \nSkylakeX      VPCONFLICTQ y,y         15     15       p01 p5              13       7                    \nSkylakeX      VPCONFLICTQ z,z         22     22       p0 p5               17       12                   \n```"
+      "value": "A hover for " || json:serialize($json)
     }]
 }
   }

webapp/static/codemirror/index.html

@@ -6,30 +6,51 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Codemirror6 example using BaseX LSP</title>
     <link rel="icon" type="image/png" href="favicon.png" />
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet"
+        integrity="sha384-LN+7fdVzj6u52u30Kp6M/trliBMCMKTyK833zpbD+pXdCLuTusPj697FH4R/5mcr" crossorigin="anonymous">
     <link rel="stylesheet" href="styles.css" />
 
 </head>
 
 <body>
-    <header>BaseX LSP client <button id="search">🔍</button>
+    <nav class="navbar bg-body-tertiary">
-        <button id="lint">⚠️</button>
+        <div class="container-fluid">
-        <div style="float:right">
+          <a class="navbar-brand">BaseX LSP client</a>
+          <a href="/dba/logs" target="dba">#</a>
+       
+          <form class="d-flex">
+           
             <span id="state">🔴</span>
-            <input id="iServer" type="text" value="ws://localhost:3000/ws/lsp" style="width:25em" /><button id="connect">connect</button>
+            <input id="iServer" type="text" value="ws://localhost:3000/ws/lsp" style="width:25em"   />
+            <button id="connect">connect</button>
+          </form>
+          </div>
         </div>
-    </header>
+       
+    </nav>
 
-    <div class="container">
+    <div class="container-fluid" >
-        <div class="item">
+        <div class="row " >
-            <div>
+            <div class="col-2">
-                <label for="file">File:</label><input id="iFile" type="url" value="file:///some/file.xml" />
+                something
             </div>
-            <div>
+            <div class="col flex-grow-1" style="background-color:gainsboro">
-                <label for="symbols">Symbols:</label><select id="symbols" disabled="disabled"></select>
+                <div class="row" >
+                    <div >
+                        <label for="file">File:</label><input id="iFile" type="url" value="file:///some/file.xml" />
+                        <button id="search">🔍</button>
+                        <button id="lint">⚠️</button>
+                       
+                        <label for="symbols">Symbols:</label><select id="symbols" disabled="disabled"></select>
+                    </div>
+                </div>
+
+                <!-- Editor goes in here -->
+               
+                    <div id="editor"></div>
+              
             </div>
         </div>
-        <!-- Editor goes in here -->
-        <div id="editor" class="item"></div>
     </div>
 
     <!-- CodeMirror 6 -->
@@ -55,7 +76,6 @@
             localStorage.setItem('code', doc);
         });
         document.getElementById("connect").onclick = e => {
-           
             connect()
         };
         document.getElementById("search").onclick = e => {

webapp/static/codemirror/styles.css

@@ -1,7 +1,7 @@
   /* Set editor dimensions */
   #editor {
     height: 400px;
-    width: 50%;
+  
 }
 
 /* Stretch editor to fit inside its containing div */
@@ -10,18 +10,6 @@
     width: 100%;
 }
  /* header */
- header {
+ nav {
-    background-color: burlywood;
+    background-color: burlywood!;
-}
-.container {
-  display: flex;
-}
-
-.item {
-  flex-grow: 1;
-  height: 100px;
-}
-
-.item + .item {
-  margin-left: 2%;
 }