quodatum/basex-lsp
1
0
Fork 0
Code Issues 12 Activity Actions

[mod] symbol icons

Browse source
This commit is contained in:
Andy Bunce 2025-09-25 16:54:57 +01:00
parent eaebbd12aa
commit 65703442de
13 changed files with 1430 additions and 97 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
bundles/cm6/lsp.js
View file

@ -20,12 +20,18 @@ import { LSPClient, LSPPlugin, languageServerSupport, languageServerExtensions,
formatDocument,formatKeymap } from "@codemirror/lsp-client"; formatDocument,formatKeymap } from "@codemirror/lsp-client";
import { xQuery } from "@codemirror/legacy-modes/mode/xquery" import { xQuery } from "@codemirror/legacy-modes/mode/xquery"
// Language // Language
import { xml } from "@codemirror/lang-xml"; import { xml } from "@codemirror/lang-xml";
import { showMinimap } from "@replit/codemirror-minimap"
let create = (v) => {
const dom = document.createElement('div');
return { dom }
}
// return promise with socket map or reject if no connect // return promise with socket map or reject if no connect
function simpleWebSocketTransport(uri) { function simpleWebSocketTransport(uri) {
let handlers = []; let handlers = [];
@ -55,6 +61,7 @@ const baseExts = [
dropCursor(), dropCursor(),
EditorState.allowMultipleSelections.of(true), EditorState.allowMultipleSelections.of(true),
EditorView.lineWrapping, EditorView.lineWrapping,
keymap.of([indentWithTab]),
indentOnInput(), indentOnInput(),
syntaxHighlighting(defaultHighlightStyle, { fallback: true }), syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
bracketMatching(), bracketMatching(),
@ -73,7 +80,15 @@ const baseExts = [
...completionKeymap, ...completionKeymap,
...lintKeymap ...lintKeymap
]), ]),
StreamLanguage.define(xQuery) StreamLanguage.define(xQuery),
showMinimap.compute(['doc'], (state) => {
return {
create,
/* optional showOverlay: 'mouse-over' */
displayText: 'characters'
}
})
]; ];

4
webapp/static/clients/codemirror/beer.html
View file

@ -54,8 +54,8 @@
</optgroup> </optgroup>
<optgroup label="xpath"> <optgroup label="xpath">
<option <option
value="https://raw.githubusercontent.com/dnovatchev/Articles/refs/heads/main/Generators/Code/generator.xpath"> value="https://raw.githubusercontent.com/dnovatchev/Articles/refs/heads/main/Generators/Code/generator.xq">
generator.xpath</option> generator.xquery</option>
</optgroup> </optgroup>
</select> </select>

4
webapp/static/clients/codemirror/grail.css
View file

