mirror of
https://github.com/gnh1201/welsonjs.git
synced 2025-05-28 20:47:01 +00:00
Namhyeon, Go
dc06506276
This update supports the ability to auto-completion executable file paths in the code editor through the list of software installed on the local computer.
220 lines
8.1 KiB
HTML
220 lines
8.1 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>WelsonJS Code Editor</title>
|
|
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
|
|
<link rel="stylesheet" href="https://cdn.metroui.org.ua/dev/metro.css">
|
|
<link rel="stylesheet" href="https://cdn.metroui.org.ua/dev/icons.css">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.52.2/min/vs/editor/editor.main.css">
|
|
<style>
|
|
html, body {
|
|
margin: 0;
|
|
padding: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
#container {
|
|
border: 1px solid grey;
|
|
height: calc(100% - 139px);
|
|
overflow: hidden;
|
|
}
|
|
|
|
#fileInput {
|
|
display: none;
|
|
}
|
|
|
|
.banner {
|
|
text-align: center;
|
|
padding: 10px;
|
|
background-color: #f1f1f1;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.overflowingOverlayWidgets {
|
|
z-index: 1;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<nav data-role="ribbonmenu">
|
|
<ul class="tabs-holder">
|
|
<li class="static"><a href="#">File</a></li>
|
|
<li><a href="#editor-tab">Editor</a></li>
|
|
</ul>
|
|
<div class="content-holder">
|
|
<div class="section" id="editor-tab">
|
|
<button id="btnOpenFile" class="ribbon-button">
|
|
<span class="icon mif-folder-open"></span>
|
|
<span class="caption">Open File</span>
|
|
</button>
|
|
<button id="btnSaveFile" class="ribbon-button">
|
|
<span class="icon mif-floppy-disks"></span>
|
|
<span class="caption">Save File</span>
|
|
</button>
|
|
<button id="btnSponsor" class="ribbon-button">
|
|
<span class="icon mif-heart"></span>
|
|
<span class="caption">Sponsor</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<div id="container"></div>
|
|
<input type="file" id="fileInput">
|
|
|
|
<div class="banner"><a href="https://github.com/gnh1201/welsonjs">WelsonJS</a> Code Editor powered by <a href="https://github.com/microsoft/monaco-editor">Microsoft Monaco Editor</a>.</div>
|
|
|
|
<script>
|
|
var require = {
|
|
paths: {
|
|
vs: 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.52.2/min/vs'
|
|
}
|
|
};
|
|
</script>
|
|
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/fast-xml-parser/4.5.1/fxparser.min.js"></script>
|
|
<script src="https://cdn.metroui.org.ua/dev/metro.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.52.2/min/vs/loader.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.52.2/min/vs/editor/editor.main.js"></script>
|
|
<script>
|
|
var editor;
|
|
var currentFileName = "sayhello.js";
|
|
|
|
function resizeEditor() {
|
|
if (editor) {
|
|
var ribbonHeight = document.querySelector('nav').offsetHeight;
|
|
var bannerHeight = document.querySelector('.banner').offsetHeight;
|
|
var containerHeight = document.documentElement.clientHeight - ribbonHeight - bannerHeight;
|
|
document.getElementById('container').style.height = containerHeight + 'px';
|
|
editor.layout();
|
|
}
|
|
}
|
|
|
|
function getSuggestions(word, range) {
|
|
return axios.get("http://localhost:3000/completion/" + encodeURIComponent(word))
|
|
.then(function (response) {
|
|
var parser = new XMLParser();
|
|
var result = parser.parse(response.data);
|
|
|
|
if (!result.suggestions || !result.suggestions.item) {
|
|
return {
|
|
suggestions: []
|
|
};
|
|
}
|
|
|
|
var items = Array.isArray(result.suggestions.item) ? result.suggestions.item : [result.suggestions.item];
|
|
var suggestions = items.map(function (item) {
|
|
return {
|
|
label: item.label,
|
|
kind: monaco.languages.CompletionItemKind.Text,
|
|
documentation: item.documentation || "",
|
|
insertText: '"' + item.insertText + '"',
|
|
range: range
|
|
};
|
|
});
|
|
|
|
return {
|
|
suggestions: suggestions
|
|
};
|
|
})
|
|
.catch(function () {
|
|
return {
|
|
suggestions: []
|
|
};
|
|
});
|
|
}
|
|
|
|
require(["vs/editor/editor.main"], function () {
|
|
editor = monaco.editor.create(document.getElementById('container'), {
|
|
value: ['// lib/sayhello.js', 'function say() {', ' console.log("hello");', '}', '', 'exports.say = say;', '', 'exports.VERSIONINFO = "SayHello (sayhello.js) version 0.1";', 'exports.AUTHOR = "abuse@catswords.net";', 'exports.global = global;', 'exports.require = global.require;'].join('\n'),
|
|
language: 'javascript'
|
|
});
|
|
|
|
monaco.languages.registerCompletionItemProvider('javascript', {
|
|
provideCompletionItems: function (model, position) {
|
|
var word = model.getWordUntilPosition(position);
|
|
var range = {
|
|
startLineNumber: position.lineNumber,
|
|
endLineNumber: position.lineNumber,
|
|
startColumn: word.startColumn,
|
|
endColumn: word.endColumn
|
|
};
|
|
|
|
return getSuggestions(word.word, range);
|
|
}
|
|
});
|
|
});
|
|
|
|
window.addEventListener('resize', resizeEditor);
|
|
|
|
function getFileLanguage(fileName) {
|
|
var extension = fileName.split('.').pop().toLowerCase();
|
|
var languageMap = {
|
|
'js': 'javascript',
|
|
'ts': 'typescript',
|
|
'html': 'html',
|
|
'css': 'css',
|
|
'json': 'json',
|
|
'py': 'python',
|
|
'java': 'java',
|
|
'c': 'c',
|
|
'cpp': 'cpp',
|
|
'cs': 'csharp',
|
|
'php': 'php',
|
|
'rb': 'ruby',
|
|
'go': 'go',
|
|
'rs': 'rust'
|
|
};
|
|
return languageMap[extension] || 'plaintext';
|
|
}
|
|
|
|
function navigate(href) {
|
|
var a = document.createElement("a");
|
|
a.href = href;
|
|
a.target = "_blank";
|
|
document.body.appendChild(a);
|
|
a.click();
|
|
}
|
|
|
|
document.getElementById("fileInput").onchange = function (event) {
|
|
var file = event.target.files[0];
|
|
if (!file) return;
|
|
|
|
currentFileName = file.name;
|
|
var reader = new FileReader();
|
|
reader.onload = function (e) {
|
|
var language = getFileLanguage(file.name);
|
|
monaco.editor.setModelLanguage(editor.getModel(), language);
|
|
editor.setValue(e.target.result);
|
|
};
|
|
reader.readAsText(file);
|
|
};
|
|
|
|
document.getElementById("btnOpenFile").onclick = function () {
|
|
document.getElementById('fileInput').click();
|
|
};
|
|
|
|
document.getElementById("btnSaveFile").onclick = function () {
|
|
var text = editor.getValue();
|
|
var fileName = prompt("Enter file name:", currentFileName);
|
|
if (!fileName) return;
|
|
|
|
currentFileName = fileName;
|
|
var blob = new Blob([text], { type: 'text/plain' });
|
|
var a = document.createElement('a');
|
|
a.href = URL.createObjectURL(blob);
|
|
a.download = fileName;
|
|
document.body.appendChild(a);
|
|
a.click();
|
|
document.body.removeChild(a);
|
|
};
|
|
|
|
document.getElementById("btnSponsor").onclick = function () {
|
|
navigate('https://github.com/sponsors/gnh1201');
|
|
};
|
|
</script>
|
|
</body>
|
|
</html>
|