Wrap editor code in DOMContentLoaded

public/editor.js

@@ -2,21 +2,22 @@ import {EditorView, gutter, keymap, lineNumbers} from "@codemirror/view"
 import {Compartment, EditorState, Facet, SelectionRange} from "@codemirror/state"
 import {indentLess} from "@codemirror/commands";
 
-EditorView.theme({}, {dark: true})
+document.addEventListener('DOMContentLoaded', () => {
+    EditorView.theme({}, {dark: true})
 
-let editorsjs = []
+    let editorsjs = []
-let editorsParentdom = document.getElementById('editors')
+    let editorsParentdom = document.getElementById('editors')
-let allEditorsdom = document.querySelectorAll('#editors > .editor')
+    let allEditorsdom = document.querySelectorAll('#editors > .editor')
-let firstEditordom = allEditorsdom[0]
+    let firstEditordom = allEditorsdom[0]
 
-const txtFacet = Facet.define({
+    const txtFacet = Facet.define({
         combine(values) {
             return values[0]
         }
-})
+    })
-let indentSize = new Compartment, wrapMode = new Compartment, indentType = new Compartment
+    let indentSize = new Compartment, wrapMode = new Compartment, indentType = new Compartment
 
-const newEditor = (dom, value = '') => {
+    const newEditor = (dom, value = '') => {
         let editor = new EditorView({
             doc: value,
             parent: dom,
@@ -68,16 +69,16 @@ const newEditor = (dom, value = '') => {
         });
 
         return editor;
-}
+    }
 
-function getIndentation(state) {
+    function getIndentation(state) {
         if (indentType.get(state).value === 'tab') {
             return '\t';
         }
         return ' '.repeat(indentSize.get(state).value);
-}
+    }
 
-function customIndentMore({state, dispatch}) {
+    function customIndentMore({state, dispatch}) {
         let indentation = getIndentation(state)
         dispatch({
             ...state.update(changeBySelectedLine(state, (line, changes) => {
@@ -88,9 +89,9 @@ function customIndentMore({state, dispatch}) {
             }
         })
         return true
-}
+    }
 
-function changeBySelectedLine(state, f) {
+    function changeBySelectedLine(state, f) {
         let atLine = -1
         return state.changeByRange(range => {
             let changes = []
@@ -103,34 +104,37 @@ function changeBySelectedLine(state, f) {
                 line = state.doc.lineAt(line.number + 1)
             }
             let changeSet = state.changes(changes)
-        return {changes, range: new SelectionRange(changeSet.mapPos(range.anchor, 1), changeSet.mapPos(range.head, 1))}
+            return {
+                changes,
+                range: new SelectionRange(changeSet.mapPos(range.anchor, 1), changeSet.mapPos(range.head, 1))
+            }
         })
-}
+    }
 
-function setIndentType(view, type) {
+    function setIndentType(view, type) {
         view.dispatch({effects: indentType.reconfigure(txtFacet.of(type))})
-}
+    }
 
-function setIndentSize(view, size) {
+    function setIndentSize(view, size) {
         view.dispatch({effects: indentSize.reconfigure(EditorState.tabSize.of(size))})
-}
+    }
 
-function setLineWrapping(view, enable) {
+    function setLineWrapping(view, enable) {
         if (enable) {
             view.dispatch({effects: wrapMode.reconfigure(EditorView.lineWrapping)})
         } else {
             view.dispatch({effects: wrapMode.reconfigure([])})
         }
-}
+    }
 
-let arr = [...allEditorsdom]
+    let arr = [...allEditorsdom]
-arr.forEach(el => {
+    arr.forEach(el => {
         // in case we edit the gist contents
         let currEditor = newEditor(el, el.querySelector('.form-filecontent').value)
         editorsjs.push(currEditor)
-})
+    })
 
-document.getElementById('add-file').onclick = () => {
+    document.getElementById('add-file').onclick = () => {
         let newEditorDom = firstEditordom.cloneNode(true)
 
         // reset the filename of the new cloned element
@@ -143,15 +147,16 @@ document.getElementById('add-file').onclick = () => {
         // creating the new codemirror editor and append it in the editor div
         editorsjs.push(newEditor(newEditorDom))
         editorsParentdom.append(newEditorDom)
-}
+    }
 
-document.querySelector('form#create').onsubmit = () => {
+    document.querySelector('form#create').onsubmit = () => {
         let j = 0
         document.querySelectorAll('.form-filecontent').forEach((e) => {
             e.value = encodeURIComponent(editorsjs[j++].state.doc.toString())
         })
-}
+    }
 
-document.onsubmit = () => {
+    document.onsubmit = () => {
         window.onbeforeunload = null;
-}
+    }
+})