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 flexCss from '!!raw-loader!../../../shared/flex.less';

export class CssCodeEditor extends CodeEditor {
    setInitInput(): string {
        var base = super.setInitInput();
        if (!base) {
            return initCss;
        }
        else {
            return base;
        }
    }

    setInitSettings(): void {
        monaco.languages.registerCompletionItemProvider("css", {
            provideCompletionItems: (model, position, context, token) => {
                return {
                    suggestions: [
                        {
                            label: 'insert-flex',
                            kind: monaco.languages.CompletionItemKind.Snippet,
                            insertText: flexCss,
                            range: <any>null,
                            insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet
                        }
                    ]
                }
            }
        });
    }
}