Codemirror 6 Implementation (In Progress)

markdown_live_preview.mjs

import { EditorView, basicSetup } from "codemirror";
import { keymap } from "@codemirror/view";
import { EditorState, Compartment } from "@codemirror/state";
import { indentWithTab } from "@codemirror/commands";
import { markdown } from "@codemirror/lang-markdown";
import { color, oneDark, oneDarkHighlightStyle, oneDarkTheme } from "@codemirror/theme-one-dark";

// Setup to update settings?
let language = new Compartment, tabSize = new Compartment;

document.addEventListener('DOMContentLoaded', () => {

  const $editor = new EditorView({
    // Default content
    doc: `- EgressIP is not visibly assigned to nodes, how to confirm that it is working?
- How to test EgressIP (EIP) on ovn-kubernetes CNI?
- How to test EgressIP (EIP) on SDN CNI?

# This is a headline

\`\`\`
This is a code block
\`\`\`

1. Listing things
2. Listing more things
3. So many listed things`,
      extensions: [
        basicSetup,
        // Set language
        language.of(markdown()),
        // Make sure Tab presses don't leave the field and indent instead
        keymap.of([indentWithTab]),
        // ? I guessed and checked to 
        // ? Allows the editor to use this theme?
        oneDark,
      ],
      // DOM Element to append editor
      parent: document.querySelector('.node-solution-form .form-textarea-wrapper'),
    });

    // ? Make the editor use this color scheme?
    EditorView.theme(oneDarkTheme, {dark: true});

});

package.json

{
  "name": "markdown_editor",
  "version": "1.0.0",
  "description": "Install packages needed for markdown editor",
  "scripts": {},
  "author": "wesruv",
  "dependencies": {
    "@codemirror/lang-markdown": "^6.1.0",
    "@codemirror/theme-one-dark": "^6.1.1",
    "@rollup/plugin-node-resolve": "^15.0.2",
    "codemirror": "^6.0.1",
    "rollup": "^3.20.2"
  }
}

rollup.config.mjs

import { nodeResolve } from '@rollup/plugin-node-resolve';

export default {
  input: 'markdown_live_preview.mjs',
  output: {
    dir: './',
    format: 'es',
  },
  plugins: [nodeResolve()]
};