fix merge, fix bug

Author: wxiaoguang

templates/shared/combomarkdowneditor.tmpl

@@ -9,11 +9,11 @@ Template Attributes:
 <div {{if .ContainerId}}id="{{.ContainerId}}"{{end}} class="combo-markdown-editor {{.ContainerClasses}}" data-dropzone-parent-container="{{.DropzoneParentContainer}}">
 	{{if .MarkdownPreviewUrl}}
 	<div class="ui top tabular menu">
-		<a class="active item" data-tab="markdown-writer">{{.locale.Tr "write"}}</a>
-		<a class="item" data-tab="markdown-previewer" data-preview-url="{{.MarkdownPreviewUrl}}" data-preview-context="{{.MarkdownPreviewContext}}">{{.locale.Tr "preview"}}</a>
+		<a class="active item" data-tab-for="markdown-writer">{{.locale.Tr "write"}}</a>
+		<a class="item" data-tab-for="markdown-previewer" data-preview-url="{{.MarkdownPreviewUrl}}" data-preview-context="{{.MarkdownPreviewContext}}">{{.locale.Tr "preview"}}</a>
 	</div>
 	{{end}}
-	<div class="ui tab active" data-tab="markdown-writer">
+	<div class="ui tab active" data-tab-panel="markdown-writer">
 		<markdown-toolbar class="gt-df">
 			<div class="markdown-toolbar-group">
 				<md-header class="markdown-toolbar-button">{{svg "octicon-heading"}}</md-header>
@@ -41,7 +41,7 @@ Template Attributes:
 		</markdown-toolbar>
 		<textarea class="markdown-text-editor js-quick-submit" name="{{.TextareaName}}" placeholder="{{.TextareaPlaceholder}}">{{.TextareaContent}}</textarea>
 	</div>
-	<div class="ui tab markup" data-tab="markdown-previewer">
+	<div class="ui tab markup" data-tab-panel="markdown-previewer">
 		{{.locale.Tr "loading"}}
 	</div>
 </div>

web_src/js/features/comp/ComboMarkdownEditor.js

@@ -5,6 +5,7 @@ import {initEasyMDEImagePaste, initTextareaImagePaste} from './ImagePaste.js';
 import $ from 'jquery';
 import {initMarkupContent} from '../../markup/content.js';
 import {handleGlobalEnterQuickSubmit} from './QuickSubmit.js';
+import {attachRefIssueContextPopup} from '../contextpopup.js';
 
 let elementIdCounter = 0;
 
@@ -61,31 +62,46 @@ class ComboMarkdownEditor {
       initTextareaImagePaste(this.textarea, this.dropzone);
     }
 
-    this.setupPreview();
+    this.setupTab();
     this.prepareEasyMDEToolbarActions();
   }
 
-  setupPreview() {
-    const $tabMenu = $(this.container).find('.tabular.menu');
+  setupTab() {
+    const $container = $(this.container);
+    const $tabMenu = $container.find('.tabular.menu');
     const $tabs = $tabMenu.find('> .item');
-    const $tabPreview = $tabs.filter(`.item[data-tab="markdown-previewer"]`);
+
+    // 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}`);
+    elementIdCounter++;
+
     $tabs.tab();
 
-    this.previewUrl = $tabPreview.attr('data-preview-url');
-    this.previewContext = $tabPreview.attr('data-preview-context');
+    this.previewUrl = $tabPreviewer.attr('data-preview-url');
+    this.previewContext = $tabPreviewer.attr('data-preview-context');
     this.previewMode = this.options.previewMode ?? 'comment';
     this.previewWiki = this.options.previewWiki ?? false;
-    $tabPreview.on('click', () => {
+    $tabPreviewer.on('click', () => {
       $.post(this.previewUrl, {
         _csrf: window.config.csrfToken,
         mode: this.previewMode,
         context: this.previewContext,
         text: this.value(),
         wiki: this.previewWiki,
       }, (data) => {
-        const previewPanel = this.container.querySelector(`.tab[data-tab="markdown-previewer"]`);
-        previewPanel.innerHTML = data;
+        $panelPreviewer.html(data);
         initMarkupContent();
+
+        const refIssues = $panelPreviewer.find('p .ref-issue');
+        attachRefIssueContextPopup(refIssues);
       });
     });
   }

web_src/js/features/contextpopup.js

@@ -10,17 +10,16 @@ export function initContextPopups() {
 }
 
 export function attachRefIssueContextPopup(refIssues) {
-  if (!refIssues.length) return;
-  refIssues.each(function () {
-    if ($(this).hasClass('ref-external-issue')) {
+  for (const refIssue of refIssues) {
+    if (refIssue.classList.contains('ref-external-issue')) {
       return;
     }
 
-    const {owner, repo, index} = parseIssueHref($(this).attr('href'));
+    const {owner, repo, index} = parseIssueHref(refIssue.getAttribute('href'));
     if (!owner) return;
 
     const el = document.createElement('div');
-    this.parentNode.insertBefore(el, this.nextSibling);
+    refIssue.parentNode.insertBefore(el, refIssue.nextSibling);
 
     const view = createApp(ContextPopup);
 
@@ -31,7 +30,7 @@ export function attachRefIssueContextPopup(refIssues) {
       el.textContent = 'ContextPopup failed to load';
     }
 
-    createTippy(this, {
+    createTippy(refIssue, {
       content: el,
       placement: 'top-start',
       interactive: true,
@@ -40,5 +39,5 @@ export function attachRefIssueContextPopup(refIssues) {
         el.firstChild.dispatchEvent(new CustomEvent('ce-load-context-popup', {detail: {owner, repo, index}}));
       }
     });
-  });
+  }
 }

web_src/js/features/repo-legacy.js

@@ -23,6 +23,7 @@ import {initRepoSettingBranches} from './repo-settings.js';
 import {initRepoPullRequestMergeForm} from './repo-issue-pr-form.js';
 import {hideElem, showElem} from '../utils/dom.js';
 import {getComboMarkdownEditor, initComboMarkdownEditor} from './comp/ComboMarkdownEditor.js';
+import {attachRefIssueContextPopup} from './contextpopup.js';
 
 const {csrfToken} = window.config;
 
@@ -400,12 +401,15 @@ async function onEditContent(event) {
       context: $editContentZone.data('context'),
       files: $attachments,
     }, (data) => {
-      if (data.length === 0 || data.content.length === 0) {
+      if (!data.content) {
         $renderContent.html($('#no-content').html());
         $rawContent.text('');
       } else {
         $renderContent.html(data.content);
         $rawContent.text(comboMarkdownEditor.value());
+
+        const refIssues = $renderContent.find('p .ref-issue');
+        attachRefIssueContextPopup(refIssues);
       }
       const $content = $segment;
       if (!$content.find('.dropzone-attachments').length) {
@@ -432,7 +436,7 @@ async function onEditContent(event) {
     comboMarkdownEditor = await initComboMarkdownEditor($editContentZone.find('.combo-markdown-editor'));
 
     const $dropzone = $editContentZone.find('.dropzone');
-    const dz = setupDropzone($dropzone);
+    const dz = await setupDropzone($dropzone);
     $editContentZone.find('.cancel.button').on('click', (e) => {
       e.preventDefault();
       cancelAndReset(dz);