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`