@ -1,4 +1,4 @@
@import url("../bootstrap-icons.min.css"); @import url("../codicon@0.0.40/codicon.css");
:root { :root {
color-scheme: light dark; color-scheme: light dark;
} }
@ -18,7 +18,7 @@ body {
box-shadow: 0 0 3px rgba(black, 0.33); box-shadow: 0 0 3px rgba(black, 0.33);
display: grid; display: grid;
grid-template-columns: minmax(10px, 1fr) minmax(10px, 3fr); grid-template-columns: minmax(10px, 1fr) minmax(10px, 4fr);
grid-template-rows: min-content min-content 1fr min-content; grid-template-rows: min-content min-content 1fr min-content;
gap: 1px; gap: 1px;

136
webapp/static/clients/codemirror/grail.html
View file

@ -7,7 +7,6 @@
<title>Codemirror6 example using BaseX LSP</title> <title>Codemirror6 example using BaseX LSP</title>
<link rel="icon" type="image/png" href="../favicon.png" /> <link rel="icon" type="image/png" href="../favicon.png" />
<link href="../bootstrap@5.3.7.css" rel="stylesheet" /> <link href="../bootstrap@5.3.7.css" rel="stylesheet" />
<link href="../codicon/codicon.css" rel="stylesheet" />
<link rel="stylesheet" href="grail.css" /> <link rel="stylesheet" href="grail.css" />
</head> </head>
@ -19,7 +18,7 @@
<div class="container-fluid"> <div class="container-fluid">
<a id="help" class="navbar-brand">XQuery 4.0 LSP client <a id="help" class="navbar-brand">XQuery 4.0 LSP client
<button id="popcon" popovertarget="popConnect" class="btn btn-danger"> <button id="popcon" popovertarget="popConnect" class="btn btn-danger">
<i class="bi bi-router"></i> <i class="codicon codicon-vm-outline"></i>
</button> </button>
</a> </a>
<ul class="nav nav-pills"> <ul class="nav nav-pills">
@ -52,41 +51,42 @@
<div class="btn-group btn-group-sm " role="group" aria-label="Second group"> <div class="btn-group btn-group-sm " role="group" aria-label="Second group">
<button id="search" title="Search" type="button" class="btn btn-light"><i <button id="search" title="Search" type="button" class="btn btn-light"><i
class="bi bi-search"></i></button> class="codicon codicon-search"></i></button>
<button id="lint" title="Display diagnostics" type="button" class="btn btn-light"><i <button id="lint" title="Display diagnostics" type="button" class="btn btn-light"><i
class="bi bi-info-square"></i></button> class="codicon codicon-report"></i></button>
<button id="sync" title="Sync changes to server" type="button" class="btn btn-light"> <button id="symbols2" type="button" class="btn btn-light" title="symbols">
<i class="bi bi-arrow-repeat"></i> <i class="codicon codicon-symbol-misc"></i></button>
</button>
<button id="fullscreen" title="Full screen editor" type="button" class="btn btn-light">
<i class="bi bi-arrows-fullscreen"></i>
</button>
</div>
<div class="btn-group" role="group" aria-label="Third group">
<button id="syntax" type="button" class="btn btn-light" title="Syntax"><i
class="bi bi-chat"></i></button>
<button id="format" type="button" class="btn btn-light" title="Format (Shift-Alt-f)"><i <button id="format" type="button" class="btn btn-light" title="Format (Shift-Alt-f)"><i
class="bi bi-justify-left"></i></button> class="codicon codicon-list-flat"></i></button>
<button id="cmd" type="button" class="btn btn-light" title="Cmd list to console"> <button id="sync" title="Sync changes to server" type="button" class="btn btn-light">
<i class="bi bi-hammer"></i> <i class="codicon codicon-sync"></i>
</button>
<button id="fullscreen" title="Full screen editor" type="button" class="btn btn-light">
<i class="codicon codicon-screen-full"></i>
</button> </button>
<button type="button" class="btn btn-light" popovertarget="popSettings" title="Settings"> <button type="button" class="btn btn-light" popovertarget="popSettings" title="Settings">
<i class="bi bi-gear"></i></button> <i class="codicon codicon-settings"></i></button>
</div>
<div class="btn-group" role="group" aria-label="Third group">
<button id="syntax" type="button" class="btn btn-light" title="Unused"><i
class="codicon codicon-comment"></i></button>
<button id="cmd" type="button" class="btn btn-light" title="Cmd list to console">
<i class="codicon codicon-debug-console"></i>
</button>
<button id="wordAt" type="button" class="btn btn-light" title="word at"> <button id="wordAt" type="button" class="btn btn-light" title="word at">
<i class="bi bi-1-square"></i></button> <i>1</i></button>
<button id="symbols2" type="button" class="btn btn-light" title="symbols">
<i class="bi bi-2-square"></i></button>
<button id="unused3" type="button" class="btn btn-light" title="unused3"> <button id="unused3" type="button" class="btn btn-light" title="unused3">
<i class="bi bi-3-square"></i></button> <i>3</i></button>
</div> </div>
</div> </div>
</nav> </nav>
@ -97,43 +97,48 @@
</main> </main>
<aside class="page-sidebar"> <aside class="page-sidebar">
<div id="msg">(msgs)<i class='codicon codicon-symbol-method'></i></div>
<select id="load"> <details id="workspacePanel" open="open" style="padding:5px;">
<option selected value="">load..</option> <summary class="bg-info">Workspace <b>0</b></summary>
<optgroup label="XQuery3"> <select id="load">
<option <option selected value="">load..</option>
value="https://raw.githubusercontent.com/expkg-zone58/pdfbox/refs/heads/main/src/Pdfbox3.xqm"> <optgroup label="XQuery3">
Pdfbox3.xqm</option> <option
<option value="https://raw.githubusercontent.com/expkg-zone58/pdfbox/refs/heads/main/src/Pdfbox3.xqm">
value="https://raw.githubusercontent.com/Quodatum/xqdoca/refs/heads/master/src/main/lib/model.xqm"> Pdfbox3.xqm</option>
model.xqm</option> <option
</optgroup> value="https://raw.githubusercontent.com/Quodatum/xqdoca/refs/heads/master/src/main/lib/model.xqm">
<optgroup label="XQuery4"> model.xqm</option>
<option </optgroup>
value="https://git.quodatum.duckdns.org/quodatum/basex-lsp/raw/branch/main/webapp/lsp/lsp-text.xqm"> <optgroup label="XQuery4">
lsp-text.xqm</option> <option
<option value="https://git.quodatum.duckdns.org/quodatum/basex-lsp/raw/branch/main/webapp/lsp/lsp-text.xqm">
value="../../../lsp/lsp-text.xqm"> lsp-text.xqm</option>
lsp-text.xqm</option> <option value="../../../lsp/lsp-text.xqm">
</optgroup> lsp-text.xqm</option>
<optgroup label="xpath"> </optgroup>
<option
value="https://raw.githubusercontent.com/dnovatchev/Articles/refs/heads/main/Generators/Code/generator.xpath">
generator.xpath</option>
</optgroup> <optgroup label="xpath">
</select> <option
value="https://raw.githubusercontent.com/dnovatchev/Articles/refs/heads/main/Generators/Code/generator.xq">
generator.xquery</option>
</optgroup>
</select>
<ul id="traffic" style="overflow: scroll;"> <ul id="traffic" style="overflow: scroll;">
<li>-</li> <li>-</li>
</ul> </ul>
</details>
<details id="symPanel" style="padding:5px;"> <details id="symPanel" style="padding:5px;">
<summary class="bg-info">OutLine <b>0</b></summary> <summary class="bg-info">OutLine <b>0</b></summary>
<json-list id="symList" style="display:block; overflow:scroll; height: 10em;"></json-list> <json-list id="symList" style="display:block; overflow:scroll; height: 10em;"></json-list>
</details> </details>
<details id="msgPanel" style="padding:5px;">
<summary class="bg-info">Messages <b>0</b></summary>
<div id="msg">(msgs)<i class='codicon codicon-symbol-method'></i></div>
</details>
</aside> </aside>
<footer class="page-footer"> <footer class="page-footer">
@ -143,7 +148,7 @@
<option value="xquery">xquery</option> <option value="xquery">xquery</option>
<option value="xml">xml</option> <option value="xml">xml</option>
</select> </select>
<button popovertarget="popHelp"><i class="bi bi-info-circle"></i></button></a> <button popovertarget="popHelp"><i class="codicon codicon-info"></i></button></a>
</footer> </footer>
</div> </div>
<!-- Popovers --> <!-- Popovers -->
@ -163,16 +168,23 @@
<!-- <popup-info id="popHelp">hhhh</popup-info> --> <!-- <popup-info id="popHelp">hhhh</popup-info> -->
<dialog id="popSettings" popover> <dialog id="popSettings" popover>
<header>Editor configuration <form id="fSettings">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" <header>Editor configuration
onclick="$('popSettings').hidePopover(); "></button> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"
</header> onclick="$('popSettings').hidePopover(); "></button>
<div class="modal-body"> </header>
@TODO <div class="modal-body">
</div>
<div class="modal-footer"> <div class="mb-3 form-check">
<button id="connect">ok</button> <input name="wrap-lines" type="checkbox" class="form-check-input" id="exampleCheck1">
</div> <label class="form-check-label" for="exampleCheck1">Wrap lines</label>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Apply</button>
</div>
</form>
</dialog> </dialog>
<!-- CodeMirror 6 --> <!-- CodeMirror 6 -->
<script src="./lsp.bundle.js"></script> <script src="./lsp.bundle.js"></script>

14
webapp/static/clients/codemirror/list.js
View file

@ -2,21 +2,24 @@
https://stackoverflow.com/questions/50404970/web-components-pass-data-to-and-from https://stackoverflow.com/questions/50404970/web-components-pass-data-to-and-from
https://www.w3schools.com/howto/howto_js_treeview.asp https://www.w3schools.com/howto/howto_js_treeview.asp
*/ */
class JsonListComponent extends HTMLElement { class ListComponent extends HTMLElement {
#shadow; #shadow;
#data; #data;
#iconKinds; //array from kind integer to codicon name
constructor() { constructor() {
super(); super();
this.#shadow = this.attachShadow({ mode: "open" }); this.#shadow = this.attachShadow({ mode: "open" });
this.#data = []; this.#data = [];
this.#iconKinds = [];
this.render(); this.render();
} }
setData(newData, append = false) { setData(newData,icons, append = false) {
if (!Array.isArray(newData)) { if (!Array.isArray(newData)) {
console.warn("Invalid format, expected an array."); console.warn("Invalid format, expected an array.");
return; return;
} }
this.#iconKinds=icons;
this.#data = append ? this.#data.concat(newData) : structuredClone(newData); this.#data = append ? this.#data.concat(newData) : structuredClone(newData);
this.render(); this.render();
} }
@ -34,7 +37,8 @@ class JsonListComponent extends HTMLElement {
const shad=this.#shadow; const shad=this.#shadow;
this.#data.forEach((item, index) => { this.#data.forEach((item, index) => {
const listItem = document.createElement('li'); const listItem = document.createElement('li');
listItem.innerHTML = `<i class='codicon codicon-symbol-method'></i>${item.name} - ${item.detail}`; listItem.innerHTML = `<i class='codicon codicon-${this.#iconKinds[item.kind]}'></i>
<span>${item.name} - ${item.detail}</span>`;
// Adding a click event listener for user interaction // Adding a click event listener for user interaction
listItem.addEventListener('click', () => { listItem.addEventListener('click', () => {
console.log('Item clicked:', item, listItem); console.log('Item clicked:', item, listItem);
@ -57,10 +61,12 @@ class JsonListComponent extends HTMLElement {
this.#shadow.innerHTML = ''; this.#shadow.innerHTML = '';
const style = document.createElement('style'); const style = document.createElement('style');
style.textContent = ` style.textContent = `
@import url("../codicon@0.0.40/codicon.css");
ul { list-style-type: none; padding: 0; margin: 0; } ul { list-style-type: none; padding: 0; margin: 0; }
li { padding: 1px; border-bottom: 1px solid #ccc; cursor: pointer; } li { padding: 1px; border-bottom: 1px solid #ccc; cursor: pointer; }
li :not(.selected) :hover { background: #ccc; } li :not(.selected) :hover { background: #ccc; }
.selected { background: lightgreen;} .selected { background: lightgreen;}
i {vertical-align: middle;}
`; `;
this.#shadow.appendChild(style); this.#shadow.appendChild(style);
this.#shadow.appendChild(list); this.#shadow.appendChild(list);
@ -73,4 +79,4 @@ class JsonListComponent extends HTMLElement {
} }
/* Define the new custom element */ /* Define the new custom element */
customElements.define('json-list', JsonListComponent); customElements.define('json-list', ListComponent);

1291
webapp/static/clients/codemirror/lsp.bundle.js
View file

File diff suppressed because it is too large Load diff

2
webapp/static/clients/codemirror/lsp.bundle.js.map
View file

File diff suppressed because one or more lines are too long

2
webapp/static/clients/codemirror/lsp.bundle.min.js vendored
View file

File diff suppressed because one or more lines are too long

42
webapp/static/clients/codemirror/script.js
View file

@ -49,8 +49,36 @@ $("symbols2").onclick = e => {
client.request("textDocument/documentSymbol", { "textDocument": { "uri": $("iFile").value } }) client.request("textDocument/documentSymbol", { "textDocument": { "uri": $("iFile").value } })
.then(r => { .then(r => {
console.log("symbols", r) console.log("symbols", r)
$("symPanel").open=true; $("symPanel").open = true;
$("symList").setData(r); const icons=[
'symbol-file' ,
'symbol-class' ,
'symbol-namespace' ,
'symbol-structure' ,
'symbol-class' ,
'symbol-method' ,
'symbol-property' ,
'symbol-field' ,
'symbol-method-arrow' ,
'symbol-enum' ,
'symbol-interface' ,
'symbol-method' ,
'symbol-variable' ,
'symbol-constant' ,
'symbol-string' ,
'symbol-numeric' ,
'symbol-boolean' ,
'symbol-array' ,
'symbol-structure' ,
'symbol-key' ,
'dash' ,
'symbol-enum-member' ,
'symbol-misc' ,
'symbol-event' ,
'symbol-operator' ,
'symbol-parameter'
];
$("symList").setData(r,icons);
}); });
}; };
@ -96,6 +124,14 @@ $("load").onchange = e => {
}); });
$("load").value = ""; $("load").value = "";
}; };
function updateSettings(event) {
event.preventDefault();
alert("TODO");
};
$("fSettings").addEventListener("submit", updateSettings);
function connect() { function connect() {
const server = $("iServer").value; const server = $("iServer").value;
const file = $("iFile").value; const file = $("iFile").value;
@ -126,9 +162,11 @@ function connect() {
function connectStatus(bool) { function connectStatus(bool) {
if (bool) { if (bool) {
$("popcon").querySelector("i").classList.value = "codicon codicon-vm-active";
$("popcon").classList.remove("btn-danger") $("popcon").classList.remove("btn-danger")
$("popcon").classList.add("btn-success") $("popcon").classList.add("btn-success")
} else { } else {
$("popcon").querySelector("i").classList.value = "codicon codicon-vm-outline";
$("popcon").classList.add("btn-danger") $("popcon").classList.add("btn-danger")
$("popcon").classList.remove("btn-success") $("popcon").classList.remove("btn-success")
} }

2
webapp/static/clients/codicon/readme.md
View file

@ -1,2 +0,0 @@
https://github.com/microsoft/vscode-codicons
https://github.com/microsoft/vscode-codicons/releases/tag/v0.0.40

0
webapp/static/clients/codicon/codicon.css → webapp/static/clients/codicon@0.0.40/codicon.css
View file

0
webapp/static/clients/codicon/codicon.ttf → webapp/static/clients/codicon@0.0.40/codicon.ttf
View file

7
webapp/static/clients/codicon@0.0.40/readme.md Normal file
View file

@ -0,0 +1,7 @@
```html
<i class='codicon codicon-symbol-method'></i>
```
* [search codicon icons](https://microsoft.github.io/vscode-codicons/dist/codicon.html)
* https://github.com/microsoft/vscode-codicons
* https://github.com/microsoft/vscode-codicons/releases/tag/v0.0.40