[✨] Switched to Prism Code Editor

src/apps/editor.ts

@@ -1,6 +1,17 @@
 import icon from '../assets/icons/editor.png';
 import { App } from "../types.ts";
-import fs from 'fs';
+
+import { fullEditor } from "prism-code-editor/setups";
+import Prism from "prism-code-editor/prism-core";
+
+import "prismjs/components/prism-markup.js";
+import "prismjs/components/prism-javascript.js";
+import "prismjs/components/prism-typescript.js";
+import "prismjs/components/prism-css.js";
+import "prismjs/components/prism-scss.js";
+import "prismjs/components/prism-less.js";
+import "prismjs/components/prism-jsx.js";
+import "prismjs/components/prism-tsx.js";
 
 interface EditorConfig {
   path: string;
@@ -15,6 +26,8 @@ export default class EditorApp implements App {
   constructor() {}
 
   async open(data?: EditorConfig) {
+    const { default: fs } = await import('fs');
+
     const win = window.wm.createWindow({
       title: this.name,
       icon: icon,
@@ -25,26 +38,15 @@ export default class EditorApp implements App {
     if (data) {
       win.setTitle('Editor - ' + data.path);
 
-      var { default: ace } = await import('brace');
+      const editor = fullEditor(
-      var editor = ace.edit(win.content);
+        Prism,
-
+        win.content,
-      if (data.path.split('.').at(-1).match(/(m|c|)(js)/)) {
+        {
-        require('brace/mode/javascript')
+          language: "html",
-        editor.getSession().setMode('ace/mode/javascript');
+          theme: "github-dark",
-      } else if (data.path.split('.').at(-1).match(/json/)) {
+        },
-        require('brace/mode/json')
+        () => console.log("ready"),
-        editor.getSession().setMode('ace/mode/json');
+      )
-      } else if (data.path.split('.').at(-1).match(/(htm)(l|)/)) {
-        require('brace/mode/html')
-        editor.getSession().setMode('ace/mode/html');
-      } else if (data.path.split('.').at(-1).match(/css/)) {
-        require('brace/mode/css')
-        editor.getSession().setMode('ace/mode/css');
-      }
-      require('brace/theme/monokai');
-      editor.setTheme('ace/theme/monokai');
-      
-      editor.setValue((await fs.promises.readFile(data.path)).toString());
     }
     
     return win;

src/apps/files.ts

@@ -1,6 +1,6 @@
 import icon from '../assets/icons/files.png';
 import { App } from "../types.ts";
-import fs from 'fs';
+
 import flow from '../flow.ts';
 
 export default class FilesApp implements App {
@@ -12,6 +12,8 @@ export default class FilesApp implements App {
   constructor() {}
 
   async open() {
+    const { default: fs } = await import('fs');
+
     const win = window.wm.createWindow({
       title: this.name,
       icon: icon,
@@ -59,7 +61,6 @@ export default class FilesApp implements App {
             element.setAttribute('style', 'padding: 5px;border-bottom: 1px solid var(--text);display:flex;align-items:center;gap: 5px;');
             
             const genIcon = () => {
-              console.log(files[file].split('.').at(-1))
               switch (files[file].split('.').at(-1)) {
                 case 'js':
                 case 'mjs':

src/modules/apps.ts

@@ -1,5 +1,3 @@
-import flow from '../flow.ts';
-import { App } from '../types.ts';
 import { FlowWindow } from '../wm.ts';
 
 export const meta = {

src/prism-code-editor.d.ts

@@ -0,0 +1,3 @@
+declare module "prism-code-editor";
+declare module "prism-code-editor/setups";
+declare module "prism-code-editor/prism-core";