RevelaNetwork/RevelaOS
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #35 from FIameCaster/master

Browse source 
[⬆️] Migrate to prism-code-editor 2.0.1
This commit is contained in:
ThinLiquid 2023-10-23 15:37:21 +01:00 • committed by GitHub
commit 446f6fe58d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 57 additions and 123 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
package-lock.json generated
View file

@ -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",

4
package.json
View file

@ -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"
}
}

117
src/apps/editor.ts
View file

@ -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
View file

@ -1,5 +0,0 @@
declare module '*.png' {
const image: string
export = image
}
declare module '*.json'

6
src/plugins/apps.ts
View file

@ -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
View file

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

7
tsconfig.json
View file

@ -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"]
}
}