From 7d542c53ba2e2d486b81cb46a2aac0d1d25ef647 Mon Sep 17 00:00:00 2001 From: Rachel <508861+Ryex@users.noreply.github.com> Date: Sun, 17 Mar 2024 22:49:12 -0700 Subject: [PATCH] fix up ace loading through webpack, - enable language tools extention --- README.md | 3 +- www/css/dark.css | 22 +++++- www/index.html | 176 ++++++++++++++++++++++++++++----------------- www/pnpm-lock.yaml | 2 +- www/src/index.js | 87 ++++++++++++++++++---- 5 files changed, 205 insertions(+), 85 deletions(-) diff --git a/README.md b/README.md index 84e1960..2d5d8df 100644 --- a/README.md +++ b/README.md @@ -23,8 +23,7 @@ This project is divided into four parts: ## 🚴 Usage -Visit https://github.com/Ryex/ic10emu - +Visit https://ryex.github.io/ic10emu/ ## License diff --git a/www/css/dark.css b/www/css/dark.css index ad11a60..e1094b0 100644 --- a/www/css/dark.css +++ b/www/css/dark.css @@ -1,10 +1,25 @@ body { background-color: #212529; + height: 100%; + margin: 0; } .ace_tooltip { background-color: #343a40; color: #dee2e6; } +.ace_status-indicator { + color: #dee2e6; + position: relative; + right: 10px; + left: 5px; + bottom: 4px; + border-left: 1px solid; + border-right: 1px solid; + height: 20px; + float: right; + padding-left: 5px; + padding-right: 5px; +} code { color: #e685b5 } @@ -13,6 +28,7 @@ code { min-height: 30px; margin-bottom: 5px; border: 1px solid; + padding: 0; } .navbar-default { @@ -47,7 +63,7 @@ code { ol, ul { margin-top: 0; - margin-bottom: 10px; + margin-bottom: 5px; } .nav > li { position: relative; @@ -60,8 +76,8 @@ ol, ul { color: #fff; } .navbar-text { - margin-top: 10px; - margin-bottom: 10px; + margin-top: 5px; + margin-bottom: 5px; padding: 0; position: relative; } diff --git a/www/index.html b/www/index.html index e1a6f81..174a2af 100644 --- a/www/index.html +++ b/www/index.html @@ -1,72 +1,118 @@ - - - Hello wasm-pack! - - - - - - - - - - - - - -
- +
+
+
+
+
IC10 editor!
+
+
+
+
- - - +
+ + + + diff --git a/www/pnpm-lock.yaml b/www/pnpm-lock.yaml index 9952ccb..fbbaa31 100644 --- a/www/pnpm-lock.yaml +++ b/www/pnpm-lock.yaml @@ -2867,7 +2867,7 @@ packages: file:../ic10emu_wasm/pkg: resolution: {directory: ../ic10emu_wasm/pkg, type: directory} - name: ic10emu + name: ic10emu_wasm dev: false file:../ic10lsp_wasm/pkg: diff --git a/www/src/index.js b/www/src/index.js index e8a2008..9ddc2a7 100644 --- a/www/src/index.js +++ b/www/src/index.js @@ -3,6 +3,51 @@ import * as ace from "ace-code"; import {Mode as IC10Mode} from "./ic10_mode"; import * as theme from "ace-code/src/theme/one_dark"; import {AceLanguageClient} from "ace-linters/build/ace-language-client"; +import ace_ext_statusbar from "ace-code/src/ext/statusbar"; +import ace_ext_keybinding_menu from "ace-code/src/ext/keybinding_menu"; +import _ace_ext_langue_tools from "ace-code/src/ext/language_tools"; + +// make sure Ace can load through webpack +// trimmed down version of https://github.com/ajaxorg/ace-builds/blob/master/esm-resolver.js but for ace-code +ace.config.setModuleLoader("ace/theme/one_dark", () => import("ace-code/src/theme/one_dark")); +ace.config.setModuleLoader('ace/ext/beautify', () => import('ace-code/src/ext/beautify.js')); +ace.config.setModuleLoader('ace/ext/code_lens', () => import('ace-code/src/ext/code_lens.js')); +ace.config.setModuleLoader('ace/ext/command_bar', () => import('ace-code/src/ext/command_bar.js')); +ace.config.setModuleLoader('ace/ext/elastic_tabstops_lite', () => import('ace-code/src/ext/elastic_tabstops_lite.js')); +ace.config.setModuleLoader('ace/ext/emmet', () => import('ace-code/src/ext/emmet.js')); +ace.config.setModuleLoader('ace/ext/error_marker', () => import('ace-code/src/ext/error_marker.js')); +ace.config.setModuleLoader('ace/ext/hardwrap', () => import('ace-code/src/ext/hardwrap.js')); +ace.config.setModuleLoader('ace/ext/inline_autocomplete', () => import('ace-code/src/ext/inline_autocomplete.js')); +ace.config.setModuleLoader('ace/ext/keyboard_menu', () => import('ace-code/src/ext/keybinding_menu.js')); +ace.config.setModuleLoader('ace/ext/language_tools', () => import('ace-code/src/ext/language_tools.js')); +ace.config.setModuleLoader('ace/ext/linking', () => import('ace-code/src/ext/linking.js')); +ace.config.setModuleLoader('ace/ext/modelist', () => import('ace-code/src/ext/modelist.js')); +ace.config.setModuleLoader('ace/ext/options', () => import('ace-code/src/ext/options.js')); +ace.config.setModuleLoader('ace/ext/prompt', () => import('ace-code/src/ext/prompt.js')); +ace.config.setModuleLoader('ace/ext/rtl', () => import('ace-code/src/ext/rtl.js')); +ace.config.setModuleLoader('ace/ext/searchbox', () => import('ace-code/src/ext/searchbox.js')); +// ace.config.setModuleLoader('ace/ext/settings_menu', () => import('ace-code/src/ext/settings_menu.js')); +ace.config.setModuleLoader('ace/ext/simple_tokenizer', () => import('ace-code/src/ext/simple_tokenizer.js')); +ace.config.setModuleLoader('ace/ext/spellcheck', () => import('ace-code/src/ext/spellcheck.js')); +ace.config.setModuleLoader('ace/ext/split', () => import('ace-code/src/ext/split.js')); +ace.config.setModuleLoader('ace/ext/static_highlight', () => import('ace-code/src/ext/static_highlight.js')); +ace.config.setModuleLoader('ace/ext/statusbar', () => import('ace-code/src/ext/statusbar.js')); +ace.config.setModuleLoader('ace/ext/textarea', () => import('ace-code/src/ext/textarea.js')); +ace.config.setModuleLoader('ace/ext/themelist', () => import('ace-code/src/ext/themelist.js')); +ace.config.setModuleLoader('ace/ext/whitespace', () => import('ace-code/src/ext/whitespace.js')); +ace.config.setModuleLoader('ace/keyboard/emacs', () => import('ace-code/src/keyboard/emacs.js')); +ace.config.setModuleLoader('ace/keyboard/sublime', () => import('ace-code/src/keyboard/sublime.js')); +ace.config.setModuleLoader('ace/keyboard/vim', () => import('ace-code/src/keyboard/vim.js')); +ace.config.setModuleLoader('ace/keyboard/vscode', () => import('ace-code/src/keyboard/vscode.js')); + +function docReady(fn) { + // see if DOM is already available + if (document.readyState === "complete" || document.readyState === "interactive") { + setTimeout(fn, 1); + } else { + document.addEventListener("DOMContentLoaded", fn); + } +} init(); @@ -32,23 +77,12 @@ test: add r15 r15 1 j ra - ` -const mode = new IC10Mode() -var editor = ace.edit("editor", { - mode: mode, - value: demoCode, - // enableBasicAutocompletion: true, - // enableLiveAutocompletion: true, - // enableSnippets: true, - theme: theme, - customScrollbar: true, -}); const loaded = w => new Promise(r => w.addEventListener("message", r, { once: true })); -async function setupLsp() { +async function setupLsp(editor, mode) { // Create a web worker let worker = new Worker(new URL('./lspWorker.js', import.meta.url)); await Promise.all([loaded(worker)]); @@ -68,8 +102,33 @@ async function setupLsp() { languageProvider.setSessionOptions(editor.session, options); } -setupLsp(); + +docReady(() => { + const mode = new IC10Mode() + var editor = ace.edit("editor", { + mode: mode, + value: demoCode, + enableBasicAutocompletion: true, + enableLiveAutocompletion: true, + enableSnippets: true, + // theme: theme, + fontSize: "16px", + customScrollbar: false, + firstLineNumber: 0, + printMarginColumn: 52, + }); + editor.setTheme("ace/theme/one_dark"); + var statusBar = new ace_ext_statusbar.StatusBar(editor, document.getElementById("statusBar")); + statusBar.updateStatus(editor); + ace_ext_keybinding_menu.init(editor); + // editor.setOption("keyboardHandler", "ace/keyboard/vim"); + + + editor.session.setValue(demoCode) + setupLsp(editor, mode); +}); + + -editor.session.setValue(demoCode)