zydronium/neocities
1
0
Fork 0
mirror of https://github.com/neocities/neocities.git synced 2025-08-04 16:51:36 +02:00
Code Issues Projects Releases Packages Wiki Activity

basic monaco editor setup

Browse source
This commit is contained in:
BanceDev 2024-09-30 09:44:22 -04:00
parent 47edba24dc
commit 165e17f844
467 changed files with 40 additions and 328148 deletions
Download patch file Download diff file Expand all files Collapse all files

120
views/site_files/text_editor.erb
View file

@ -39,51 +39,12 @@
Theme:
<select id="theme" size="1" onchange="setTheme();" onkeyup="setTheme();">
<optgroup label="Bright">
<option value="ace/theme/chrome">Chrome</option>
<option value="ace/theme/cloud_editor">Cloud Editor</option>
<option value="ace/theme/clouds">Clouds</option>
<option value="ace/theme/crimson_editor">Crimson Editor</option>
<option value="ace/theme/dawn">Dawn</option>
<option value="ace/theme/dreamweaver">Dreamweaver</option>
<option value="ace/theme/eclipse">Eclipse</option>
<option value="ace/theme/github">GitHub</option>
<option value="ace/theme/iplastic">I-Plastic</option>
<option value="ace/theme/katzenmilch">Katzen Milch</option>
<option value="ace/theme/kuroir">Kuroir</option>
<option value="ace/theme/solarized_light">Solarized Light</option>
<option value="ace/theme/sqlserver">SQL Server</option>
<option value="ace/theme/textmate">Text Mate</option>
<option value="ace/theme/tomorrow">Tomorrow</option>
<option value="ace/theme/xcode">XCode</option>
<option value="vs-light">VS Light</option>
<option value="hc-light">High Contrast Light</option>
</optgroup>
<optgroup label="Dark">
<option value="ace/theme/ambiance">Ambiance</option>
<option value="ace/theme/chaos">Chaos</option>
<option value="ace/theme/cloud_editor_dark">Cloud Editor Dark</option>
<option value="ace/theme/clouds_midnight">Clouds Midnight</option>
<option value="ace/theme/cobalt">Cobalt</option>
<option value="ace/theme/dracula">Dracula</option>
<option value="ace/theme/github_dark">GitHub Dark</option>
<option value="ace/theme/gob">Green on Black</option>
<option value="ace/theme/gruvbox">Gruvbox</option>
<option value="ace/theme/idle_fingers">Idle Fingers</option>
<option value="ace/theme/kr_theme">KR Theme</option>
<option value="ace/theme/merbivore">Merbivore</option>
<option value="ace/theme/merbivore_soft">Merbivore Soft</option>
<option value="ace/theme/mono_industrial">Mono Industrial</option>
<option value="ace/theme/monokai">Monokai</option>
<option value="ace/theme/nord_dark">Nord Dark</option>
<option value="ace/theme/one_dark">One Dark</option>
<option value="ace/theme/pastel_on_dark">Pastel on dark</option>
<option value="ace/theme/solarized_dark">Solarized Dark</option>
<option value="ace/theme/sunburst" selected>Sunburst</option>
<option value="ace/theme/terminal">Terminal</option>
<option value="ace/theme/tomorrow_night">Tomorrow Night</option>
<option value="ace/theme/tomorrow_night_blue">Tomorrow Night Blue</option>
<option value="ace/theme/tomorrow_night_bright">Tomorrow Night Bright</option>
<option value="ace/theme/tomorrow_night_eighties">Tomorrow Night 80s</option>
<option value="ace/theme/twilight">Twilight</option>
<option value="ace/theme/vibrant_ink">Vibrant Ink</option>
<option value="vs-dark">VS Dark</option>
<option value="hc-black">High Contrast Dark</option>
</optgroup>
</select>
</div>
@ -125,25 +86,24 @@
<p>How can I help you today?</p>
</div>
</div>
<div id="chat-form">
<form>
<input name="csrf_token" value="<%= csrf_token %>" type="hidden">
<input type="text" id="chat-input" placeholder="Ask a coding question..." autocomplete="off">
<button type="submit" class="btn-Action">Send</button>
</form>
</div>
<div id="chat-form">
<form>
<input name="csrf_token" value="<%= csrf_token %>" type="hidden">
<input type="text" id="chat-input" placeholder="Ask a coding question..." autocomplete="off">
<button type="submit" class="btn-Action">Send</button>
</form>
</div>
</div>
</div>
<script src="/js/ace/ace.js" type="text/javascript" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.26.1/min/vs/loader.min.js"></script>
<script>
var unsavedChanges = false
function setTheme(name) {
var editorTheme = $('#theme option:selected')
editor.setTheme(editorTheme.val())
monaco.editor.setTheme(editorTheme.val());
$.post('/site/<%= current_site.username %>/set_editor_theme', {
csrf_token: '<%= csrf_token %>',
editor_theme: editorTheme.text()
@ -222,38 +182,34 @@
url: "/site_files/download/<%= Site.escape_path(@filename) %>",
cache: false,
success: function(resp) {
editor = ace.edit("editor")
setTheme()
<% if @ace_mode %>
editor.getSession().setMode("ace/mode/<%= @ace_mode %>")
<% end %>
editor.getSession().setTabSize(2)
editor.getSession().setUseWrapMode(true)
editor.setFontSize(14)
editor.setShowPrintMargin(false)
editor.setOptions({
maxLines: Infinity,
autoScrollEditorIntoView: true
})
document.getElementById('editor').innerHTML = '';
// Initialize Monaco Editor
require.config({ paths: { 'vs': 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.33.0/min/vs' } });
require(['vs/editor/editor.main'], function() {
editor = monaco.editor.create(document.getElementById('editor'), {
value: resp,
language: '<%= @monaco_mode %>',
fontSize: 14,
automaticLayout: true,
scrollBeyondLastLine: false,
wordWrap: 'on',
wrappingIndent: 'same',
tabSize: 2,
minimap: { enabled: false },
});
setTheme();
// Disable autocomplete
editor.setBehavioursEnabled(false)
// Handle change event for unsaved changes
editor.onDidChangeModelContent(function() {
$('a#saveButton,a#saveAndExitButton').css('opacity', 1);
unsavedChanges = true;
});
editor.setValue(resp, -1)
editor.getSession().setUndoManager(new ace.UndoManager())
editor.on('change', function(obj) {
$('a#saveButton,a#saveAndExitButton').css('opacity', 1)
unsavedChanges = true
})
editor.commands.addCommand({
name: 'saveCommand',
bindKey: {win: 'Ctrl-S', mac: 'Command-S'},
exec: function(editor) {
saveTextFile(false)
}
})
// Add save command (Ctrl+S / Command+S)
editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, function() {
saveTextFile(false);
});
});
}
});
});