BuboBubo/topos
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Font Size

Browse Source
This commit is contained in:
Raphaël Forment
2023-07-29 10:30:46 +02:00
parent b2dc465bcb
commit fd20db2dc8
5 changed files with 81 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
index.html
View File

@ -64,6 +64,7 @@
<div id="app"> <div id="app">
<!-- This modal is used for switching between buffers -->
<div id="modal-buffers" class="invisible bg-neutral-900 bg-opacity-50 flex justify-center items-center absolute top-0 right-0 bottom-0 left-0"> <div id="modal-buffers" class="invisible bg-neutral-900 bg-opacity-50 flex justify-center items-center absolute top-0 right-0 bottom-0 left-0">
<div id="start-button" class="px-16 py-14 rounded-md text-center"> <div id="start-button" class="px-16 py-14 rounded-md text-center">
<div id="disclaimer" class="pb-4"> <div id="disclaimer" class="pb-4">
@ -83,6 +84,7 @@
</div> </div>
</div> </div>
<!-- This modal pops up when the page is first loaded and then disappears forever -->
<div id="modal-container" class="motion-safe:animate-pulse flex min-h-screen flex flex-col"> <div id="modal-container" class="motion-safe:animate-pulse flex min-h-screen flex flex-col">
<div id="modal" class="bg-neutral-900 bg-opacity-50 flex justify-center items-center absolute top-0 right-0 bottom-0 left-0"> <div id="modal" class="bg-neutral-900 bg-opacity-50 flex justify-center items-center absolute top-0 right-0 bottom-0 left-0">
<div id="start-button" class="bg-white px-16 py-14 rounded-md text-center"> <div id="start-button" class="bg-white px-16 py-14 rounded-md text-center">
@ -94,7 +96,6 @@
<a href="https://google.fr">About</a> <a href="https://google.fr">About</a>
</div> </div>
<div id="disclaimer" class="pb-4"> <div id="disclaimer" class="pb-4">
<p>This is Topos, an experimental live coding platform.</p> <p>This is Topos, an experimental live coding platform.</p>
<p>Switch to the <b>Help</b> (<b>Ctrl+b</b>) universe for a tutorial!</p> <p>Switch to the <b>Help</b> (<b>Ctrl+b</b>) universe for a tutorial!</p>
<p>Have fun, press <b>Enter/Space</b> to get started!</p> <p>Have fun, press <b>Enter/Space</b> to get started!</p>
@ -152,13 +153,15 @@
</svg> </svg>
</a> </a>
<a id="settings-button" class="p-2 text-gray-700 ml-1 absolute bottom-2 focus:outline-nones transition-colors duration-200 rounded-lg dark:text-gray-200 dark:bg-gray-800 bg-gray-100"> <a id="settings-button" data-modal-show="settingsModal" class="p-2 text-gray-700 ml-1 absolute bottom-2 focus:outline-nones transition-colors duration-200 rounded-lg dark:text-gray-200 dark:bg-gray-800 bg-gray-100">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M10.343 3.94c.09-.542.56-.94 1.11-.94h1.093c.55 0 1.02.398 1.11.94l.149.894c.07.424.384.764.78.93.398.164.855.142 1.205-.108l.737-.527a1.125 1.125 0 011.45.12l.773.774c.39.389.44 1.002.12 1.45l-.527.737c-.25.35-.272.806-.107 1.204.165.397.505.71.93.78l.893.15c.543.09.94.56.94 1.109v1.094c0 .55-.397 1.02-.94 1.11l-.893.149c-.425.07-.765.383-.93.78-.165.398-.143.854.107 1.204l.527.738c.32.447.269 1.06-.12 1.45l-.774.773a1.125 1.125 0 01-1.449.12l-.738-.527c-.35-.25-.806-.272-1.203-.107-.397.165-.71.505-.781.929l-.149.894c-.09.542-.56.94-1.11.94h-1.094c-.55 0-1.019-.398-1.11-.94l-.148-.894c-.071-.424-.384-.764-.781-.93-.398-.164-.854-.142-1.204.108l-.738.527c-.447.32-1.06.269-1.45-.12l-.773-.774a1.125 1.125 0 01-.12-1.45l.527-.737c.25-.35.273-.806.108-1.204-.165-.397-.505-.71-.93-.78l-.894-.15c-.542-.09-.94-.56-.94-1.109v-1.094c0-.55.398-1.02.94-1.11l.894-.149c.424-.07.765-.383.93-.78.165-.398.143-.854-.107-1.204l-.527-.738a1.125 1.125 0 01.12-1.45l.773-.773a1.125 1.125 0 011.45-.12l.737.527c.35.25.807.272 1.204.107.397-.165.71-.505.78-.929l.15-.894z" /> <path stroke-linecap="round" stroke-linejoin="round" d="M10.343 3.94c.09-.542.56-.94 1.11-.94h1.093c.55 0 1.02.398 1.11.94l.149.894c.07.424.384.764.78.93.398.164.855.142 1.205-.108l.737-.527a1.125 1.125 0 011.45.12l.773.774c.39.389.44 1.002.12 1.45l-.527.737c-.25.35-.272.806-.107 1.204.165.397.505.71.93.78l.893.15c.543.09.94.56.94 1.109v1.094c0 .55-.397 1.02-.94 1.11l-.893.149c-.425.07-.765.383-.93.78-.165.398-.143.854.107 1.204l.527.738c.32.447.269 1.06-.12 1.45l-.774.773a1.125 1.125 0 01-1.449.12l-.738-.527c-.35-.25-.806-.272-1.203-.107-.397.165-.71.505-.781.929l-.149.894c-.09.542-.56.94-1.11.94h-1.094c-.55 0-1.019-.398-1.11-.94l-.148-.894c-.071-.424-.384-.764-.781-.93-.398-.164-.854-.142-1.204.108l-.738.527c-.447.32-1.06.269-1.45-.12l-.773-.774a1.125 1.125 0 01-.12-1.45l.527-.737c.25-.35.273-.806.108-1.204-.165-.397-.505-.71-.93-.78l-.894-.15c-.542-.09-.94-.56-.94-1.109v-1.094c0-.55.398-1.02.94-1.11l.894-.149c.424-.07.765-.383.93-.78.165-.398.143-.854-.107-1.204l-.527-.738a1.125 1.125 0 01.12-1.45l.773-.773a1.125 1.125 0 011.45-.12l.737.527c.35.25.807.272 1.204.107.397-.165.71-.505.78-.929l.15-.894z" />
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /> <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
</svg> </svg>
</a> </a>
</aside> </aside>
<!-- Tabs for local files -->
<div class="min-w-screen flex grow flex-col"> <div class="min-w-screen flex grow flex-col">
<ul id="local-script-tabs" class="text-xl flex text-sm font-medium text-center text-white dark:text-white bg-neutral-900 space-x-2 lg:space-x-8"> <ul id="local-script-tabs" class="text-xl flex text-sm font-medium text-center text-white dark:text-white bg-neutral-900 space-x-2 lg:space-x-8">
<li class="pl-5"> <li class="pl-5">
@ -190,6 +193,7 @@
</li> </li>
</ul> </ul>
<!-- Here comes the editor itself -->
<div id="editor" class="invisible relative flex flex-row flex-grow w-100 overflow-hidden overflow-y-hidden"> <div id="editor" class="invisible relative flex flex-row flex-grow w-100 overflow-hidden overflow-y-hidden">
</div> </div>
</div> </div>

