<div id="editor"></div>

"use strict";

const {
  autocompletion,
  closeBrackets,
  closeBracketsKeymap,
  completionKeymap
} = CM["@codemirror/autocomplete"];
const { defaultKeymap, history, historyKeymap } = CM["@codemirror/commands"];
const {
  bracketMatching,
  defaultHighlightStyle,
  foldGutter,
  foldKeymap,
  indentOnInput,
  syntaxHighlighting
} = CM["@codemirror/language"];
const { javascript, javascriptLanguage, scopeCompletionSource } = CM[
  "@codemirror/lang-javascript"
];
const { lintKeymap } = CM["@codemirror/lint"];
const { highlightSelectionMatches, searchKeymap } = CM["@codemirror/search"];
const { EditorState } = CM["@codemirror/state"];
const {
  crosshairCursor,
  drawSelection,
  dropCursor,
  highlightActiveLine,
  highlightActiveLineGutter,
  highlightSpecialChars,
  keymap,
  lineNumbers,
  rectangularSelection,
  EditorView
} = CM["@codemirror/view"];

const parent = document.querySelector("#editor");
const doc = `function microsoftShuffle(arr) {
  return arr.slice().sort(function () {
    return 0.5 - Math.random();
  });
}`;
const basicExtensions = [
  lineNumbers(),
  highlightActiveLineGutter(),
  highlightSpecialChars(),
  history(),
  foldGutter(),
  drawSelection(),
  dropCursor(),
  EditorState.allowMultipleSelections.of(true),
  indentOnInput(),
  syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
  bracketMatching(),
  closeBrackets(),
  autocompletion(),
  rectangularSelection(),
  crosshairCursor(),
  highlightActiveLine(),
  highlightSelectionMatches(),
  keymap.of([
    ...closeBracketsKeymap,
    ...defaultKeymap,
    ...searchKeymap,
    ...historyKeymap,
    ...foldKeymap,
    ...completionKeymap,
    ...lintKeymap
  ])
];
const jsExtensions = [
  javascript(),
  javascriptLanguage.data.of({
    autocomplete: scopeCompletionSource(globalThis)
  })
];

window.editor = new EditorView({
  doc,
  extensions: [basicExtensions, jsExtensions],
  parent
});