diff --git a/web_src/js/features/comp/ComboMarkdownEditor.js b/web_src/js/features/comp/ComboMarkdownEditor.js index 7186989ffa68a..f40b0bdc17bc3 100644 --- a/web_src/js/features/comp/ComboMarkdownEditor.js +++ b/web_src/js/features/comp/ComboMarkdownEditor.js @@ -122,22 +122,22 @@ class ComboMarkdownEditor { } setupTab() { - const $container = $(this.container); - const tabs = $container[0].querySelectorAll('.tabular.menu > .item'); + const tabs = this.container.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 = 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"]'); + this.tabEditor = Array.from(tabs).find((tab) => tab.getAttribute('data-tab-for') === 'markdown-writer'); + this.tabPreviewer = Array.from(tabs).find((tab) => tab.getAttribute('data-tab-for') === 'markdown-previewer'); + this.tabEditor.setAttribute('data-tab', `markdown-writer-${elementIdCounter}`); + this.tabPreviewer.setAttribute('data-tab', `markdown-previewer-${elementIdCounter}`); + + const panelEditor = this.container.querySelector('.ui.tab[data-tab-panel="markdown-writer"]'); + const panelPreviewer = this.container.querySelector('.ui.tab[data-tab-panel="markdown-previewer"]'); panelEditor.setAttribute('data-tab', `markdown-writer-${elementIdCounter}`); panelPreviewer.setAttribute('data-tab', `markdown-previewer-${elementIdCounter}`); elementIdCounter++; - tabEditor.addEventListener('click', () => { + this.tabEditor.addEventListener('click', () => { requestAnimationFrame(() => { this.focus(); }); @@ -145,11 +145,11 @@ class ComboMarkdownEditor { $(tabs).tab(); - this.previewUrl = tabPreviewer.getAttribute('data-preview-url'); - this.previewContext = tabPreviewer.getAttribute('data-preview-context'); + this.previewUrl = this.tabPreviewer.getAttribute('data-preview-url'); + this.previewContext = this.tabPreviewer.getAttribute('data-preview-context'); this.previewMode = this.options.previewMode ?? 'comment'; this.previewWiki = this.options.previewWiki ?? false; - tabPreviewer.addEventListener('click', async () => { + this.tabPreviewer.addEventListener('click', async () => { const formData = new FormData(); formData.append('mode', this.previewMode); formData.append('context', this.previewContext); @@ -161,6 +161,10 @@ class ComboMarkdownEditor { }); } + switchTabToEditor() { + this.tabEditor.click(); + } + prepareEasyMDEToolbarActions() { this.easyMDEToolbarDefault = [ 'bold', 'italic', 'strikethrough', '|', 'heading-1', 'heading-2', 'heading-3', diff --git a/web_src/js/features/repo-issue-edit.js b/web_src/js/features/repo-issue-edit.js index 8d43b6620c21f..5fafdcf17c105 100644 --- a/web_src/js/features/repo-issue-edit.js +++ b/web_src/js/features/repo-issue-edit.js @@ -179,6 +179,7 @@ async function onEditContent(event) { if (!comboMarkdownEditor.value()) { comboMarkdownEditor.value(rawContent.textContent); } + comboMarkdownEditor.switchTabToEditor(); comboMarkdownEditor.focus(); }