diff --git a/frontend/src/lib/components/SimpleEditor.svelte b/frontend/src/lib/components/SimpleEditor.svelte index 51d06f564e..d9b0845962 100644 --- a/frontend/src/lib/components/SimpleEditor.svelte +++ b/frontend/src/lib/components/SimpleEditor.svelte @@ -30,11 +30,8 @@ // import { createConfiguredEditor } from 'vscode/monaco' // import type { IStandaloneCodeEditor } from 'vscode/vscode/vs/editor/standalone/browser/standaloneCodeEditor' - import { - configureMonacoTailwindcss, - tailwindcssData, - type TailwindConfig - } from 'monaco-tailwindcss' + import { configureMonacoTailwindcss, tailwindcssData } from 'monaco-tailwindcss' + import { allClasses } from './apps/editor/componentsPanel/cssUtils' let divEl: HTMLDivElement | null = null let editor: meditor.IStandaloneCodeEditor @@ -130,37 +127,7 @@ noLib: true }) - const tailwindConfig: TailwindConfig = { - theme: { - extend: { - screens: { - television: '90000px' - }, - spacing: { - '128': '32rem' - }, - colors: { - // https://icolorpalette.com/color/molten-lava - lava: '#b5332e', - // Taken from https://icolorpalette.com/color/ocean-blue - ocean: { - 50: '#f2fcff', - 100: '#c1f2fe', - 200: '#90e9ff', - 300: '#5fdfff', - 400: '#2ed5ff', - 500: '#00cafc', - 600: '#00a3cc', - 700: '#007c9b', - 800: '#00546a', - 900: '#002d39' - } - } - } - } - } - - configureMonacoTailwindcss(monaco, { tailwindConfig }) + configureMonacoTailwindcss(monaco, {}) monaco.languages.css.cssDefaults.setOptions({ data: { @@ -249,8 +216,39 @@ }) } - //$: lang == 'css' && initialized && addCSSClassCompletions() + $: lang == 'css' && initialized && addCSSClassCompletions() + function addCSSClassCompletions() { + languages.registerCompletionItemProvider('css', { + provideCompletionItems: function (model, position, context, token) { + const word = model.getWordUntilPosition(position) + const range = { + startLineNumber: position.lineNumber, + startColumn: word.startColumn, + endLineNumber: position.lineNumber, + endColumn: word.endColumn + } + + if (word && word.word) { + const currentWord = word.word + + const suggestions = allClasses + .filter((className) => className.includes(currentWord)) + .map((className) => ({ + label: className, + kind: languages.CompletionItemKind.Class, + insertText: className, + documentation: 'Custom CSS class', + range: range + })) + + return { suggestions } + } + + return { suggestions: [] } + } + }) + } function loadExtraLib() { if (lang == 'javascript') { const stdLib = { content: libStdContent, filePath: 'es5.d.ts' } diff --git a/frontend/src/lib/components/build_workers.ts b/frontend/src/lib/components/build_workers.ts index e424a28b31..cf25afb808 100644 --- a/frontend/src/lib/components/build_workers.ts +++ b/frontend/src/lib/components/build_workers.ts @@ -51,7 +51,6 @@ export function buildWorkerDefinition( case 'html': case 'handlebars': case 'razor': - console.log('getWorker: html') return new htmlWorker() case 'css': case 'scss': @@ -59,14 +58,13 @@ export function buildWorkerDefinition( return new cssWorker() case 'json': return new jsonWorker() - case 'graphql': { + case 'graphql': const workerFilename = `graphql.worker.bundle.js` const workerPathLocal = `${workerOverrideGlobals.workerPath}/${workerFilename}` const workerUrl = new URL(workerPathLocal, workerOverrideGlobals.basePath) return new Worker(workerUrl.href, { name: label }) - } case 'tailwindcss': { const workerFilename = `tailwindcss.worker.bundle.js` const workerPathLocal = `${workerOverrideGlobals.workerPath}/${workerFilename}` @@ -75,7 +73,6 @@ export function buildWorkerDefinition( name: label }) } - default: return new editorWorker() }