basex-lsp/webapp/static/codemirror/index.html
2025-07-31 15:02:27 +01:00

80 lines
No EOL
2.4 KiB
HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<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 rel="stylesheet" href="styles.css" />
</head>
<body>
<header>BaseX LSP client <button id="search">🔍</button>
<label for="symbols">Symbols:</label><select id="symbols" disabled="disabled"></select>
<div style="float:right">
<input id="iServer" type="text" value="ws://localhost:3000/ws/lsp" /><button id="connect">connect</button>
</div>
</header>
<div class="container">
<div class="item">stuff</div>
<!-- Editor goes in here -->
<div id="editor" class="item"></div>
</div>
<!-- CodeMirror 6 -->
<script src="./lsp.bundle.js"></script>
<script>
const server = "ws://localhost:3000/ws/lsp";
let doc = `/**
*
* @param {string[]} items
* @param nada
*/
function foo(items, nada) {
for (var i=0; i<items.length; i++) {
alert(items[i] + 'juhu');
} // Real Tab.
//
//
}`;
// Load saved content from localStorage when the page loads
window.addEventListener('load', () => {
const savedText = localStorage.getItem('code');
if (savedText) {
doc = savedText;
}
});
const view = lsp.createEditorView(undefined, document.getElementById("editor"));
view.setState(lsp.createEditorState(doc, lsp.baseExts));
// Save content to localStorage when the page is about to unload
window.addEventListener('beforeunload', () => {
const doc = view.state.doc.toString();
localStorage.setItem('code', doc);
});
document.getElementById("connect").onclick = e => {
const v = document.getElementById("iServer").value;
alert(v)
};
document.getElementById("search").onclick = e => {
lsp.openSearchPanel(view);
};
lsp.simpleWebSocketTransport(server)
.then(transport => {
let link = lsp.lsp(transport, "file:///some/file.xml");
const state = lsp.createEditorState(doc, [...lsp.baseExts, link]);
view.setState(state);
})
.catch(r => alert("fail"));
</script>
</body>
</html>