Codemirror6 Easy

This package is a simple bundle that includes some of the Codemirror 6 packages (see list below), as well as some utility functions to simplify the editor creation process.

Is it light? No, is it complete? No. But it offers a UMD build to import Codemirror 6 packages in a "classic" web page.

Use in web page

<script src="https://unpkg.com/codemirror6-easy@latest/dist/codemirror6-easy.umd.min.js"></script>
<script type="text/javascript">
  const { themeConfig, editor } = window.CM6_EASY.defaultEditor({
    parent: document.getElementById('editor'),
    doc: 'console.log("Hello Codemirror!");',
  });

  function getTheme(isDarkTheme) {
    return isDarkTheme ? window.CM6_EASY.vscodeTheme.vscodeDark : window.CM6_EASY.vscodeTheme.vscodeLight;
  }

  const darkThemeCheckbox = document.getElementById('darkTheme');

  themeConfig.reconfigure([getTheme(darkThemeCheckbox.checked)]);

  darkThemeCheckbox.addEventListener('change', (e) => {
    editor.dispatch({
      effects: themeConfig.reconfigure([getTheme(e.target.checked)]),
    });
  });
</script>

Included packages:

Package	UMD access
codemirror	CM6_EASY.codemirror
@codemirror/autocomplete	CM6_EASY.autocomplete
@codemirror/collab	CM6_EASY.collab
@codemirror/commands	CM6_EASY.commands
@codemirror/lang-javascript	CM6_EASY.langJavascript
@codemirror/language	CM6_EASY.language
@codemirror/lint	CM6_EASY.lint
@codemirror/search	CM6_EASY.search
@codemirror/state	CM6_EASY.state
@codemirror/view	CM6_EASY.view
@replit/codemirror-vscode-keymap	CM6_EASY.vscodeKeymap
@uiw/codemirror-theme-vscode	CM6_EASY.vscodeTheme

Utility functions

function defaultEditor({ parent, doc } = { parent: document.body, doc: '' }) {
  //...
  return { themeConfig, editor };
}

// `themeConfig` is a `Compartment` to chnage the applied theme
// `editor` is an instance of `EditorView` preconfigured with extensions from `generateJavascriptExtensions`

export function generateJavascriptExtensions() {
  return { themeConfig, extensions };
}

// `themeConfig` is a `Compartment` to chnage the applied theme
// `extensions` is a list of extensions from `generateBasicExtensions`, plus the javascript language

export function generateBasicExtensions() {
  return { themeConfig, extensions };
}

// `themeConfig` is a `Compartment` to chnage the applied theme
// `extensions` is a list of extensions including `basicSetup`, `vscodeKeymap` and `vscodeLight`