Ran eslint fix on existing codebase

Had to do some manual fixing of the app.js file due to misplaced comments
2025-05-02 15:30:06 +00:00 · 2023-04-18 22:20:02 +01:00 · 2023-04-18 22:20:02 +01:00 · e711290d8b
commit e711290d8b
parent 752ee664c2
106 changed files with 905 additions and 869 deletions
--- a/resources/js/code/index.mjs
+++ b/resources/js/code/index.mjs
@ -1,9 +1,9 @@
-import {EditorView, keymap} from "@codemirror/view";
+import {EditorView, keymap} from '@codemirror/view';

-import {copyTextToClipboard} from "../services/clipboard.js"
-import {viewerExtensions, editorExtensions} from "./setups.js";
-import {createView} from "./views.js";
-import {SimpleEditorInterface} from "./simple-editor-interface.js";
+import {copyTextToClipboard} from '../services/clipboard';
+import {viewerExtensions, editorExtensions} from './setups';
+import {createView} from './views';
+import {SimpleEditorInterface} from './simple-editor-interface';

 /**
 * Highlight pre elements on a page
@ -32,7 +32,7 @@ export function highlightWithin(parent) {
 */
 function highlightElem(elem) {
    const innerCodeElem = elem.querySelector('code[class^=language-]');
-    elem.innerHTML = elem.innerHTML.replace(/<br\s*[\/]?>/gi ,'\n');
+    elem.innerHTML = elem.innerHTML.replace(/<br\s*[\/]?>/gi, '\n');
    const content = elem.textContent.trimEnd();

    let langName = '';
@ -61,10 +61,10 @@ function highlightElem(elem) {
 * @param {EditorView} editorView
 */
 function addCopyIcon(editorView) {
-    const copyIcon = `<svg viewBox="0 0 24 24" width="16" height="16" xmlns="http://www.w3.org/2000/svg"><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/></svg>`;
-    const checkIcon = `<svg viewBox="0 0 24 24" width="16" height="16" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>`;
+    const copyIcon = '<svg viewBox="0 0 24 24" width="16" height="16" xmlns="http://www.w3.org/2000/svg"><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/></svg>';
+    const checkIcon = '<svg viewBox="0 0 24 24" width="16" height="16" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>';
    const copyButton = document.createElement('button');
-    copyButton.setAttribute('type', 'button')
+    copyButton.setAttribute('type', 'button');
    copyButton.classList.add('cm-copy-button');
    copyButton.innerHTML = copyIcon;
    editorView.dom.appendChild(copyButton);
@ -112,7 +112,6 @@ export function wysiwygView(cmContainer, shadowRoot, content, language) {
    return editor;
 }

-
 /**
 * Create a CodeMirror instance to show in the WYSIWYG pop-up editor
 * @param {HTMLElement} elem
@ -126,7 +125,7 @@ export function popupEditor(elem, modeSuggestion) {
        doc: content,
        extensions: [
            ...editorExtensions(elem.parentElement),
-            EditorView.updateListener.of((v) => {
+            EditorView.updateListener.of(v => {
                if (v.docChanged) {
                    // textArea.value = v.state.doc.toString();
                }
@ -155,7 +154,7 @@ export function inlineEditor(textArea, mode) {
        doc: content,
        extensions: [
            ...editorExtensions(textArea.parentElement),
-            EditorView.updateListener.of((v) => {
+            EditorView.updateListener.of(v => {
                if (v.docChanged) {
                    textArea.value = v.state.doc.toString();
                }
@ -188,7 +187,7 @@ export function markdownEditor(elem, onChange, domEventHandlers, keyBindings) {
        extensions: [
            keymap.of(keyBindings),
            ...editorExtensions(elem.parentElement),
-            EditorView.updateListener.of((v) => {
+            EditorView.updateListener.of(v => {
                onChange(v);
            }),
            EditorView.domEventHandlers(domEventHandlers),
@ -204,4 +203,4 @@ export function markdownEditor(elem, onChange, domEventHandlers, keyBindings) {
    elem.style.display = 'none';

    return ev;
-}
+}
--- a/resources/js/code/languages.js
+++ b/resources/js/code/languages.js
@ -1,20 +1,19 @@
-import {StreamLanguage} from "@codemirror/language"
+import {StreamLanguage} from '@codemirror/language';

 import {css} from '@codemirror/lang-css';
 import {json} from '@codemirror/lang-json';
 import {javascript} from '@codemirror/lang-javascript';
-import {html} from "@codemirror/lang-html";
+import {html} from '@codemirror/lang-html';
 import {markdown} from '@codemirror/lang-markdown';
 import {php} from '@codemirror/lang-php';
-import {twig} from "@ssddanbrown/codemirror-lang-twig";
-import {xml} from "@codemirror/lang-xml";
+import {twig} from '@ssddanbrown/codemirror-lang-twig';
+import {xml} from '@codemirror/lang-xml';

-const legacyLoad = async (mode) => {
+const legacyLoad = async mode => {
    const modes = await window.importVersioned('legacy-modes');
    return StreamLanguage.define(modes[mode]);
 };

-
 // Mapping of possible languages or formats from user input to their codemirror modes.
 // Value can be a mode string or a function that will receive the code content & return the mode string.
 // The function option is used in the event the exact mode could be dynamic depending on the code.
@ -58,7 +57,7 @@ const modeMap = {
    pascal: () => legacyLoad('pascal'),
    perl: () => legacyLoad('perl'),
    pgsql: () => legacyLoad('pgSQL'),
-    php: async (code) => {
+    php: async code => {
        const hasTags = code.includes('<?php');
        return php({plain: !hasTags});
    },
@ -113,4 +112,4 @@ export function getLanguageExtension(langSuggestion, content) {
    }

    return language(content);
-}
+}
--- a/resources/js/code/legacy-modes.mjs
+++ b/resources/js/code/legacy-modes.mjs
@ -1,4 +1,6 @@
-export {c, cpp, csharp, java, kotlin, scala, dart} from '@codemirror/legacy-modes/mode/clike';
+export {
+    c, cpp, csharp, java, kotlin, scala, dart,
+} from '@codemirror/legacy-modes/mode/clike';
 export {diff} from '@codemirror/legacy-modes/mode/diff';
 export {fortran} from '@codemirror/legacy-modes/mode/fortran';
 export {go} from '@codemirror/legacy-modes/mode/go';
@ -17,11 +19,13 @@ export {ruby} from '@codemirror/legacy-modes/mode/ruby';
 export {rust} from '@codemirror/legacy-modes/mode/rust';
 export {scheme} from '@codemirror/legacy-modes/mode/scheme';
 export {shell} from '@codemirror/legacy-modes/mode/shell';
-export {standardSQL, pgSQL, msSQL, mySQL, sqlite, plSQL} from '@codemirror/legacy-modes/mode/sql';
+export {
+    standardSQL, pgSQL, msSQL, mySQL, sqlite, plSQL,
+} from '@codemirror/legacy-modes/mode/sql';
 export {stex} from '@codemirror/legacy-modes/mode/stex';
-export {swift} from "@codemirror/legacy-modes/mode/swift";
+export {swift} from '@codemirror/legacy-modes/mode/swift';
 export {toml} from '@codemirror/legacy-modes/mode/toml';
 export {vb} from '@codemirror/legacy-modes/mode/vb';
 export {vbScript} from '@codemirror/legacy-modes/mode/vbscript';
 export {yaml} from '@codemirror/legacy-modes/mode/yaml';
-export {smarty} from "@ssddanbrown/codemirror-lang-smarty";
+export {smarty} from '@ssddanbrown/codemirror-lang-smarty';
--- a/resources/js/code/setups.js
+++ b/resources/js/code/setups.js
@ -1,9 +1,13 @@
-import {EditorView, keymap, drawSelection, highlightActiveLine, dropCursor,
-    rectangularSelection, lineNumbers, highlightActiveLineGutter} from "@codemirror/view"
-import {bracketMatching} from "@codemirror/language"
-import {defaultKeymap, history, historyKeymap, indentWithTab} from "@codemirror/commands"
-import {EditorState} from "@codemirror/state"
-import {getTheme} from "./themes";
+import {
+    EditorView, keymap, drawSelection, highlightActiveLine, dropCursor,
+    rectangularSelection, lineNumbers, highlightActiveLineGutter,
+} from '@codemirror/view';
+import {bracketMatching} from '@codemirror/language';
+import {
+    defaultKeymap, history, historyKeymap, indentWithTab,
+} from '@codemirror/commands';
+import {EditorState} from '@codemirror/state';
+import {getTheme} from './themes';

 /**
 * @param {Element} parentEl
@ -51,4 +55,4 @@ export function editorExtensions(parentEl) {
        ]),
        EditorView.lineWrapping,
    ];
-}
+}
--- a/resources/js/code/simple-editor-interface.js
+++ b/resources/js/code/simple-editor-interface.js
@ -1,7 +1,7 @@
-import {updateViewLanguage} from "./views";
-
+import {updateViewLanguage} from './views';

 export class SimpleEditorInterface {
+
    /**
     * @param {EditorView} editorView
     */
@ -22,9 +22,9 @@ export class SimpleEditorInterface {
     * @param content
     */
    setContent(content) {
-        const doc = this.ev.state.doc;
+        const {doc} = this.ev.state;
        this.ev.dispatch({
-            changes: {from: 0, to: doc.length, insert: content}
+            changes: {from: 0, to: doc.length, insert: content},
        });
    }

@ -43,4 +43,5 @@ export class SimpleEditorInterface {
    setMode(mode, content = '') {
        updateViewLanguage(this.ev, mode, content);
    }
-}
+
+}
--- a/resources/js/code/themes.js
+++ b/resources/js/code/themes.js
@ -1,62 +1,102 @@
-import {tags} from "@lezer/highlight";
-import {HighlightStyle, syntaxHighlighting} from "@codemirror/language";
-import {EditorView} from "@codemirror/view";
-import {oneDarkHighlightStyle, oneDarkTheme} from "@codemirror/theme-one-dark";
+import {tags} from '@lezer/highlight';
+import {HighlightStyle, syntaxHighlighting} from '@codemirror/language';
+import {EditorView} from '@codemirror/view';
+import {oneDarkHighlightStyle, oneDarkTheme} from '@codemirror/theme-one-dark';

 const defaultLightHighlightStyle = HighlightStyle.define([
-    { tag: tags.meta,
-        color: "#388938" },
-    { tag: tags.link,
-        textDecoration: "underline" },
-    { tag: tags.heading,
-        textDecoration: "underline",
-        fontWeight: "bold" },
-    { tag: tags.emphasis,
-        fontStyle: "italic" },
-    { tag: tags.strong,
-        fontWeight: "bold" },
-    { tag: tags.strikethrough,
-        textDecoration: "line-through" },
-    { tag: tags.keyword,
-        color: "#708" },
-    { tag: [tags.atom, tags.bool, tags.url, tags.contentSeparator, tags.labelName],
-        color: "#219" },
-    { tag: [tags.literal, tags.inserted],
-        color: "#164" },
-    { tag: [tags.string, tags.deleted],
-        color: "#a11" },
-    { tag: [tags.regexp, tags.escape, tags.special(tags.string)],
-        color: "#e40" },
-    { tag: tags.definition(tags.variableName),
-        color: "#00f" },
-    { tag: tags.local(tags.variableName),
-        color: "#30a" },
-    { tag: [tags.typeName, tags.namespace],
-        color: "#085" },
-    { tag: tags.className,
-        color: "#167" },
-    { tag: [tags.special(tags.variableName), tags.macroName],
-        color: "#256" },
-    { tag: tags.definition(tags.propertyName),
-        color: "#00c" },
-    { tag: tags.compareOperator,
-        color: "#708" },
-    { tag: tags.comment,
-        color: "#940" },
-    { tag: tags.invalid,
-        color: "#f00" }
+    {
+        tag: tags.meta,
+        color: '#388938',
+    },
+    {
+        tag: tags.link,
+        textDecoration: 'underline',
+    },
+    {
+        tag: tags.heading,
+        textDecoration: 'underline',
+        fontWeight: 'bold',
+    },
+    {
+        tag: tags.emphasis,
+        fontStyle: 'italic',
+    },
+    {
+        tag: tags.strong,
+        fontWeight: 'bold',
+    },
+    {
+        tag: tags.strikethrough,
+        textDecoration: 'line-through',
+    },
+    {
+        tag: tags.keyword,
+        color: '#708',
+    },
+    {
+        tag: [tags.atom, tags.bool, tags.url, tags.contentSeparator, tags.labelName],
+        color: '#219',
+    },
+    {
+        tag: [tags.literal, tags.inserted],
+        color: '#164',
+    },
+    {
+        tag: [tags.string, tags.deleted],
+        color: '#a11',
+    },
+    {
+        tag: [tags.regexp, tags.escape, tags.special(tags.string)],
+        color: '#e40',
+    },
+    {
+        tag: tags.definition(tags.variableName),
+        color: '#00f',
+    },
+    {
+        tag: tags.local(tags.variableName),
+        color: '#30a',
+    },
+    {
+        tag: [tags.typeName, tags.namespace],
+        color: '#085',
+    },
+    {
+        tag: tags.className,
+        color: '#167',
+    },
+    {
+        tag: [tags.special(tags.variableName), tags.macroName],
+        color: '#256',
+    },
+    {
+        tag: tags.definition(tags.propertyName),
+        color: '#00c',
+    },
+    {
+        tag: tags.compareOperator,
+        color: '#708',
+    },
+    {
+        tag: tags.comment,
+        color: '#940',
+    },
+    {
+        tag: tags.invalid,
+        color: '#f00',
+    },
 ]);

 const defaultThemeSpec = {
-    "&": {
-        backgroundColor: "#FFF",
-        color: "#000",
+    '&': {
+        backgroundColor: '#FFF',
+        color: '#000',
    },
-    "&.cm-focused": {
-        outline: "none",
+    '&.cm-focused': {
+        outline: 'none',
    },
-    ".cm-line": {
-        lineHeight: "1.6",
+    '.cm-line': {
+        lineHeight: '1.6',
    },
 };

@ -82,10 +122,10 @@ export function getTheme(viewParentEl) {
            if (tagStyles.length) {
                highlightStyle = HighlightStyle.define(tagStyles);
            }
-        }
+        },
    };

    window.$events.emitPublic(viewParentEl, 'library-cm6::configure-theme', eventData);

    return [viewTheme, syntaxHighlighting(highlightStyle)];
-}
+}
--- a/resources/js/code/views.js
+++ b/resources/js/code/views.js
@ -1,6 +1,6 @@
-import {Compartment} from "@codemirror/state";
-import {EditorView} from "@codemirror/view";
-import {getLanguageExtension} from "./languages";
+import {Compartment} from '@codemirror/state';
+import {EditorView} from '@codemirror/view';
+import {getLanguageExtension} from './languages';

 const viewLangCompartments = new WeakMap();

@ -33,6 +33,6 @@ export async function updateViewLanguage(ev, modeSuggestion, content) {
    const language = await getLanguageExtension(modeSuggestion, content);

    ev.dispatch({
-        effects: compartment.reconfigure(language ? language : [])
+        effects: compartment.reconfigure(language || []),
    });
-}
+}