css-code-editor.ts

import { CodeEditor } from "./code-editor";
import * as monaco from 'monaco-editor';
import initCss from '!!raw-loader!./injects/editor-init.css';
import { createScript } from "../../../shared/create-script";

export class CssCodeEditor extends CodeEditor {
    setInitInput(): string {
        return initCss;
    }

    setInitSettings(): void {
        monaco.languages.registerCompletionItemProvider("css", {
            provideCompletionItems: (model, position, context, token) => {
                return {
                    suggestions: [
                        {
                            label: 'insert-flex',
                            kind: monaco.languages.CompletionItemKind.Snippet,
                            insertText: createScript('https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js', false).toString(),
                            range: <any>null,
                            insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet
                        }
                    ]
                }
            }
        });
    }
}