code-editor.hbs

<div {{did-insert this.renderEditor}}
    ...attributes
    data-test-code-block={{@code}}
    class="monaco-container"
>
</div>

code-editor.ts

import { action } from '@ember/object';
import GlimmerComponent from '@glimmer/component';
import { tracked } from '@glimmer/tracking';

import * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js';
import 'monaco-editor/dev/vs/editor/editor.main.css';

export interface CodeUpdatePayload {
  code: string;
  inputs: string[];
  isValid: boolean;
  returnType?: string;
  tree?: any;
}

interface Args {
  code: string;
  onCodeUpdate: (payload: CodeUpdatePayload) => void;
  modelField: any;
  readOnly: boolean;
}

export default class CodeEditor extends GlimmerComponent<Args> {
  @tracked functions: any;
  declare editor: monaco.editor.IStandaloneCodeEditor; // value is set by renderEditor
  declare esMonaco: any;
  declare model: any;
  declare readOnly: boolean;
  language = 'myLang';
  theme = 'myTheme';

  constructor(owner: any, args: any) {
    super(owner, args);
  }

  @action
  renderEditor(el: HTMLElement) {
    this.esMonaco = monaco;
    this.esMonaco.languages.register({ id: this.language });
    this.esMonaco.languages.setMonarchTokensProvider(this.language, {
      tokenizer: {
        root: [
          ['"[^"]*"', 'custom-string'],
          ['[0-9]+', 'custom-number'],
        ],
      },
    });
    const monacoEditor = this.esMonaco.editor;
    const codeModel = monacoEditor.createModel(this.args.code, this.language);
    monacoEditor.defineTheme(this.theme, {
      base: 'vs',
      inherit: false,
      rules: [
        { token: 'custom-number', foreground: '#0027b3' },
        { token: 'custom-string', foreground: '#aa30aa' },
      ],
      colors: {
        'editor.foreground': '#000000',
      },
    });
    const height = codeModel.getLineCount() * 20;
    el.style.height = height.toString() + 'px';
    const editor = monacoEditor.create(el, {
      model: codeModel,
      theme: this.theme,
    });
    this.editor = editor;
    this.model = this.editor.getModel();
  }

  @action
  onUpdateCode() {
    const str = this.editor.getValue();
    if (!str) {
      this.esMonaco.editor.setModelMarkers(this.model, 'owner', []);
      return;
    }
  }
}

ember-cli-build.js

const EmberApp = require('ember-cli/lib/broccoli/ember-app');
const { writeFileSync } = require('fs');
const { join } = require('path');
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');

const IS_LINT_SHOWN = false;

module.exports = function (defaults) {
  const app = new EmberApp(defaults, {
    hinting: IS_LINT_SHOWN,

    'ember-cli-babel': {
      includePolyfill: true,
    },

    babel: {},
  });
  
  app.import('node_modules/quill/dist/quill.snow.css');

  app.import('node_modules/ember-source/dist/ember-template-compiler.js');


  app.import('vendor/jSignature.modified.js');
  app.import('vendor/jquery-ajax-blob-arraybuffer.js');
  app.import('vendor/jquery.easy-autocomplete.js');
  app.import('vendor/reconnecting-websocket.js');
  app.import('vendor/img-touch-canvas.js');
  app.import('vendor/dateformat.js');
  app.import('vendor/jquery.mask.js');
  app.import('vendor/diff_match_patch_uncompressed.js', {
    type: 'vendor',
    prepend: true,
  });
  app.import('vendor/cssParser.js');

  const { Webpack } = require('@embroider/webpack');
  return require('@embroider/compat').compatBuild(app, Webpack, {
    staticAddonTestSupportTrees: true,
    staticAddonTrees: true,
    staticHelpers: true,
    // staticComponents: true,
    onOutputPath(outputPath) {
      writeFileSync(join(__dirname, '.embroider-app-path'), outputPath, 'utf8');
    },
    packagerOptions: {
      webpackConfig: {
        module: {
          rules: [
            {
              test: /\.(png|jpg|gif|svg|woff|woff2|eot|ttf|otf|flac)$/i,
              loader: 'file-loader',
              options: {
                name: '[path][name]-[contenthash].[ext]',
              },
            },
          ],
        },
        plugins: [
          new MonacoWebpackPlugin({
            languages: [],
          }),
        ],
      },
    },
  });
};

mock-code-editor.hbs

  <div class="expression-builder">
    <CodeEditor  @code='"hello world!"' />
  </div>