diff --git a/src/app/editor.ts b/src/app/editor.ts index 860cfc8..6fdcb73 100644 --- a/src/app/editor.ts +++ b/src/app/editor.ts @@ -1,10 +1,26 @@ -import { Transaction } from "@codemirror/state"; -import { EditorView, keymap } from "@codemirror/view"; +import { Transaction, StateEffect } from "@codemirror/state"; +import { + EditorView, + keymap, + lineNumbers, + highlightSpecialChars, + highlightActiveLine, + highlightActiveLineGutter, + drawSelection, + dropCursor, + rectangularSelection, + crosshairCursor, +} from "@codemirror/view"; import { defaultKeymap, undo, redo } from "@codemirror/commands"; import { oneDark } from "@codemirror/theme-one-dark"; -import { LanguageDescription } from "@codemirror/language"; +import { + LanguageDescription, + foldGutter, + indentOnInput, + bracketMatching, +} from "@codemirror/language"; import { languages } from "@codemirror/language-data"; -import { StateEffect } from "@codemirror/state"; +import { highlightSelectionMatches, searchKeymap } from "@codemirror/search"; import { OpenFile } from "./filestate"; @@ -44,6 +60,7 @@ export class Editor { this.file = file; const kmap = keymap.of([ ...defaultKeymap, + ...searchKeymap, { key: "Mod-z", run: () => undo(file.target) }, { key: "Mod-shift-z", run: () => redo(file.target) }, ]); @@ -55,13 +72,33 @@ export class Editor { fixedHeightEditor, kmap, EditorView.lineWrapping, + lineNumbers(), + highlightSpecialChars(), + foldGutter(), + drawSelection(), + dropCursor(), + // allowMultipleSelections, + indentOnInput(), + bracketMatching(), + // closeBrackets, + // autocompletion, + rectangularSelection(), + crosshairCursor(), + highlightActiveLine(), + highlightActiveLineGutter(), + highlightSelectionMatches(), + // lintKeymap, ], }); - const language = LanguageDescription.matchFilename(languages, file.filePath)?.load().then((Lang) => { - let eff = StateEffect.appendConfig.of(Lang); - let tr = this.view.dispatch({effects: [eff]}); - }); - + const language = LanguageDescription.matchFilename( + languages, + file.filePath, + ) + ?.load() + .then((Lang) => { + let eff = StateEffect.appendConfig.of(Lang); + let tr = this.view.dispatch({ effects: [eff] }); + }); } get dom() { diff --git a/src/app/foldernav.ts b/src/app/foldernav.ts index c120d57..98e584e 100644 --- a/src/app/foldernav.ts +++ b/src/app/foldernav.ts @@ -43,6 +43,7 @@ const FsItemView = (tree: FolderTree): HTMLElement => { if (tree.type === "file") return v.p( { + class: "cursor-pointer hover:bg-gray-100", onclick: async () => addEditor(await OpenFile.openFile(tree.path)), }, @@ -55,13 +56,16 @@ const FsItemView = (tree: FolderTree): HTMLElement => { ? v.ul({}, tree.children?.map(FsItemView)) : v.div({ ariaBusy: true }); const folder = v.details( - { class: "inline", ontoggle: () => (isOpen.val = folder.open) }, + { + class: "flex-auto inline", + ontoggle: () => (isOpen.val = folder.open), + }, v.summary(tree.name), children, ); return v.div( - { class: "flex" }, + { class: "cursor-pointer flex hover:bg-gray-100" }, v.span(() => (isOpen.val ? "📂" : "📁")), folder, ); diff --git a/src/main/main.ts b/src/main/main.ts index 43df5b4..ab2424d 100644 --- a/src/main/main.ts +++ b/src/main/main.ts @@ -18,8 +18,8 @@ if (started) { const createWindow = () => { // Create the browser window. const mainWindow = new BrowserWindow({ - width: 800, - height: 600, + width: 1152, + height: 720, webPreferences: { preload: path.join(__dirname, "preload.js"), },