Repository: go-gitea/gitea
File: web_src/js/markup/mermaid.ts (TypeScript)

Code before:
      continue;
    }

    try {
      // can't use bindFunctions here because we can't cross the iframe boundary. This
      // means js-based interactions won't work but they aren't intended to work either
      const {svg} = await mermaid.render('mermaid', source);

      const iframe = document.createElement('iframe');
      iframe.classList.add('markup-render', 'tw-invisible');
      iframe.srcdoc = `<html><head><style>${iframeCss}</style></head><body>${svg}</body></html>`;

      const mermaidBlock = document.createElement('div');
      mermaidBlock.classList.add('mermaid-block', 'is-loading', 'tw-hidden');
      mermaidBlock.append(iframe);

      const btn = makeCodeCopyButton();
      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
      (new IntersectionObserver(() => {
        updateIframeHeight();
      }, {root: document.documentElement})).observe(iframe);

      iframe.addEventListener('load', () => {
        pre.replaceWith(mermaidBlock);
        mermaidBlock.classList.remove('tw-hidden');
        updateIframeHeight();
        setTimeout(() => { // avoid flash of iframe background
          mermaidBlock.classList.remove('is-loading');
          iframe.classList.remove('tw-invisible');
        }, 0);
      });

      document.body.append(mermaidBlock);
    } catch (err) {
      displayError(pre, err);
    }
  }
}


Review comment (bug):
```suggestion
      // 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.
```

Code after:
      continue;
    }

    try {
      // can't use bindFunctions here because we can't cross the iframe boundary. This
      // means js-based interactions won't work but they aren't intended to work either
      const {svg} = await mermaid.render('mermaid', source);

      const iframe = document.createElement('iframe');
      iframe.classList.add('markup-render', 'tw-invisible');
      iframe.srcdoc = `<html><head><style>${iframeCss}</style></head><body>${svg}</body></html>`;

      const mermaidBlock = document.createElement('div');
      mermaidBlock.classList.add('mermaid-block', 'is-loading', 'tw-hidden');
      mermaidBlock.append(iframe);

      const btn = makeCodeCopyButton();
      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');
        updateIframeHeight();
        setTimeout(() => { // avoid flash of iframe background
          mermaidBlock.classList.remove('is-loading');
          iframe.classList.remove('tw-invisible');
        }, 0);
      });

      document.body.append(mermaidBlock);
    } catch (err) {
      displayError(pre, err);
    }
  }
}