diff --git a/package-lock.json b/package-lock.json index ed5e6c0..be543c8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,7 +12,7 @@ "@ptkdev/logger": "^1.8.0", "eruda": "^3.0.1", "filer": "^1.4.1", - "prism-code-editor": "^1.2.2", + "prism-code-editor": "^2.0.1", "prismjs": "^1.29.0", "uuid": "^9.0.1" }, @@ -739,9 +739,9 @@ } }, "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", @@ -4767,11 +4767,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" + "@types/prismjs": "^1.26.2" } }, "node_modules/prismjs": { diff --git a/package.json b/package.json index 0530eb4..8093938 100644 --- a/package.json +++ b/package.json @@ -27,7 +27,7 @@ "@ptkdev/logger": "^1.8.0", "eruda": "^3.0.1", "filer": "^1.4.1", - "prism-code-editor": "^1.2.2", + "prism-code-editor": "^2.0.1", "prismjs": "^1.29.0", "uuid": "^9.0.1" } diff --git a/src/apps/editor.ts b/src/apps/editor.ts index 334198a..9e50a4b 100644 --- a/src/apps/editor.ts +++ b/src/apps/editor.ts @@ -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' @@ -193,8 +189,7 @@ export default class EditorApp implements App { const value = (await window.fs.promises.readFile(data.path)).toString() const editor = fullEditor( - Prism, - win.content.querySelector('.editor'), + win.content.querySelector('.editor')!, { language, theme: 'github-dark', @@ -204,7 +199,7 @@ export default class EditorApp implements App { const style = document.createElement('style') style.innerHTML = ` - .prism-editor { + .prism-code-editor { border-radius: 10px 10px 0 0; caret-color: var(--text); font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; @@ -237,7 +232,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)