124 lines
No EOL
4.3 KiB
HTML
124 lines
No EOL
4.3 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 href="../bootstrap@5.3.7.css" rel="stylesheet"
|
|
integrity="sha384-LN+7fdVzj6u52u30Kp6M/trliBMCMKTyK833zpbD+pXdCLuTusPj697FH4R/5mcr" crossorigin="anonymous">
|
|
<link rel="stylesheet" href="styles.css" />
|
|
|
|
</head>
|
|
|
|
<body>
|
|
<nav class="navbar bg-body-tertiary">
|
|
<div class="container-fluid">
|
|
<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>
|
|
</form>
|
|
<div class="row">
|
|
<div>
|
|
<select id="language">
|
|
<option selected>Language</option>
|
|
<option value="plaintext">plaintext</option>
|
|
<option value="xquery">xquery</option>
|
|
<option value="xml">xml</option>
|
|
</select>
|
|
<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>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="container-fluid">
|
|
<div class="row " style="overflow:hidden">
|
|
<div class="col-2">
|
|
ggg
|
|
<button id="load"> something</button>
|
|
</div>
|
|
<div class="col flex-grow-1" style="overflow: auto;">
|
|
|
|
|
|
<!-- Editor goes in here -->
|
|
|
|
<div id="editor"></div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- CodeMirror 6 -->
|
|
<script src="./lsp.bundle.js"></script>
|
|
<script>
|
|
|
|
let doc = `3+1`;
|
|
// 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 => {
|
|
e.preventDefault()
|
|
connect()
|
|
};
|
|
document.getElementById("search").onclick = e => {
|
|
lsp.openSearchPanel(view);
|
|
};
|
|
document.getElementById("lint").onclick = e => {
|
|
lsp.openLintPanel(view);
|
|
};
|
|
document.getElementById("load").onclick = e => {
|
|
const url = "https://raw.githubusercontent.com/dnovatchev/Articles/refs/heads/main/Generators/Code/generator.xpath";
|
|
fetch(url)
|
|
.then(response => response.text())
|
|
.then(t => {
|
|
view.dispatch({
|
|
changes: {
|
|
from: 0,
|
|
to: view.state.doc.length,
|
|
insert: t
|
|
}
|
|
})
|
|
});
|
|
};
|
|
function connect() {
|
|
const server = document.getElementById("iServer").value;
|
|
const file = document.getElementById("iFile").value;
|
|
lsp.simpleWebSocketTransport(server)
|
|
.then(transport => {
|
|
let link = lsp.lsp(transport, file);
|
|
const doc = view.state.doc.toString();
|
|
const state = lsp.createEditorState(doc, [...lsp.baseExts, link]);
|
|
view.setState(state);
|
|
})
|
|
.catch(r => alert("fail"));
|
|
};
|
|
connect();
|
|
</script>
|
|
</body>
|
|
|
|
</html> |