forked from jan/psslides
2282b13325
Less now lives in <style> tags alongside the slide HTML, so there is one editor buffer and no separate stylesheet tab. - compile.ts extracts every <style> tag in the deck (global slide first, then each slide in order) into one project stylesheet, strips the raw tags from the markup so uncompiled Less never reaches the DOM, and compiles that source once per slide with :thisSlide resolving to the slide being compiled. - editor.ts is back to a single buffer; the CSS/LESS workers still highlight, validate and complete the Less inside the tag. - thumbnails render markup with style tags removed, exactly like the presentation does.
36 lines
1.2 KiB
TypeScript
36 lines
1.2 KiB
TypeScript
import * as monaco from 'monaco-editor'
|
|
import { emmetCSS, emmetHTML } from 'emmet-monaco-es'
|
|
import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
|
|
import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker'
|
|
import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker'
|
|
|
|
emmetHTML(monaco, ['html'])
|
|
emmetCSS(monaco, ['css', 'scss', 'less'])
|
|
|
|
self.MonacoEnvironment = {
|
|
getWorker(_, label) {
|
|
if (label === 'css' || label === 'scss' || label === 'less') {
|
|
return new cssWorker()
|
|
}
|
|
if (label === 'html' || label === 'handlebars' || label === 'razor') {
|
|
return new htmlWorker()
|
|
}
|
|
return new editorWorker()
|
|
}
|
|
}
|
|
|
|
const MONACO_PARENT = '.code'
|
|
|
|
/**
|
|
* One buffer, one model. A slide is HTML with an optional `<style>` tag and
|
|
* the Less lives inside that tag, so there is nothing to switch between. The
|
|
* CSS/LESS workers above still highlight, validate and complete that Less.
|
|
*/
|
|
export function createEditor(): monaco.editor.IStandaloneCodeEditor {
|
|
return monaco.editor.create(document.querySelector(MONACO_PARENT)!, {
|
|
value: '',
|
|
language: 'html',
|
|
theme: 'vs-dark',
|
|
automaticLayout: true
|
|
})
|
|
}
|