diff --git a/resources/js/app.js b/resources/js/app.js index e49bf5e95..ccf54b33d 100644 --- a/resources/js/app.js +++ b/resources/js/app.js @@ -1,9 +1,16 @@ +import events from './services/events'; +import httpInstance from './services/http'; +import Translations from './services/translations'; + +import * as components from './services/components'; +import * as componentMap from './components'; + // Url retrieval function window.baseUrl = function(path) { let basePath = document.querySelector('meta[name="base-url"]').getAttribute('content'); - if (basePath[basePath.length-1] === '/') basePath = basePath.slice(0, basePath.length-1); + if (basePath[basePath.length - 1] === '/') basePath = basePath.slice(0, basePath.length - 1); if (path[0] === '/') path = path.slice(1); - return basePath + '/' + path; + return `${basePath}/${path}`; }; window.importVersioned = function(moduleName) { @@ -13,22 +20,17 @@ window.importVersioned = function(moduleName) { }; // Set events and http services on window -import events from "./services/events" -import httpInstance from "./services/http" window.$http = httpInstance; window.$events = events; // Translation setup -// Creates a global function with name 'trans' to be used in the same way as Laravel's translation system -import Translations from "./services/translations" +// Creates a global function with name 'trans' to be used in the same way as the Laravel translation system const translator = new Translations(); window.trans = translator.get.bind(translator); window.trans_choice = translator.getPlural.bind(translator); window.trans_plural = translator.parsePlural.bind(translator); -// Load Components -import * as components from "./services/components" -import * as componentMap from "./components"; +// Load & initialise components components.register(componentMap); window.$components = components; components.init(); diff --git a/resources/js/code/index.mjs b/resources/js/code/index.mjs index 32c25d401..450592c25 100644 --- 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(//gi ,'\n'); + elem.innerHTML = elem.innerHTML.replace(//gi, '\n'); const content = elem.textContent.trimEnd(); let langName = ''; @@ -61,10 +61,10 @@ function highlightElem(elem) { * @param {EditorView} editorView */ function addCopyIcon(editorView) { - const copyIcon = ``; - const checkIcon = ``; + const copyIcon = ''; + const checkIcon = ''; 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; -} \ No newline at end of file +} diff --git a/resources/js/code/languages.js b/resources/js/code/languages.js index e7bac2a18..0703cbcde 100644 --- 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(' { + onChildEvent(this.$el, this.removeSelector, 'click', e => { const row = e.target.closest(this.rowSelector); row.remove(); }); @@ -44,9 +45,10 @@ export class AddRemoveRows extends Component { */ setClonedInputNames(clone) { const rowId = uniqueId(); - const randRowIdElems = clone.querySelectorAll(`[name*="randrowid"]`); + const randRowIdElems = clone.querySelectorAll('[name*="randrowid"]'); for (const elem of randRowIdElems) { elem.name = elem.name.split('randrowid').join(rowId); } } -} \ No newline at end of file + +} diff --git a/resources/js/components/ajax-delete-row.js b/resources/js/components/ajax-delete-row.js index f1af7f6cb..f48db7939 100644 --- a/resources/js/components/ajax-delete-row.js +++ b/resources/js/components/ajax-delete-row.js @@ -1,7 +1,8 @@ -import {onSelect} from "../services/dom"; -import {Component} from "./component"; +import {onSelect} from '../services/dom'; +import {Component} from './component'; export class AjaxDeleteRow extends Component { + setup() { this.row = this.$el; this.url = this.$opts.url; @@ -24,4 +25,5 @@ export class AjaxDeleteRow extends Component { this.row.style.pointerEvents = null; }); } -} \ No newline at end of file + +} diff --git a/resources/js/components/ajax-form.js b/resources/js/components/ajax-form.js index 6f4e5af08..583dde572 100644 --- a/resources/js/components/ajax-form.js +++ b/resources/js/components/ajax-form.js @@ -1,5 +1,5 @@ -import {onEnterPress, onSelect} from "../services/dom"; -import {Component} from "./component"; +import {onEnterPress, onSelect} from '../services/dom'; +import {Component} from './component'; /** * Ajax Form @@ -11,6 +11,7 @@ import {Component} from "./component"; * otherwise will act as a fake form element. */ export class AjaxForm extends Component { + setup() { this.container = this.$el; this.responseContainer = this.container; @@ -27,7 +28,6 @@ export class AjaxForm extends Component { } setupListeners() { - if (this.container.tagName === 'FORM') { this.container.addEventListener('submit', this.submitRealForm.bind(this)); return; @@ -43,7 +43,7 @@ export class AjaxForm extends Component { submitFakeForm() { const fd = new FormData(); - const inputs = this.container.querySelectorAll(`[name]`); + const inputs = this.container.querySelectorAll('[name]'); for (const input of inputs) { fd.append(input.getAttribute('name'), input.value); } @@ -76,4 +76,4 @@ export class AjaxForm extends Component { this.responseContainer.style.pointerEvents = null; } -} \ No newline at end of file +} diff --git a/resources/js/components/attachments-list.js b/resources/js/components/attachments-list.js index dfefd9b7f..4db09977f 100644 --- a/resources/js/components/attachments-list.js +++ b/resources/js/components/attachments-list.js @@ -1,4 +1,4 @@ -import {Component} from "./component"; +import {Component} from './component'; /** * Attachments List @@ -13,11 +13,11 @@ export class AttachmentsList extends Component { } setupListeners() { - const isExpectedKey = (event) => event.key === 'Control' || event.key === 'Meta'; + const isExpectedKey = event => event.key === 'Control' || event.key === 'Meta'; window.addEventListener('keydown', event => { - if (isExpectedKey(event)) { + if (isExpectedKey(event)) { this.addOpenQueryToLinks(); - } + } }, {passive: true}); window.addEventListener('keyup', event => { if (isExpectedKey(event)) { @@ -30,7 +30,7 @@ export class AttachmentsList extends Component { const links = this.container.querySelectorAll('a.attachment-file'); for (const link of links) { if (link.href.split('?')[1] !== 'open=true') { - link.href = link.href + '?open=true'; + link.href += '?open=true'; link.setAttribute('target', '_blank'); } } @@ -43,4 +43,5 @@ export class AttachmentsList extends Component { link.removeAttribute('target'); } } -} \ No newline at end of file + +} diff --git a/resources/js/components/attachments.js b/resources/js/components/attachments.js index d8a506270..0c25bd0c0 100644 --- a/resources/js/components/attachments.js +++ b/resources/js/components/attachments.js @@ -1,5 +1,5 @@ -import {showLoading} from "../services/dom"; -import {Component} from "./component"; +import {showLoading} from '../services/dom'; +import {Component} from './component'; export class Attachments extends Component { @@ -73,4 +73,4 @@ export class Attachments extends Component { this.listContainer.classList.remove('hidden'); } -} \ No newline at end of file +} diff --git a/resources/js/components/auto-submit.js b/resources/js/components/auto-submit.js index c8726ca7e..c78ef5549 100644 --- a/resources/js/components/auto-submit.js +++ b/resources/js/components/auto-submit.js @@ -1,4 +1,4 @@ -import {Component} from "./component"; +import {Component} from './component'; export class AutoSubmit extends Component { @@ -8,4 +8,4 @@ export class AutoSubmit extends Component { this.form.submit(); } -} \ No newline at end of file +} diff --git a/resources/js/components/auto-suggest.js b/resources/js/components/auto-suggest.js index 2ebf59f5d..b2435961c 100644 --- a/resources/js/components/auto-suggest.js +++ b/resources/js/components/auto-suggest.js @@ -1,7 +1,7 @@ -import {escapeHtml} from "../services/util"; -import {onChildEvent} from "../services/dom"; -import {Component} from "./component"; -import {KeyboardNavigationHandler} from "../services/keyboard-navigation"; +import {escapeHtml} from '../services/util'; +import {onChildEvent} from '../services/dom'; +import {Component} from './component'; +import {KeyboardNavigationHandler} from '../services/keyboard-navigation'; const ajaxCache = {}; @@ -9,6 +9,7 @@ const ajaxCache = {}; * AutoSuggest */ export class AutoSuggest extends Component { + setup() { this.parent = this.$el.parentElement; this.container = this.$el; @@ -67,9 +68,7 @@ export class AutoSuggest extends Component { const search = this.input.value.toLowerCase(); const suggestions = await this.loadSuggestions(search, nameFilter); - const toShow = suggestions.filter(val => { - return search === '' || val.toLowerCase().startsWith(search); - }).slice(0, 10); + const toShow = suggestions.filter(val => search === '' || val.toLowerCase().startsWith(search)).slice(0, 10); this.displaySuggestions(toShow); } @@ -126,4 +125,5 @@ export class AutoSuggest extends Component { this.hideSuggestions(); } } -} \ No newline at end of file + +} diff --git a/resources/js/components/back-to-top.js b/resources/js/components/back-to-top.js index 4f0a46f00..046e640d1 100644 --- a/resources/js/components/back-to-top.js +++ b/resources/js/components/back-to-top.js @@ -1,4 +1,4 @@ -import {Component} from "./component"; +import {Component} from './component'; export class BackToTop extends Component { @@ -18,7 +18,7 @@ export class BackToTop extends Component { } onPageScroll() { - let scrollTopPos = document.documentElement.scrollTop || document.body.scrollTop || 0; + const scrollTopPos = document.documentElement.scrollTop || document.body.scrollTop || 0; if (!this.showing && scrollTopPos > this.breakPoint) { this.button.style.display = 'block'; this.showing = true; @@ -35,15 +35,15 @@ export class BackToTop extends Component { } scrollToTop() { - let targetTop = this.targetElem.getBoundingClientRect().top; - let scrollElem = document.documentElement.scrollTop ? document.documentElement : document.body; - let duration = 300; - let start = Date.now(); - let scrollStart = this.targetElem.getBoundingClientRect().top; + const targetTop = this.targetElem.getBoundingClientRect().top; + const scrollElem = document.documentElement.scrollTop ? document.documentElement : document.body; + const duration = 300; + const start = Date.now(); + const scrollStart = this.targetElem.getBoundingClientRect().top; function setPos() { - let percentComplete = (1-((Date.now() - start) / duration)); - let target = Math.abs(percentComplete * scrollStart); + const percentComplete = (1 - ((Date.now() - start) / duration)); + const target = Math.abs(percentComplete * scrollStart); if (percentComplete > 0) { scrollElem.scrollTop = target; requestAnimationFrame(setPos.bind(this)); @@ -55,4 +55,4 @@ export class BackToTop extends Component { requestAnimationFrame(setPos.bind(this)); } -} \ No newline at end of file +} diff --git a/resources/js/components/book-sort.js b/resources/js/components/book-sort.js index 5ae283fd0..c06a37d65 100644 --- a/resources/js/components/book-sort.js +++ b/resources/js/components/book-sort.js @@ -1,25 +1,25 @@ -import Sortable, {MultiDrag} from "sortablejs"; -import {Component} from "./component"; -import {htmlToDom} from "../services/dom"; +import Sortable, {MultiDrag} from 'sortablejs'; +import {Component} from './component'; +import {htmlToDom} from '../services/dom'; // Auto sort control const sortOperations = { - name: function(a, b) { + name(a, b) { const aName = a.getAttribute('data-name').trim().toLowerCase(); const bName = b.getAttribute('data-name').trim().toLowerCase(); return aName.localeCompare(bName); }, - created: function(a, b) { + created(a, b) { const aTime = Number(a.getAttribute('data-created')); const bTime = Number(b.getAttribute('data-created')); return bTime - aTime; }, - updated: function(a, b) { + updated(a, b) { const aTime = Number(a.getAttribute('data-updated')); const bTime = Number(b.getAttribute('data-updated')); return bTime - aTime; }, - chaptersFirst: function(a, b) { + chaptersFirst(a, b) { const aType = a.getAttribute('data-type'); const bType = b.getAttribute('data-type'); if (aType === bType) { @@ -27,7 +27,7 @@ const sortOperations = { } return (aType === 'chapter' ? -1 : 1); }, - chaptersLast: function(a, b) { + chaptersLast(a, b) { const aType = a.getAttribute('data-type'); const bType = b.getAttribute('data-type'); if (aType === bType) { @@ -51,7 +51,7 @@ const moveActions = { run(elem, parent, book) { const newSibling = elem.previousElementSibling || parent; newSibling.insertAdjacentElement('beforebegin', elem); - } + }, }, down: { active(elem, parent, book) { @@ -60,7 +60,7 @@ const moveActions = { run(elem, parent, book) { const newSibling = elem.nextElementSibling || parent; newSibling.insertAdjacentElement('afterend', elem); - } + }, }, next_book: { active(elem, parent, book) { @@ -69,7 +69,7 @@ const moveActions = { run(elem, parent, book) { const newList = book.nextElementSibling.querySelector('ul'); newList.prepend(elem); - } + }, }, prev_book: { active(elem, parent, book) { @@ -78,7 +78,7 @@ const moveActions = { run(elem, parent, book) { const newList = book.previousElementSibling.querySelector('ul'); newList.appendChild(elem); - } + }, }, next_chapter: { active(elem, parent, book) { @@ -93,7 +93,7 @@ const moveActions = { const topItems = Array.from(topLevel.parentElement.children); const index = topItems.indexOf(topLevel); return topItems.slice(index + 1).find(elem => elem.dataset.type === 'chapter'); - } + }, }, prev_chapter: { active(elem, parent, book) { @@ -108,7 +108,7 @@ const moveActions = { const topItems = Array.from(topLevel.parentElement.children); const index = topItems.indexOf(topLevel); return topItems.slice(0, index).reverse().find(elem => elem.dataset.type === 'chapter'); - } + }, }, book_end: { active(elem, parent, book) { @@ -116,7 +116,7 @@ const moveActions = { }, run(elem, parent, book) { book.querySelector('ul').append(elem); - } + }, }, book_start: { active(elem, parent, book) { @@ -124,7 +124,7 @@ const moveActions = { }, run(elem, parent, book) { book.querySelector('ul').prepend(elem); - } + }, }, before_chapter: { active(elem, parent, book) { @@ -132,7 +132,7 @@ const moveActions = { }, run(elem, parent, book) { parent.insertAdjacentElement('beforebegin', elem); - } + }, }, after_chapter: { active(elem, parent, book) { @@ -140,7 +140,7 @@ const moveActions = { }, run(elem, parent, book) { parent.insertAdjacentElement('afterend', elem); - } + }, }, }; @@ -197,11 +197,11 @@ export class BookSort extends Component { let sortFunction = sortOperations[sort]; if (reverse && reversibleTypes.includes(sort)) { sortFunction = function(a, b) { - return 0 - sortOperations[sort](a, b) + return 0 - sortOperations[sort](a, b); }; } - for (let list of sortLists) { + for (const list of sortLists) { const directItems = Array.from(list.children).filter(child => child.matches('li')); directItems.sort(sortFunction).forEach(sortedItem => { list.appendChild(sortedItem); @@ -221,7 +221,7 @@ export class BookSort extends Component { const alreadyAdded = this.container.querySelector(`[data-type="book"][data-id="${entityInfo.id}"]`) !== null; if (alreadyAdded) return; - const entitySortItemUrl = entityInfo.link + '/sort-item'; + const entitySortItemUrl = `${entityInfo.link}/sort-item`; window.$http.get(entitySortItemUrl).then(resp => { const newBookContainer = htmlToDom(resp.data); this.sortContainer.append(newBookContainer); @@ -249,9 +249,9 @@ export class BookSort extends Component { const chapterGroupConfig = { name: 'chapter', pull: ['book', 'chapter'], - put: function(toList, fromList, draggedElem) { + put(toList, fromList, draggedElem) { return draggedElem.getAttribute('data-type') === 'page'; - } + }, }; for (const sortElem of sortElems) { @@ -260,8 +260,8 @@ export class BookSort extends Component { animation: 150, fallbackOnBody: true, swapThreshold: 0.65, - onSort: (event) => { - this.ensureNoNestedChapters() + onSort: event => { + this.ensureNoNestedChapters(); this.updateMapInput(); this.updateMoveActionStateForAll(); }, @@ -304,7 +304,7 @@ export class BookSort extends Component { const entityMap = []; const lists = this.container.querySelectorAll('.sort-list'); - for (let list of lists) { + for (const list of lists) { const bookId = list.closest('[data-type="book"]').getAttribute('data-id'); const directChildren = Array.from(list.children) .filter(elem => elem.matches('[data-type="page"], [data-type="chapter"]')); @@ -332,9 +332,9 @@ export class BookSort extends Component { entityMap.push({ id: childId, sort: index, - parentChapter: parentChapter, - type: type, - book: bookId + parentChapter, + type, + book: bookId, }); const subPages = childElem.querySelectorAll('[data-type="page"]'); @@ -344,7 +344,7 @@ export class BookSort extends Component { sort: i, parentChapter: childId, type: 'page', - book: bookId + book: bookId, }); } } @@ -383,4 +383,5 @@ export class BookSort extends Component { this.updateMoveActionState(item); } } -} \ No newline at end of file + +} diff --git a/resources/js/components/chapter-contents.js b/resources/js/components/chapter-contents.js index 37df213e3..11e1e8c44 100644 --- a/resources/js/components/chapter-contents.js +++ b/resources/js/components/chapter-contents.js @@ -1,5 +1,5 @@ -import {slideUp, slideDown} from "../services/animations"; -import {Component} from "./component"; +import {slideUp, slideDown} from '../services/animations'; +import {Component} from './component'; export class ChapterContents extends Component { @@ -27,6 +27,7 @@ export class ChapterContents extends Component { click(event) { event.preventDefault(); - this.isOpen ? this.close() : this.open(); + this.isOpen ? this.close() : this.open(); } + } diff --git a/resources/js/components/code-editor.js b/resources/js/components/code-editor.js index 0188eb250..0d8450314 100644 --- a/resources/js/components/code-editor.js +++ b/resources/js/components/code-editor.js @@ -1,6 +1,5 @@ -import {onChildEvent, onEnterPress, onSelect} from "../services/dom"; -import {Component} from "./component"; - +import {onChildEvent, onEnterPress, onSelect} from '../services/dom'; +import {Component} from './component'; export class CodeEditor extends Component { @@ -10,7 +9,9 @@ export class CodeEditor extends Component { editor = null; callback = null; + history = {}; + historyKey = 'code_history'; setup() { @@ -77,13 +78,13 @@ export class CodeEditor extends Component { button.setAttribute('data-favourite', isFavorite ? 'true' : 'false'); window.$http.patch('/preferences/update-code-language-favourite', { - language: language, - active: isFavorite + language, + active: isFavorite, }); this.sortLanguageList(); if (isFavorite) { - button.scrollIntoView({block: "center", behavior: "smooth"}); + button.scrollIntoView({block: 'center', behavior: 'smooth'}); } }); } @@ -95,7 +96,7 @@ export class CodeEditor extends Component { if (aFav && !bFav) { return -1; - } else if (bFav && !aFav) { + } if (bFav && !aFav) { return 1; } @@ -133,7 +134,7 @@ export class CodeEditor extends Component { this.getPopup().show(() => { this.editor.focus(); }, () => { - this.addHistory() + this.addHistory(); }); } @@ -162,7 +163,7 @@ export class CodeEditor extends Component { const isMatch = inputLang === lang; link.classList.toggle('active', isMatch); if (isMatch) { - link.scrollIntoView({block: "center", behavior: "smooth"}); + link.scrollIntoView({block: 'center', behavior: 'smooth'}); } } } @@ -172,8 +173,8 @@ export class CodeEditor extends Component { const historyKeys = Object.keys(this.history).reverse(); this.historyDropDown.classList.toggle('hidden', historyKeys.length === 0); this.historyList.innerHTML = historyKeys.map(key => { - const localTime = (new Date(parseInt(key))).toLocaleTimeString(); - return `
    • `; + const localTime = (new Date(parseInt(key))).toLocaleTimeString(); + return `
    • `; }).join(''); } @@ -191,4 +192,4 @@ export class CodeEditor extends Component { window.sessionStorage.setItem(this.historyKey, historyString); } -} \ No newline at end of file +} diff --git a/resources/js/components/code-highlighter.js b/resources/js/components/code-highlighter.js index 14bfc97f0..e12d77044 100644 --- a/resources/js/components/code-highlighter.js +++ b/resources/js/components/code-highlighter.js @@ -1,6 +1,6 @@ -import {Component} from "./component"; +import {Component} from './component'; -export class CodeHighlighter extends Component{ +export class CodeHighlighter extends Component { setup() { const container = this.$el; @@ -8,9 +8,9 @@ export class CodeHighlighter extends Component{ const codeBlocks = container.querySelectorAll('pre'); if (codeBlocks.length > 0) { window.importVersioned('code').then(Code => { - Code.highlightWithin(container); + Code.highlightWithin(container); }); } } -} \ No newline at end of file +} diff --git a/resources/js/components/code-textarea.js b/resources/js/components/code-textarea.js index 0e49aec17..2f536da0b 100644 --- a/resources/js/components/code-textarea.js +++ b/resources/js/components/code-textarea.js @@ -2,14 +2,14 @@ * A simple component to render a code editor within the textarea * this exists upon. */ -import {Component} from "./component"; +import {Component} from './component'; export class CodeTextarea extends Component { async setup() { - const mode = this.$opts.mode; + const {mode} = this.$opts; const Code = await window.importVersioned('code'); Code.inlineEditor(this.$el, mode); } -} \ No newline at end of file +} diff --git a/resources/js/components/collapsible.js b/resources/js/components/collapsible.js index bb8ed477f..6f740ed71 100644 --- a/resources/js/components/collapsible.js +++ b/resources/js/components/collapsible.js @@ -1,5 +1,5 @@ -import {slideDown, slideUp} from "../services/animations"; -import {Component} from "./component"; +import {slideDown, slideUp} from '../services/animations'; +import {Component} from './component'; /** * Collapsible @@ -45,4 +45,4 @@ export class Collapsible extends Component { } } -} \ No newline at end of file +} diff --git a/resources/js/components/component.js b/resources/js/components/component.js index 292bbb624..654f41a96 100644 --- a/resources/js/components/component.js +++ b/resources/js/components/component.js @@ -51,8 +51,9 @@ export class Component { const componentName = this.$name; const event = new CustomEvent(`${componentName}-${eventName}`, { bubbles: true, - detail: data + detail: data, }); this.$el.dispatchEvent(event); } -} \ No newline at end of file + +} diff --git a/resources/js/components/confirm-dialog.js b/resources/js/components/confirm-dialog.js index 572945d5a..2a3b6e776 100644 --- a/resources/js/components/confirm-dialog.js +++ b/resources/js/components/confirm-dialog.js @@ -1,5 +1,5 @@ -import {onSelect} from "../services/dom"; -import {Component} from "./component"; +import {onSelect} from '../services/dom'; +import {Component} from './component'; /** * Custom equivalent of window.confirm() using our popup component. @@ -26,7 +26,7 @@ export class ConfirmDialog extends Component { }); return new Promise((res, rej) => { - this.res = res; + this.res = res; }); } @@ -42,9 +42,9 @@ export class ConfirmDialog extends Component { */ sendResult(result) { if (this.res) { - this.res(result) + this.res(result); this.res = null; } } -} \ No newline at end of file +} diff --git a/resources/js/components/custom-checkbox.js b/resources/js/components/custom-checkbox.js index 99804c4bc..a5f1d5664 100644 --- a/resources/js/components/custom-checkbox.js +++ b/resources/js/components/custom-checkbox.js @@ -1,4 +1,4 @@ -import {Component} from "./component"; +import {Component} from './component'; export class CustomCheckbox extends Component { @@ -30,4 +30,4 @@ export class CustomCheckbox extends Component { this.display.setAttribute('aria-checked', checked); } -} \ No newline at end of file +} diff --git a/resources/js/components/details-highlighter.js b/resources/js/components/details-highlighter.js index 6466fb584..71c202629 100644 --- a/resources/js/components/details-highlighter.js +++ b/resources/js/components/details-highlighter.js @@ -1,4 +1,4 @@ -import {Component} from "./component"; +import {Component} from './component'; export class DetailsHighlighter extends Component { @@ -19,4 +19,5 @@ export class DetailsHighlighter extends Component { } this.dealtWith = true; } -} \ No newline at end of file + +} diff --git a/resources/js/components/dropdown-search.js b/resources/js/components/dropdown-search.js index 30a2aadc1..2344619f5 100644 --- a/resources/js/components/dropdown-search.js +++ b/resources/js/components/dropdown-search.js @@ -1,6 +1,6 @@ -import {debounce} from "../services/util"; -import {transitionHeight} from "../services/animations"; -import {Component} from "./component"; +import {debounce} from '../services/util'; +import {transitionHeight} from '../services/animations'; +import {Component} from './component'; export class DropdownSearch extends Component { @@ -40,7 +40,7 @@ export class DropdownSearch extends Component { runLocalSearch(searchTerm) { const listItems = this.listContainerElem.querySelectorAll(this.localSearchSelector); - for (let listItem of listItems) { + for (const listItem of listItems) { const match = !searchTerm || listItem.textContent.toLowerCase().includes(searchTerm); listItem.style.display = match ? 'flex' : 'none'; listItem.classList.toggle('hidden', !match); @@ -79,4 +79,4 @@ export class DropdownSearch extends Component { this.loadingElem.style.display = show ? 'block' : 'none'; } -} \ No newline at end of file +} diff --git a/resources/js/components/dropdown.js b/resources/js/components/dropdown.js index ed69088b2..8444bf038 100644 --- a/resources/js/components/dropdown.js +++ b/resources/js/components/dropdown.js @@ -1,6 +1,6 @@ -import {onSelect} from "../services/dom"; -import {KeyboardNavigationHandler} from "../services/keyboard-navigation"; -import {Component} from "./component"; +import {onSelect} from '../services/dom'; +import {KeyboardNavigationHandler} from '../services/keyboard-navigation'; +import {Component} from './component'; /** * Dropdown @@ -41,7 +41,7 @@ export class Dropdown extends Component { this.menu.style.position = 'fixed'; this.menu.style.width = `${menuOriginalRect.width}px`; this.menu.style.left = `${menuOriginalRect.left}px`; - heightOffset = dropUpwards ? (window.innerHeight - menuOriginalRect.top - toggleHeight / 2) : menuOriginalRect.top; + heightOffset = dropUpwards ? (window.innerHeight - menuOriginalRect.top - toggleHeight / 2) : menuOriginalRect.top; } // Adjust menu to display upwards if near the bottom of the screen @@ -76,7 +76,7 @@ export class Dropdown extends Component { } hideAll() { - for (let dropdown of window.$components.get('dropdown')) { + for (const dropdown of window.$components.get('dropdown')) { dropdown.hide(); } } @@ -100,13 +100,13 @@ export class Dropdown extends Component { } setupListeners() { - const keyboardNavHandler = new KeyboardNavigationHandler(this.container, (event) => { + const keyboardNavHandler = new KeyboardNavigationHandler(this.container, event => { this.hide(); this.toggle.focus(); if (!this.bubbleEscapes) { event.stopPropagation(); } - }, (event) => { + }, event => { if (event.target.nodeName === 'INPUT') { event.preventDefault(); event.stopPropagation(); @@ -120,10 +120,10 @@ export class Dropdown extends Component { // Hide menu on option click this.container.addEventListener('click', event => { - const possibleChildren = Array.from(this.menu.querySelectorAll('a')); - if (possibleChildren.includes(event.target)) { - this.hide(); - } + const possibleChildren = Array.from(this.menu.querySelectorAll('a')); + if (possibleChildren.includes(event.target)) { + this.hide(); + } }); onSelect(this.toggle, event => { diff --git a/resources/js/components/dropzone.js b/resources/js/components/dropzone.js index 911a033c7..957360dae 100644 --- a/resources/js/components/dropzone.js +++ b/resources/js/components/dropzone.js @@ -1,8 +1,9 @@ -import DropZoneLib from "dropzone"; -import {fadeOut} from "../services/animations"; -import {Component} from "./component"; +import DropZoneLib from 'dropzone'; +import {fadeOut} from '../services/animations'; +import {Component} from './component'; export class Dropzone extends Component { + setup() { this.container = this.$el; this.url = this.$opts.url; @@ -25,19 +26,18 @@ export class Dropzone extends Component { this.dz.on('sending', _this.onSending.bind(_this)); this.dz.on('success', _this.onSuccess.bind(_this)); this.dz.on('error', _this.onError.bind(_this)); - } + }, }); } onSending(file, xhr, data) { - const token = window.document.querySelector('meta[name=token]').getAttribute('content'); data.append('_token', token); - xhr.ontimeout = (e) => { + xhr.ontimeout = e => { this.dz.emit('complete', file); this.dz.emit('error', file, this.timeoutMessage); - } + }; } onSuccess(file, data) { @@ -55,10 +55,10 @@ export class Dropzone extends Component { onError(file, errorMessage, xhr) { this.$emit('error', {file, errorMessage, xhr}); - const setMessage = (message) => { + const setMessage = message => { const messsageEl = file.previewElement.querySelector('[data-dz-errormessage]'); messsageEl.textContent = message; - } + }; if (xhr && xhr.status === 413) { setMessage(this.uploadLimitMessage); @@ -70,4 +70,5 @@ export class Dropzone extends Component { removeAll() { this.dz.removeAllFiles(true); } -} \ No newline at end of file + +} diff --git a/resources/js/components/editor-toolbox.js b/resources/js/components/editor-toolbox.js index a581ae7b4..4d3c0ae75 100644 --- a/resources/js/components/editor-toolbox.js +++ b/resources/js/components/editor-toolbox.js @@ -1,4 +1,4 @@ -import {Component} from "./component"; +import {Component} from './component'; export class EditorToolbox extends Component { @@ -35,11 +35,10 @@ export class EditorToolbox extends Component { } setActiveTab(tabName, openToolbox = false) { - // Set button visibility for (const button of this.buttons) { button.classList.remove('active'); - const bName = button.dataset.tab; + const bName = button.dataset.tab; if (bName === tabName) button.classList.add('active'); } @@ -55,4 +54,4 @@ export class EditorToolbox extends Component { } } -} \ No newline at end of file +} diff --git a/resources/js/components/entity-permissions.js b/resources/js/components/entity-permissions.js index d4a616ff1..62f8653c2 100644 --- a/resources/js/components/entity-permissions.js +++ b/resources/js/components/entity-permissions.js @@ -1,5 +1,5 @@ -import {htmlToDom} from "../services/dom"; -import {Component} from "./component"; +import {htmlToDom} from '../services/dom'; +import {Component} from './component'; export class EntityPermissions extends Component { @@ -29,7 +29,7 @@ export class EntityPermissions extends Component { this.container.addEventListener('click', event => { const button = event.target.closest('button'); if (button && button.dataset.roleId) { - this.removeRowOnButtonClick(button) + this.removeRowOnButtonClick(button); } }); @@ -61,8 +61,8 @@ export class EntityPermissions extends Component { removeRowOnButtonClick(button) { const row = button.closest('.item-list-row'); - const roleId = button.dataset.roleId; - const roleName = button.dataset.roleName; + const {roleId} = button.dataset; + const {roleName} = button.dataset; const option = document.createElement('option'); option.value = roleId; @@ -72,4 +72,4 @@ export class EntityPermissions extends Component { row.remove(); } -} \ No newline at end of file +} diff --git a/resources/js/components/entity-search.js b/resources/js/components/entity-search.js index b0e42401d..0795fca98 100644 --- a/resources/js/components/entity-search.js +++ b/resources/js/components/entity-search.js @@ -1,7 +1,8 @@ -import {onSelect} from "../services/dom"; -import {Component} from "./component"; +import {onSelect} from '../services/dom'; +import {Component} from './component'; export class EntitySearch extends Component { + setup() { this.entityId = this.$opts.entityId; this.entityType = this.$opts.entityType; @@ -51,4 +52,5 @@ export class EntitySearch extends Component { this.loadingBlock.classList.add('hidden'); this.searchInput.value = ''; } -} \ No newline at end of file + +} diff --git a/resources/js/components/entity-selector-popup.js b/resources/js/components/entity-selector-popup.js index d455f7ee7..e21e67fb3 100644 --- a/resources/js/components/entity-selector-popup.js +++ b/resources/js/components/entity-selector-popup.js @@ -1,4 +1,4 @@ -import {Component} from "./component"; +import {Component} from './component'; export class EntitySelectorPopup extends Component { @@ -57,4 +57,5 @@ export class EntitySelectorPopup extends Component { this.getSelector().reset(); if (this.callback && entity) this.callback(entity); } -} \ No newline at end of file + +} diff --git a/resources/js/components/entity-selector.js b/resources/js/components/entity-selector.js index 09d14b233..bdc2277c2 100644 --- a/resources/js/components/entity-selector.js +++ b/resources/js/components/entity-selector.js @@ -1,5 +1,5 @@ -import {onChildEvent} from "../services/dom"; -import {Component} from "./component"; +import {onChildEvent} from '../services/dom'; +import {Component} from './component'; /** * Entity Selector @@ -65,13 +65,13 @@ export class EntitySelector extends Component { if (e.code === 'ArrowDown') { this.focusAdjacent(true); } - }) + }); } focusAdjacent(forward = true) { const items = Array.from(this.resultsContainer.querySelectorAll('[data-entity-type]')); const selectedIndex = items.indexOf(document.activeElement); - const newItem = items[selectedIndex+ (forward ? 1 : -1)] || items[0]; + const newItem = items[selectedIndex + (forward ? 1 : -1)] || items[0]; if (newItem) { newItem.focus(); } @@ -101,7 +101,7 @@ export class EntitySelector extends Component { window.$http.get(this.searchUrl()).then(resp => { this.resultsContainer.innerHTML = resp.data; this.hideLoading(); - }) + }); } searchUrl() { @@ -144,13 +144,13 @@ export class EntitySelector extends Component { const link = item.getAttribute('href'); const name = item.querySelector('.entity-list-item-name').textContent; - const data = {id: Number(id), name: name, link: link}; + const data = {id: Number(id), name, link}; if (isSelected) { item.classList.add('selected'); this.selectedItemData = data; } else { - window.$events.emit('entity-select-change', null) + window.$events.emit('entity-select-change', null); } if (!isDblClick && !isSelected) return; @@ -159,7 +159,7 @@ export class EntitySelector extends Component { this.confirmSelection(data); } if (isSelected) { - window.$events.emit('entity-select-change', data) + window.$events.emit('entity-select-change', data); } } @@ -175,4 +175,4 @@ export class EntitySelector extends Component { this.selectedItemData = null; } -} \ No newline at end of file +} diff --git a/resources/js/components/event-emit-select.js b/resources/js/components/event-emit-select.js index 2e6fd5fdb..2097c0528 100644 --- a/resources/js/components/event-emit-select.js +++ b/resources/js/components/event-emit-select.js @@ -1,5 +1,5 @@ -import {onSelect} from "../services/dom"; -import {Component} from "./component"; +import {onSelect} from '../services/dom'; +import {Component} from './component'; /** * EventEmitSelect @@ -12,15 +12,15 @@ import {Component} from "./component"; * All options will be set as the "detail" of the event with * their values included. */ -export class EventEmitSelect extends Component{ +export class EventEmitSelect extends Component { + setup() { this.container = this.$el; this.name = this.$opts.name; - onSelect(this.$el, () => { this.$emit(this.name, this.$opts); }); } -} \ No newline at end of file +} diff --git a/resources/js/components/expand-toggle.js b/resources/js/components/expand-toggle.js index ab4d38ab1..76928623d 100644 --- a/resources/js/components/expand-toggle.js +++ b/resources/js/components/expand-toggle.js @@ -1,5 +1,5 @@ -import {slideUp, slideDown} from "../services/animations"; -import {Component} from "./component"; +import {slideUp, slideDown} from '../services/animations'; +import {Component} from './component'; export class ExpandToggle extends Component { @@ -24,8 +24,8 @@ export class ExpandToggle extends Component { event.preventDefault(); const matchingElems = document.querySelectorAll(this.targetSelector); - for (let match of matchingElems) { - this.isOpen ? this.close(match) : this.open(match); + for (const match of matchingElems) { + this.isOpen ? this.close(match) : this.open(match); } this.isOpen = !this.isOpen; @@ -34,8 +34,8 @@ export class ExpandToggle extends Component { updateSystemAjax(isOpen) { window.$http.patch(this.updateEndpoint, { - expand: isOpen ? 'true' : 'false' + expand: isOpen ? 'true' : 'false', }); } -} \ No newline at end of file +} diff --git a/resources/js/components/global-search.js b/resources/js/components/global-search.js index 7bc8a1d45..798bd7aac 100644 --- a/resources/js/components/global-search.js +++ b/resources/js/components/global-search.js @@ -1,7 +1,7 @@ -import {htmlToDom} from "../services/dom"; -import {debounce} from "../services/util"; -import {KeyboardNavigationHandler} from "../services/keyboard-navigation"; -import {Component} from "./component"; +import {htmlToDom} from '../services/dom'; +import {debounce} from '../services/util'; +import {KeyboardNavigationHandler} from '../services/keyboard-navigation'; +import {Component} from './component'; /** * Global (header) search box handling. @@ -25,12 +25,12 @@ export class GlobalSearch extends Component { // Handle search input changes this.input.addEventListener('input', () => { - const value = this.input.value; + const {value} = this.input; if (value.length > 0) { this.loadingWrap.style.display = 'block'; this.suggestionResultsWrap.style.opacity = '0.5'; updateSuggestionsDebounced(value); - } else { + } else { this.hideSuggestions(); } }); @@ -55,7 +55,7 @@ export class GlobalSearch extends Component { if (!this.input.value) { return; } - + const resultDom = htmlToDom(results); this.suggestionResultsWrap.innerHTML = ''; @@ -71,7 +71,7 @@ export class GlobalSearch extends Component { this.container.classList.add('search-active'); window.requestAnimationFrame(() => { this.suggestions.classList.add('search-suggestions-animation'); - }) + }); } hideSuggestions() { @@ -79,4 +79,5 @@ export class GlobalSearch extends Component { this.suggestions.classList.remove('search-suggestions-animation'); this.suggestionResultsWrap.innerHTML = ''; } -} \ No newline at end of file + +} diff --git a/resources/js/components/header-mobile-toggle.js b/resources/js/components/header-mobile-toggle.js index 11b23cca6..f94f897f6 100644 --- a/resources/js/components/header-mobile-toggle.js +++ b/resources/js/components/header-mobile-toggle.js @@ -1,4 +1,4 @@ -import {Component} from "./component"; +import {Component} from './component'; export class HeaderMobileToggle extends Component { @@ -19,10 +19,10 @@ export class HeaderMobileToggle extends Component { this.toggleButton.setAttribute('aria-expanded', this.open ? 'true' : 'false'); if (this.open) { this.elem.addEventListener('keydown', this.onKeyDown); - window.addEventListener('click', this.onWindowClick) + window.addEventListener('click', this.onWindowClick); } else { this.elem.removeEventListener('keydown', this.onKeyDown); - window.removeEventListener('click', this.onWindowClick) + window.removeEventListener('click', this.onWindowClick); } event.stopPropagation(); } @@ -37,4 +37,4 @@ export class HeaderMobileToggle extends Component { this.onToggle(event); } -} \ No newline at end of file +} diff --git a/resources/js/components/image-manager.js b/resources/js/components/image-manager.js index 418b7c98a..732bc2cb4 100644 --- a/resources/js/components/image-manager.js +++ b/resources/js/components/image-manager.js @@ -1,5 +1,7 @@ -import {onChildEvent, onSelect, removeLoading, showLoading} from "../services/dom"; -import {Component} from "./component"; +import { + onChildEvent, onSelect, removeLoading, showLoading, +} from '../services/dom'; +import {Component} from './component'; export class ImageManager extends Component { @@ -210,4 +212,4 @@ export class ImageManager extends Component { window.$components.init(this.formContainer); } -} \ No newline at end of file +} diff --git a/resources/js/components/image-picker.js b/resources/js/components/image-picker.js index 03d9567d2..d25e01dd7 100644 --- a/resources/js/components/image-picker.js +++ b/resources/js/components/image-picker.js @@ -1,4 +1,4 @@ -import {Component} from "./component"; +import {Component} from './component'; export class ImagePicker extends Component { @@ -31,7 +31,7 @@ export class ImagePicker extends Component { this.removeInput.setAttribute('disabled', 'disabled'); } - for (let file of this.imageInput.files) { + for (const file of this.imageInput.files) { this.imageElem.src = window.URL.createObjectURL(file); } this.imageElem.classList.remove('none'); @@ -54,4 +54,4 @@ export class ImagePicker extends Component { this.resetInput.setAttribute('disabled', 'disabled'); } -} \ No newline at end of file +} diff --git a/resources/js/components/index.js b/resources/js/components/index.js index 82136184b..40175b1e7 100644 --- a/resources/js/components/index.js +++ b/resources/js/components/index.js @@ -1,59 +1,59 @@ -export {AddRemoveRows} from "./add-remove-rows.js" -export {AjaxDeleteRow} from "./ajax-delete-row.js" -export {AjaxForm} from "./ajax-form.js" -export {Attachments} from "./attachments.js" -export {AttachmentsList} from "./attachments-list.js" -export {AutoSuggest} from "./auto-suggest.js" -export {AutoSubmit} from "./auto-submit.js" -export {BackToTop} from "./back-to-top.js" -export {BookSort} from "./book-sort.js" -export {ChapterContents} from "./chapter-contents.js" -export {CodeEditor} from "./code-editor.js" -export {CodeHighlighter} from "./code-highlighter.js" -export {CodeTextarea} from "./code-textarea.js" -export {Collapsible} from "./collapsible.js" -export {ConfirmDialog} from "./confirm-dialog" -export {CustomCheckbox} from "./custom-checkbox.js" -export {DetailsHighlighter} from "./details-highlighter.js" -export {Dropdown} from "./dropdown.js" -export {DropdownSearch} from "./dropdown-search.js" -export {Dropzone} from "./dropzone.js" -export {EditorToolbox} from "./editor-toolbox.js" -export {EntityPermissions} from "./entity-permissions" -export {EntitySearch} from "./entity-search.js" -export {EntitySelector} from "./entity-selector.js" -export {EntitySelectorPopup} from "./entity-selector-popup.js" -export {EventEmitSelect} from "./event-emit-select.js" -export {ExpandToggle} from "./expand-toggle.js" -export {GlobalSearch} from "./global-search.js" -export {HeaderMobileToggle} from "./header-mobile-toggle.js" -export {ImageManager} from "./image-manager.js" -export {ImagePicker} from "./image-picker.js" -export {ListSortControl} from "./list-sort-control.js" -export {MarkdownEditor} from "./markdown-editor.js" -export {NewUserPassword} from "./new-user-password.js" -export {Notification} from "./notification.js" -export {OptionalInput} from "./optional-input.js" -export {PageComments} from "./page-comments.js" -export {PageDisplay} from "./page-display.js" -export {PageEditor} from "./page-editor.js" -export {PagePicker} from "./page-picker.js" -export {PermissionsTable} from "./permissions-table.js" -export {Pointer} from "./pointer.js" -export {Popup} from "./popup.js" -export {SettingAppColorScheme} from "./setting-app-color-scheme.js" -export {SettingColorPicker} from "./setting-color-picker.js" -export {SettingHomepageControl} from "./setting-homepage-control.js" -export {ShelfSort} from "./shelf-sort.js" -export {Shortcuts} from "./shortcuts" -export {ShortcutInput} from "./shortcut-input" -export {SortableList} from "./sortable-list.js" -export {SubmitOnChange} from "./submit-on-change.js" -export {Tabs} from "./tabs.js" -export {TagManager} from "./tag-manager.js" -export {TemplateManager} from "./template-manager.js" -export {ToggleSwitch} from "./toggle-switch.js" -export {TriLayout} from "./tri-layout.js" -export {UserSelect} from "./user-select.js" -export {WebhookEvents} from "./webhook-events" -export {WysiwygEditor} from "./wysiwyg-editor.js" +export {AddRemoveRows} from './add-remove-rows.js'; +export {AjaxDeleteRow} from './ajax-delete-row.js'; +export {AjaxForm} from './ajax-form.js'; +export {Attachments} from './attachments.js'; +export {AttachmentsList} from './attachments-list.js'; +export {AutoSuggest} from './auto-suggest.js'; +export {AutoSubmit} from './auto-submit.js'; +export {BackToTop} from './back-to-top.js'; +export {BookSort} from './book-sort.js'; +export {ChapterContents} from './chapter-contents.js'; +export {CodeEditor} from './code-editor.js'; +export {CodeHighlighter} from './code-highlighter.js'; +export {CodeTextarea} from './code-textarea.js'; +export {Collapsible} from './collapsible.js'; +export {ConfirmDialog} from './confirm-dialog'; +export {CustomCheckbox} from './custom-checkbox.js'; +export {DetailsHighlighter} from './details-highlighter.js'; +export {Dropdown} from './dropdown.js'; +export {DropdownSearch} from './dropdown-search.js'; +export {Dropzone} from './dropzone.js'; +export {EditorToolbox} from './editor-toolbox.js'; +export {EntityPermissions} from './entity-permissions'; +export {EntitySearch} from './entity-search.js'; +export {EntitySelector} from './entity-selector.js'; +export {EntitySelectorPopup} from './entity-selector-popup.js'; +export {EventEmitSelect} from './event-emit-select.js'; +export {ExpandToggle} from './expand-toggle.js'; +export {GlobalSearch} from './global-search.js'; +export {HeaderMobileToggle} from './header-mobile-toggle.js'; +export {ImageManager} from './image-manager.js'; +export {ImagePicker} from './image-picker.js'; +export {ListSortControl} from './list-sort-control.js'; +export {MarkdownEditor} from './markdown-editor.js'; +export {NewUserPassword} from './new-user-password.js'; +export {Notification} from './notification.js'; +export {OptionalInput} from './optional-input.js'; +export {PageComments} from './page-comments.js'; +export {PageDisplay} from './page-display.js'; +export {PageEditor} from './page-editor.js'; +export {PagePicker} from './page-picker.js'; +export {PermissionsTable} from './permissions-table.js'; +export {Pointer} from './pointer.js'; +export {Popup} from './popup.js'; +export {SettingAppColorScheme} from './setting-app-color-scheme.js'; +export {SettingColorPicker} from './setting-color-picker.js'; +export {SettingHomepageControl} from './setting-homepage-control.js'; +export {ShelfSort} from './shelf-sort.js'; +export {Shortcuts} from './shortcuts'; +export {ShortcutInput} from './shortcut-input'; +export {SortableList} from './sortable-list.js'; +export {SubmitOnChange} from './submit-on-change.js'; +export {Tabs} from './tabs.js'; +export {TagManager} from './tag-manager.js'; +export {TemplateManager} from './template-manager.js'; +export {ToggleSwitch} from './toggle-switch.js'; +export {TriLayout} from './tri-layout.js'; +export {UserSelect} from './user-select.js'; +export {WebhookEvents} from './webhook-events'; +export {WysiwygEditor} from './wysiwyg-editor.js'; diff --git a/resources/js/components/list-sort-control.js b/resources/js/components/list-sort-control.js index b8d4de73a..4b38fc1e5 100644 --- a/resources/js/components/list-sort-control.js +++ b/resources/js/components/list-sort-control.js @@ -2,7 +2,7 @@ * ListSortControl * Manages the logic for the control which provides list sorting options. */ -import {Component} from "./component"; +import {Component} from './component'; export class ListSortControl extends Component { @@ -45,4 +45,4 @@ export class ListSortControl extends Component { this.form.submit(); } -} \ No newline at end of file +} diff --git a/resources/js/components/markdown-editor.js b/resources/js/components/markdown-editor.js index 9d687c83c..1eeb02318 100644 --- a/resources/js/components/markdown-editor.js +++ b/resources/js/components/markdown-editor.js @@ -1,5 +1,5 @@ -import {Component} from "./component"; -import {init as initEditor} from "../markdown/editor"; +import {Component} from './component'; +import {init as initEditor} from '../markdown/editor'; export class MarkdownEditor extends Component { @@ -16,7 +16,7 @@ export class MarkdownEditor extends Component { this.divider = this.$refs.divider; this.displayWrap = this.$refs.displayWrap; - const settingContainer = this.$refs.settingContainer; + const {settingContainer} = this.$refs; const settingInputs = settingContainer.querySelectorAll('input[type="checkbox"]'); this.editor = null; @@ -49,10 +49,9 @@ export class MarkdownEditor extends Component { } setupListeners() { - // Button actions this.elem.addEventListener('click', event => { - let button = event.target.closest('button[data-action]'); + const button = event.target.closest('button[data-action]'); if (button === null) return; const action = button.getAttribute('data-action'); @@ -85,13 +84,13 @@ export class MarkdownEditor extends Component { handleDividerDrag() { this.divider.addEventListener('pointerdown', event => { const wrapRect = this.elem.getBoundingClientRect(); - const moveListener = (event) => { + const moveListener = event => { const xRel = event.pageX - wrapRect.left; const xPct = Math.min(Math.max(20, Math.floor((xRel / wrapRect.width) * 100)), 80); - this.displayWrap.style.flexBasis = `${100-xPct}%`; + this.displayWrap.style.flexBasis = `${100 - xPct}%`; this.editor.settings.set('editorWidth', xPct); }; - const upListener = (event) => { + const upListener = event => { window.removeEventListener('pointermove', moveListener); window.removeEventListener('pointerup', upListener); this.display.style.pointerEvents = null; @@ -105,7 +104,7 @@ export class MarkdownEditor extends Component { }); const widthSetting = this.editor.settings.get('editorWidth'); if (widthSetting) { - this.displayWrap.style.flexBasis = `${100-widthSetting}%`; + this.displayWrap.style.flexBasis = `${100 - widthSetting}%`; } } diff --git a/resources/js/components/new-user-password.js b/resources/js/components/new-user-password.js index a4ed4d15b..e294f8e97 100644 --- a/resources/js/components/new-user-password.js +++ b/resources/js/components/new-user-password.js @@ -1,4 +1,4 @@ -import {Component} from "./component"; +import {Component} from './component'; export class NewUserPassword extends Component { @@ -23,4 +23,4 @@ export class NewUserPassword extends Component { this.inputContainer.style.display = inviting ? 'none' : 'block'; } -} \ No newline at end of file +} diff --git a/resources/js/components/notification.js b/resources/js/components/notification.js index 8a0876241..8a1ef922a 100644 --- a/resources/js/components/notification.js +++ b/resources/js/components/notification.js @@ -1,13 +1,13 @@ -import {Component} from "./component"; +import {Component} from './component'; -export class Notification extends Component { +export class Notification extends Component { setup() { this.container = this.$el; this.type = this.$opts.type; this.textElem = this.container.querySelector('span'); this.autoHide = this.$opts.autoHide === 'true'; - this.initialShow = this.$opts.show === 'true' + this.initialShow = this.$opts.show === 'true'; this.container.style.display = 'grid'; window.$events.listen(this.type, text => { @@ -47,4 +47,4 @@ export class Notification extends Component { this.container.removeEventListener('transitionend', this.hideCleanup); } -} \ No newline at end of file +} diff --git a/resources/js/components/optional-input.js b/resources/js/components/optional-input.js index cc429c991..64cee12cd 100644 --- a/resources/js/components/optional-input.js +++ b/resources/js/components/optional-input.js @@ -1,7 +1,8 @@ -import {onSelect} from "../services/dom"; -import {Component} from "./component"; +import {onSelect} from '../services/dom'; +import {Component} from './component'; export class OptionalInput extends Component { + setup() { this.removeButton = this.$refs.remove; this.showButton = this.$refs.show; @@ -24,4 +25,4 @@ export class OptionalInput extends Component { }); } -} \ No newline at end of file +} diff --git a/resources/js/components/page-comments.js b/resources/js/components/page-comments.js index 726531e95..314ddf3e1 100644 --- a/resources/js/components/page-comments.js +++ b/resources/js/components/page-comments.js @@ -1,6 +1,6 @@ -import {scrollAndHighlightElement} from "../services/util"; -import {Component} from "./component"; -import {htmlToDom} from "../services/dom"; +import {scrollAndHighlightElement} from '../services/util'; +import {Component} from './component'; +import {htmlToDom} from '../services/dom'; export class PageComments extends Component { @@ -36,11 +36,11 @@ export class PageComments extends Component { } handleAction(event) { - let actionElem = event.target.closest('[action]'); + const actionElem = event.target.closest('[action]'); if (event.target.matches('a[href^="#"]')) { const id = event.target.href.split('#')[1]; - scrollAndHighlightElement(document.querySelector('#' + id)); + scrollAndHighlightElement(document.querySelector(`#${id}`)); } if (actionElem === null) return; @@ -68,24 +68,24 @@ export class PageComments extends Component { if (this.editingComment) this.closeUpdateForm(); commentElem.querySelector('[comment-content]').style.display = 'none'; commentElem.querySelector('[comment-edit-container]').style.display = 'block'; - let textArea = commentElem.querySelector('[comment-edit-container] textarea'); - let lineCount = textArea.value.split('\n').length; - textArea.style.height = ((lineCount * 20) + 40) + 'px'; + const textArea = commentElem.querySelector('[comment-edit-container] textarea'); + const lineCount = textArea.value.split('\n').length; + textArea.style.height = `${(lineCount * 20) + 40}px`; this.editingComment = commentElem; } updateComment(event) { - let form = event.target; + const form = event.target; event.preventDefault(); - let text = form.querySelector('textarea').value; - let reqData = { - text: text, + const text = form.querySelector('textarea').value; + const reqData = { + text, parent_id: this.parentId || null, }; this.showLoading(form); - let commentId = this.editingComment.getAttribute('comment'); + const commentId = this.editingComment.getAttribute('comment'); window.$http.put(`/comment/${commentId}`, reqData).then(resp => { - let newComment = document.createElement('div'); + const newComment = document.createElement('div'); newComment.innerHTML = resp.data; this.editingComment.innerHTML = newComment.children[0].innerHTML; window.$events.success(this.updatedText); @@ -98,7 +98,7 @@ export class PageComments extends Component { } deleteComment(commentElem) { - let id = commentElem.getAttribute('comment'); + const id = commentElem.getAttribute('comment'); this.showLoading(commentElem.querySelector('[comment-content]')); window.$http.delete(`/comment/${id}`).then(resp => { commentElem.parentNode.removeChild(commentElem); @@ -111,9 +111,9 @@ export class PageComments extends Component { saveComment(event) { event.preventDefault(); event.stopPropagation(); - let text = this.formInput.value; - let reqData = { - text: text, + const text = this.formInput.value; + const reqData = { + text, parent_id: this.parentId || null, }; this.showLoading(this.form); @@ -131,7 +131,7 @@ export class PageComments extends Component { } updateCount() { - let count = this.container.children.length; + const count = this.container.children.length; this.elem.querySelector('[comments-title]').textContent = window.trans_plural(this.countText, count, {count}); } @@ -148,14 +148,14 @@ export class PageComments extends Component { this.formContainer.parentNode.style.display = 'block'; this.addButtonContainer.style.display = 'none'; this.formInput.focus(); - this.formInput.scrollIntoView({behavior: "smooth"}); + this.formInput.scrollIntoView({behavior: 'smooth'}); } hideForm() { this.formContainer.style.display = 'none'; this.formContainer.parentNode.style.display = 'none'; if (this.getCommentCount() > 0) { - this.elem.appendChild(this.addButtonContainer) + this.elem.appendChild(this.addButtonContainer); } else { this.commentCountBar.appendChild(this.addButtonContainer); } @@ -182,7 +182,7 @@ export class PageComments extends Component { showLoading(formElem) { const groups = formElem.querySelectorAll('.form-group'); - for (let group of groups) { + for (const group of groups) { group.style.display = 'none'; } formElem.querySelector('.form-group.loading').style.display = 'block'; @@ -190,10 +190,10 @@ export class PageComments extends Component { hideLoading(formElem) { const groups = formElem.querySelectorAll('.form-group'); - for (let group of groups) { + for (const group of groups) { group.style.display = 'block'; } formElem.querySelector('.form-group.loading').style.display = 'none'; } -} \ No newline at end of file +} diff --git a/resources/js/components/page-display.js b/resources/js/components/page-display.js index c06c3310d..da67a1e61 100644 --- a/resources/js/components/page-display.js +++ b/resources/js/components/page-display.js @@ -1,6 +1,6 @@ -import * as DOM from "../services/dom"; -import {scrollAndHighlightElement} from "../services/util"; -import {Component} from "./component"; +import * as DOM from '../services/dom'; +import {scrollAndHighlightElement} from '../services/util'; +import {Component} from './component'; export class PageDisplay extends Component { @@ -26,7 +26,7 @@ export class PageDisplay extends Component { window.$components.first('tri-layout').showContent(); const contentId = child.getAttribute('href').substr(1); this.goToText(contentId); - window.history.pushState(null, null, '#' + contentId); + window.history.pushState(null, null, `#${contentId}`); }); } } @@ -63,7 +63,7 @@ export class PageDisplay extends Component { // Setup the intersection observer. const intersectOpts = { rootMargin: '0px 0px 0px 0px', - threshold: 1.0 + threshold: 1.0, }; const pageNavObserver = new IntersectionObserver(headingVisibilityChange, intersectOpts); @@ -81,7 +81,7 @@ export class PageDisplay extends Component { } function toggleAnchorHighlighting(elementId, shouldHighlight) { - DOM.forEach('a[href="#' + elementId + '"]', anchor => { + DOM.forEach(`a[href="#${elementId}"]`, anchor => { anchor.closest('li').classList.toggle('current-heading', shouldHighlight); }); } @@ -96,4 +96,5 @@ export class PageDisplay extends Component { const details = [...this.container.querySelectorAll('details')]; details.forEach(detail => detail.addEventListener('toggle', onToggle)); } -} \ No newline at end of file + +} diff --git a/resources/js/components/page-editor.js b/resources/js/components/page-editor.js index e2b92ff68..1b7a9d52a 100644 --- a/resources/js/components/page-editor.js +++ b/resources/js/components/page-editor.js @@ -1,9 +1,10 @@ -import * as Dates from "../services/dates"; -import {onSelect} from "../services/dom"; -import {debounce} from "../services/util"; -import {Component} from "./component"; +import * as Dates from '../services/dates'; +import {onSelect} from '../services/dom'; +import {debounce} from '../services/util'; +import {Component} from './component'; export class PageEditor extends Component { + setup() { // Options this.draftsEnabled = this.$opts.draftsEnabled === 'true'; @@ -93,12 +94,12 @@ export class PageEditor extends Component { runAutoSave() { // Stop if manually saved recently to prevent bombarding the server - const savedRecently = (Date.now() - this.autoSave.last < (this.autoSave.frequency)/2); + const savedRecently = (Date.now() - this.autoSave.last < (this.autoSave.frequency) / 2); if (savedRecently || !this.autoSave.pendingChange) { return; } - this.saveDraft() + this.saveDraft(); } savePage() { @@ -172,7 +173,6 @@ export class PageEditor extends Component { this.startAutoSave(); }, 1000); window.$events.emit('success', this.draftDiscardedText); - } updateChangelogDisplay() { @@ -180,7 +180,7 @@ export class PageEditor extends Component { if (summary.length === 0) { summary = this.setChangelogText; } else if (summary.length > 16) { - summary = summary.slice(0, 16) + '...'; + summary = `${summary.slice(0, 16)}...`; } this.changelogDisplay.innerText = summary; } @@ -193,7 +193,7 @@ export class PageEditor extends Component { event.preventDefault(); const link = event.target.closest('a').href; - /** @var {ConfirmDialog} **/ + /** @var {ConfirmDialog} * */ const dialog = window.$components.firstOnElement(this.switchDialogContainer, 'confirm-dialog'); const [saved, confirmed] = await Promise.all([this.saveDraft(), dialog.show()]); diff --git a/resources/js/components/page-picker.js b/resources/js/components/page-picker.js index fba0a0a43..83bf60a17 100644 --- a/resources/js/components/page-picker.js +++ b/resources/js/components/page-picker.js @@ -1,4 +1,4 @@ -import {Component} from "./component"; +import {Component} from './component'; export class PagePicker extends Component { @@ -24,7 +24,7 @@ export class PagePicker extends Component { } showPopup() { - /** @type {EntitySelectorPopup} **/ + /** @type {EntitySelectorPopup} * */ const selectorPopup = window.$components.first('entity-selector-popup'); selectorPopup.show(entity => { this.setValue(entity.id, entity.name); @@ -44,7 +44,7 @@ export class PagePicker extends Component { toggleElem(this.defaultDisplay, !hasValue); toggleElem(this.display, hasValue); if (hasValue) { - let id = this.getAssetIdFromVal(); + const id = this.getAssetIdFromVal(); this.display.textContent = `#${id}, ${name}`; this.display.href = window.baseUrl(`/link/${id}`); } @@ -58,4 +58,4 @@ export class PagePicker extends Component { function toggleElem(elem, show) { elem.style.display = show ? null : 'none'; -} \ No newline at end of file +} diff --git a/resources/js/components/permissions-table.js b/resources/js/components/permissions-table.js index 58ead1d57..800403c61 100644 --- a/resources/js/components/permissions-table.js +++ b/resources/js/components/permissions-table.js @@ -1,4 +1,4 @@ -import {Component} from "./component"; +import {Component} from './component'; export class PermissionsTable extends Component { @@ -41,7 +41,7 @@ export class PermissionsTable extends Component { const tableRows = this.container.querySelectorAll(this.rowSelector); const inputsToToggle = []; - for (let row of tableRows) { + for (const row of tableRows) { const targetCell = row.children[colIndex]; if (targetCell) { inputsToToggle.push(...targetCell.querySelectorAll('input[type=checkbox]')); @@ -57,10 +57,10 @@ export class PermissionsTable extends Component { toggleAllInputs(inputsToToggle) { const currentState = inputsToToggle.length > 0 ? inputsToToggle[0].checked : false; - for (let checkbox of inputsToToggle) { + for (const checkbox of inputsToToggle) { checkbox.checked = !currentState; checkbox.dispatchEvent(new Event('change')); } } -} \ No newline at end of file +} diff --git a/resources/js/components/pointer.js b/resources/js/components/pointer.js index a60525cb4..f1208ab76 100644 --- a/resources/js/components/pointer.js +++ b/resources/js/components/pointer.js @@ -1,7 +1,6 @@ -import * as DOM from "../services/dom"; -import {Component} from "./component"; -import {copyTextToClipboard} from "../services/clipboard"; - +import * as DOM from '../services/dom'; +import {Component} from './component'; +import {copyTextToClipboard} from '../services/clipboard'; export class Pointer extends Component { @@ -113,7 +112,7 @@ export class Pointer extends Component { updateForTarget(element) { let inputText = this.pointerModeLink ? window.baseUrl(`/link/${this.pageId}#${this.pointerSectionId}`) : `{{@${this.pageId}#${this.pointerSectionId}}}`; if (this.pointerModeLink && !inputText.startsWith('http')) { - inputText = window.location.protocol + "//" + window.location.host + inputText; + inputText = `${window.location.protocol}//${window.location.host}${inputText}`; } this.input.value = inputText; @@ -121,7 +120,7 @@ export class Pointer extends Component { // Update anchor if present const editAnchor = this.container.querySelector('#pointer-edit'); if (editAnchor && element) { - const editHref = editAnchor.dataset.editHref; + const {editHref} = editAnchor.dataset; const elementId = element.id; // get the first 50 characters. @@ -129,4 +128,5 @@ export class Pointer extends Component { editAnchor.href = `${editHref}?content-id=${elementId}&content-text=${encodeURIComponent(queryContent)}`; } } -} \ No newline at end of file + +} diff --git a/resources/js/components/popup.js b/resources/js/components/popup.js index 4c20876f8..34ab7c181 100644 --- a/resources/js/components/popup.js +++ b/resources/js/components/popup.js @@ -1,6 +1,6 @@ -import {fadeIn, fadeOut} from "../services/animations"; -import {onSelect} from "../services/dom"; -import {Component} from "./component"; +import {fadeIn, fadeOut} from '../services/animations'; +import {onSelect} from '../services/dom'; +import {Component} from './component'; /** * Popup window that will contain other content. @@ -47,7 +47,7 @@ export class Popup extends Component { show(onComplete = null, onHide = null) { fadeIn(this.container, 120, onComplete); - this.onkeyup = (event) => { + this.onkeyup = event => { if (event.key === 'Escape') { this.hide(); } @@ -56,4 +56,4 @@ export class Popup extends Component { this.onHide = onHide; } -} \ No newline at end of file +} diff --git a/resources/js/components/setting-app-color-scheme.js b/resources/js/components/setting-app-color-scheme.js index 71b14badc..d8e39d465 100644 --- a/resources/js/components/setting-app-color-scheme.js +++ b/resources/js/components/setting-app-color-scheme.js @@ -1,4 +1,4 @@ -import {Component} from "./component"; +import {Component} from './component'; export class SettingAppColorScheme extends Component { @@ -14,7 +14,7 @@ export class SettingAppColorScheme extends Component { this.handleModeChange(newMode); }); - const onInputChange = (event) => { + const onInputChange = event => { this.updateAppColorsFromInputs(); if (event.target.name.startsWith('setting-app-color')) { @@ -44,7 +44,7 @@ export class SettingAppColorScheme extends Component { cssId = 'primary'; } - const varName = '--color-' + cssId; + const varName = `--color-${cssId}`; document.body.style.setProperty(varName, input.value); } } @@ -57,9 +57,9 @@ export class SettingAppColorScheme extends Component { const lightName = input.name.replace('-color', '-color-light'); const hexVal = input.value; const rgb = this.hexToRgb(hexVal); - const rgbLightVal = 'rgba('+ [rgb.r, rgb.g, rgb.b, '0.15'].join(',') +')'; + const rgbLightVal = `rgba(${[rgb.r, rgb.g, rgb.b, '0.15'].join(',')})`; - console.log(input.name, lightName, hexVal, rgbLightVal) + console.log(input.name, lightName, hexVal, rgbLightVal); const lightColorInput = this.container.querySelector(`input[name="${lightName}"][type="hidden"]`); lightColorInput.value = rgbLightVal; } @@ -75,7 +75,7 @@ export class SettingAppColorScheme extends Component { return { r: result ? parseInt(result[1], 16) : 0, g: result ? parseInt(result[2], 16) : 0, - b: result ? parseInt(result[3], 16) : 0 + b: result ? parseInt(result[3], 16) : 0, }; } diff --git a/resources/js/components/setting-color-picker.js b/resources/js/components/setting-color-picker.js index bfb2c93ce..bc47b96c0 100644 --- a/resources/js/components/setting-color-picker.js +++ b/resources/js/components/setting-color-picker.js @@ -1,4 +1,4 @@ -import {Component} from "./component"; +import {Component} from './component'; export class SettingColorPicker extends Component { @@ -17,4 +17,5 @@ export class SettingColorPicker extends Component { this.colorInput.value = value; this.colorInput.dispatchEvent(new Event('change', {bubbles: true})); } -} \ No newline at end of file + +} diff --git a/resources/js/components/setting-homepage-control.js b/resources/js/components/setting-homepage-control.js index 992be9f82..6563ced0d 100644 --- a/resources/js/components/setting-homepage-control.js +++ b/resources/js/components/setting-homepage-control.js @@ -1,4 +1,4 @@ -import {Component} from "./component"; +import {Component} from './component'; export class SettingHomepageControl extends Component { @@ -14,4 +14,5 @@ export class SettingHomepageControl extends Component { const showPagePicker = this.typeControl.value === 'page'; this.pagePickerContainer.style.display = (showPagePicker ? 'block' : 'none'); } -} \ No newline at end of file + +} diff --git a/resources/js/components/shelf-sort.js b/resources/js/components/shelf-sort.js index e4aefc591..303ad8df2 100644 --- a/resources/js/components/shelf-sort.js +++ b/resources/js/components/shelf-sort.js @@ -1,5 +1,5 @@ -import Sortable from "sortablejs"; -import {Component} from "./component"; +import Sortable from 'sortablejs'; +import {Component} from './component'; /** * @type {Object} @@ -66,7 +66,7 @@ export class ShelfSort extends Component { this.filterBooksByName(this.bookSearchInput.value); }); - this.sortButtonContainer.addEventListener('click' , event => { + this.sortButtonContainer.addEventListener('click', event => { const button = event.target.closest('button[data-sort]'); if (button) { this.sortShelfBooks(button.dataset.sort); @@ -78,11 +78,10 @@ export class ShelfSort extends Component { * @param {String} filterVal */ filterBooksByName(filterVal) { - // Set height on first search, if not already set, to prevent the distraction // of the list height jumping around if (!this.allBookList.style.height) { - this.allBookList.style.height = this.allBookList.getBoundingClientRect().height + 'px'; + this.allBookList.style.height = `${this.allBookList.getBoundingClientRect().height}px`; } const books = this.allBookList.children; @@ -100,7 +99,7 @@ export class ShelfSort extends Component { */ sortItemActionClick(sortItemAction) { const sortItem = sortItemAction.closest('.scroll-box-item'); - const action = sortItemAction.dataset.action; + const {action} = sortItemAction.dataset; const actionFunction = itemActions[action]; actionFunction(sortItem, this.shelfBookList, this.allBookList); @@ -136,4 +135,4 @@ export class ShelfSort extends Component { this.onChange(); } -} \ No newline at end of file +} diff --git a/resources/js/components/shortcut-input.js b/resources/js/components/shortcut-input.js index 2a2aaa225..17e05fc8d 100644 --- a/resources/js/components/shortcut-input.js +++ b/resources/js/components/shortcut-input.js @@ -1,4 +1,4 @@ -import {Component} from "./component"; +import {Component} from './component'; /** * Keys to ignore when recording shortcuts. @@ -18,16 +18,16 @@ export class ShortcutInput extends Component { this.listenerRecordKey = this.listenerRecordKey.bind(this); this.input.addEventListener('focus', () => { - this.startListeningForInput(); + this.startListeningForInput(); }); this.input.addEventListener('blur', () => { this.stopListeningForInput(); - }) + }); } startListeningForInput() { - this.input.addEventListener('keydown', this.listenerRecordKey) + this.input.addEventListener('keydown', this.listenerRecordKey); } /** @@ -51,4 +51,4 @@ export class ShortcutInput extends Component { this.input.removeEventListener('keydown', this.listenerRecordKey); } -} \ No newline at end of file +} diff --git a/resources/js/components/shortcuts.js b/resources/js/components/shortcuts.js index a87213b2e..8c6c25ba1 100644 --- a/resources/js/components/shortcuts.js +++ b/resources/js/components/shortcuts.js @@ -1,4 +1,4 @@ -import {Component} from "./component"; +import {Component} from './component'; function reverseMap(map) { const reversed = {}; @@ -8,7 +8,6 @@ function reverseMap(map) { return reversed; } - export class Shortcuts extends Component { setup() { @@ -25,7 +24,6 @@ export class Shortcuts extends Component { setupListeners() { window.addEventListener('keydown', event => { - if (event.target.closest('input, select, textarea')) { return; } @@ -44,7 +42,6 @@ export class Shortcuts extends Component { * @param {KeyboardEvent} event */ handleShortcutPress(event) { - const keys = [ event.ctrlKey ? 'Ctrl' : '', event.metaKey ? 'Cmd' : '', @@ -90,7 +87,7 @@ export class Shortcuts extends Component { return true; } - console.error(`Shortcut attempted to be ran for element type that does not have handling setup`, el); + console.error('Shortcut attempted to be ran for element type that does not have handling setup', el); return false; } @@ -135,10 +132,10 @@ export class Shortcuts extends Component { const linkage = document.createElement('div'); linkage.classList.add('shortcut-linkage'); - linkage.style.left = targetBounds.x + 'px'; - linkage.style.top = targetBounds.y + 'px'; - linkage.style.width = targetBounds.width + 'px'; - linkage.style.height = targetBounds.height + 'px'; + linkage.style.left = `${targetBounds.x}px`; + linkage.style.top = `${targetBounds.y}px`; + linkage.style.width = `${targetBounds.width}px`; + linkage.style.height = `${targetBounds.height}px`; wrapper.append(label, linkage); @@ -159,4 +156,5 @@ export class Shortcuts extends Component { this.hintsShowing = false; } -} \ No newline at end of file + +} diff --git a/resources/js/components/sortable-list.js b/resources/js/components/sortable-list.js index bbbd92088..7b0c4f243 100644 --- a/resources/js/components/sortable-list.js +++ b/resources/js/components/sortable-list.js @@ -1,5 +1,5 @@ -import Sortable from "sortablejs"; -import {Component} from "./component"; +import Sortable from 'sortablejs'; +import {Component} from './component'; /** * SortableList @@ -9,6 +9,7 @@ import {Component} from "./component"; * the data to set on the data-transfer. */ export class SortableList extends Component { + setup() { this.container = this.$el; this.handleSelector = this.$opts.handleSelector; @@ -33,4 +34,5 @@ export class SortableList extends Component { dragoverBubble: false, }); } -} \ No newline at end of file + +} diff --git a/resources/js/components/submit-on-change.js b/resources/js/components/submit-on-change.js index da4ac6996..52faa1d10 100644 --- a/resources/js/components/submit-on-change.js +++ b/resources/js/components/submit-on-change.js @@ -1,4 +1,4 @@ -import {Component} from "./component"; +import {Component} from './component'; /** * Submit on change @@ -9,8 +9,7 @@ export class SubmitOnChange extends Component { setup() { this.filter = this.$opts.filter; - this.$el.addEventListener('change', (event) => { - + this.$el.addEventListener('change', event => { if (this.filter && !event.target.matches(this.filter)) { return; } @@ -22,4 +21,4 @@ export class SubmitOnChange extends Component { }); } -} \ No newline at end of file +} diff --git a/resources/js/components/tabs.js b/resources/js/components/tabs.js index 8d22e3e9b..560dc6273 100644 --- a/resources/js/components/tabs.js +++ b/resources/js/components/tabs.js @@ -1,4 +1,4 @@ -import {Component} from "./component"; +import {Component} from './component'; /** * Tabs @@ -46,4 +46,4 @@ export class Tabs extends Component { this.$emit('change', {showing: sectionId}); } -} \ No newline at end of file +} diff --git a/resources/js/components/tag-manager.js b/resources/js/components/tag-manager.js index 24d340553..1172e7775 100644 --- a/resources/js/components/tag-manager.js +++ b/resources/js/components/tag-manager.js @@ -1,6 +1,7 @@ -import {Component} from "./component"; +import {Component} from './component'; export class TagManager extends Component { + setup() { this.addRemoveComponentEl = this.$refs.addRemove; this.container = this.$el; @@ -11,8 +12,7 @@ export class TagManager extends Component { setupListeners() { this.container.addEventListener('input', event => { - - /** @var {AddRemoveRows} **/ + /** @var {AddRemoveRows} * */ const addRemoveComponent = window.$components.firstOnElement(this.addRemoveComponentEl, 'add-remove-rows'); if (!this.hasEmptyRows() && event.target.value) { addRemoveComponent.add(); @@ -22,9 +22,8 @@ export class TagManager extends Component { hasEmptyRows() { const rows = this.container.querySelectorAll(this.rowSelector); - const firstEmpty = [...rows].find(row => { - return [...row.querySelectorAll('input')].filter(input => input.value).length === 0; - }); + const firstEmpty = [...rows].find(row => [...row.querySelectorAll('input')].filter(input => input.value).length === 0); return firstEmpty !== undefined; } -} \ No newline at end of file + +} diff --git a/resources/js/components/template-manager.js b/resources/js/components/template-manager.js index 774336471..ec143b70f 100644 --- a/resources/js/components/template-manager.js +++ b/resources/js/components/template-manager.js @@ -1,5 +1,5 @@ -import * as DOM from "../services/dom"; -import {Component} from "./component"; +import * as DOM from '../services/dom'; +import {Component} from './component'; export class TemplateManager extends Component { @@ -66,7 +66,7 @@ export class TemplateManager extends Component { async insertTemplate(templateId, action = 'replace') { const resp = await window.$http.get(`/templates/${templateId}`); - const eventName = 'editor::' + action; + const eventName = `editor::${action}`; window.$events.emit(eventName, resp.data); } @@ -79,10 +79,11 @@ export class TemplateManager extends Component { async performSearch() { const searchTerm = this.searchInput.value; - const resp = await window.$http.get(`/templates`, { - search: searchTerm + const resp = await window.$http.get('/templates', { + search: searchTerm, }); this.searchCancel.style.display = searchTerm ? 'block' : 'none'; this.list.innerHTML = resp.data; } -} \ No newline at end of file + +} diff --git a/resources/js/components/toggle-switch.js b/resources/js/components/toggle-switch.js index b749eb541..e8209eb27 100644 --- a/resources/js/components/toggle-switch.js +++ b/resources/js/components/toggle-switch.js @@ -1,4 +1,4 @@ -import {Component} from "./component"; +import {Component} from './component'; export class ToggleSwitch extends Component { @@ -18,4 +18,4 @@ export class ToggleSwitch extends Component { this.input.dispatchEvent(changeEvent); } -} \ No newline at end of file +} diff --git a/resources/js/components/tri-layout.js b/resources/js/components/tri-layout.js index ead2ac3d0..6510a690e 100644 --- a/resources/js/components/tri-layout.js +++ b/resources/js/components/tri-layout.js @@ -1,4 +1,4 @@ -import {Component} from "./component"; +import {Component} from './component'; export class TriLayout extends Component { @@ -9,8 +9,8 @@ export class TriLayout extends Component { this.lastLayoutType = 'none'; this.onDestroy = null; this.scrollCache = { - 'content': 0, - 'info': 0, + content: 0, + info: 0, }; this.lastTabShown = 'content'; @@ -26,8 +26,8 @@ export class TriLayout extends Component { updateLayout() { let newLayout = 'tablet'; - if (window.innerWidth <= 1000) newLayout = 'mobile'; - if (window.innerWidth >= 1400) newLayout = 'desktop'; + if (window.innerWidth <= 1000) newLayout = 'mobile'; + if (window.innerWidth >= 1400) newLayout = 'desktop'; if (newLayout === this.lastLayoutType) return; if (this.onDestroy) { @@ -53,20 +53,19 @@ export class TriLayout extends Component { for (const tab of this.tabs) { tab.removeEventListener('click', this.mobileTabClick); } - } + }; } setupDesktop() { // } - /** * Action to run when the mobile info toggle bar is clicked/tapped * @param event */ mobileTabClick(event) { - const tab = event.target.dataset.tab; + const {tab} = event.target.dataset; this.showTab(tab); } @@ -109,4 +108,4 @@ export class TriLayout extends Component { this.lastTabShown = tabName; } -} \ No newline at end of file +} diff --git a/resources/js/components/user-select.js b/resources/js/components/user-select.js index d4d88a633..e6adc3c23 100644 --- a/resources/js/components/user-select.js +++ b/resources/js/components/user-select.js @@ -1,5 +1,5 @@ -import {onChildEvent} from "../services/dom"; -import {Component} from "./component"; +import {onChildEvent} from '../services/dom'; +import {Component} from './component'; export class UserSelect extends Component { @@ -20,9 +20,9 @@ export class UserSelect extends Component { } hide() { - /** @var {Dropdown} **/ + /** @var {Dropdown} * */ const dropdown = window.$components.firstOnElement(this.container, 'dropdown'); dropdown.hide(); } -} \ No newline at end of file +} diff --git a/resources/js/components/webhook-events.js b/resources/js/components/webhook-events.js index ad8c59ac2..68661972d 100644 --- a/resources/js/components/webhook-events.js +++ b/resources/js/components/webhook-events.js @@ -2,7 +2,7 @@ * Webhook Events * Manages dynamic selection control in the webhook form interface. */ -import {Component} from "./component"; +import {Component} from './component'; export class WebhookEvents extends Component { @@ -27,4 +27,4 @@ export class WebhookEvents extends Component { } } -} \ No newline at end of file +} diff --git a/resources/js/components/wysiwyg-editor.js b/resources/js/components/wysiwyg-editor.js index 96731a0d9..21db207e6 100644 --- a/resources/js/components/wysiwyg-editor.js +++ b/resources/js/components/wysiwyg-editor.js @@ -1,5 +1,5 @@ -import {build as buildEditorConfig} from "../wysiwyg/config"; -import {Component} from "./component"; +import {build as buildEditorConfig} from '../wysiwyg/config'; +import {Component} from './component'; export class WysiwygEditor extends Component { @@ -45,8 +45,8 @@ export class WysiwygEditor extends Component { */ getContent() { return { - html: this.editor.getContent() + html: this.editor.getContent(), }; } -} \ No newline at end of file +} diff --git a/resources/js/markdown/actions.js b/resources/js/markdown/actions.js index a73cddd30..3cb7b5d4f 100644 --- a/resources/js/markdown/actions.js +++ b/resources/js/markdown/actions.js @@ -1,6 +1,7 @@ -import DrawIO from "../services/drawio"; +import DrawIO from '../services/drawio'; export class Actions { + /** * @param {MarkdownEditor} editor */ @@ -29,13 +30,13 @@ export class Actions { } showImageInsert() { - /** @type {ImageManager} **/ + /** @type {ImageManager} * */ const imageManager = window.$components.first('image-manager'); imageManager.show(image => { const imageUrl = image.thumbs.display || image.url; const selectedText = this.#getSelectionText(); - const newText = "[![" + (selectedText || image.name) + "](" + imageUrl + ")](" + image.url + ")"; + const newText = `[![${selectedText || image.name}](${imageUrl})](${image.url})`; this.#replaceSelection(newText, newText.length); }, 'gallery'); } @@ -49,12 +50,12 @@ export class Actions { const selectedText = this.#getSelectionText(); const newText = `[${selectedText}]()`; const cursorPosDiff = (selectedText === '') ? -3 : -1; - this.#replaceSelection(newText, newText.length+cursorPosDiff); + this.#replaceSelection(newText, newText.length + cursorPosDiff); } showImageManager() { const selectionRange = this.#getSelectionRange(); - /** @type {ImageManager} **/ + /** @type {ImageManager} * */ const imageManager = window.$components.first('image-manager'); imageManager.show(image => { this.#insertDrawing(image, selectionRange); @@ -65,7 +66,7 @@ export class Actions { showLinkSelector() { const selectionRange = this.#getSelectionRange(); - /** @type {EntitySelectorPopup} **/ + /** @type {EntitySelectorPopup} * */ const selector = window.$components.first('entity-selector-popup'); selector.show(entity => { const selectedText = this.#getSelectionText(selectionRange) || entity.name; @@ -81,16 +82,13 @@ export class Actions { const selectionRange = this.#getSelectionRange(); - DrawIO.show(url,() => { - return Promise.resolve(''); - }, (pngData) => { - + DrawIO.show(url, () => Promise.resolve(''), pngData => { const data = { image: pngData, uploaded_to: Number(this.editor.config.pageId), }; - window.$http.post("/images/drawio", data).then(resp => { + window.$http.post('/images/drawio', data).then(resp => { this.#insertDrawing(resp.data, selectionRange); DrawIO.close(); }).catch(err => { @@ -106,7 +104,7 @@ export class Actions { // Show draw.io if enabled and handle save. editDrawing(imgContainer) { - const drawioUrl = this.editor.config.drawioUrl; + const {drawioUrl} = this.editor.config; if (!drawioUrl) { return; } @@ -114,16 +112,13 @@ export class Actions { const selectionRange = this.#getSelectionRange(); const drawingId = imgContainer.getAttribute('drawio-diagram'); - DrawIO.show(drawioUrl, () => { - return DrawIO.load(drawingId); - }, (pngData) => { - + DrawIO.show(drawioUrl, () => DrawIO.load(drawingId), pngData => { const data = { image: pngData, uploaded_to: Number(this.editor.config.pageId), }; - window.$http.post("/images/drawio", data).then(resp => { + window.$http.post('/images/drawio', data).then(resp => { const newText = `
    `; const newContent = this.#getText().split('\n').map(line => { if (line.indexOf(`drawio-diagram="${drawingId}"`) !== -1) { @@ -150,7 +145,7 @@ export class Actions { // Make the editor full screen fullScreen() { - const container = this.editor.config.container; + const {container} = this.editor.config; const alreadyFullscreen = container.classList.contains('fullscreen'); container.classList.toggle('fullscreen', !alreadyFullscreen); document.body.classList.toggle('markdown-fullscreen', !alreadyFullscreen); @@ -204,7 +199,7 @@ export class Actions { content = this.#cleanTextForEditor(content); const selectionRange = this.#getSelectionRange(); const selectFrom = selectionRange.from + content.length + 1; - this.#dispatchChange(0, 0, content + '\n', selectFrom); + this.#dispatchChange(0, 0, `${content}\n`, selectFrom); this.focus(); } @@ -214,7 +209,7 @@ export class Actions { */ appendContent(content) { content = this.#cleanTextForEditor(content); - this.#dispatchChange(this.editor.cm.state.doc.length, '\n' + content); + this.#dispatchChange(this.editor.cm.state.doc.length, `\n${content}`); this.focus(); } @@ -223,7 +218,7 @@ export class Actions { * @param {String} content */ replaceContent(content) { - this.#setText(content) + this.#setText(content); } /** @@ -250,7 +245,7 @@ export class Actions { if (alreadySymbol) { newLineContent = lineContent.replace(lineStart, newStart).trim(); } else if (newStart !== '') { - newLineContent = newStart + ' ' + lineContent; + newLineContent = `${newStart} ${lineContent}`; } const selectFrom = selectionRange.from + (newLineContent.length - lineContent.length); @@ -290,7 +285,7 @@ export class Actions { const number = (Number(listMatch[2]) || 0) + 1; const whiteSpace = listMatch[1] || ''; - const listMark = listMatch[3] || '.' + const listMark = listMatch[3] || '.'; const prefix = `${whiteSpace}${number}${listMark}`; return this.replaceLineStart(prefix); @@ -373,7 +368,7 @@ export class Actions { * @param {File} file * @param {?Number} position */ - async uploadImage(file, position= null) { + async uploadImage(file, position = null) { if (file === null || file.type.indexOf('image') !== 0) return; let ext = 'png'; @@ -382,17 +377,17 @@ export class Actions { } if (file.name) { - let fileNameMatches = file.name.match(/\.(.+)$/); + const fileNameMatches = file.name.match(/\.(.+)$/); if (fileNameMatches.length > 1) ext = fileNameMatches[1]; } // Insert image into markdown - const id = "image-" + Math.random().toString(16).slice(2); + const id = `image-${Math.random().toString(16).slice(2)}`; const placeholderImage = window.baseUrl(`/loading.gif#upload${id}`); const placeHolderText = `![](${placeholderImage})`; this.#dispatchChange(position, position, placeHolderText, position); - const remoteFilename = "image-" + Date.now() + "." + ext; + const remoteFilename = `image-${Date.now()}.${ext}`; const formData = new FormData(); formData.append('file', file, remoteFilename); formData.append('uploaded_to', this.editor.config.pageId); @@ -466,7 +461,7 @@ export class Actions { * @return {String} */ #cleanTextForEditor(text) { - return text.replace(/\r\n|\r/g, "\n"); + return text.replace(/\r\n|\r/g, '\n'); } /** @@ -511,7 +506,7 @@ export class Actions { * @param {?Number} selectTo */ #dispatchChange(from, to = null, text = null, selectFrom = null, selectTo = null) { - const tr = {changes: {from, to: to, insert: text}}; + const tr = {changes: {from, to, insert: text}}; if (selectFrom) { tr.selection = {anchor: selectFrom}; @@ -533,4 +528,5 @@ export class Actions { scrollIntoView, }); } -} \ No newline at end of file + +} diff --git a/resources/js/markdown/codemirror.js b/resources/js/markdown/codemirror.js index 55ea485e3..67b7c68ec 100644 --- a/resources/js/markdown/codemirror.js +++ b/resources/js/markdown/codemirror.js @@ -1,6 +1,6 @@ -import {provideKeyBindings} from "./shortcuts"; -import {debounce} from "../services/util"; -import Clipboard from "../services/clipboard"; +import {provideKeyBindings} from './shortcuts'; +import {debounce} from '../services/util'; +import Clipboard from '../services/clipboard'; /** * Initiate the codemirror instance for the markdown editor. @@ -25,9 +25,9 @@ export async function init(editor) { const domEventHandlers = { // Handle scroll to sync display view - scroll: (event) => syncActive && onScrollDebounced(event), + scroll: event => syncActive && onScrollDebounced(event), // Handle image & content drag n drop - drop: (event) => { + drop: event => { const templateId = event.dataTransfer.getData('bookstack/template'); if (templateId) { event.preventDefault(); @@ -43,7 +43,7 @@ export async function init(editor) { } }, // Handle image paste - paste: (event) => { + paste: event => { const clipboard = new Clipboard(event.clipboardData || event.dataTransfer); // Don't handle the event ourselves if no items exist of contains table-looking data @@ -55,8 +55,8 @@ export async function init(editor) { for (const image of images) { editor.actions.uploadImage(image); } - } - } + }, + }; const cm = Code.markdownEditor( editor.config.inputEl, @@ -70,4 +70,4 @@ export async function init(editor) { window.mdEditorView = cm; return cm; -} \ No newline at end of file +} diff --git a/resources/js/markdown/common-events.js b/resources/js/markdown/common-events.js index 3afd03dd5..c3d803f70 100644 --- a/resources/js/markdown/common-events.js +++ b/resources/js/markdown/common-events.js @@ -6,23 +6,22 @@ function getContentToInsert({html, markdown}) { * @param {MarkdownEditor} editor */ export function listen(editor) { - - window.$events.listen('editor::replace', (eventContent) => { + window.$events.listen('editor::replace', eventContent => { const markdown = getContentToInsert(eventContent); editor.actions.replaceContent(markdown); }); - window.$events.listen('editor::append', (eventContent) => { + window.$events.listen('editor::append', eventContent => { const markdown = getContentToInsert(eventContent); editor.actions.appendContent(markdown); }); - window.$events.listen('editor::prepend', (eventContent) => { + window.$events.listen('editor::prepend', eventContent => { const markdown = getContentToInsert(eventContent); editor.actions.prependContent(markdown); }); - window.$events.listen('editor::insert', (eventContent) => { + window.$events.listen('editor::insert', eventContent => { const markdown = getContentToInsert(eventContent); editor.actions.insertContent(markdown); }); @@ -30,4 +29,4 @@ export function listen(editor) { window.$events.listen('editor::focus', () => { editor.actions.focus(); }); -} \ No newline at end of file +} diff --git a/resources/js/markdown/display.js b/resources/js/markdown/display.js index 2c78da189..487df1cab 100644 --- a/resources/js/markdown/display.js +++ b/resources/js/markdown/display.js @@ -1,4 +1,4 @@ -import {patchDomFromHtmlString} from "../services/vdom"; +import {patchDomFromHtmlString} from '../services/vdom'; export class Display { @@ -81,7 +81,7 @@ export class Display { * @param {String} html */ patchWithHtml(html) { - const body = this.doc.body; + const {body} = this.doc; if (body.children.length === 0) { const wrap = document.createElement('div'); @@ -102,8 +102,8 @@ export class Display { const elems = this.doc.body?.children[0]?.children; if (elems && elems.length <= index) return; - const topElem = (index === -1) ? elems[elems.length-1] : elems[index]; - topElem.scrollIntoView({ block: 'start', inline: 'nearest', behavior: 'smooth'}); + const topElem = (index === -1) ? elems[elems.length - 1] : elems[index]; + topElem.scrollIntoView({block: 'start', inline: 'nearest', behavior: 'smooth'}); } -} \ No newline at end of file +} diff --git a/resources/js/markdown/editor.js b/resources/js/markdown/editor.js index cb5bf7d1a..46c35c850 100644 --- a/resources/js/markdown/editor.js +++ b/resources/js/markdown/editor.js @@ -1,10 +1,9 @@ -import {Markdown} from "./markdown"; -import {Display} from "./display"; -import {Actions} from "./actions"; -import {Settings} from "./settings"; -import {listen} from "./common-events"; -import {init as initCodemirror} from "./codemirror"; - +import {Markdown} from './markdown'; +import {Display} from './display'; +import {Actions} from './actions'; +import {Settings} from './settings'; +import {listen} from './common-events'; +import {init as initCodemirror} from './codemirror'; /** * Initiate a new markdown editor instance. @@ -12,7 +11,6 @@ import {init as initCodemirror} from "./codemirror"; * @returns {Promise} */ export async function init(config) { - /** * @type {MarkdownEditor} */ @@ -31,7 +29,6 @@ export async function init(config) { return editor; } - /** * @typedef MarkdownEditorConfig * @property {String} pageId @@ -51,4 +48,4 @@ export async function init(config) { * @property {Actions} actions * @property {EditorView} cm * @property {Settings} settings - */ \ No newline at end of file + */ diff --git a/resources/js/markdown/markdown.js b/resources/js/markdown/markdown.js index ef3a02872..e63184acc 100644 --- a/resources/js/markdown/markdown.js +++ b/resources/js/markdown/markdown.js @@ -1,4 +1,4 @@ -import MarkdownIt from "markdown-it"; +import MarkdownIt from 'markdown-it'; import mdTasksLists from 'markdown-it-task-lists'; export class Markdown { @@ -24,7 +24,5 @@ export class Markdown { render(markdown) { return this.renderer.render(markdown); } + } - - - diff --git a/resources/js/markdown/settings.js b/resources/js/markdown/settings.js index 62aab82e9..3cdceca1a 100644 --- a/resources/js/markdown/settings.js +++ b/resources/js/markdown/settings.js @@ -59,4 +59,5 @@ export class Settings { listeners.push(callback); this.changeListeners[key] = listeners; } -} \ No newline at end of file + +} diff --git a/resources/js/markdown/shortcuts.js b/resources/js/markdown/shortcuts.js index c4a86e544..fcb66a12d 100644 --- a/resources/js/markdown/shortcuts.js +++ b/resources/js/markdown/shortcuts.js @@ -34,8 +34,8 @@ function provide(editor) { shortcuts['Mod-8'] = cm => editor.actions.wrapSelection('`', '`'); shortcuts['Shift-Mod-e'] = cm => editor.actions.wrapSelection('`', '`'); shortcuts['Mod-9'] = cm => editor.actions.cycleCalloutTypeAtSelection(); - shortcuts['Mod-p'] = cm => editor.actions.replaceLineStart('-') - shortcuts['Mod-o'] = cm => editor.actions.replaceLineStartForOrderedList() + shortcuts['Mod-p'] = cm => editor.actions.replaceLineStart('-'); + shortcuts['Mod-o'] = cm => editor.actions.replaceLineStartForOrderedList(); return shortcuts; } @@ -46,14 +46,12 @@ function provide(editor) { * @return {{key: String, run: function, preventDefault: boolean}[]} */ export function provideKeyBindings(editor) { - const shortcuts= provide(editor); + const shortcuts = provide(editor); const keyBindings = []; - const wrapAction = (action) => { - return () => { - action(); - return true; - }; + const wrapAction = action => () => { + action(); + return true; }; for (const [shortcut, action] of Object.entries(shortcuts)) { @@ -61,4 +59,4 @@ export function provideKeyBindings(editor) { } return keyBindings; -} \ No newline at end of file +} diff --git a/resources/js/services/animations.js b/resources/js/services/animations.js index 12b8077cf..43bd6a0d0 100644 --- a/resources/js/services/animations.js +++ b/resources/js/services/animations.js @@ -15,7 +15,7 @@ export function fadeIn(element, animTime = 400, onComplete = null) { cleanupExistingElementAnimation(element); element.style.display = 'block'; animateStyles(element, { - opacity: ['0', '1'] + opacity: ['0', '1'], }, animTime, () => { if (onComplete) onComplete(); }); @@ -30,7 +30,7 @@ export function fadeIn(element, animTime = 400, onComplete = null) { export function fadeOut(element, animTime = 400, onComplete = null) { cleanupExistingElementAnimation(element); animateStyles(element, { - opacity: ['1', '0'] + opacity: ['1', '0'], }, animTime, () => { element.style.display = 'none'; if (onComplete) onComplete(); @@ -125,12 +125,12 @@ export function transitionHeight(element, animTime = 400) { */ function animateStyles(element, styles, animTime = 400, onComplete = null) { const styleNames = Object.keys(styles); - for (let style of styleNames) { + for (const style of styleNames) { element.style[style] = styles[style][0]; } const cleanup = () => { - for (let style of styleNames) { + for (const style of styleNames) { element.style[style] = null; } element.style.transition = null; @@ -141,7 +141,7 @@ function animateStyles(element, styles, animTime = 400, onComplete = null) { setTimeout(() => { element.style.transition = `all ease-in-out ${animTime}ms`; - for (let style of styleNames) { + for (const style of styleNames) { element.style[style] = styles[style][1]; } @@ -159,4 +159,4 @@ function cleanupExistingElementAnimation(element) { const oldCleanup = animateStylesCleanupMap.get(element); oldCleanup(); } -} \ No newline at end of file +} diff --git a/resources/js/services/clipboard.js b/resources/js/services/clipboard.js index c0b0fbfab..ecdbecf53 100644 --- a/resources/js/services/clipboard.js +++ b/resources/js/services/clipboard.js @@ -1,4 +1,3 @@ - export class Clipboard { /** @@ -21,7 +20,7 @@ export class Clipboard { * @return {boolean} */ containsTabularData() { - const rtfData = this.data.getData( 'text/rtf'); + const rtfData = this.data.getData('text/rtf'); return rtfData && rtfData.includes('\\trowd'); } @@ -30,8 +29,8 @@ export class Clipboard { * @return {Array} */ getImages() { - const types = this.data.types; - const files = this.data.files; + const {types} = this.data; + const {files} = this.data; const images = []; for (const type of types) { @@ -49,6 +48,7 @@ export class Clipboard { return images; } + } export async function copyTextToClipboard(text) { @@ -58,13 +58,13 @@ export async function copyTextToClipboard(text) { } // Backup option where we can't use the navigator.clipboard API - const tempInput = document.createElement("textarea"); - tempInput.style = "position: absolute; left: -1000px; top: -1000px;"; + const tempInput = document.createElement('textarea'); + tempInput.style = 'position: absolute; left: -1000px; top: -1000px;'; tempInput.value = text; document.body.appendChild(tempInput); tempInput.select(); - document.execCommand("copy"); + document.execCommand('copy'); document.body.removeChild(tempInput); } -export default Clipboard; \ No newline at end of file +export default Clipboard; diff --git a/resources/js/services/components.js b/resources/js/services/components.js index d1503db4d..102b24d45 100644 --- a/resources/js/services/components.js +++ b/resources/js/services/components.js @@ -1,4 +1,4 @@ -import {kebabToCamel, camelToKebab} from "./text"; +import {kebabToCamel, camelToKebab} from './text'; /** * A mapping of active components keyed by name, with values being arrays of component @@ -25,12 +25,12 @@ const elementComponentMap = new WeakMap(); * @param {Element} element */ function initComponent(name, element) { - /** @type {Function|undefined} **/ + /** @type {Function|undefined} * */ const componentModel = componentModelMap[name]; if (componentModel === undefined) return; // Create our component instance - /** @type {Component} **/ + /** @type {Component} * */ let instance; try { instance = new componentModel(); @@ -46,7 +46,7 @@ function initComponent(name, element) { } // Add to global listing - if (typeof components[name] === "undefined") { + if (typeof components[name] === 'undefined') { components[name] = []; } components[name].push(instance); @@ -67,7 +67,7 @@ function parseRefs(name, element) { const refs = {}; const manyRefs = {}; - const prefix = `${name}@` + const prefix = `${name}@`; const selector = `[refs*="${prefix}"]`; const refElems = [...element.querySelectorAll(selector)]; if (element.matches(selector)) { @@ -114,7 +114,7 @@ function parseOpts(name, element) { * @param {Element|Document} parentElement */ export function init(parentElement = document) { - const componentElems = parentElement.querySelectorAll(`[component],[components]`); + const componentElems = parentElement.querySelectorAll('[component],[components]'); for (const el of componentElems) { const componentNames = `${el.getAttribute('component') || ''} ${(el.getAttribute('components'))}`.toLowerCase().split(' ').filter(Boolean); @@ -162,4 +162,4 @@ export function get(name) { export function firstOnElement(element, name) { const elComponents = elementComponentMap.get(element) || {}; return elComponents[name] || null; -} \ No newline at end of file +} diff --git a/resources/js/services/dates.js b/resources/js/services/dates.js index 119d8fa60..2e6b34aee 100644 --- a/resources/js/services/dates.js +++ b/resources/js/services/dates.js @@ -1,24 +1,23 @@ - export function getCurrentDay() { - let date = new Date(); - let month = date.getMonth() + 1; - let day = date.getDate(); + const date = new Date(); + const month = date.getMonth() + 1; + const day = date.getDate(); - return `${date.getFullYear()}-${(month>9?'':'0') + month}-${(day>9?'':'0') + day}`; + return `${date.getFullYear()}-${(month > 9 ? '' : '0') + month}-${(day > 9 ? '' : '0') + day}`; } export function utcTimeStampToLocalTime(timestamp) { - let date = new Date(timestamp * 1000); - let hours = date.getHours(); - let mins = date.getMinutes(); - return `${(hours>9?'':'0') + hours}:${(mins>9?'':'0') + mins}`; + const date = new Date(timestamp * 1000); + const hours = date.getHours(); + const mins = date.getMinutes(); + return `${(hours > 9 ? '' : '0') + hours}:${(mins > 9 ? '' : '0') + mins}`; } export function formatDateTime(date) { - let month = date.getMonth() + 1; - let day = date.getDate(); - let hours = date.getHours(); - let mins = date.getMinutes(); + const month = date.getMonth() + 1; + const day = date.getDate(); + const hours = date.getHours(); + const mins = date.getMinutes(); - return `${date.getFullYear()}-${(month>9?'':'0') + month}-${(day>9?'':'0') + day} ${(hours>9?'':'0') + hours}:${(mins>9?'':'0') + mins}`; -} \ No newline at end of file + return `${date.getFullYear()}-${(month > 9 ? '' : '0') + month}-${(day > 9 ? '' : '0') + day} ${(hours > 9 ? '' : '0') + hours}:${(mins > 9 ? '' : '0') + mins}`; +} diff --git a/resources/js/services/dom.js b/resources/js/services/dom.js index 882d5228d..17f5a803a 100644 --- a/resources/js/services/dom.js +++ b/resources/js/services/dom.js @@ -5,7 +5,7 @@ */ export function forEach(selector, callback) { const elements = document.querySelectorAll(selector); - for (let element of elements) { + for (const element of elements) { callback(element); } } @@ -17,7 +17,7 @@ export function forEach(selector, callback) { * @param {Function} callback */ export function onEvents(listenerElement, events, callback) { - for (let eventName of events) { + for (const eventName of events) { listenerElement.addEventListener(eventName, callback); } } @@ -35,7 +35,7 @@ export function onSelect(elements, callback) { for (const listenerElement of elements) { listenerElement.addEventListener('click', callback); - listenerElement.addEventListener('keydown', (event) => { + listenerElement.addEventListener('keydown', event => { if (event.key === 'Enter' || event.key === ' ') { event.preventDefault(); callback(event); @@ -58,7 +58,7 @@ export function onEnterPress(elements, callback) { if (event.key === 'Enter') { callback(event); } - } + }; elements.forEach(e => e.addEventListener('keypress', listener)); } @@ -73,7 +73,7 @@ export function onEnterPress(elements, callback) { * @param {Function} callback */ export function onChildEvent(listenerElement, childSelector, eventName, callback) { - listenerElement.addEventListener(eventName, function(event) { + listenerElement.addEventListener(eventName, event => { const matchingChild = event.target.closest(childSelector); if (matchingChild) { callback.call(matchingChild, event, matchingChild); @@ -91,7 +91,7 @@ export function onChildEvent(listenerElement, childSelector, eventName, callback export function findText(selector, text) { const elements = document.querySelectorAll(selector); text = text.toLowerCase(); - for (let element of elements) { + for (const element of elements) { if (element.textContent.toLowerCase().includes(text)) { return element; } @@ -105,7 +105,7 @@ export function findText(selector, text) { * @param {Element} element */ export function showLoading(element) { - element.innerHTML = `
    `; + element.innerHTML = '
    '; } /** @@ -130,4 +130,4 @@ export function htmlToDom(html) { wrap.innerHTML = html; window.$components.init(wrap); return wrap.children[0]; -} \ No newline at end of file +} diff --git a/resources/js/services/drawio.js b/resources/js/services/drawio.js index 67ac4cc0e..4f9398260 100644 --- a/resources/js/services/drawio.js +++ b/resources/js/services/drawio.js @@ -1,6 +1,7 @@ let iFrame = null; let lastApprovedOrigin; -let onInit, onSave; +let onInit; let + onSave; /** * Show the draw.io editor. @@ -55,13 +56,15 @@ function drawEventExport(message) { } function drawEventSave(message) { - drawPostMessage({action: 'export', format: 'xmlpng', xml: message.xml, spin: 'Updating drawing'}); + drawPostMessage({ + action: 'export', format: 'xmlpng', xml: message.xml, spin: 'Updating drawing', + }); } function drawEventInit() { if (!onInit) return; onInit().then(xml => { - drawPostMessage({action: 'load', autosave: 1, xml: xml}); + drawPostMessage({action: 'load', autosave: 1, xml}); }); } @@ -81,11 +84,11 @@ function drawPostMessage(data) { } async function upload(imageData, pageUploadedToId) { - let data = { + const data = { image: imageData, uploaded_to: pageUploadedToId, }; - const resp = await window.$http.post(window.baseUrl(`/images/drawio`), data); + const resp = await window.$http.post(window.baseUrl('/images/drawio'), data); return resp.data; } @@ -107,4 +110,6 @@ async function load(drawingId) { } } -export default {show, close, upload, load}; \ No newline at end of file +export default { + show, close, upload, load, +}; diff --git a/resources/js/services/events.js b/resources/js/services/events.js index d2dacfa7b..0b24adfac 100644 --- a/resources/js/services/events.js +++ b/resources/js/services/events.js @@ -9,9 +9,9 @@ const stack = []; function emit(eventName, eventData) { stack.push({name: eventName, data: eventData}); if (typeof listeners[eventName] === 'undefined') return this; - let eventsToStart = listeners[eventName]; + const eventsToStart = listeners[eventName]; for (let i = 0; i < eventsToStart.length; i++) { - let event = eventsToStart[i]; + const event = eventsToStart[i]; event(eventData); } } @@ -37,7 +37,7 @@ function listen(eventName, callback) { function emitPublic(targetElement, eventName, eventData) { const event = new CustomEvent(eventName, { detail: eventData, - bubbles: true + bubbles: true, }); targetElement.dispatchEvent(event); } @@ -69,8 +69,8 @@ export default { emit, emitPublic, listen, - success: (msg) => emit('success', msg), - error: (msg) => emit('error', msg), + success: msg => emit('success', msg), + error: msg => emit('error', msg), showValidationErrors, showResponseError, -} \ No newline at end of file +}; diff --git a/resources/js/services/http.js b/resources/js/services/http.js index 211ea0c92..9f1b5deac 100644 --- a/resources/js/services/http.js +++ b/resources/js/services/http.js @@ -1,4 +1,3 @@ - /** * Perform a HTTP GET request. * Can easily pass query parameters as the second parameter. @@ -63,7 +62,7 @@ async function performDelete(url, data = null) { */ async function dataRequest(method, url, data = null) { const options = { - method: method, + method, body: data, }; @@ -84,7 +83,7 @@ async function dataRequest(method, url, data = null) { options.method = 'post'; } - return request(url, options) + return request(url, options); } /** @@ -101,7 +100,7 @@ async function request(url, options = {}) { if (options.params) { const urlObj = new URL(url); - for (let paramName of Object.keys(options.params)) { + for (const paramName of Object.keys(options.params)) { const value = options.params[paramName]; if (typeof value !== 'undefined' && value !== null) { urlObj.searchParams.set(paramName, value); @@ -111,13 +110,12 @@ async function request(url, options = {}) { } const csrfToken = document.querySelector('meta[name=token]').getAttribute('content'); - options = Object.assign({}, options, { - 'credentials': 'same-origin', - }); - options.headers = Object.assign({}, options.headers || {}, { - 'baseURL': window.baseUrl(''), + options = {...options, credentials: 'same-origin'}; + options.headers = { + ...options.headers || {}, + baseURL: window.baseUrl(''), 'X-CSRF-TOKEN': csrfToken, - }); + }; const response = await fetch(url, options); const content = await getResponseContent(response); @@ -160,6 +158,7 @@ async function getResponseContent(response) { } class HttpError extends Error { + constructor(response, content) { super(response.statusText); this.data = content; @@ -170,13 +169,14 @@ class HttpError extends Error { this.url = response.url; this.original = response; } + } export default { - get: get, - post: post, - put: put, - patch: patch, + get, + post, + put, + patch, delete: performDelete, - HttpError: HttpError, -}; \ No newline at end of file + HttpError, +}; diff --git a/resources/js/services/keyboard-navigation.js b/resources/js/services/keyboard-navigation.js index 0f866ceaa..34111bb2d 100644 --- a/resources/js/services/keyboard-navigation.js +++ b/resources/js/services/keyboard-navigation.js @@ -57,7 +57,6 @@ export class KeyboardNavigationHandler { * @param {KeyboardEvent} event */ #keydownHandler(event) { - // Ignore certain key events in inputs to allow text editing. if (event.target.matches('input') && (event.key === 'ArrowRight' || event.key === 'ArrowLeft')) { return; @@ -72,7 +71,7 @@ export class KeyboardNavigationHandler { } else if (event.key === 'Escape') { if (this.onEscape) { this.onEscape(event); - } else if (document.activeElement) { + } else if (document.activeElement) { document.activeElement.blur(); } } else if (event.key === 'Enter' && this.onEnter) { @@ -88,8 +87,9 @@ export class KeyboardNavigationHandler { const focusable = []; const selector = '[tabindex]:not([tabindex="-1"]),[href],button:not([tabindex="-1"],[disabled]),input:not([type=hidden])'; for (const container of this.containers) { - focusable.push(...container.querySelectorAll(selector)) + focusable.push(...container.querySelectorAll(selector)); } return focusable; } -} \ No newline at end of file + +} diff --git a/resources/js/services/text.js b/resources/js/services/text.js index ea82f993e..d5e6fa798 100644 --- a/resources/js/services/text.js +++ b/resources/js/services/text.js @@ -4,7 +4,7 @@ * @returns {string} */ export function kebabToCamel(kebab) { - const ucFirst = (word) => word.slice(0,1).toUpperCase() + word.slice(1); + const ucFirst = word => word.slice(0, 1).toUpperCase() + word.slice(1); const words = kebab.split('-'); return words[0] + words.slice(1).map(ucFirst).join(''); } @@ -15,5 +15,5 @@ export function kebabToCamel(kebab) { * @returns {String} */ export function camelToKebab(camelStr) { - return camelStr.replace(/[A-Z]/g, (str, offset) => (offset > 0 ? '-' : '') + str.toLowerCase()); -} \ No newline at end of file + return camelStr.replace(/[A-Z]/g, (str, offset) => (offset > 0 ? '-' : '') + str.toLowerCase()); +} diff --git a/resources/js/services/translations.js b/resources/js/services/translations.js index 62bb51f56..eb90eeec4 100644 --- a/resources/js/services/translations.js +++ b/resources/js/services/translations.js @@ -19,7 +19,7 @@ class Translator { */ parseTranslations() { const translationMetaTags = document.querySelectorAll('meta[name="translation"]'); - for (let tag of translationMetaTags) { + for (const tag of translationMetaTags) { const key = tag.getAttribute('key'); const value = tag.getAttribute('value'); this.store.set(key, value); @@ -64,7 +64,7 @@ class Translator { const rangeRegex = /^\[([0-9]+),([0-9*]+)]/; let result = null; - for (let t of splitText) { + for (const t of splitText) { // Parse exact matches const exactMatches = t.match(exactCountRegex); if (exactMatches !== null && Number(exactMatches[1]) === count) { diff --git a/resources/js/services/util.js b/resources/js/services/util.js index 238f8b1d8..df2b31336 100644 --- a/resources/js/services/util.js +++ b/resources/js/services/util.js @@ -1,5 +1,3 @@ - - /** * Returns a function, that, as long as it continues to be invoked, will not * be triggered. The function will be called after it stops being called for @@ -14,7 +12,8 @@ export function debounce(func, wait, immediate) { let timeout; return function() { - const context = this, args = arguments; + const context = this; const + args = arguments; const later = function() { timeout = null; if (!immediate) func.apply(context, args); @@ -24,7 +23,7 @@ export function debounce(func, wait, immediate) { timeout = setTimeout(later, wait); if (callNow) func.apply(context, args); }; -}; +} /** * Scroll and highlight an element. @@ -55,11 +54,11 @@ export function scrollAndHighlightElement(element) { */ export function escapeHtml(unsafe) { return unsafe - .replace(/&/g, "&") - .replace(//g, ">") - .replace(/"/g, """) - .replace(/'/g, "'"); + .replace(/&/g, '&') + .replace(//g, '>') + .replace(/"/g, '"') + .replace(/'/g, '''); } /** @@ -68,6 +67,6 @@ export function escapeHtml(unsafe) { * @returns {string} */ export function uniqueId() { - const S4 = () => (((1+Math.random())*0x10000)|0).toString(16).substring(1); - return (S4()+S4()+"-"+S4()+"-"+S4()+"-"+S4()+"-"+S4()+S4()+S4()); -} \ No newline at end of file + const S4 = () => (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1); + return (`${S4() + S4()}-${S4()}-${S4()}-${S4()}-${S4()}${S4()}${S4()}`); +} diff --git a/resources/js/services/vdom.js b/resources/js/services/vdom.js index 89a809084..2095cd2ca 100644 --- a/resources/js/services/vdom.js +++ b/resources/js/services/vdom.js @@ -1,8 +1,8 @@ import { init, attributesModule, - toVNode -} from "snabbdom"; + toVNode, +} from 'snabbdom'; let patcher; @@ -12,7 +12,6 @@ let patcher; function getPatcher() { if (patcher) return patcher; - patcher = init([ attributesModule, ]); @@ -28,4 +27,4 @@ export function patchDomFromHtmlString(domTarget, html) { const contentDom = document.createElement('div'); contentDom.innerHTML = html; getPatcher()(toVNode(domTarget), toVNode(contentDom)); -} \ No newline at end of file +} diff --git a/resources/js/wysiwyg/common-events.js b/resources/js/wysiwyg/common-events.js index a25debac1..d0a5acdc2 100644 --- a/resources/js/wysiwyg/common-events.js +++ b/resources/js/wysiwyg/common-events.js @@ -2,7 +2,6 @@ * @param {Editor} editor */ export function listen(editor) { - // Replace editor content window.$events.listen('editor::replace', ({html}) => { editor.setContent(html); @@ -31,4 +30,4 @@ export function listen(editor) { editor.focus(); } }); -} \ No newline at end of file +} diff --git a/resources/js/wysiwyg/config.js b/resources/js/wysiwyg/config.js index 85c1919d4..89efdb8a0 100644 --- a/resources/js/wysiwyg/config.js +++ b/resources/js/wysiwyg/config.js @@ -1,32 +1,35 @@ -import {register as registerShortcuts} from "./shortcuts"; -import {listen as listenForCommonEvents} from "./common-events"; -import {scrollToQueryString} from "./scrolling"; -import {listenForDragAndPaste} from "./drop-paste-handling"; -import {getPrimaryToolbar, registerAdditionalToolbars} from "./toolbars"; -import {registerCustomIcons} from "./icons"; +import {register as registerShortcuts} from './shortcuts'; +import {listen as listenForCommonEvents} from './common-events'; +import {scrollToQueryString} from './scrolling'; +import {listenForDragAndPaste} from './drop-paste-handling'; +import {getPrimaryToolbar, registerAdditionalToolbars} from './toolbars'; +import {registerCustomIcons} from './icons'; -import {getPlugin as getCodeeditorPlugin} from "./plugin-codeeditor"; -import {getPlugin as getDrawioPlugin} from "./plugin-drawio"; -import {getPlugin as getCustomhrPlugin} from "./plugins-customhr"; -import {getPlugin as getImagemanagerPlugin} from "./plugins-imagemanager"; -import {getPlugin as getAboutPlugin} from "./plugins-about"; -import {getPlugin as getDetailsPlugin} from "./plugins-details"; -import {getPlugin as getTasklistPlugin} from "./plugins-tasklist"; +import {getPlugin as getCodeeditorPlugin} from './plugin-codeeditor'; +import {getPlugin as getDrawioPlugin} from './plugin-drawio'; +import {getPlugin as getCustomhrPlugin} from './plugins-customhr'; +import {getPlugin as getImagemanagerPlugin} from './plugins-imagemanager'; +import {getPlugin as getAboutPlugin} from './plugins-about'; +import {getPlugin as getDetailsPlugin} from './plugins-details'; +import {getPlugin as getTasklistPlugin} from './plugins-tasklist'; const style_formats = [ - {title: "Large Header", format: "h2", preview: 'color: blue;'}, - {title: "Medium Header", format: "h3"}, - {title: "Small Header", format: "h4"}, - {title: "Tiny Header", format: "h5"}, - {title: "Paragraph", format: "p", exact: true, classes: ''}, - {title: "Blockquote", format: "blockquote"}, + {title: 'Large Header', format: 'h2', preview: 'color: blue;'}, + {title: 'Medium Header', format: 'h3'}, + {title: 'Small Header', format: 'h4'}, + {title: 'Tiny Header', format: 'h5'}, { - title: "Callouts", items: [ - {title: "Information", format: 'calloutinfo'}, - {title: "Success", format: 'calloutsuccess'}, - {title: "Warning", format: 'calloutwarning'}, - {title: "Danger", format: 'calloutdanger'} - ] + title: 'Paragraph', format: 'p', exact: true, classes: '', + }, + {title: 'Blockquote', format: 'blockquote'}, + { + title: 'Callouts', + items: [ + {title: 'Information', format: 'calloutinfo'}, + {title: 'Success', format: 'calloutsuccess'}, + {title: 'Warning', format: 'calloutwarning'}, + {title: 'Danger', format: 'calloutdanger'}, + ], }, ]; @@ -37,7 +40,7 @@ const formats = { calloutsuccess: {block: 'p', exact: true, attributes: {class: 'callout success'}}, calloutinfo: {block: 'p', exact: true, attributes: {class: 'callout info'}}, calloutwarning: {block: 'p', exact: true, attributes: {class: 'callout warning'}}, - calloutdanger: {block: 'p', exact: true, attributes: {class: 'callout danger'}} + calloutdanger: {block: 'p', exact: true, attributes: {class: 'callout danger'}}, }; const color_map = [ @@ -66,14 +69,13 @@ const color_map = [ '#34495E', '', '#000000', '', - '#ffffff', '' + '#ffffff', '', ]; function file_picker_callback(callback, value, meta) { - // field_name, url, type, win if (meta.filetype === 'file') { - /** @type {EntitySelectorPopup} **/ + /** @type {EntitySelectorPopup} * */ const selector = window.$components.first('entity-selector-popup'); selector.show(entity => { callback(entity.link, { @@ -85,13 +87,12 @@ function file_picker_callback(callback, value, meta) { if (meta.filetype === 'image') { // Show image manager - /** @type {ImageManager} **/ + /** @type {ImageManager} * */ const imageManager = window.$components.first('image-manager'); - imageManager.show(function (image) { + imageManager.show(image => { callback(image.url, {alt: image.name}); }, 'gallery'); } - } /** @@ -100,21 +101,21 @@ function file_picker_callback(callback, value, meta) { */ function gatherPlugins(options) { const plugins = [ - "image", - "table", - "link", - "autolink", - "fullscreen", - "code", - "customhr", - "autosave", - "lists", - "codeeditor", - "media", - "imagemanager", - "about", - "details", - "tasklist", + 'image', + 'table', + 'link', + 'autolink', + 'fullscreen', + 'code', + 'customhr', + 'autosave', + 'lists', + 'codeeditor', + 'media', + 'imagemanager', + 'about', + 'details', + 'tasklist', options.textDirection === 'rtl' ? 'directionality' : '', ]; @@ -137,11 +138,11 @@ function gatherPlugins(options) { * Fetch custom HTML head content from the parent page head into the editor. */ function fetchCustomHeadContent() { - const headContentLines = document.head.innerHTML.split("\n"); + const headContentLines = document.head.innerHTML.split('\n'); const startLineIndex = headContentLines.findIndex(line => line.trim() === ''); const endLineIndex = headContentLines.findIndex(line => line.trim() === ''); if (startLineIndex === -1 || endLineIndex === -1) { - return '' + return ''; } return headContentLines.slice(startLineIndex + 1, endLineIndex).join('\n'); } @@ -152,7 +153,7 @@ function fetchCustomHeadContent() { * @param {Editor} editor */ function setupBrFilter(editor) { - editor.serializer.addNodeFilter('br', function(nodes) { + editor.serializer.addNodeFilter('br', nodes => { for (const node of nodes) { if (node.parent && node.parent.name === 'code') { const newline = tinymce.html.Node.create('#text'); @@ -200,9 +201,9 @@ function getSetupCallback(options) { icon: 'sourcecode', onAction() { editor.execCommand('mceToggleFormat', false, 'code'); - } - }) - } + }, + }); + }; } /** @@ -229,7 +230,6 @@ body { * @return {Object} */ export function build(options) { - // Set language window.tinymce.addI18n(options.language, options.translationMap); @@ -241,7 +241,7 @@ export function build(options) { width: '100%', height: '100%', selector: '#html-editor', - cache_suffix: '?version=' + version, + cache_suffix: `?version=${version}`, content_css: [ window.baseUrl('/dist/styles.css'), ], @@ -263,12 +263,12 @@ export function build(options) { automatic_uploads: false, custom_elements: 'doc-root,code-block', valid_children: [ - "-div[p|h1|h2|h3|h4|h5|h6|blockquote|code-block]", - "+div[pre|img]", - "-doc-root[doc-root|#text]", - "-li[details]", - "+code-block[pre]", - "+doc-root[p|h1|h2|h3|h4|h5|h6|blockquote|code-block|div]" + '-div[p|h1|h2|h3|h4|h5|h6|blockquote|code-block]', + '+div[pre|img]', + '-doc-root[doc-root|#text]', + '-li[details]', + '+code-block[pre]', + '+doc-root[p|h1|h2|h3|h4|h5|h6|blockquote|code-block|div]', ].join(','), plugins: gatherPlugins(options), contextmenu: false, @@ -285,7 +285,7 @@ export function build(options) { color_map, file_picker_callback, paste_preprocess(plugin, args) { - const content = args.content; + const {content} = args; if (content.indexOf(' { editor.selection.setRng(rng); - editor.undoManager.transact(function () { + editor.undoManager.transact(() => { editor.execCommand('mceInsertContent', false, resp.data.html); }); }); @@ -117,7 +116,7 @@ function drop(editor, options, event) { } else if (wrap) { event.preventDefault(); - editor.undoManager.transact(function () { + editor.undoManager.transact(() => { editor.selection.setRng(rng); editor.selection.setNode(wrap); dom.remove(wrap); @@ -127,7 +126,7 @@ function drop(editor, options, event) { // Handle contenteditable section drop if (!event.isDefaultPrevented() && draggedContentEditable) { event.preventDefault(); - editor.undoManager.transact(function () { + editor.undoManager.transact(() => { const selectedNode = editor.selection.getNode(); const range = editor.selection.getRng(); const selectedNodeRoot = selectedNode.closest('body > *'); @@ -153,6 +152,6 @@ function drop(editor, options, event) { */ export function listenForDragAndPaste(editor, options) { editor.on('dragstart', () => dragStart(editor, options)); - editor.on('drop', event => drop(editor, options, event)); + editor.on('drop', event => drop(editor, options, event)); editor.on('paste', event => paste(editor, options, event)); -} \ No newline at end of file +} diff --git a/resources/js/wysiwyg/icons.js b/resources/js/wysiwyg/icons.js index 2c2457fe1..3045df227 100644 --- a/resources/js/wysiwyg/icons.js +++ b/resources/js/wysiwyg/icons.js @@ -5,17 +5,15 @@ const icons = { 'table-insert-column-before': '', 'table-insert-row-above': '', 'table-insert-row-after': '', - 'table': '', + table: '', 'table-delete-table': '', }; - /** * @param {Editor} editor */ export function registerCustomIcons(editor) { - for (const [name, svg] of Object.entries(icons)) { editor.ui.registry.addIcon(name, svg); } -} \ No newline at end of file +} diff --git a/resources/js/wysiwyg/plugin-codeeditor.js b/resources/js/wysiwyg/plugin-codeeditor.js index 9e681486d..7446e6870 100644 --- a/resources/js/wysiwyg/plugin-codeeditor.js +++ b/resources/js/wysiwyg/plugin-codeeditor.js @@ -10,8 +10,8 @@ function elemIsCodeBlock(elem) { */ function showPopup(editor, code, language, callback) { window.$components.first('code-editor').open(code, language, (newCode, newLang) => { - callback(newCode, newLang) - editor.focus() + callback(newCode, newLang); + editor.focus(); }); } @@ -59,7 +59,7 @@ function defineCodeBlockCustomElement(editor) { } getLanguage() { - const getLanguageFromClassList = (classes) => { + const getLanguageFromClassList = classes => { const langClasses = classes.split(' ').filter(cssClass => cssClass.startsWith('language-')); return (langClasses[0] || '').replace('language-', ''); }; @@ -114,12 +114,12 @@ function defineCodeBlockCustomElement(editor) { this.style.height = `${height}px`; const container = this.shadowRoot.querySelector('.CodeMirrorContainer'); - const renderEditor = (Code) => { + const renderEditor = Code => { this.editor = Code.wysiwygView(container, this.shadowRoot, content, this.getLanguage()); setTimeout(() => this.style.height = null, 12); }; - window.importVersioned('code').then((Code) => { + window.importVersioned('code').then(Code => { const timeout = (Date.now() - connectedTime < 20) ? 20 : 0; setTimeout(() => renderEditor(Code), timeout); }); @@ -135,26 +135,25 @@ function defineCodeBlockCustomElement(editor) { } } } + } win.customElements.define('code-block', CodeBlockElement); } - /** * @param {Editor} editor * @param {String} url */ function register(editor, url) { - - editor.ui.registry.addIcon('codeblock', '') + editor.ui.registry.addIcon('codeblock', ''); editor.ui.registry.addButton('codeeditor', { tooltip: 'Insert code block', icon: 'codeblock', onAction() { editor.execCommand('codeeditor'); - } + }, }); editor.ui.registry.addButton('editcodeeditor', { @@ -162,7 +161,7 @@ function register(editor, url) { icon: 'edit-block', onAction() { editor.execCommand('codeeditor'); - } + }, }); editor.addCommand('codeeditor', () => { @@ -185,14 +184,14 @@ function register(editor, url) { }); editor.on('dblclick', event => { - let selectedNode = editor.selection.getNode(); + const selectedNode = editor.selection.getNode(); if (elemIsCodeBlock(selectedNode)) { showPopupForCodeBlock(editor, selectedNode); } }); editor.on('PreInit', () => { - editor.parser.addNodeFilter('pre', function(elms) { + editor.parser.addNodeFilter('pre', elms => { for (const el of elms) { const wrapper = tinymce.html.Node.create('code-block', { contenteditable: 'false', @@ -207,13 +206,13 @@ function register(editor, url) { } }); - editor.parser.addNodeFilter('code-block', function(elms) { + editor.parser.addNodeFilter('code-block', elms => { for (const el of elms) { el.attr('contenteditable', 'false'); } }); - editor.serializer.addNodeFilter('code-block', function(elms) { + editor.serializer.addNodeFilter('code-block', elms => { for (const el of elms) { el.unwrap(); } @@ -221,12 +220,12 @@ function register(editor, url) { }); editor.ui.registry.addContextToolbar('codeeditor', { - predicate: function (node) { + predicate(node) { return node.nodeName.toLowerCase() === 'code-block'; }, items: 'editcodeeditor', position: 'node', - scope: 'node' + scope: 'node', }); editor.on('PreInit', () => { @@ -240,4 +239,4 @@ function register(editor, url) { */ export function getPlugin(options) { return register; -} \ No newline at end of file +} diff --git a/resources/js/wysiwyg/plugin-drawio.js b/resources/js/wysiwyg/plugin-drawio.js index 9f4a065ad..3d1125841 100644 --- a/resources/js/wysiwyg/plugin-drawio.js +++ b/resources/js/wysiwyg/plugin-drawio.js @@ -1,4 +1,4 @@ -import DrawIO from "../services/drawio"; +import DrawIO from '../services/drawio'; let pageEditor = null; let currentNode = null; @@ -16,12 +16,12 @@ function showDrawingManager(mceEditor, selectedNode = null) { pageEditor = mceEditor; currentNode = selectedNode; - /** @type {ImageManager} **/ + /** @type {ImageManager} * */ const imageManager = window.$components.first('image-manager'); - imageManager.show(function (image) { + imageManager.show(image => { if (selectedNode) { const imgElem = selectedNode.querySelector('img'); - pageEditor.undoManager.transact(function () { + pageEditor.undoManager.transact(() => { pageEditor.dom.setAttrib(imgElem, 'src', image.url); pageEditor.dom.setAttrib(selectedNode, 'drawio-diagram', image.id); }); @@ -39,10 +39,10 @@ function showDrawingEditor(mceEditor, selectedNode = null) { } async function updateContent(pngData) { - const id = "image-" + Math.random().toString(16).slice(2); + const id = `image-${Math.random().toString(16).slice(2)}`; const loadingImage = window.baseUrl('/loading.gif'); - const handleUploadError = (error) => { + const handleUploadError = error => { if (error.status === 413) { window.$events.emit('error', options.translations.serverUploadLimitText); } else { @@ -54,10 +54,10 @@ async function updateContent(pngData) { // Handle updating an existing image if (currentNode) { DrawIO.close(); - let imgElem = currentNode.querySelector('img'); + const imgElem = currentNode.querySelector('img'); try { const img = await DrawIO.upload(pngData, options.pageId); - pageEditor.undoManager.transact(function () { + pageEditor.undoManager.transact(() => { pageEditor.dom.setAttrib(imgElem, 'src', img.url); pageEditor.dom.setAttrib(currentNode, 'drawio-diagram', img.id); }); @@ -72,7 +72,7 @@ async function updateContent(pngData) { DrawIO.close(); try { const img = await DrawIO.upload(pngData, options.pageId); - pageEditor.undoManager.transact(function () { + pageEditor.undoManager.transact(() => { pageEditor.dom.setAttrib(id, 'src', img.url); pageEditor.dom.get(id).parentNode.setAttribute('drawio-diagram', img.id); }); @@ -83,7 +83,6 @@ async function updateContent(pngData) { }, 5); } - function drawingInit() { if (!currentNode) { return Promise.resolve(''); @@ -101,13 +100,12 @@ function drawingInit() { export function getPlugin(providedOptions) { options = providedOptions; return function(editor, url) { - editor.addCommand('drawio', () => { const selectedNode = editor.selection.getNode(); showDrawingEditor(editor, isDrawing(selectedNode) ? selectedNode : null); }); - editor.ui.registry.addIcon('diagram', ``) + editor.ui.registry.addIcon('diagram', ``); editor.ui.registry.addSplitButton('drawio', { tooltip: 'Insert/edit drawing', @@ -123,7 +121,7 @@ export function getPlugin(providedOptions) { type: 'choiceitem', text: 'Drawing manager', value: 'drawing-manager', - } + }, ]); }, onItemAction(api, value) { @@ -131,25 +129,24 @@ export function getPlugin(providedOptions) { const selectedNode = editor.selection.getNode(); showDrawingManager(editor, isDrawing(selectedNode) ? selectedNode : null); } - } + }, }); editor.on('dblclick', event => { - let selectedNode = editor.selection.getNode(); + const selectedNode = editor.selection.getNode(); if (!isDrawing(selectedNode)) return; showDrawingEditor(editor, selectedNode); }); - editor.on('SetContent', function () { + editor.on('SetContent', () => { const drawings = editor.dom.select('body > div[drawio-diagram]'); if (!drawings.length) return; - editor.undoManager.transact(function () { + editor.undoManager.transact(() => { for (const drawing of drawings) { drawing.setAttribute('contenteditable', 'false'); } }); }); - }; -} \ No newline at end of file +} diff --git a/resources/js/wysiwyg/plugins-about.js b/resources/js/wysiwyg/plugins-about.js index 1585de72d..a9c0a9e64 100644 --- a/resources/js/wysiwyg/plugins-about.js +++ b/resources/js/wysiwyg/plugins-about.js @@ -3,7 +3,6 @@ * @param {String} url */ function register(editor, url) { - const aboutDialog = { title: 'About the WYSIWYG Editor', url: window.baseUrl('/help/wysiwyg'), @@ -14,16 +13,14 @@ function register(editor, url) { tooltip: 'About the editor', onAction() { tinymce.activeEditor.windowManager.openUrl(aboutDialog); - } + }, }); - } - /** * @param {WysiwygConfigOptions} options * @return {register} */ export function getPlugin(options) { return register; -} \ No newline at end of file +} diff --git a/resources/js/wysiwyg/plugins-customhr.js b/resources/js/wysiwyg/plugins-customhr.js index df1984d4e..6aa1620da 100644 --- a/resources/js/wysiwyg/plugins-customhr.js +++ b/resources/js/wysiwyg/plugins-customhr.js @@ -3,10 +3,10 @@ * @param {String} url */ function register(editor, url) { - editor.addCommand('InsertHorizontalRule', function () { - let hrElem = document.createElement('hr'); - let cNode = editor.selection.getNode(); - let parentNode = cNode.parentNode; + editor.addCommand('InsertHorizontalRule', () => { + const hrElem = document.createElement('hr'); + const cNode = editor.selection.getNode(); + const {parentNode} = cNode; parentNode.insertBefore(hrElem, cNode); }); @@ -15,15 +15,14 @@ function register(editor, url) { tooltip: 'Insert horizontal line', onAction() { editor.execCommand('InsertHorizontalRule'); - } + }, }); } - /** * @param {WysiwygConfigOptions} options * @return {register} */ export function getPlugin(options) { return register; -} \ No newline at end of file +} diff --git a/resources/js/wysiwyg/plugins-details.js b/resources/js/wysiwyg/plugins-details.js index 44a0a35ab..5da6680ed 100644 --- a/resources/js/wysiwyg/plugins-details.js +++ b/resources/js/wysiwyg/plugins-details.js @@ -2,10 +2,9 @@ * @param {Editor} editor * @param {String} url */ -import {blockElementTypes} from "./util"; +import {blockElementTypes} from './util'; function register(editor, url) { - editor.ui.registry.addIcon('details', ''); editor.ui.registry.addIcon('togglefold', ''); editor.ui.registry.addIcon('togglelabel', ''); @@ -15,15 +14,15 @@ function register(editor, url) { tooltip: 'Insert collapsible block', onAction() { editor.execCommand('InsertDetailsBlock'); - } + }, }); editor.ui.registry.addButton('removedetails', { icon: 'table-delete-table', tooltip: 'Unwrap', onAction() { - unwrapDetailsInSelection(editor) - } + unwrapDetailsInSelection(editor); + }, }); editor.ui.registry.addButton('editdetials', { @@ -31,7 +30,7 @@ function register(editor, url) { tooltip: 'Edit label', onAction() { showDetailLabelEditWindow(editor); - } + }, }); editor.on('dblclick', event => { @@ -46,15 +45,15 @@ function register(editor, url) { const details = getSelectedDetailsBlock(editor); details.toggleAttribute('open'); editor.focus(); - } + }, }); - editor.addCommand('InsertDetailsBlock', function () { + editor.addCommand('InsertDetailsBlock', () => { let content = editor.selection.getContent({format: 'html'}); const details = document.createElement('details'); const summary = document.createElement('summary'); - const id = 'details-' + Date.now(); - details.setAttribute('data-id', id) + const id = `details-${Date.now()}`; + details.setAttribute('data-id', id); details.appendChild(summary); if (!content) { @@ -76,12 +75,12 @@ function register(editor, url) { }); editor.ui.registry.addContextToolbar('details', { - predicate: function (node) { + predicate(node) { return node.nodeName.toLowerCase() === 'details'; }, items: 'editdetials toggledetails removedetails', position: 'node', - scope: 'node' + scope: 'node', }); editor.on('PreInit', () => { @@ -135,20 +134,20 @@ function detailsDialog(editor) { buttons: [ { type: 'cancel', - text: 'Cancel' + text: 'Cancel', }, { type: 'submit', text: 'Save', primary: true, - } + }, ], onSubmit(api) { const {summary} = api.getData(); setSummary(editor, summary); api.close(); - } - } + }, + }; } function setSummary(editor, summaryContent) { @@ -191,20 +190,20 @@ function unwrapDetailsInSelection(editor) { * @param {Editor} editor */ function setupElementFilters(editor) { - editor.parser.addNodeFilter('details', function(elms) { + editor.parser.addNodeFilter('details', elms => { for (const el of elms) { ensureDetailsWrappedInEditable(el); } }); - editor.serializer.addNodeFilter('details', function(elms) { + editor.serializer.addNodeFilter('details', elms => { for (const el of elms) { unwrapDetailsEditable(el); el.attr('open', null); } }); - editor.serializer.addNodeFilter('doc-root', function(elms) { + editor.serializer.addNodeFilter('doc-root', elms => { for (const el of elms) { el.unwrap(); } @@ -258,11 +257,10 @@ function unwrapDetailsEditable(detailsEl) { } } - /** * @param {WysiwygConfigOptions} options * @return {register} */ export function getPlugin(options) { return register; -} \ No newline at end of file +} diff --git a/resources/js/wysiwyg/plugins-imagemanager.js b/resources/js/wysiwyg/plugins-imagemanager.js index 6969a50e2..e7dd126cb 100644 --- a/resources/js/wysiwyg/plugins-imagemanager.js +++ b/resources/js/wysiwyg/plugins-imagemanager.js @@ -9,24 +9,23 @@ function register(editor, url) { icon: 'image', tooltip: 'Insert image', onAction() { - /** @type {ImageManager} **/ + /** @type {ImageManager} * */ const imageManager = window.$components.first('image-manager'); - imageManager.show(function (image) { + imageManager.show(image => { const imageUrl = image.thumbs.display || image.url; let html = ``; html += `${image.name}`; html += ''; editor.execCommand('mceInsertContent', false, html); }, 'gallery'); - } + }, }); } - /** * @param {WysiwygConfigOptions} options * @return {register} */ export function getPlugin(options) { return register; -} \ No newline at end of file +} diff --git a/resources/js/wysiwyg/plugins-stub.js b/resources/js/wysiwyg/plugins-stub.js index d220ac02d..38725a180 100644 --- a/resources/js/wysiwyg/plugins-stub.js +++ b/resources/js/wysiwyg/plugins-stub.js @@ -6,11 +6,10 @@ function register(editor, url) { } - /** * @param {WysiwygConfigOptions} options * @return {register} */ export function getPlugin(options) { return register; -} \ No newline at end of file +} diff --git a/resources/js/wysiwyg/plugins-tasklist.js b/resources/js/wysiwyg/plugins-tasklist.js index 4afbfa8e6..cf69287f1 100644 --- a/resources/js/wysiwyg/plugins-tasklist.js +++ b/resources/js/wysiwyg/plugins-tasklist.js @@ -3,7 +3,6 @@ * @param {String} url */ function register(editor, url) { - // Tasklist UI buttons editor.ui.registry.addIcon('tasklist', ''); editor.ui.registry.addToggleButton('tasklist', { @@ -28,7 +27,7 @@ function register(editor, url) { const inList = parentListEl && parentListEl.classList.contains('task-list-item'); api.setActive(Boolean(inList)); }); - } + }, }); // Tweak existing bullet list button active state to not be active @@ -48,32 +47,32 @@ function register(editor, url) { // Instead we quickly jump through an ordered list first if we're within a tasklist. if (elementWithinTaskList(editor.selection.getNode())) { editor.execCommand('InsertOrderedList', null, { - 'list-item-attributes': {class: null} + 'list-item-attributes': {class: null}, }); } editor.execCommand('InsertUnorderedList', null, { - 'list-item-attributes': {class: null} + 'list-item-attributes': {class: null}, }); }; // Tweak existing number list to not allow classes on child items const existingNumListButton = editor.ui.registry.getAll().buttons.numlist; existingNumListButton.onAction = function() { editor.execCommand('InsertOrderedList', null, { - 'list-item-attributes': {class: null} + 'list-item-attributes': {class: null}, }); }; // Setup filters on pre-init editor.on('PreInit', () => { - editor.parser.addNodeFilter('li', function(nodes) { + editor.parser.addNodeFilter('li', nodes => { for (const node of nodes) { if (node.attributes.map.class === 'task-list-item') { parseTaskListNode(node); } } }); - editor.serializer.addNodeFilter('li', function(nodes) { + editor.serializer.addNodeFilter('li', nodes => { for (const node of nodes) { if (node.attributes.map.class === 'task-list-item') { serializeTaskListNode(node); @@ -83,7 +82,7 @@ function register(editor, url) { }); // Handle checkbox click in editor - editor.on('click', function(event) { + editor.on('click', event => { const clickedEl = event.target; if (clickedEl.nodeName === 'LI' && clickedEl.classList.contains('task-list-item')) { handleTaskListItemClick(event, clickedEl, editor); @@ -118,7 +117,7 @@ function handleTaskListItemClick(event, clickedEl, editor) { editor.undoManager.transact(() => { if (clickedEl.hasAttribute('checked')) { clickedEl.removeAttribute('checked'); - } else { + } else { clickedEl.setAttribute('checked', 'checked'); } }); @@ -168,4 +167,4 @@ function serializeTaskListNode(node) { */ export function getPlugin(options) { return register; -} \ No newline at end of file +} diff --git a/resources/js/wysiwyg/scrolling.js b/resources/js/wysiwyg/scrolling.js index f14ef4c64..faeb837a4 100644 --- a/resources/js/wysiwyg/scrolling.js +++ b/resources/js/wysiwyg/scrolling.js @@ -26,4 +26,4 @@ function scrollToText(editor, scrollId) { editor.selection.select(element, true); editor.selection.collapse(false); editor.focus(); -} \ No newline at end of file +} diff --git a/resources/js/wysiwyg/shortcuts.js b/resources/js/wysiwyg/shortcuts.js index ef364ddad..b624b23a2 100644 --- a/resources/js/wysiwyg/shortcuts.js +++ b/resources/js/wysiwyg/shortcuts.js @@ -4,7 +4,7 @@ export function register(editor) { // Headers for (let i = 1; i < 5; i++) { - editor.shortcuts.add('meta+' + i, '', ['FormatBlock', false, 'h' + (i+1)]); + editor.shortcuts.add(`meta+${i}`, '', ['FormatBlock', false, `h${i + 1}`]); } // Other block shortcuts @@ -30,7 +30,7 @@ export function register(editor) { }); // Loop through callout styles - editor.shortcuts.add('meta+9', '', function() { + editor.shortcuts.add('meta+9', '', () => { const selectedNode = editor.selection.getNode(); const callout = selectedNode ? selectedNode.closest('.callout') : null; @@ -39,15 +39,14 @@ export function register(editor) { const newFormatIndex = (currentFormatIndex + 1) % formats.length; const newFormat = formats[newFormatIndex]; - editor.formatter.apply('callout' + newFormat); + editor.formatter.apply(`callout${newFormat}`); }); // Link selector shortcut - editor.shortcuts.add('meta+shift+K', '', function() { - /** @var {EntitySelectorPopup} **/ + editor.shortcuts.add('meta+shift+K', '', () => { + /** @var {EntitySelectorPopup} * */ const selectorPopup = window.$components.first('entity-selector-popup'); - selectorPopup.show(function(entity) { - + selectorPopup.show(entity => { if (editor.selection.isCollapsed()) { editor.insertContent(editor.dom.createHTML('a', {href: entity.link}, editor.dom.encode(entity.name))); } else { @@ -56,6 +55,6 @@ export function register(editor) { editor.selection.collapse(false); editor.focus(); - }) + }); }); -} \ No newline at end of file +} diff --git a/resources/js/wysiwyg/toolbars.js b/resources/js/wysiwyg/toolbars.js index 9debb08b5..9acb24c1d 100644 --- a/resources/js/wysiwyg/toolbars.js +++ b/resources/js/wysiwyg/toolbars.js @@ -13,7 +13,7 @@ export function getPrimaryToolbar(options) { 'bullist numlist listoverflow', textDirPlugins, 'link table imagemanager-insert insertoverflow', - 'code about fullscreen' + 'code about fullscreen', ]; return toolbar.filter(row => Boolean(row)).join(' | '); @@ -26,17 +26,17 @@ function registerPrimaryToolbarGroups(editor) { editor.ui.registry.addGroupToolbarButton('formatoverflow', { icon: 'more-drawer', tooltip: 'More', - items: 'strikethrough superscript subscript inlinecode removeformat' + items: 'strikethrough superscript subscript inlinecode removeformat', }); editor.ui.registry.addGroupToolbarButton('listoverflow', { icon: 'more-drawer', tooltip: 'More', - items: 'tasklist outdent indent' + items: 'tasklist outdent indent', }); editor.ui.registry.addGroupToolbarButton('insertoverflow', { icon: 'more-drawer', tooltip: 'More', - items: 'customhr codeeditor drawio media details' + items: 'customhr codeeditor drawio media details', }); } @@ -50,7 +50,7 @@ function registerLinkContextToolbar(editor) { }, position: 'node', scope: 'node', - items: 'link unlink openlink' + items: 'link unlink openlink', }); } @@ -64,7 +64,7 @@ function registerImageContextToolbar(editor) { }, position: 'node', scope: 'node', - items: 'image' + items: 'image', }); } @@ -76,4 +76,4 @@ export function registerAdditionalToolbars(editor, options) { registerPrimaryToolbarGroups(editor); registerLinkContextToolbar(editor); registerImageContextToolbar(editor); -} \ No newline at end of file +} diff --git a/resources/js/wysiwyg/util.js b/resources/js/wysiwyg/util.js index 1f63b6529..68b6aabfc 100644 --- a/resources/js/wysiwyg/util.js +++ b/resources/js/wysiwyg/util.js @@ -1,5 +1,3 @@ - - export const blockElementTypes = [ 'p', 'h1', @@ -15,5 +13,5 @@ export const blockElementTypes = [ 'details', 'ul', 'ol', - 'table' -]; \ No newline at end of file + 'table', +];