-
This is Topos, an experimental live coding platform.
Switch to the Help (Ctrl+b) universe for a tutorial!
Have fun, press Enter/Space to get started!
@@ -152,13 +153,15 @@
-
+
+
+
diff --git a/package.json b/package.json
index 1c8b410..5202ab7 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
},
"dependencies": {
"@codemirror/lang-javascript": "^6.1.9",
+ "@codemirror/theme-one-dark": "^6.1.2",
"@replit/codemirror-vim": "^6.0.14",
"autoprefixer": "^10.4.14",
"codemirror": "^6.0.1",
diff --git a/src/EditorSetup.ts b/src/EditorSetup.ts
index 30855ed..ab1b6d6 100644
--- a/src/EditorSetup.ts
+++ b/src/EditorSetup.ts
@@ -1,46 +1,32 @@
-import { javascript } from "@codemirror/lang-javascript"
+import { javascript } from "@codemirror/lang-javascript";
import {
- keymap,
- highlightSpecialChars,
- drawSelection,
- highlightActiveLine,
- dropCursor,
- rectangularSelection,
- lineNumbers,
- crosshairCursor,
- highlightActiveLineGutter
-} from "@codemirror/view"
+ keymap,
+ highlightSpecialChars,
+ drawSelection,
+ highlightActiveLine,
+ dropCursor,
+ rectangularSelection,
+ lineNumbers,
+ crosshairCursor,
+ highlightActiveLineGutter,
+} from "@codemirror/view";
+import { Extension, EditorState } from "@codemirror/state";
import {
- Extension,
- EditorState
-} from "@codemirror/state"
+ defaultHighlightStyle,
+ syntaxHighlighting,
+ indentOnInput,
+ bracketMatching,
+ foldKeymap,
+} from "@codemirror/language";
+import { defaultKeymap, historyKeymap, history } from "@codemirror/commands";
+import { searchKeymap, highlightSelectionMatches } from "@codemirror/search";
import {
- defaultHighlightStyle,
- syntaxHighlighting,
- indentOnInput,
- bracketMatching,
- foldKeymap
-} from "@codemirror/language"
-import {
- defaultKeymap,
- historyKeymap,
- history,
-} from "@codemirror/commands"
-import {
- searchKeymap,
- highlightSelectionMatches
-} from "@codemirror/search"
-import {
- autocompletion,
- completionKeymap,
- closeBrackets,
- closeBracketsKeymap
-} from "@codemirror/autocomplete"
-import {
- lintKeymap
-} from "@codemirror/lint"
-
-import { materialDark } from "./themes/materialDark"
+ autocompletion,
+ completionKeymap,
+ closeBrackets,
+ closeBracketsKeymap,
+} from "@codemirror/autocomplete";
+import { lintKeymap } from "@codemirror/lint";
// (The superfluous function calls around the list of extensions work
// around current limitations in tree-shaking software.)
@@ -82,31 +68,30 @@ import { materialDark } from "./themes/materialDark"
/// as desired.
export const editorSetup: Extension = (() => [
- materialDark,
- lineNumbers(),
- javascript(),
- highlightActiveLineGutter(),
- highlightSpecialChars(),
- history(),
- // foldGutter(),
- drawSelection(),
- dropCursor(),
- EditorState.allowMultipleSelections.of(true),
- indentOnInput(),
- syntaxHighlighting(defaultHighlightStyle, {fallback: true}),
- bracketMatching(),
- closeBrackets(),
- autocompletion(),
- rectangularSelection(),
- crosshairCursor(),
- highlightActiveLine(),
- highlightSelectionMatches(),
- keymap.of([
- ...closeBracketsKeymap,
- ...defaultKeymap,
- ...historyKeymap,
- ...foldKeymap,
- ...completionKeymap,
- ...lintKeymap
- ])
-])()
\ No newline at end of file
+ lineNumbers(),
+ javascript(),
+ highlightActiveLineGutter(),
+ highlightSpecialChars(),
+ history(),
+ // foldGutter(),
+ drawSelection(),
+ dropCursor(),
+ EditorState.allowMultipleSelections.of(true),
+ indentOnInput(),
+ syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
+ bracketMatching(),
+ closeBrackets(),
+ autocompletion(),
+ rectangularSelection(),
+ crosshairCursor(),
+ highlightActiveLine(),
+ highlightSelectionMatches(),
+ keymap.of([
+ ...closeBracketsKeymap,
+ ...defaultKeymap,
+ ...historyKeymap,
+ ...foldKeymap,
+ ...completionKeymap,
+ ...lintKeymap,
+ ]),
+])();
diff --git a/src/main.ts b/src/main.ts
index c10cd01..08392fe 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -21,6 +21,15 @@ import {
template_universes,
} from "./AppSettings";
import { tryEvaluate } from "./Evaluator";
+import { materialDark } from "./themes/materialDark";
+import { oneDark } from "@codemirror/theme-one-dark";
+
+export const fontSizeModif = EditorView.theme(
+ {
+ "&": { fontSize: "22px", }
+ }
+)
+
export class Editor {
// Data structures for editor text management
@@ -114,7 +123,9 @@ export class Editor {
this.userPlugins = this.settings.vimMode ? [] : [vim()];
this.editorExtensions = [
+ fontSizeModif,
editorSetup,
+ oneDark,
rangeHighlighting(),
javascript(),
EditorView.updateListener.of((v: ViewUpdate) => {
diff --git a/yarn.lock b/yarn.lock
index 6ede25a..f5a173f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -82,6 +82,16 @@
resolved "https://registry.yarnpkg.com/@codemirror/state/-/state-6.2.1.tgz#6dc8d8e5abb26b875e3164191872d69a5e85bd73"
integrity sha512-RupHSZ8+OjNT38zU9fKH2sv+Dnlr8Eb8sl4NOnnqz95mCFTZUaiRP8Xv5MeeaG0px2b8Bnfe7YGwCV3nsBhbuw==
+"@codemirror/theme-one-dark@^6.1.2":
+ version "6.1.2"
+ resolved "https://registry.yarnpkg.com/@codemirror/theme-one-dark/-/theme-one-dark-6.1.2.tgz#fcef9f9cfc17a07836cb7da17c9f6d7231064df8"
+ integrity sha512-F+sH0X16j/qFLMAfbciKTxVOwkdAS336b7AXTKOZhy8BR3eH/RelsnLgLFINrpST63mmN2OuwUt0W2ndUgYwUA==
+ dependencies:
+ "@codemirror/language" "^6.0.0"
+ "@codemirror/state" "^6.0.0"
+ "@codemirror/view" "^6.0.0"
+ "@lezer/highlight" "^1.0.0"
+
"@codemirror/view@^6.0.0", "@codemirror/view@^6.6.0":
version "6.15.3"
resolved "https://registry.yarnpkg.com/@codemirror/view/-/view-6.15.3.tgz#b26dac3e1812821daa6da25f59ffb26c9b9b75f3"