How correctly integrate angular-froala-wysiwyg and codemirror v5 to edit code?

Question

I want edit a source code (javascript, json, etc.) in angular-froala-wysiwyg. So following step by step documentation https://froala.com/wysiwyg-editor/examples/code-mirror/, i have installed codemirror and included all plugins and styles, configured codemirror options. But still its doesn't work.

app.module.ts

import 'froala-editor/js/plugins.pkgd.min.js';
import 'froala-editor/js/plugins/align.min.js';
import 'froala-editor/js/plugins/code_view.min.js';
import 'froala-editor/js/languages/ru.js';
import 'froala-editor/js/third_party/embedly.min';

styles.scss

@use 'froala-editor/css/plugins/code_view.min.css';
@use 'codemirror/lib/codemirror.css';
@use 'codemirror/theme/dracula.css';

component.html
<div class="froala-editor"
     [froalaEditor]="froalaEditorConfig"
     [formControl]="editorControl"
></div>

component.ts

import * as CodeMirror from 'codemirror';
import 'codemirror/mode/xml/xml';
import 'codemirror/mode/javascript/javascript.js';

this.froalaEditorConfig = {
  key: 'my-key',
  imagePaste: false,
  imageUpload: false,
  events: {},
  language: 'ru',
  attribution: false,
  toolbarButtons: {
    moreText: {
      buttons: [
        'bold',
        'italic',
        'underline',
        'strikeThrough',
        'subscript',
        'superscript',
        'fontFamily',
        'fontSize',
        'textColor',
        'backgroundColor',
        'inlineClass',
        'inlineStyle',
        'clearFormatting',
      ],
    },
    moreParagraph: {
      buttons: [
        'alignLeft',
        'alignCenter',
        'alignRight',
        'formatOLSimple',
        'alignJustify',
        'formatOL',
        'formatUL',
        'paragraphFormat',
        'paragraphStyle',
        'lineHeight',
        'outdent',
        'indent',
        'quote',
      ],
      buttonsVisible: 3,
    },
    moreRich: {
      buttons: ['insertLink', 'insertTable', 'specialCharacters', 'insertHR'],
      buttonsVisible: 6,
    },
    moreMisc: {
      buttons: ['undo', 'redo', 'html', 'help', 'fullscreen'],
      align: 'right',
      buttonsVisible: 5,
    },
  },
  quickInsertButtons: ['embedly', 'table', 'ul', 'ol', 'hr'],
  placeholderText: '',
  enter: 0,
  codeMirror: CodeMirror,
  codeMirrorOptions: {
    tabSize: 2,
    lineNumbers: true,
    mode: {
      name: 'javascript',
      json: true,
    },
    theme: 'dracula',
    lineWrapping: true,
  },
};

this.editorControl.patchValue(
  JSON.stringify({
    name: 'John',
    age: 30,
    car: null,
  }),
);

Current result: enter image description here

Expected result: enter image description here