Skip to content

Commit

Permalink
Wrap editor code in DOMContentLoaded
Browse files Browse the repository at this point in the history
  • Loading branch information
@thomiceli
thomiceli committed Apr 2, 2023
1 parent 2aee52e commit 0eb1b10
Showing 1 changed file with 136 additions and 131 deletions.
267 changes: 136 additions & 131 deletions public/editor.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,156 +2,161 @@ 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 editorsParentdom = document.getElementById('editors')
let allEditorsdom = document.querySelectorAll('#editors > .editor')
let firstEditordom = allEditorsdom[0]
let editorsjs = []
let editorsParentdom = document.getElementById('editors')
let allEditorsdom = document.querySelectorAll('#editors > .editor')
let firstEditordom = allEditorsdom[0]

const txtFacet = Facet.define({
combine(values) {
return values[0]
}
})
let indentSize = new Compartment, wrapMode = new Compartment, indentType = new Compartment

const newEditor = (dom, value = '') => {
let editor = new EditorView({
doc: value,
parent: dom,
extensions: [
lineNumbers(), gutter({class: "cm-mygutter"}),
keymap.of([{key: "Tab", run: customIndentMore, shift: indentLess}]),
indentSize.of(EditorState.tabSize.of(2)),
wrapMode.of([]),
indentType.of(txtFacet.of("space")),
]
const txtFacet = Facet.define({
combine(values) {
return values[0]
}
})
let indentSize = new Compartment, wrapMode = new Compartment, indentType = new Compartment

const newEditor = (dom, value = '') => {
let editor = new EditorView({
doc: value,
parent: dom,
extensions: [
lineNumbers(), gutter({class: "cm-mygutter"}),
keymap.of([{key: "Tab", run: customIndentMore, shift: indentLess}]),
indentSize.of(EditorState.tabSize.of(2)),
wrapMode.of([]),
indentType.of(txtFacet.of("space")),
]
})

dom.querySelector('.editor-indent-type').onchange = (e) => {
let newTabType = e.target.value
setIndentType(editor, !['tab', 'space'].includes(newTabType) ? 'space' : newTabType)
}

dom.querySelector('.editor-indent-type').onchange = (e) => {
let newTabType = e.target.value
setIndentType(editor, !['tab', 'space'].includes(newTabType) ? 'space' : newTabType)
}
dom.querySelector('.editor-indent-size').onchange = (e) => {
let newTabSize = parseInt(e.target.value)
setIndentSize(editor, ![2, 4, 8].includes(newTabSize) ? 2 : newTabSize)
}

dom.querySelector('.editor-indent-size').onchange = (e) => {
let newTabSize = parseInt(e.target.value)
setIndentSize(editor, ![2, 4, 8].includes(newTabSize) ? 2 : newTabSize)
}
dom.querySelector('.editor-wrap-mode').onchange = (e) => {
let newWrapMode = e.target.value
setLineWrapping(editor, newWrapMode === 'soft')
}

dom.addEventListener("drop", (e) => {
e.preventDefault(); // prevent the browser from opening the dropped file
e.target.closest('.editor').querySelector('input.form-filename').value = e.dataTransfer.files[0].name
});

// remove editor on delete
let deleteBtns = dom.querySelector('button.delete-file')
if (deleteBtns !== null) {
deleteBtns.onclick = () => {
editorsjs.splice(editorsjs.indexOf(editor), 1);
dom.remove()
}
}

editor.dom.addEventListener("input", function inputConfirmLeave() {
if (!editor.inView) return; // skip events outside the viewport

editor.dom.removeEventListener("input", inputConfirmLeave);
window.onbeforeunload = () => {
return 'Are you sure you want to quit?';
}
});

dom.querySelector('.editor-wrap-mode').onchange = (e) => {
let newWrapMode = e.target.value
setLineWrapping(editor, newWrapMode === 'soft')
return editor;
}

dom.addEventListener("drop", (e) => {
e.preventDefault(); // prevent the browser from opening the dropped file
e.target.closest('.editor').querySelector('input.form-filename').value = e.dataTransfer.files[0].name
});

// remove editor on delete
let deleteBtns = dom.querySelector('button.delete-file')
if (deleteBtns !== null) {
deleteBtns.onclick = () => {
editorsjs.splice(editorsjs.indexOf(editor), 1);
dom.remove()
function getIndentation(state) {
if (indentType.get(state).value === 'tab') {
return '\t';
}
return ' '.repeat(indentSize.get(state).value);
}

editor.dom.addEventListener("input", function inputConfirmLeave() {
if (!editor.inView) return; // skip events outside the viewport
function customIndentMore({state, dispatch}) {
let indentation = getIndentation(state)
dispatch({
...state.update(changeBySelectedLine(state, (line, changes) => {
changes.push({from: state.selection.ranges[0].from, insert: indentation})
})), selection: {
anchor: state.selection.ranges[0].from + indentation.length,
head: state.selection.ranges[0].from + indentation.length,
}
})
return true
}

editor.dom.removeEventListener("input", inputConfirmLeave);
window.onbeforeunload = () => {
return 'Are you sure you want to quit?';
}
});
function changeBySelectedLine(state, f) {
let atLine = -1
return state.changeByRange(range => {
let changes = []
for (let line = state.doc.lineAt(range.from); ;) {
if (line.number > atLine) {
f(line, changes)
atLine = line.number
}
if (range.to <= line.to) break
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 editor;
}
function setIndentType(view, type) {
view.dispatch({effects: indentType.reconfigure(txtFacet.of(type))})
}

function getIndentation(state) {
if (indentType.get(state).value === 'tab') {
return '\t';
function setIndentSize(view, size) {
view.dispatch({effects: indentSize.reconfigure(EditorState.tabSize.of(size))})
}
return ' '.repeat(indentSize.get(state).value);
}

function customIndentMore({state, dispatch}) {
let indentation = getIndentation(state)
dispatch({
...state.update(changeBySelectedLine(state, (line, changes) => {
changes.push({from: state.selection.ranges[0].from, insert: indentation})
})), selection: {
anchor: state.selection.ranges[0].from + indentation.length,
head: state.selection.ranges[0].from + indentation.length,
}
})
return true
}

function changeBySelectedLine(state, f) {
let atLine = -1
return state.changeByRange(range => {
let changes = []
for (let line = state.doc.lineAt(range.from); ;) {
if (line.number > atLine) {
f(line, changes)
atLine = line.number
}
if (range.to <= line.to) break
line = state.doc.lineAt(line.number + 1)

function setLineWrapping(view, enable) {
if (enable) {
view.dispatch({effects: wrapMode.reconfigure(EditorView.lineWrapping)})
} else {
view.dispatch({effects: wrapMode.reconfigure([])})
}
let changeSet = state.changes(changes)
return {changes, range: new SelectionRange(changeSet.mapPos(range.anchor, 1), changeSet.mapPos(range.head, 1))}
}

let arr = [...allEditorsdom]
arr.forEach(el => {
// in case we edit the gist contents
let currEditor = newEditor(el, el.querySelector('.form-filecontent').value)
editorsjs.push(currEditor)
})
}

function setIndentType(view, type) {
view.dispatch({effects: indentType.reconfigure(txtFacet.of(type))})
}
document.getElementById('add-file').onclick = () => {
let newEditorDom = firstEditordom.cloneNode(true)

function setIndentSize(view, size) {
view.dispatch({effects: indentSize.reconfigure(EditorState.tabSize.of(size))})
}
// reset the filename of the new cloned element
newEditorDom.querySelector('input[name="name"]').value = ""

function setLineWrapping(view, enable) {
if (enable) {
view.dispatch({effects: wrapMode.reconfigure(EditorView.lineWrapping)})
} else {
view.dispatch({effects: wrapMode.reconfigure([])})
// removing the previous codemirror editor
let newEditorDomCM = newEditorDom.querySelector('.cm-editor')
newEditorDomCM.remove()

// creating the new codemirror editor and append it in the editor div
editorsjs.push(newEditor(newEditorDom))
editorsParentdom.append(newEditorDom)
}
}

let arr = [...allEditorsdom]
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 = () => {
let newEditorDom = firstEditordom.cloneNode(true)

// reset the filename of the new cloned element
newEditorDom.querySelector('input[name="name"]').value = ""

// removing the previous codemirror editor
let newEditorDomCM = newEditorDom.querySelector('.cm-editor')
newEditorDomCM.remove()

// creating the new codemirror editor and append it in the editor div
editorsjs.push(newEditor(newEditorDom))
editorsParentdom.append(newEditorDom)
}

document.querySelector('form#create').onsubmit = () => {
let j = 0
document.querySelectorAll('.form-filecontent').forEach((e) => {
e.value = encodeURIComponent(editorsjs[j++].state.doc.toString())
})
}

document.onsubmit = () => {
window.onbeforeunload = null;
}
document.querySelector('form#create').onsubmit = () => {
let j = 0
document.querySelectorAll('.form-filecontent').forEach((e) => {
e.value = encodeURIComponent(editorsjs[j++].state.doc.toString())
})
}

document.onsubmit = () => {
window.onbeforeunload = null;
}
})

0 comments on commit 0eb1b10

Please sign in to comment.