Merge branch 'main' into feat-32257-add-comments-unchanged-lines-and-show

web_src/css/base.css

@@ -1388,6 +1388,7 @@ table th[data-sortt-desc] .svg {
   align-items: stretch;
 }
 
+.ui.list.flex-items-block > .item,
 .flex-items-block > .item,
 .flex-text-block {
   display: flex;

web_src/css/repo.css

@@ -50,9 +50,20 @@
   width: 300px;
 }
 
+.issue-sidebar-combo .ui.dropdown .item:not(.checked) .item-check-mark {
+  visibility: hidden;
+}
+/* ideally, we should move these styles to ".ui.dropdown .menu.flex-items-menu > .item ...", could be done later */
+.issue-sidebar-combo .ui.dropdown .menu > .item > img,
+.issue-sidebar-combo .ui.dropdown .menu > .item > svg {
+  margin: 0;
+}
+
 .issue-content-right .dropdown > .menu {
   max-width: 270px;
   min-width: 0;
+  max-height: 500px;
+  overflow-x: auto;
 }
 
 @media (max-width: 767.98px) {
@@ -62,23 +73,6 @@
   }
 }
 
-.repository .issue-content-right .ui.list .dependency {
-  padding: 0;
-  white-space: nowrap;
-}
-
-.repository .issue-content-right .ui.list .title {
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.repository .issue-content-right #deadlineForm input {
-  width: 12.8rem;
-  border-radius: var(--border-radius) 0 0 var(--border-radius);
-  border-right: 0;
-  white-space: nowrap;
-}
-
 .repository .issue-content-right .filter.menu {
   max-height: 500px;
   overflow-x: auto;
@@ -118,10 +112,6 @@
   left: 0;
 }
 