1
package.json
View File

@ -14,6 +14,7 @@
}, },
"dependencies": { "dependencies": {
"@codemirror/lang-javascript": "^6.1.9", "@codemirror/lang-javascript": "^6.1.9",
"@codemirror/theme-one-dark": "^6.1.2",
"@replit/codemirror-vim": "^6.0.14", "@replit/codemirror-vim": "^6.0.14",
"autoprefixer": "^10.4.14", "autoprefixer": "^10.4.14",
"codemirror": "^6.0.1", "codemirror": "^6.0.1",

121
src/EditorSetup.ts
View File

@ -1,46 +1,32 @@
import { javascript } from "@codemirror/lang-javascript" import { javascript } from "@codemirror/lang-javascript";
import { import {
keymap, keymap,
highlightSpecialChars, highlightSpecialChars,
drawSelection, drawSelection,
highlightActiveLine, highlightActiveLine,
dropCursor, dropCursor,
rectangularSelection, rectangularSelection,
lineNumbers, lineNumbers,
crosshairCursor, crosshairCursor,
highlightActiveLineGutter highlightActiveLineGutter,
} from "@codemirror/view" } from "@codemirror/view";
import { Extension, EditorState } from "@codemirror/state";
import { import {
Extension, defaultHighlightStyle,
EditorState syntaxHighlighting,
} from "@codemirror/state" indentOnInput,
bracketMatching,
foldKeymap,
} from "@codemirror/language";
import { defaultKeymap, historyKeymap, history } from "@codemirror/commands";
import { searchKeymap, highlightSelectionMatches } from "@codemirror/search";
import { import {
defaultHighlightStyle, autocompletion,
syntaxHighlighting, completionKeymap,
indentOnInput, closeBrackets,
bracketMatching, closeBracketsKeymap,
foldKeymap } from "@codemirror/autocomplete";
} from "@codemirror/language" import { lintKeymap } from "@codemirror/lint";
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"
// (The superfluous function calls around the list of extensions work // (The superfluous function calls around the list of extensions work
// around current limitations in tree-shaking software.) // around current limitations in tree-shaking software.)
@ -82,31 +68,30 @@ import { materialDark } from "./themes/materialDark"
/// as desired. /// as desired.
export const editorSetup: Extension = (() => [ export const editorSetup: Extension = (() => [
materialDark, lineNumbers(),
lineNumbers(), javascript(),
javascript(), highlightActiveLineGutter(),
highlightActiveLineGutter(), highlightSpecialChars(),
highlightSpecialChars(), history(),
history(), // foldGutter(),
// foldGutter(), drawSelection(),
drawSelection(), dropCursor(),
dropCursor(), EditorState.allowMultipleSelections.of(true),
EditorState.allowMultipleSelections.of(true), indentOnInput(),
indentOnInput(), syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
syntaxHighlighting(defaultHighlightStyle, {fallback: true}), bracketMatching(),
bracketMatching(), closeBrackets(),
closeBrackets(), autocompletion(),
autocompletion(), rectangularSelection(),
rectangularSelection(), crosshairCursor(),
crosshairCursor(), highlightActiveLine(),
highlightActiveLine(), highlightSelectionMatches(),
highlightSelectionMatches(), keymap.of([
keymap.of([ ...closeBracketsKeymap,
...closeBracketsKeymap, ...defaultKeymap,
...defaultKeymap, ...historyKeymap,
...historyKeymap, ...foldKeymap,
...foldKeymap, ...completionKeymap,
...completionKeymap, ...lintKeymap,
...lintKeymap ]),
]) ])();
])()

11
src/main.ts
View File

@ -21,6 +21,15 @@ import {
template_universes, template_universes,
} from "./AppSettings"; } from "./AppSettings";
import { tryEvaluate } from "./Evaluator"; 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 { export class Editor {
// Data structures for editor text management // Data structures for editor text management
@ -114,7 +123,9 @@ export class Editor {
this.userPlugins = this.settings.vimMode ? [] : [vim()]; this.userPlugins = this.settings.vimMode ? [] : [vim()];
this.editorExtensions = [ this.editorExtensions = [
fontSizeModif,
editorSetup, editorSetup,
oneDark,
rangeHighlighting(), rangeHighlighting(),
javascript(), javascript(),
EditorView.updateListener.of((v: ViewUpdate) => { EditorView.updateListener.of((v: ViewUpdate) => {

10
yarn.lock
View File

@ -82,6 +82,16 @@
resolved "https://registry.yarnpkg.com/@codemirror/state/-/state-6.2.1.tgz#6dc8d8e5abb26b875e3164191872d69a5e85bd73" resolved "https://registry.yarnpkg.com/@codemirror/state/-/state-6.2.1.tgz#6dc8d8e5abb26b875e3164191872d69a5e85bd73"
integrity sha512-RupHSZ8+OjNT38zU9fKH2sv+Dnlr8Eb8sl4NOnnqz95mCFTZUaiRP8Xv5MeeaG0px2b8Bnfe7YGwCV3nsBhbuw== 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": "@codemirror/view@^6.0.0", "@codemirror/view@^6.6.0":
version "6.15.3" version "6.15.3"
resolved "https://registry.yarnpkg.com/@codemirror/view/-/view-6.15.3.tgz#b26dac3e1812821daa6da25f59ffb26c9b9b75f3" resolved "https://registry.yarnpkg.com/@codemirror/view/-/view-6.15.3.tgz#b26dac3e1812821daa6da25f59ffb26c9b9b75f3"