Merge branch 'master' of https://github.com/mermaid-js/mermaid into rajat-ht/feat-add-editor-popup-modal

.github/lychee.toml

@@ -50,7 +50,8 @@ exclude = [
 "https://docs.swimm.io",
 
 # Timeout
-"https://huehive.co"
+"https://huehive.co",
+"https://foswiki.org"
 ]
 
 # Exclude all private IPs from checking.

packages/mermaid/src/docs/.vitepress/components/TopBar.vue

@@ -19,15 +19,15 @@ const taglines: Taglines[] = [
 
 const randomTagLines: Taglines[] = [
   {
-    label: 'Customize your layout and design in Mermaid Chart’s whiteboard!',
+    label: "Customize your layout and design in Mermaid Chart's whiteboard!",
     url: 'https://www.mermaidchart.com/whiteboard?utm_source=mermaid_js&utm_medium=banner_ad&utm_campaign=whiteboard',
   },
   {
-    label: 'Customize your layout and design in Mermaid Chart’s visual editor!',
+    label: "Customize your layout and design in Mermaid Chart's visual editor!",
     url: 'https://www.mermaidchart.com/whiteboard?utm_source=mermaid_js&utm_medium=banner_ad&utm_campaign=visual_editor',
   },
   {
-    label: 'Customize your layout and design with Mermaid Chart’s GUI!',
+    label: "Customize your layout and design with Mermaid Chart's GUI!",
     url: 'https://www.mermaidchart.com/whiteboard?utm_source=mermaid_js&utm_medium=banner_ad&utm_campaign=gui',
   },
   {
@@ -38,26 +38,34 @@ const randomTagLines: Taglines[] = [
 
 const index: Ref<number> = ref(0);
 const currentBannerSet: Ref<Taglines[]> = ref(taglines);
+const isPaused: Ref<boolean> = ref(false);
 
 onMounted(() => {
   const newIndex = Math.floor(Math.random() * randomTagLines.length);
   currentBannerSet.value = [...taglines, randomTagLines[newIndex]];
   index.value = Math.floor(Math.random() * currentBannerSet.value.length);
   setInterval(() => {
+    if (isPaused.value) {
+      return;
+    }
     index.value = (index.value + 1) % currentBannerSet.value.length;
   }, 5_000);
 });
 </script>
 
 <template>
-  <div class="mb-4 w-full top-bar flex p-2 bg-[#E0095F]">
+  <div
+    class="mb-4 w-full top-bar flex p-2 bg-[#E0095F]"
+    @mouseenter="isPaused = true"
+    @mouseleave="isPaused = false"
+  >
     <p class="w-full tracking-wide fade-text text-sm">
       <transition name="fade" mode="out-in">
         <a
           :key="index"
           :href="currentBannerSet[index].url"
           target="_blank"
-          class="unstyled flex justify-center items-center gap-4 text-white tracking-wide plausible-event-name=bannerClick"
+          class="unstyled flex justify-center items-center gap-4 text-white no-tooltip tracking-wide plausible-event-name=bannerClick"
         >
           <span class="font-semibold">{{ currentBannerSet[index].label }}</span>
           <button class="bg-[#1E1A2E] shrink-0 rounded-lg p-1.5 px-4 font-semibold tracking-wide">

packages/mermaid/src/docs/.vitepress/theme/Tooltip.vue

@@ -1,8 +1,7 @@
 <template>
   <div
-    v-if="isVisible"
     class="mermaid-chart-tooltip"
-    :class="{ visible: isVisible }"
+    :class="{ showing: isVisible, hiding: !isVisible }"
     :style="tooltipStyle"
   >
     <span class="mdi mdi-open-in-new"></span>
@@ -11,7 +10,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted } from 'vue';
+import { onMounted, onUnmounted, ref } from 'vue';
 
 const isVisible = ref(false);
 const currentTarget = ref<HTMLElement | null>(null);
@@ -22,7 +21,7 @@ const showTooltip = (target: HTMLElement) => {
   const rect = target.getBoundingClientRect();
   tooltipStyle.value = {
     left: `${rect.left + rect.width / 2}px`,
-    top: `${rect.top}px`,
+    top: `${rect.bottom}px`,
   };
   isVisible.value = true;
 };
@@ -35,8 +34,10 @@ const hideTooltip = () => {
 const handleMouseOver = (e: MouseEvent) => {
   const target = e.target as HTMLElement;
   if (
-    target.matches('a[href*="mermaidchart.com"]') ||
+    (target.matches('a[href*="mermaidchart.com"]') ||
-    target.matches('button[onclick*="mermaidchart.com"]')
+      target.matches('button[onclick*="mermaidchart.com"]')) &&
+    !target.matches('.no-tooltip') &&
+    !target.matches('.VPSocialLink')
   ) {
     showTooltip(target);
   }
@@ -64,25 +65,49 @@ onUnmounted(() => {
   position: fixed;
   background: black;
   color: white;
-  padding: 0.3rem 0.6rem;
+  padding: 0.25rem 0.5rem;
   border-radius: 0.5rem;
-  font-size: 1rem;
+  font-size: 0.75rem;
+  font-weight: 400;
   pointer-events: none;
   z-index: 1000;
   text-align: center;
   opacity: 0;
-  transition:
+  pointer-events: none;
-    opacity 0.3s ease,
+  transform: translateX(-50%);
-    transform 0.3s ease;
-  transform: translate(-50%, -90%);
   margin-top: -0.5rem;
   display: flex;
   align-items: center;
   gap: 0.375rem;
 }
 
-.mermaid-chart-tooltip.visible {
+.mermaid-chart-tooltip.showing {
-  opacity: 1;
+  animation: tooltipFadeIn 0.3s ease 0.4s forwards;
-  transform: translate(-50%, -100%);
+}
+
+.mermaid-chart-tooltip.hiding {
+  animation: tooltipFadeOut 0.3s ease forwards;
+}
+
+@keyframes tooltipFadeIn {
+  from {
+    opacity: 0;
+    transform: translate(-50%, 5px);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, 10px);
+  }
+}
+
+@keyframes tooltipFadeOut {
+  from {
+    opacity: 1;
+    transform: translate(-50%, 10px);
+  }
+  to {
+    opacity: 0;
+    transform: translate(-50%, 5px);
+  }
 }
 </style>