-.repository .select-label .desc {
-  padding-left: 23px;
-}
-
 /* For the secondary pointing menu, respect its own border-bottom */
 /* style reference: https://semantic-ui.com/collections/menu.html#pointing */
 .repository .ui.tabs.container .ui.menu:not(.secondary.pointing) {
@@ -2463,12 +2453,6 @@ tbody.commit-list {
   margin-top: 1em;
 }
 
-.sidebar-item-link {
-  display: inline-flex;
-  align-items: center;
-  overflow-wrap: anywhere;
-}
-
 .diff-file-header {
   padding: 5px 8px !important;
   box-shadow: 0 -1px 0 1px var(--color-body); /* prevent borders being visible behind top corners when sticky and scrolled */

web_src/css/repo/issue-label.css

@@ -47,6 +47,7 @@
 }
 
 .archived-label-hint {
-  float: right;
-  margin: -12px;
+  position: absolute;
+  top: 10px;
+  right: 5px;
 }

web_src/js/features/common-page.ts

@@ -32,13 +32,13 @@ export function initGlobalDropdown() {
   const $uiDropdowns = fomanticQuery('.ui.dropdown');
 
   // do not init "custom" dropdowns, "custom" dropdowns are managed by their own code.
-  $uiDropdowns.filter(':not(.custom)').dropdown();
+  $uiDropdowns.filter(':not(.custom)').dropdown({hideDividers: 'empty'});
 
   // The "jump" means this dropdown is mainly used for "menu" purpose,
   // clicking an item will jump to somewhere else or trigger an action/function.
   // When a dropdown is used for non-refresh actions with tippy,
   // it must have this "jump" class to hide the tippy when dropdown is closed.
-  $uiDropdowns.filter('.jump').dropdown({
+  $uiDropdowns.filter('.jump').dropdown('setting', {
     action: 'hide',
     onShow() {
       // hide associated tooltip while dropdown is open

web_src/js/features/repo-issue-sidebar-combolist.ts

@@ -0,0 +1,159 @@
+import {fomanticQuery} from '../modules/fomantic/base.ts';
+import {POST} from '../modules/fetch.ts';
+import {queryElemChildren, queryElems, toggleElem} from '../utils/dom.ts';
+
+// if there are draft comments, confirm before reloading, to avoid losing comments
+function issueSidebarReloadConfirmDraftComment() {
+  const commentTextareas = [
+    document.querySelector<HTMLTextAreaElement>('.edit-content-zone:not(.tw-hidden) textarea'),
+    document.querySelector<HTMLTextAreaElement>('#comment-form textarea'),
+  ];
+  for (const textarea of commentTextareas) {
+    // Most users won't feel too sad if they lose a comment with 10 chars, they can re-type these in seconds.
+    // But if they have typed more (like 50) chars and the comment is lost, they will be very unhappy.
+    if (textarea && textarea.value.trim().length > 10) {
+      textarea.parentElement.scrollIntoView();
+      if (!window.confirm('Page will be reloaded, but there are draft comments. Continuing to reload will discard the comments. Continue?')) {
+        return;
+      }
+      break;
+    }
+  }
+  window.location.reload();
+}
+
+class IssueSidebarComboList {
+  updateUrl: string;
+  updateAlgo: string;
+  selectionMode: string;
+  elDropdown: HTMLElement;
+  elList: HTMLElement;
+  elComboValue: HTMLInputElement;
+  initialValues: string[];
+
+  constructor(private container: HTMLElement) {
+    this.updateUrl = this.container.getAttribute('data-update-url');
+    this.updateAlgo = container.getAttribute('data-update-algo');
+    this.selectionMode = container.getAttribute('data-selection-mode');
+    if (!['single', 'multiple'].includes(this.selectionMode)) throw new Error(`Invalid data-update-on: ${this.selectionMode}`);
+    if (!['diff', 'all'].includes(this.updateAlgo)) throw new Error(`Invalid data-update-algo: ${this.updateAlgo}`);
+    this.elDropdown = container.querySelector<HTMLElement>(':scope > .ui.dropdown');
+    this.elList = container.querySelector<HTMLElement>(':scope > .ui.list');
+    this.elComboValue = container.querySelector<HTMLInputElement>(':scope > .combo-value');
+  }
+
+  collectCheckedValues() {
+    return Array.from(this.elDropdown.querySelectorAll('.menu > .item.checked'), (el) => el.getAttribute('data-value'));
+  }
+
+  updateUiList(changedValues) {
+    const elEmptyTip = this.elList.querySelector('.item.empty-list');
+    queryElemChildren(this.elList, '.item:not(.empty-list)', (el) => el.remove());
+    for (const value of changedValues) {
+      const el = this.elDropdown.querySelector<HTMLElement>(`.menu > .item[data-value="${CSS.escape(value)}"]`);
+      if (!el) continue;
+      const listItem = el.cloneNode(true) as HTMLElement;
+      queryElems(listItem, '.item-check-mark, .item-secondary-info', (el) => el.remove());
+      this.elList.append(listItem);
+    }
+    const hasItems = Boolean(this.elList.querySelector('.item:not(.empty-list)'));
+    toggleElem(elEmptyTip, !hasItems);
+  }
+
+  async updateToBackend(changedValues) {
+    if (this.updateAlgo === 'diff') {
+      for (const value of this.initialValues) {
+        if (!changedValues.includes(value)) {
+          await POST(this.updateUrl, {data: new URLSearchParams({action: 'detach', id: value})});
+        }
+      }
+      for (const value of changedValues) {
+        if (!this.initialValues.includes(value)) {
+          await POST(this.updateUrl, {data: new URLSearchParams({action: 'attach', id: value})});
+        }
+      }
+    } else {
+      await POST(this.updateUrl, {data: new URLSearchParams({id: changedValues.join(',')})});
+    }
+    issueSidebarReloadConfirmDraftComment();
+  }
+
+  async doUpdate() {
+    const changedValues = this.collectCheckedValues();
+    if (this.initialValues.join(',') === changedValues.join(',')) return;
+    this.updateUiList(changedValues);
+    if (this.updateUrl) await this.updateToBackend(changedValues);
+    this.initialValues = changedValues;
+  }
+
+  async onChange() {
+    if (this.selectionMode === 'single') {
+      await this.doUpdate();
+      fomanticQuery(this.elDropdown).dropdown('hide');
+    }
+  }
+
+  async onItemClick(e) {
+    const elItem = (e.target as HTMLElement).closest('.item');
+    if (!elItem) return;
+    e.preventDefault();
+    if (elItem.hasAttribute('data-can-change') && elItem.getAttribute('data-can-change') !== 'true') return;
+
+    if (elItem.matches('.clear-selection')) {
+      queryElems(this.elDropdown, '.menu > .item', (el) => el.classList.remove('checked'));
+      this.elComboValue.value = '';
+      this.onChange();
+      return;
+    }
+
+    const scope = elItem.getAttribute('data-scope');
+    if (scope) {
+      // scoped items could only be checked one at a time
+      const elSelected = this.elDropdown.querySelector<HTMLElement>(`.menu > .item.checked[data-scope="${CSS.escape(scope)}"]`);
+      if (elSelected === elItem) {
+        elItem.classList.toggle('checked');
+      } else {
+        queryElems(this.elDropdown, `.menu > .item[data-scope="${CSS.escape(scope)}"]`, (el) => el.classList.remove('checked'));
+        elItem.classList.toggle('checked', true);
+      }
+    } else {
+      if (this.selectionMode === 'multiple') {
+        elItem.classList.toggle('checked');
+      } else {
+        queryElems(this.elDropdown, `.menu > .item.checked`, (el) => el.classList.remove('checked'));
+        elItem.classList.toggle('checked', true);
+      }
+    }
+    this.elComboValue.value = this.collectCheckedValues().join(',');
+    this.onChange();
+  }
+
+  async onHide() {
+    if (this.selectionMode === 'multiple') this.doUpdate();
+  }
+
+  init() {
+    // init the checked items from initial value
+    if (this.elComboValue.value && this.elComboValue.value !== '0' && !queryElems(this.elDropdown, `.menu > .item.checked`).length) {
+      const values = this.elComboValue.value.split(',');
+      for (const value of values) {
+        const elItem = this.elDropdown.querySelector<HTMLElement>(`.menu > .item[data-value="${CSS.escape(value)}"]`);
+        elItem?.classList.add('checked');
+      }
+      this.updateUiList(values);
+    }
+    this.initialValues = this.collectCheckedValues();
+
+    this.elDropdown.addEventListener('click', (e) => this.onItemClick(e));
+
+    fomanticQuery(this.elDropdown).dropdown('setting', {
+      action: 'nothing', // do not hide the menu if user presses Enter
+      fullTextSearch: 'exact',
+      onHide: () => this.onHide(),
+    });
+  }
+}
+
+export function initIssueSidebarComboList(container: HTMLElement) {
+  new IssueSidebarComboList(container).init();
+}

web_src/js/features/repo-issue-sidebar.md

@@ -0,0 +1,31 @@
+A sidebar combo (dropdown+list) is like this:
+
+```html
+<div class="issue-sidebar-combo" data-selection-mode="..." data-update-url="...">
+  <input class="combo-value" name="..." type="hidden" value="...">
+  <div class="ui dropdown">
+    <div class="menu">
+      <div class="item clear-selection">clear</div>
+      <div class="item" data-value="..." data-scope="...">
+        <span class="item-check-mark">...</span>
+        ...
+      </div>
+    </div>
+  </div>
+  <div class="ui list">
+    <span class="item empty-list">no item</span>
+    <span class="item">...</span>
+  </div>
+</div>
+```
+
+When the selected items change, the `combo-value` input will be updated.
+If there is `data-update-url`, it also calls backend to attach/detach the changed items.
+
+Also, the changed items will be syncronized to the `ui list` items.
+
+The items with the same data-scope only allow one selected at a time.
+
+The dropdown selection could work in 2 modes:
+* single: only one item could be selected, it updates immediately when the item is selected.
+* multiple: multiple items could be selected, it defers the update until the dropdown is hidden.

web_src/js/features/repo-issue-sidebar.ts

@@ -1,29 +1,7 @@
 import $ from 'jquery';
 import {POST} from '../modules/fetch.ts';
-import {updateIssuesMeta} from './repo-common.ts';
-import {svg} from '../svg.ts';
-import {htmlEscape} from 'escape-goat';
-import {toggleElem} from '../utils/dom.ts';
-
-// if there are draft comments, confirm before reloading, to avoid losing comments
-function reloadConfirmDraftComment() {
-  const commentTextareas = [
-    document.querySelector('.edit-content-zone:not(.tw-hidden) textarea'),
-    document.querySelector('#comment-form textarea'),
-  ];
-  for (const textarea of commentTextareas) {
-    // Most users won't feel too sad if they lose a comment with 10 chars, they can re-type these in seconds.
-    // But if they have typed more (like 50) chars and the comment is lost, they will be very unhappy.
-    if (textarea && textarea.value.trim().length > 10) {
-      textarea.parentElement.scrollIntoView();
-      if (!window.confirm('Page will be reloaded, but there are draft comments. Continuing to reload will discard the comments. Continue?')) {
-        return;
-      }
-      break;
-    }
-  }
-  window.location.reload();
-}
+import {queryElems, toggleElem} from '../utils/dom.ts';
+import {initIssueSidebarComboList} from './repo-issue-sidebar-combolist.ts';
 
 function initBranchSelector() {
   const elSelectBranch = document.querySelector('.ui.dropdown.select-branch');
@@ -47,218 +25,12 @@ function initBranchSelector() {
     } else {
       // for new issue, only update UI&form, do not send request/reload
       const selectedHiddenSelector = this.getAttribute('data-id-selector');
-      document.querySelector(selectedHiddenSelector).value = selectedValue;
+      document.querySelector<HTMLInputElement>(selectedHiddenSelector).value = selectedValue;
       elSelectBranch.querySelector('.text-branch-name').textContent = selectedText;
     }
   });
 }
 
-// List submits
-function initListSubmits(selector, outerSelector) {
-  const $list = $(`.ui.${outerSelector}.list`);
-  const $noSelect = $list.find('.no-select');
-  const $listMenu = $(`.${selector} .menu`);
-  let hasUpdateAction = $listMenu.data('action') === 'update';
-  const items = {};
-
-  $(`.${selector}`).dropdown({
-    'action': 'nothing', // do not hide the menu if user presses Enter
-    fullTextSearch: 'exact',
-    async onHide() {
-      hasUpdateAction = $listMenu.data('action') === 'update'; // Update the var
-      if (hasUpdateAction) {
-        // TODO: Add batch functionality and make this 1 network request.
-        const itemEntries = Object.entries(items);
-        for (const [elementId, item] of itemEntries) {
-          await updateIssuesMeta(
-            item['update-url'],
-            item.action,
-            item['issue-id'],
-            elementId,
-          );
-        }
-        if (itemEntries.length) {
-          reloadConfirmDraftComment();
-        }
-      }
-    },
-  });
-
-  $listMenu.find('.item:not(.no-select)').on('click', function (e) {
-    e.preventDefault();
-    if (this.classList.contains('ban-change')) {
-      return false;
-    }
-
-    hasUpdateAction = $listMenu.data('action') === 'update'; // Update the var
-
-    const clickedItem = this; // eslint-disable-line unicorn/no-this-assignment
-    const scope = this.getAttribute('data-scope');
-
-    $(this).parent().find('.item').each(function () {
-      if (scope) {
-        // Enable only clicked item for scoped labels
-        if (this.getAttribute('data-scope') !== scope) {
-          return true;
-        }
-        if (this !== clickedItem && !this.classList.contains('checked')) {
-          return true;
-        }
-      } else if (this !== clickedItem) {
-        // Toggle for other labels
-        return true;
-      }
-
-      if (this.classList.contains('checked')) {
-        $(this).removeClass('checked');
-        $(this).find('.octicon-check').addClass('tw-invisible');
-        if (hasUpdateAction) {
-          if (!($(this).data('id') in items)) {
-            items[$(this).data('id')] = {
-              'update-url': $listMenu.data('update-url'),
-              action: 'detach',
-              'issue-id': $listMenu.data('issue-id'),
-            };
-          } else {
-            delete items[$(this).data('id')];
-          }
-        }
-      } else {
-        $(this).addClass('checked');
-        $(this).find('.octicon-check').removeClass('tw-invisible');
-        if (hasUpdateAction) {
-          if (!($(this).data('id') in items)) {
-            items[$(this).data('id')] = {
-              'update-url': $listMenu.data('update-url'),
-              action: 'attach',
-              'issue-id': $listMenu.data('issue-id'),
-            };
-          } else {
-            delete items[$(this).data('id')];
-          }
-        }
-      }
-    });
-
-    // TODO: Which thing should be done for choosing review requests
-    // to make chosen items be shown on time here?
-    if (selector === 'select-reviewers-modify' || selector === 'select-assignees-modify') {
-      return false;
-    }
-
-    const listIds = [];
-    $(this).parent().find('.item').each(function () {
-      if (this.classList.contains('checked')) {
-        listIds.push($(this).data('id'));
-        $($(this).data('id-selector')).removeClass('tw-hidden');
-      } else {
-        $($(this).data('id-selector')).addClass('tw-hidden');
-      }
-    });
-    if (!listIds.length) {
-      $noSelect.removeClass('tw-hidden');
-    } else {
-      $noSelect.addClass('tw-hidden');
-    }
-    $($(this).parent().data('id')).val(listIds.join(','));
-    return false;
-  });
-  $listMenu.find('.no-select.item').on('click', function (e) {
-    e.preventDefault();
-    if (hasUpdateAction) {
-      (async () => {
-        await updateIssuesMeta(
-          $listMenu.data('update-url'),
-          'clear',
-          $listMenu.data('issue-id'),
-          '',
-        );
-        reloadConfirmDraftComment();
-      })();
-    }
-
-    $(this).parent().find('.item').each(function () {
-      $(this).removeClass('checked');
-      $(this).find('.octicon-check').addClass('tw-invisible');
-    });
-
-    if (selector === 'select-reviewers-modify' || selector === 'select-assignees-modify') {
-      return false;
-    }
-
-    $list.find('.item').each(function () {
-      $(this).addClass('tw-hidden');
-    });
-    $noSelect.removeClass('tw-hidden');
-    $($(this).parent().data('id')).val('');
-  });
-}
-
-function selectItem(select_id, input_id) {
-  const $menu = $(`${select_id} .menu`);
-  const $list = $(`.ui${select_id}.list`);
-  const hasUpdateAction = $menu.data('action') === 'update';
-
-  $menu.find('.item:not(.no-select)').on('click', function () {
-    $(this).parent().find('.item').each(function () {
-      $(this).removeClass('selected active');
-    });
-
-    $(this).addClass('selected active');
-    if (hasUpdateAction) {
-      (async () => {
-        await updateIssuesMeta(
-          $menu.data('update-url'),
-          '',
-          $menu.data('issue-id'),
-          $(this).data('id'),
-        );
-        reloadConfirmDraftComment();
-      })();
-    }
-
-    let icon = '';
-    if (input_id === '#milestone_id') {
-      icon = svg('octicon-milestone', 18, 'tw-mr-2');
-    } else if (input_id === '#project_id') {
-      icon = svg('octicon-project', 18, 'tw-mr-2');
-    } else if (input_id === '#assignee_id') {
-      icon = `<img class="ui avatar image tw-mr-2" alt="avatar" src=${$(this).data('avatar')}>`;
-    }
-
-    $list.find('.selected').html(`
-        <a class="item muted sidebar-item-link" href="${htmlEscape(this.getAttribute('data-href'))}">
-          ${icon}
-          ${htmlEscape(this.textContent)}
-        </a>
-      `);
-
-    $(`.ui${select_id}.list .no-select`).addClass('tw-hidden');
-    $(input_id).val($(this).data('id'));
-  });
-  $menu.find('.no-select.item').on('click', function () {
-    $(this).parent().find('.item:not(.no-select)').each(function () {
-      $(this).removeClass('selected active');
-    });
-
-    if (hasUpdateAction) {
-      (async () => {
-        await updateIssuesMeta(
-          $menu.data('update-url'),
-          '',
-          $menu.data('issue-id'),
-          $(this).data('id'),
-        );
-        reloadConfirmDraftComment();
-      })();
-    }
-
-    $list.find('.selected').html('');
-    $list.find('.no-select').removeClass('tw-hidden');
-    $(input_id).val('');
-  });
-}
-
 function initRepoIssueDue() {
   const form = document.querySelector<HTMLFormElement>('.issue-due-form');
   if (!form) return;
@@ -276,14 +48,6 @@ export function initRepoIssueSidebar() {
   initBranchSelector();
   initRepoIssueDue();
 
-  // Init labels and assignees
-  initListSubmits('select-label', 'labels');
-  initListSubmits('select-assignees', 'assignees');
-  initListSubmits('select-assignees-modify', 'assignees');
-  initListSubmits('select-reviewers-modify', 'assignees');
-
-  // Milestone, Assignee, Project
-  selectItem('.select-project', '#project_id');
-  selectItem('.select-milestone', '#milestone_id');
-  selectItem('.select-assignee', '#assignee_id');
+  // init the combo list: a dropdown for selecting items, and a list for showing selected items and related actions
+  queryElems<HTMLElement>(document, '.issue-sidebar-combo', (el) => initIssueSidebarComboList(el));
 }

web_src/js/features/repo-issue.ts

@@ -8,7 +8,6 @@ import {parseIssuePageInfo, toAbsoluteUrl} from '../utils.ts';
 import {GET, POST} from '../modules/fetch.ts';
 import {showErrorToast} from '../modules/toast.ts';
 import {initRepoIssueSidebar} from './repo-issue-sidebar.ts';
-import {updateIssuesMeta} from './repo-common.ts';
 
 const {appSubUrl} = window.config;
 
@@ -99,6 +98,7 @@ export function initRepoIssueSidebarList() {
     });
   });
 
+  // FIXME: it is wrong place to init ".ui.dropdown.label-filter"
   $('.menu .ui.dropdown.label-filter').on('keydown', (e) => {
     if (e.altKey && e.key === 'Enter') {
       const selectedItem = document.querySelector('.menu .ui.dropdown.label-filter .menu .item.selected');
@@ -107,7 +107,6 @@ export function initRepoIssueSidebarList() {
       }
     }
   });
-  $('.ui.dropdown.label-filter, .ui.dropdown.select-label').dropdown('setting', {'hideDividers': 'empty'}).dropdown('refreshItems');
 }
 
 export function initRepoIssueCommentDelete() {
@@ -326,17 +325,6 @@ export function initRepoIssueWipTitle() {
 export function initRepoIssueComments() {
   if (!$('.repository.view.issue .timeline').length) return;
 
-  $('.re-request-review').on('click', async function (e) {
-    e.preventDefault();
-    const url = this.getAttribute('data-update-url');
-    const issueId = this.getAttribute('data-issue-id');
-    const id = this.getAttribute('data-id');
-    const isChecked = this.classList.contains('checked');
-
-    await updateIssuesMeta(url, isChecked ? 'detach' : 'attach', issueId, id);
-    window.location.reload();
-  });
-
   document.addEventListener('click', (e) => {
     const urlTarget = document.querySelector(':target');
     if (!urlTarget) return;
@@ -664,19 +652,6 @@ function initIssueTemplateCommentEditors($commentForm) {
   }
 }
 
-// This function used to show and hide archived label on issue/pr
-//  page in the sidebar where we select the labels
-//  If we have any archived label tagged to issue and pr. We will show that
-//  archived label with checked classed otherwise we will hide it
-//  with the help of this function.
-//  This function runs globally.
-export function initArchivedLabelHandler() {
-  if (!document.querySelector('.archived-label-hint')) return;
-  for (const label of document.querySelectorAll('[data-is-archived]')) {
-    toggleElem(label, label.classList.contains('checked'));
-  }
-}
-
 export function initRepoCommentFormAndSidebar() {
   const $commentForm = $('.comment.form');
   if (!$commentForm.length) return;

web_src/js/index.ts

@@ -30,7 +30,7 @@ import {
   initRepoIssueWipTitle,
   initRepoPullRequestMergeInstruction,
   initRepoPullRequestAllowMaintainerEdit,
-  initRepoPullRequestReview, initRepoIssueSidebarList, initArchivedLabelHandler,
+  initRepoPullRequestReview, initRepoIssueSidebarList,
 } from './features/repo-issue.ts';
 import {initRepoEllipsisButton, initCommitStatuses} from './features/repo-commit.ts';
 import {initRepoTopicBar} from './features/repo-home.ts';
@@ -182,7 +182,6 @@ onDomReady(() => {
     initRepoIssueContentHistory,
     initRepoIssueList,
     initRepoIssueSidebarList,
-    initArchivedLabelHandler,
     initRepoIssueReferenceRepositorySearch,
     initRepoIssueTimeTracking,
     initRepoIssueWipTitle,

web_src/js/markup/mermaid.ts

@@ -57,10 +57,21 @@ export async function renderMermaid() {
       btn.setAttribute('data-clipboard-text', source);
       mermaidBlock.append(btn);
 
+      const updateIframeHeight = () => {
+        iframe.style.height = `${iframe.contentWindow.document.body.clientHeight}px`;
+      };
+
+      // update height when element's visibility state changes, for example when the diagram is inside
+      // a <details> + <summary> block and the <details> block becomes visible upon user interaction, it
+      // would initially set a incorrect height and the correct height is set during this callback.
+      (new IntersectionObserver(() => {
+        updateIframeHeight();
+      }, {root: document.documentElement})).observe(iframe);
+
       iframe.addEventListener('load', () => {
         pre.replaceWith(mermaidBlock);
         mermaidBlock.classList.remove('tw-hidden');
-        iframe.style.height = `${iframe.contentWindow.document.body.clientHeight}px`;
+        updateIframeHeight();
         setTimeout(() => { // avoid flash of iframe background
           mermaidBlock.classList.remove('is-loading');
           iframe.classList.remove('tw-invisible');

web_src/js/utils/dom.ts

@@ -3,7 +3,7 @@ import type {Promisable} from 'type-fest';
 import type $ from 'jquery';
 
 type ElementArg = Element | string | NodeListOf<Element> | Array<Element> | ReturnType<typeof $>;
-type ElementsCallback = (el: Element) => Promisable<any>;
+type ElementsCallback<T extends Element> = (el: T) => Promisable<any>;
 type ElementsCallbackWithArgs = (el: Element, ...args: any[]) => Promisable<any>;
 type ArrayLikeIterable<T> = ArrayLike<T> & Iterable<T>; // for NodeListOf and Array
 
@@ -58,7 +58,7 @@ export function isElemHidden(el: ElementArg) {
   return res[0];
 }
 
-function applyElemsCallback<T extends Element>(elems: ArrayLikeIterable<T>, fn?: ElementsCallback): ArrayLikeIterable<T> {
+function applyElemsCallback<T extends Element>(elems: ArrayLikeIterable<T>, fn?: ElementsCallback<T>): ArrayLikeIterable<T> {
   if (fn) {
     for (const el of elems) {
       fn(el);
@@ -67,7 +67,7 @@ function applyElemsCallback<T extends Element>(elems: ArrayLikeIterable<T>, fn?:
   return elems;
 }
 
-export function queryElemSiblings<T extends Element>(el: Element, selector = '*', fn?: ElementsCallback): ArrayLikeIterable<T> {
+export function queryElemSiblings<T extends Element>(el: Element, selector = '*', fn?: ElementsCallback<T>): ArrayLikeIterable<T> {
   const elems = Array.from(el.parentNode.children) as T[];
   return applyElemsCallback<T>(elems.filter((child: Element) => {
     return child !== el && child.matches(selector);
@@ -75,13 +75,13 @@ export function queryElemSiblings<T extends Element>(el: Element, selector = '*'
 }
 
 // it works like jQuery.children: only the direct children are selected
-export function queryElemChildren<T extends Element>(parent: Element | ParentNode, selector = '*', fn?: ElementsCallback): ArrayLikeIterable<T> {
+export function queryElemChildren<T extends Element>(parent: Element | ParentNode, selector = '*', fn?: ElementsCallback<T>): ArrayLikeIterable<T> {
   return applyElemsCallback<T>(parent.querySelectorAll(`:scope > ${selector}`), fn);
 }
 
 // it works like parent.querySelectorAll: all descendants are selected
 // in the future, all "queryElems(document, ...)" should be refactored to use a more specific parent
-export function queryElems<T extends Element>(parent: Element | ParentNode, selector: string, fn?: ElementsCallback): ArrayLikeIterable<T> {
+export function queryElems<T extends Element>(parent: Element | ParentNode, selector: string, fn?: ElementsCallback<T>): ArrayLikeIterable<T> {
   return applyElemsCallback<T>(parent.querySelectorAll(selector), fn);
 }