From 8557c6ae43c6dedfc49de68322b3696677afe30a Mon Sep 17 00:00:00 2001 From: Yarden Shoham Date: Mon, 25 Mar 2024 02:00:54 +0200 Subject: [PATCH] Remove jQuery `.attr` from the ComboMarkdownEditor (#30051) - Switched from jQuery `attr` to plain javascript `getAttribute` and `setAttribute` - Tested the markdown editor and it works as before Signed-off-by: Yarden Shoham (cherry picked from commit 428e05662f4f745fe7fef04ce9218a86aa4f1b6c) --- .../js/features/comp/ComboMarkdownEditor.js | 31 +++++++++---------- 1 file changed, 15 insertions(+), 16 deletions(-) diff --git a/web_src/js/features/comp/ComboMarkdownEditor.js b/web_src/js/features/comp/ComboMarkdownEditor.js index 1e7b554b98..1e728ca201 100644 --- a/web_src/js/features/comp/ComboMarkdownEditor.js +++ b/web_src/js/features/comp/ComboMarkdownEditor.js @@ -132,34 +132,33 @@ class ComboMarkdownEditor { setupTab() { const $container = $(this.container); - const $tabMenu = $container.find('.tabular.menu'); - const $tabs = $tabMenu.find('> .item'); + const tabs = $container[0].querySelectorAll('.tabular.menu > .item'); // Fomantic Tab requires the "data-tab" to be globally unique. // So here it uses our defined "data-tab-for" and "data-tab-panel" to generate the "data-tab" attribute for Fomantic. - const $tabEditor = $tabs.filter(`.item[data-tab-for="markdown-writer"]`); - const $tabPreviewer = $tabs.filter(`.item[data-tab-for="markdown-previewer"]`); - $tabEditor.attr('data-tab', `markdown-writer-${elementIdCounter}`); - $tabPreviewer.attr('data-tab', `markdown-previewer-${elementIdCounter}`); - const $panelEditor = $container.find('.ui.tab[data-tab-panel="markdown-writer"]'); - const $panelPreviewer = $container.find('.ui.tab[data-tab-panel="markdown-previewer"]'); - $panelEditor.attr('data-tab', `markdown-writer-${elementIdCounter}`); - $panelPreviewer.attr('data-tab', `markdown-previewer-${elementIdCounter}`); + const tabEditor = Array.from(tabs).find((tab) => tab.getAttribute('data-tab-for') === 'markdown-writer'); + const tabPreviewer = Array.from(tabs).find((tab) => tab.getAttribute('data-tab-for') === 'markdown-previewer'); + tabEditor.setAttribute('data-tab', `markdown-writer-${elementIdCounter}`); + tabPreviewer.setAttribute('data-tab', `markdown-previewer-${elementIdCounter}`); + const panelEditor = $container[0].querySelector('.ui.tab[data-tab-panel="markdown-writer"]'); + const panelPreviewer = $container[0].querySelector('.ui.tab[data-tab-panel="markdown-previewer"]'); + panelEditor.setAttribute('data-tab', `markdown-writer-${elementIdCounter}`); + panelPreviewer.setAttribute('data-tab', `markdown-previewer-${elementIdCounter}`); elementIdCounter++; - $tabEditor[0].addEventListener('click', () => { + tabEditor.addEventListener('click', () => { requestAnimationFrame(() => { this.focus(); }); }); - $tabs.tab(); + $(tabs).tab(); - this.previewUrl = $tabPreviewer.attr('data-preview-url'); - this.previewContext = $tabPreviewer.attr('data-preview-context'); + this.previewUrl = tabPreviewer.getAttribute('data-preview-url'); + this.previewContext = tabPreviewer.getAttribute('data-preview-context'); this.previewMode = this.options.previewMode ?? 'comment'; this.previewWiki = this.options.previewWiki ?? false; - $tabPreviewer.on('click', async () => { + tabPreviewer.addEventListener('click', async () => { const formData = new FormData(); formData.append('mode', this.previewMode); formData.append('context', this.previewContext); @@ -167,7 +166,7 @@ class ComboMarkdownEditor { formData.append('wiki', this.previewWiki); const response = await POST(this.previewUrl, {data: formData}); const data = await response.text(); - renderPreviewPanelContent($panelPreviewer, data); + renderPreviewPanelContent($(panelPreviewer), data); }); }