portosaurus 3.0.2 → 4.0.0

package/src/theme/components/Preview/components/PreviewHeader.js

@@ -1,4 +1,4 @@
-import React, { useState, useRef } from "react";
+import { useState, useRef } from "react";
 import Tooltip from "../../Tooltip";
 import styles from "../styles.module.css";
 
@@ -9,19 +9,20 @@ import IconLink from "@porto/assets/img/svg/icon-link.svg";
 import IconClose from "@porto/assets/img/svg/icon-close.svg";
 
 /**
- * Preview window header with title, zoom controls, dock/popup toggle, and close button.
+ * Preview window header with title, zoom controls, mode toggle, and close button.
  */
 export default function PreviewHeader({
   displayTitle,
   fileType,
   fileUrl,
-  isDocked,
+  mode,
   zoomLevel,
   onZoomChange,
-  onToggleDock,
+  onToggleMode,
   onClose,
   onDownload,
   isDownloading,
+  modeSwitch = true,
   showDockLabel = true,
 }) {
   const [showZoomMenu, setShowZoomMenu] = useState(false);
@@ -31,21 +32,32 @@ export default function PreviewHeader({
   const isMobileSize =
     typeof window !== "undefined" && window.innerWidth <= 768;
 
+  // The Multitasking Toggle logic (Labels and Tooltips)
+  // The Multitasking Toggle logic (Labels and Tooltips)
+  const toggleLabel =
+    mode === "popup" ? "Dock" : mode === "dock" ? "PiP" : "Dock";
+  const toggleTooltip =
+    mode === "popup"
+      ? "Dock to side"
+      : mode === "dock"
+        ? "Open as PiP"
+        : "Dock to side";
+
   return (
     <>
       {/* Dock-mode "PREVIEW" label pinned behind navbar */}
-      {isDocked && !isMobileSize && (
+      {mode === "dock" && !isMobileSize && (
         <div className={styles.revealHeader}>
-          <h1 className={styles.modalTitle}>
+          <h1 className={styles.popupTitle}>
             <span className={styles.primaryText}>Preview </span>
           </h1>
         </div>
       )}
 
-      <div className={styles.modalHeader}>
+      <div className={styles.popupHeader}>
         {/* Left: file title */}
         <div className={styles.headerLeft}>
-          <h4 className={styles.modalTitle}>
+          <h4 className={styles.popupTitle}>
             <span className={styles.baseTitleText}>{displayTitle}</span>
           </h4>
         </div>
@@ -53,7 +65,7 @@ export default function PreviewHeader({
         {/* Right: controls */}
         <div className={styles.headerControls}>
           {/* Zoom dropdown (desktop only) */}
-          {!isMobileSize && (
+          {!isMobileSize && fileType !== "web" && (
             <div
               className={styles.zoomDropdown}
               ref={zoomMenuRef}
@@ -135,30 +147,26 @@ export default function PreviewHeader({
             </Tooltip>
           )}
 
-          {/* Dock / Popup toggle */}
-          <Tooltip
-            msg={isDocked ? "Open as popup" : "Dock to side"}
-            position="bottom"
-            underline={false}
-          >
-            <button
-              onClick={onToggleDock}
-              className={`${styles.headerAction} ${styles.dockToggle}`}
-            >
-              {isDocked ? (
-                <IconPopup
-                  className={`${styles.headerIcon} ${styles.iconPopupTweak}`}
-                />
-              ) : (
-                <IconDock className={styles.headerIcon} />
-              )}
-              {showDockLabel && (
-                <span className={styles.btnText}>
-                  {isDocked ? "Popup" : "Dock"}
-                </span>
-              )}
-            </button>
-          </Tooltip>
+          {/* Dock / PiP / Popup toggle */}
+          {modeSwitch && (
+            <Tooltip msg={toggleTooltip} position="bottom" underline={false}>
+              <button
+                onClick={onToggleMode}
+                className={`${styles.headerAction} ${styles.dockToggle}`}
+              >
+                {mode === "popup" || mode === "pip" ? (
+                  <IconDock className={styles.headerIcon} />
+                ) : (
+                  <IconPopup
+                    className={`${styles.headerIcon} ${styles.iconPopupTweak}`}
+                  />
+                )}
+                {showDockLabel && (
+                  <span className={styles.btnText}>{toggleLabel}</span>
+                )}
+              </button>
+            </Tooltip>
+          )}
 
           {/* Close */}
           <Tooltip msg="Close" position="bottom" underline={false}>

package/src/theme/components/Preview/components/Triggers/Pv.js

@@ -2,18 +2,24 @@ import React, { useEffect, useMemo } from "react";
 import { useLocation } from "@docusaurus/router";
 import { usePreview } from "../../state";
 import Tooltip from "../../../Tooltip";
-import { generatePvSlug, generatePvHash, parsePvHash } from "../../utils";
+import {
+  generatePvSlug,
+  generatePvHash,
+  parsePvHash,
+  classify,
+} from "../../utils";
 import styles from "../../styles.module.css";
 
-// Helper to normalize boolean props (handles "true", "false", and shorthand)
-export function isTrue(val) {
-  if (typeof val === "boolean") return val;
-  if (typeof val === "string") return val.toLowerCase() === "true";
-  return !!val;
-}
-
 // Normalize props into a sources array
-export function normalizeSources({ href, path, sources, children, desc }) {
+export function normalizeSources({
+  href,
+  path,
+  sources,
+  children,
+  desc,
+  title,
+  id,
+}) {
   const rawSources =
     sources && sources.length > 0
       ? sources
@@ -36,18 +42,12 @@ export function normalizeSources({ href, path, sources, children, desc }) {
     // Smart fallback for filename
     let urlLabel = "";
     let domain = "";
-    let type = "Web";
+    let type = "text";
 
     if (sPath) {
+      type = classify(sPath);
       const cleanPath = sPath.split(/[?#]/)[0].toLowerCase();
-      if (cleanPath.endsWith(".pdf")) type = "PDF";
-      else if (cleanPath.match(/\.(png|jpe?g|gif|svg|webp)$/)) type = "Image";
-      else if (
-        sPath.includes("youtube.com") ||
-        sPath.includes("youtu.be") ||
-        sPath.includes("vimeo.com")
-      )
-        type = "Video";
+      urlLabel = cleanPath.split("/").filter(Boolean).pop();
 
       try {
         if (sPath.startsWith("http") || sPath.startsWith("//")) {
@@ -57,16 +57,12 @@ export function normalizeSources({ href, path, sources, children, desc }) {
           domain = url.hostname.replace("www.", "");
         }
       } catch (e) {}
-      urlLabel = cleanPath.split("/").filter(Boolean).pop();
     }
 
     const source = domain || urlLabel || "Local";
     const displayLabel = label || source;
 
-    let tooltip = sDesc;
-    if (!tooltip) {
-      tooltip = `${type}: ${source}`;
-    }
+    const tooltip = sDesc || null;
 
     return {
       path: sPath,
@@ -75,13 +71,14 @@ export function normalizeSources({ href, path, sources, children, desc }) {
       type,
       source,
       tooltip,
-      id: src.id,
+      id: src.id || id,
+      title: src.title || title,
     };
   });
 }
 
 /**
- * --- Inline trigger: <Pv href="..." id="...">link text</Pv> ---
+ * --- Inline trigger: <Pv href="..." mode="...">link text</Pv> ---
  */
 export default function Pv(props) {
   const {
@@ -89,52 +86,94 @@ export default function Pv(props) {
     id: manualId,
     activeIdx = 0,
     sources: overrideSources,
+    title,
+    mode = "popup", // Default mode
+    modeSwitch = true,
+    underline = true,
   } = props;
-  const initialDocked = isTrue(props.docked);
+
+  // Strict validation: Must have exactly one of href/path OR sources
+  const hasSingleSource = !!(props.href || props.path);
+  const hasMultiSource = !!(overrideSources && overrideSources.length > 0);
+
+  if (!hasSingleSource && !hasMultiSource) {
+    console.error(
+      "<Pv> component requires either 'href', 'path', or 'sources' prop.",
+    );
+    return <span style={{ color: "red" }}>[Preview Error: Missing href]</span>;
+  }
+
+  if (hasSingleSource && hasMultiSource) {
+    console.error(
+      "<Pv> component cannot accept both 'href' and 'sources'. Choose one.",
+    );
+    return <span style={{ color: "red" }}>[Preview Error: Conflict]</span>;
+  }
+
   const {
     isOpen,
-    isDocked,
+    mode: currentMode,
     sources: activeSources,
     activeIndex,
     openPreview,
     closePreview,
-    setDocked,
+    setMode,
   } = usePreview();
   const location = useLocation();
 
   const srcList = useMemo(
     () => overrideSources || normalizeSources(props),
-    [props, overrideSources],
+    [props, overrideSources, title],
   );
 
-  // Unified Slug & Hash Generation
-  const slug = useMemo(() => {
-    if (manualId) return manualId;
-    const label = typeof children === "string" ? children : null;
-    return generatePvSlug(
-      label,
-      props.href || props.path || srcList[activeIdx]?.path,
-    );
-  }, [manualId, children, props.href, props.path, srcList, activeIdx]);
+  // Unified Slug Generation (id > title > filename > children > preview)
+  const baseSlug = useMemo(() => {
+    if (manualId) return generatePvSlug(manualId);
+    if (title) return generatePvSlug(title);
+
+    const pathOrHref = props.href || props.path || srcList[activeIdx]?.path;
+    if (pathOrHref) {
+      const filename = pathOrHref
+        .split(/[?#]/)[0]
+        .split("/")
+        .filter(Boolean)
+        .pop();
+      if (filename) return generatePvSlug(filename);
+    }
+
+    const childrenText = typeof children === "string" ? children.trim() : null;
+    if (childrenText) return generatePvSlug(childrenText);
+
+    return "preview";
+  }, [manualId, title, props.href, props.path, srcList, activeIdx, children]);
 
   // Deep Link Detection
   useEffect(() => {
     const timer = setTimeout(() => {
       const parsed = parsePvHash(window.location.hash);
-      if (parsed && parsed.slug === slug) {
-        setDocked(parsed.isDocked || initialDocked);
-        openPreview(srcList, activeIdx, generatePvHash(slug, parsed.isDocked));
+      if (parsed && parsed.slug === baseSlug) {
+        const hashMode = parsed.mode || mode;
+        setMode(hashMode);
+        openPreview(
+          srcList,
+          activeIdx,
+          generatePvHash(baseSlug, hashMode),
+          hashMode,
+          baseSlug,
+          modeSwitch,
+        );
       }
     }, 150);
     return () => clearTimeout(timer);
   }, [
     location.hash,
-    slug,
+    baseSlug,
     srcList,
     openPreview,
-    setDocked,
-    initialDocked,
+    setMode,
+    mode,
     activeIdx,
+    modeSwitch,
   ]);
 
   if (srcList.length === 0) return <span>{children}</span>;
@@ -150,40 +189,58 @@ export default function Pv(props) {
     if (isCurrentlyActive) {
       closePreview();
     } else {
-      const targetDocked = initialDocked || isDocked;
-      setDocked(targetDocked);
-      openPreview(srcList, activeIdx, generatePvHash(slug, targetDocked));
+      setMode(mode);
+      openPreview(
+        srcList,
+        activeIdx,
+        generatePvHash(baseSlug, mode),
+        mode,
+        baseSlug,
+        modeSwitch,
+      );
     }
   };
 
-  const targetHash = generatePvHash(slug, initialDocked || isDocked);
+  const targetHash = generatePvHash(baseSlug, mode);
+
+  const trigger = (
+    <a
+      href={`#${targetHash}`}
+      className={`${styles.previewTrigger} ${isCurrentlyActive ? styles.activeTrigger : ""} ${!underline ? styles.noUnderline : ""}`}
+      onClick={(e) => {
+        e.preventDefault();
+        handleClick();
+      }}
+      role="button"
+      tabIndex={0}
+      onKeyDown={(e) => {
+        if (e.key === "Enter") {
+          e.preventDefault();
+          handleClick();
+        }
+      }}
+    >
+      {children || srcList[activeIdx]?.label}
+    </a>
+  );
+
+  const hasTooltip = !!srcList[activeIdx]?.tooltip;
+
+  if (!hasTooltip) {
+    return <span className={styles.previewContainer}>{trigger}</span>;
+  }
+
+  const tooltipMsg = srcList[activeIdx]?.tooltip;
 
   return (
     <span className={styles.previewContainer}>
-      <Tooltip
-        msg={srcList[activeIdx]?.tooltip || "Preview"}
-        position="top"
-        underline={false}
-      >
-        <a
-          href={`#${targetHash}`}
-          className={`${styles.previewTrigger} ${isCurrentlyActive ? styles.activeTrigger : ""}`}
-          onClick={(e) => {
-            e.preventDefault();
-            handleClick();
-          }}
-          role="button"
-          tabIndex={0}
-          onKeyDown={(e) => {
-            if (e.key === "Enter") {
-              e.preventDefault();
-              handleClick();
-            }
-          }}
-        >
-          {children || srcList[activeIdx]?.label}
-        </a>
-      </Tooltip>
+      {tooltipMsg ? (
+        <Tooltip msg={tooltipMsg} position="top" underline={false}>
+          {trigger}
+        </Tooltip>
+      ) : (
+        trigger
+      )}
     </span>
   );
 }