Convert Javascript to Typescript

public/editor.ts

@@ -0,0 +1,171 @@
+import {EditorView, gutter, keymap, lineNumbers} from "@codemirror/view";
+import {Compartment, EditorState, Facet, Line, SelectionRange} from "@codemirror/state";
+import {indentLess} from "@codemirror/commands";
+
+document.addEventListener("DOMContentLoaded", () => {
+ EditorView.theme({}, {dark: true});
+
+ let editorsjs: EditorView[] = [];
+ let editorsParentdom = document.getElementById("editors")!;
+ let allEditorsdom = document.querySelectorAll("#editors > .editor");
+ let firstEditordom = allEditorsdom[0];
+
+ const txtFacet = Facet.define<string>({
+ combine(values) {
+ return values;
+ },
+ });
+
+ let indentSize = new Compartment(),
+ wrapMode = new Compartment(),
+ indentType = new Compartment();
+
+ const newEditor = (dom: HTMLElement, value: string = ""): EditorView => {
+ 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<HTMLInputElement>(".editor-indent-type")!.onchange = (e) => {
+ let newTabType = (e.target as HTMLInputElement).value;
+ setIndentType(editor, !["tab", "space"].includes(newTabType) ? "space" : newTabType);
+ };
+
+ dom.querySelector<HTMLInputElement>(".editor-indent-size")!.onchange = (e) => {
+ let newTabSize = parseInt((e.target as HTMLInputElement).value);
+ setIndentSize(editor, ![2, 4, 8].includes(newTabSize) ? 2 : newTabSize);
+ };
+
+ dom.querySelector<HTMLInputElement>(".editor-wrap-mode")!.onchange = (e) => {
+ let newWrapMode = (e.target as HTMLInputElement).value;
+ setLineWrapping(editor, newWrapMode === "soft");
+ };
+
+ dom.addEventListener("drop", (e) => {
+ e.preventDefault(); // prevent the browser from opening the dropped file
+ (e.target as HTMLInputElement)
+ .closest(".editor")
+ .querySelector<HTMLInputElement>("input.form-filename")!.value =
+ e.dataTransfer.files[0].name;
+ });
+
+ // remove editor on delete
+ let deleteBtns = dom.querySelector<HTMLButtonElement>("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?";
+ };
+ });
+
+ return editor;
+ };
+
+ function getIndentation(state: EditorState): string {
+ // @ts-ignore
+ if (indentType.get(state).value === "tab") {
+ return "\t";
+ }
+ // @ts-ignore
+ return " ".repeat(indentSize.get(state).value);
+ }
+
+ function customIndentMore({state, dispatch,}: { state: EditorState; dispatch: (value: any) => void; }): boolean {
+ 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: EditorState, f: (line: Line, changes: any[]) => void): any {
+ let atLine = -1;
+ return state.changeByRange((range) => {
+ let changes: any[] = [];
+ 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,
+ // @ts-ignore
+ range: new SelectionRange(changeSet.mapPos(range.anchor, 1), changeSet.mapPos(range.head, 1)),
+ };
+ });
+ }
+
+ function setIndentType(view: EditorView, type: string): void {
+ view.dispatch({effects: indentType.reconfigure(txtFacet.of(type))});
+ }
+
+ function setIndentSize(view: EditorView, size: number): void {
+ view.dispatch({effects: indentSize.reconfigure(EditorState.tabSize.of(size))});
+ }
+
+ function setLineWrapping(view: EditorView, enable: boolean): void {
+ view.dispatch({
+ effects: wrapMode.reconfigure(enable ? EditorView.lineWrapping : []),
+ });
+ }
+
+ let arr = Array.from(allEditorsdom);
+ arr.forEach((el: HTMLElement) => {
+ // in case we edit the gist contents
+ let currEditor = newEditor(el, el.querySelector<HTMLInputElement>(".form-filecontent")!.value);
+ editorsjs.push(currEditor);
+ });
+
+ document.getElementById("add-file")!.onclick = () => {
+ let newEditorDom = firstEditordom.cloneNode(true) as HTMLElement;
+
+ // reset the filename of the new cloned element
+ newEditorDom.querySelector<HTMLInputElement>('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<HTMLFormElement>("form#create")!.onsubmit = () => {
+ let j = 0;
+ document.querySelectorAll<HTMLInputElement>(".form-filecontent").forEach((e) => {
+ e.value = encodeURIComponent(editorsjs[j++].state.doc.toString());
+ });
+ };
+
+ document.onsubmit = () => {
+ window.onbeforeunload = null;
+ };
+});