Merge pull request #36 from Flow-Works:master
Merge 'master' into thin-dev-branch
This commit is contained in:
commit
ae33c4ba28
8 changed files with 58 additions and 124 deletions
|
|
@ -4,7 +4,7 @@
|
|||
# FlowOS Next
|
||||
|
||||
<img src="https://cdn.rawgit.com/standard/standard/master/badge.svg" height="50">
|
||||
<img src="./src/assets/badge.png" height="50">
|
||||
<a href="https://discord.gg/axUqK8CN2n"><img src="./src/assets/badge.png" height="50"></a><br/>
|
||||
|
||||
<img src="https://img.shields.io/github/stars/flow-works/flowos-2.0?style=for-the-badge" />
|
||||
<img src="https://img.shields.io/github/issues-pr/flow-works/flowos-2.0?style=for-the-badge" />
|
||||
|
|
|
|||
38
package-lock.json
generated
38
package-lock.json
generated
|
|
@ -12,11 +12,11 @@
|
|||
"@ptkdev/logger": "^1.8.0",
|
||||
"eruda": "^3.0.1",
|
||||
"filer": "^1.4.1",
|
||||
"prism-code-editor": "^1.2.2",
|
||||
"prismjs": "^1.29.0",
|
||||
"prism-code-editor": "^2.0.1",
|
||||
"uuid": "^9.0.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^20.8.7",
|
||||
"@types/uuid": "^9.0.5",
|
||||
"@types/web": "^0.0.117",
|
||||
"ts-standard": "^12.0.2",
|
||||
|
|
@ -729,20 +729,18 @@
|
|||
"dev": true
|
||||
},
|
||||
"node_modules/@types/node": {
|
||||
"version": "20.8.4",
|
||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-20.8.4.tgz",
|
||||
"integrity": "sha512-ZVPnqU58giiCjSxjVUESDtdPk4QR5WQhhINbc9UBrKLU68MX5BF6kbQzTrkwbolyr0X8ChBpXfavr5mZFKZQ5A==",
|
||||
"version": "20.8.7",
|
||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-20.8.7.tgz",
|
||||
"integrity": "sha512-21TKHHh3eUHIi2MloeptJWALuCu5H7HQTdTrWIFReA8ad+aggoX+lRes3ex7/FtpC+sVUpFMQ+QTfYr74mruiQ==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"undici-types": "~5.25.1"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/prismjs": {
|
||||
"version": "1.26.1",
|
||||
"resolved": "https://registry.npmjs.org/@types/prismjs/-/prismjs-1.26.1.tgz",
|
||||
"integrity": "sha512-Q7jDsRbzcNHIQje15CS/piKhu6lMLb9jwjxSfEIi4KcFKXW23GoJMkwQiJ8VObyfx+VmUaDcJxXaWN+cTCjVog=="
|
||||
"version": "1.26.2",
|
||||
"resolved": "https://registry.npmjs.org/@types/prismjs/-/prismjs-1.26.2.tgz",
|
||||
"integrity": "sha512-/r7Cp7iUIk7gts26mHXD66geUC+2Fo26TZYjQK6Nr4LDfi6lmdRmMqM0oPwfiMhUwoBAOFe8GstKi2pf6hZvwA=="
|
||||
},
|
||||
"node_modules/@types/semver": {
|
||||
"version": "7.5.3",
|
||||
|
|
@ -4768,19 +4766,11 @@
|
|||
}
|
||||
},
|
||||
"node_modules/prism-code-editor": {
|
||||
"version": "1.2.2",
|
||||
"resolved": "https://registry.npmjs.org/prism-code-editor/-/prism-code-editor-1.2.2.tgz",
|
||||
"integrity": "sha512-jmVlSNCp40BWauhzjv3GGFmXVaZkXcuVa7G/5RWV+iSPAugYfL1gQlOkXxC+E2gd/Z3/wbQIEr5RC1kyoohqlg==",
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/prism-code-editor/-/prism-code-editor-2.0.1.tgz",
|
||||
"integrity": "sha512-93APxLnz6ow6TU8Mw2MC16d/Xb4k2FdjfrzIqb1finFPB/X4ejQyngEF1NkHKpggrIvR33QodW638KeN/gXEfA==",
|
||||
"dependencies": {
|
||||
"@types/prismjs": "^1.26.0"
|
||||
}
|
||||
},
|
||||
"node_modules/prismjs": {
|
||||
"version": "1.29.0",
|
||||
"resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.29.0.tgz",
|
||||
"integrity": "sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==",
|
||||
"engines": {
|
||||
"node": ">=6"
|
||||
"@types/prismjs": "^1.26.2"
|
||||
}
|
||||
},
|
||||
"node_modules/process": {
|
||||
|
|
@ -5807,9 +5797,7 @@
|
|||
"version": "5.25.3",
|
||||
"resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.25.3.tgz",
|
||||
"integrity": "sha512-Ga1jfYwRn7+cP9v8auvEXN1rX3sWqlayd4HP7OKk4mZWylEmu3KzXDUGrQUN6Ol7qo1gPvB2e5gX6udnyEPgdA==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"peer": true
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/universalify": {
|
||||
"version": "2.0.0",
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@
|
|||
"author": "",
|
||||
"license": "MIT",
|
||||
"devDependencies": {
|
||||
"@types/node": "^20.8.7",
|
||||
"@types/uuid": "^9.0.5",
|
||||
"@types/web": "^0.0.117",
|
||||
"ts-standard": "^12.0.2",
|
||||
|
|
@ -26,8 +27,7 @@
|
|||
"@ptkdev/logger": "^1.8.0",
|
||||
"eruda": "^3.0.1",
|
||||
"filer": "^1.4.1",
|
||||
"prism-code-editor": "^1.2.2",
|
||||
"prismjs": "^1.29.0",
|
||||
"prism-code-editor": "^2.0.1",
|
||||
"uuid": "^9.0.1"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,15 +2,11 @@ import icon from '../assets/icons/editor.png'
|
|||
import { App } from '../types.ts'
|
||||
|
||||
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-clike.js'
|
||||
import 'prismjs/components/prism-javascript.js'
|
||||
import 'prismjs/components/prism-typescript.js'
|
||||
import 'prismjs/components/prism-jsx.js'
|
||||
import 'prismjs/components/prism-tsx.js'
|
||||
import 'prism-code-editor/languages'
|
||||
import 'prism-code-editor/prism-markdown'
|
||||
// this will also import markup, clike, javascript, typescript and jsx
|
||||
import 'prism-code-editor/grammars/tsx'
|
||||
import 'prism-code-editor/grammars/css-extras'
|
||||
import 'prism-code-editor/grammars/markdown'
|
||||
import 'prism-code-editor/grammars/python'
|
||||
|
||||
import { FlowWindow } from '../wm.ts'
|
||||
|
||||
|
|
@ -18,6 +14,26 @@ interface EditorConfig {
|
|||
path: string
|
||||
}
|
||||
|
||||
const fileLanguageMap: {
|
||||
[key: string]: string
|
||||
} = {
|
||||
c: 'clike',
|
||||
cpp: 'clike',
|
||||
java: 'clike',
|
||||
cs: 'clike',
|
||||
ts: 'typescript',
|
||||
js: 'javascript',
|
||||
mjs: 'javascript',
|
||||
cjs: 'javascript',
|
||||
jsx: 'jsx',
|
||||
tsx: 'tsx',
|
||||
html: 'html',
|
||||
md: 'markdown',
|
||||
css: 'css',
|
||||
xml: 'xml',
|
||||
py: 'python'
|
||||
}
|
||||
|
||||
export default class EditorApp implements App {
|
||||
meta = {
|
||||
name: 'Editor',
|
||||
|
|
@ -58,7 +74,7 @@ export default class EditorApp implements App {
|
|||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="editor" style="flex:1;"></div>
|
||||
<div class="editor" style="flex:1;display:grid;overflow:scroll;"></div>
|
||||
<style>
|
||||
.dropdown {
|
||||
position: absolute;
|
||||
|
|
@ -127,74 +143,12 @@ export default class EditorApp implements App {
|
|||
}
|
||||
})
|
||||
|
||||
let language
|
||||
|
||||
switch (data.path.split('.').at(-1)?.toLowerCase()) {
|
||||
case 'c':
|
||||
case 'cs':
|
||||
case 'cpp':
|
||||
case 'java': {
|
||||
language = 'clike'
|
||||
break
|
||||
}
|
||||
|
||||
case 'ts': {
|
||||
language = 'typescript'
|
||||
break
|
||||
}
|
||||
|
||||
case 'js':
|
||||
case 'mjs':
|
||||
case 'cjs': {
|
||||
language = 'javascript'
|
||||
break
|
||||
}
|
||||
|
||||
case 'jsx': {
|
||||
language = 'jsx'
|
||||
break
|
||||
}
|
||||
|
||||
case 'tsx': {
|
||||
language = 'tsx'
|
||||
break
|
||||
}
|
||||
|
||||
case 'html': {
|
||||
language = 'html'
|
||||
break
|
||||
}
|
||||
|
||||
case 'md': {
|
||||
language = 'md'
|
||||
break
|
||||
}
|
||||
|
||||
case 'css': {
|
||||
language = 'css'
|
||||
break
|
||||
}
|
||||
|
||||
case 'xml': {
|
||||
language = 'xml'
|
||||
break
|
||||
}
|
||||
|
||||
case 'py': {
|
||||
language = 'python'
|
||||
break
|
||||
}
|
||||
|
||||
default: {
|
||||
language = 'text'
|
||||
break
|
||||
}
|
||||
}
|
||||
const fileExtension = data.path.split('.').pop()?.toLowerCase() as string
|
||||
const language = fileLanguageMap[fileExtension] ?? 'text'
|
||||
|
||||
const value = (await window.fs.promises.readFile(data.path)).toString()
|
||||
const editor = fullEditor(
|
||||
Prism,
|
||||
win.content.querySelector('.editor'),
|
||||
win.content.querySelector('.editor') as HTMLElement,
|
||||
{
|
||||
language,
|
||||
theme: 'github-dark',
|
||||
|
|
@ -203,11 +157,11 @@ export default class EditorApp implements App {
|
|||
)
|
||||
|
||||
const style = document.createElement('style')
|
||||
style.innerHTML = `
|
||||
.prism-editor {
|
||||
style.textContent = `
|
||||
.prism-code-editor {
|
||||
border-radius: 10px 10px 0 0;
|
||||
caret-color: var(--text);
|
||||
font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
|
||||
font-weight: 400;
|
||||
--editor__bg: var(--base);
|
||||
--widget__border: var(--mantle);
|
||||
--widget__bg: var(--crust);
|
||||
|
|
@ -225,11 +179,8 @@ export default class EditorApp implements App {
|
|||
--editor__bg-selection-match: var(--surface-1)40;
|
||||
--editor__line-number: #636e7b;
|
||||
--editor__line-number-active: #adbac7;
|
||||
--editor__bg-scrollbar: 210, 10%, 35%;
|
||||
--editor__bg-fold: #768390;
|
||||
--bg-guide-indent: var(--surface-0);
|
||||
color-scheme: dark;
|
||||
height: 100%;
|
||||
overflow: visible;
|
||||
}
|
||||
.prism-search * {
|
||||
font-family: 'Satoshi', sans-serif;
|
||||
|
|
@ -237,7 +188,7 @@ export default class EditorApp implements App {
|
|||
`
|
||||
editor.scrollContainer.appendChild(style);
|
||||
(win.content.querySelector('#find') as HTMLElement).onclick = () => {
|
||||
editor.extensions.searchWidget.open()
|
||||
editor.extensions.searchWidget?.open()
|
||||
}
|
||||
(win.content.querySelector('#save') as HTMLElement).onclick = async () => {
|
||||
await window.fs.promises.writeFile(data.path, editor.value)
|
||||
|
|
|
|||
5
src/files.d.ts
vendored
5
src/files.d.ts
vendored
|
|
@ -1,5 +0,0 @@
|
|||
declare module '*.png' {
|
||||
const image: string
|
||||
export = image
|
||||
}
|
||||
declare module '*.json'
|
||||
|
|
@ -12,7 +12,7 @@ export const run = (element: HTMLDivElement): void => {
|
|||
element.style.alignItems = 'center'
|
||||
element.style.gap = '5px'
|
||||
element.style.flex = '1'
|
||||
// @ts-expect-error
|
||||
|
||||
window.addEventListener('app_opened', (e: AppOpenedEvent): void => {
|
||||
const appIcon = document.createElement('app')
|
||||
const app = e.detail.app
|
||||
|
|
@ -20,7 +20,7 @@ export const run = (element: HTMLDivElement): void => {
|
|||
appIcon.style.background = 'var(--surface-0)'
|
||||
appIcon.style.padding = '5px 7.5px'
|
||||
appIcon.style.borderRadius = '5px'
|
||||
appIcon.innerHTML = `<img data-id="${win.id}" src="${app.meta.id as string}"/> ${app.meta.name}`
|
||||
appIcon.innerHTML = `<img data-id="${win.id}" src="${app.meta.icon}"/> ${app.meta.name}`
|
||||
appIcon.onclick = async () => {
|
||||
const win = await e.detail.win
|
||||
win.focus()
|
||||
|
|
@ -28,7 +28,7 @@ export const run = (element: HTMLDivElement): void => {
|
|||
}
|
||||
element.appendChild(appIcon)
|
||||
})
|
||||
// @ts-expect-error
|
||||
|
||||
window.addEventListener('app_closed', (e: AppClosedEvent): void => {
|
||||
const win = e.detail.win
|
||||
element.querySelector(`img[data-id="${win.id}"]`)?.parentElement?.remove()
|
||||
|
|
|
|||
3
src/prism-code-editor.d.ts
vendored
3
src/prism-code-editor.d.ts
vendored
|
|
@ -1,3 +0,0 @@
|
|||
declare module 'prism-code-editor';
|
||||
declare module 'prism-code-editor/setups';
|
||||
declare module 'prism-code-editor/prism-core';
|
||||
|
|
@ -9,11 +9,14 @@
|
|||
"jsx": "react",
|
||||
"jsxFactory": "h",
|
||||
"allowJs": true,
|
||||
"moduleResolution": "node",
|
||||
"moduleResolution": "bundler",
|
||||
"esModuleInterop": true,
|
||||
"declaration": true,
|
||||
"emitDeclarationOnly": true,
|
||||
"allowImportingTsExtensions": true,
|
||||
"strictNullChecks": true
|
||||
"strictNullChecks": true,
|
||||
"skipLibCheck": true,
|
||||
"isolatedModules": true,
|
||||
"types": ["vite/client", "node"]
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue