@rxdrag/website-lib-core 0.0.127 → 0.0.128

package/src/react/components/RichTextOutline/index.tsx

@@ -1,75 +1,75 @@
-import { extractOutlineFromTiptap, mdxToTiptap } from "@rxdrag/tiptap-preview";
-import { forwardRef, useEffect } from "react";
-import { useAcitviedHeading } from "./useAcitviedHeading";
-import clsx from "clsx";
-
-export type RichTextOutlineProps = {
-  className?: string;
-  itemClassName?: string;
-  value?: string;
-  //滚动偏移量
-  yOffset?: number;
-  style?: React.CSSProperties;
-};
-
-export const RichTextOutline = forwardRef<
-  HTMLUListElement,
-  RichTextOutlineProps
->((props, ref) => {
-  const { className, itemClassName, value, yOffset = 200, ...rest } = props;
-  const activiedId = useAcitviedHeading(yOffset);
-  const doc = mdxToTiptap(value ?? "");
-  const outline = extractOutlineFromTiptap(doc);
-
-  useEffect(() => {
-    const handleHashChange = () => {
-      const element = document.getElementById(
-        window.location.hash.substring(1)
-      );
-      if (element) {
-        const y =
-          element.getBoundingClientRect().top + window.scrollY - yOffset;
-        window.scrollTo({ top: y, behavior: "smooth" });
-      }
-    };
-
-    window.addEventListener("hashchange", handleHashChange);
-
-    return () => {
-      window.removeEventListener("hashchange", handleHashChange);
-    };
-  }, [yOffset]);
-
-  return outline?.length ? (
-    <ul ref={ref} className={className} {...rest}>
-      {outline?.map((item, index) => {
-        return (
-          <li
-            key={item?.key + index}
-            className={clsx(
-              activiedId === item?.key ? "actived" : "",
-              itemClassName
-            )}
-          >
-            <a
-              href={`#${item?.key}`}
-              onClick={(e) => {
-                e.preventDefault();
-                const element = document.getElementById(item?.key);
-                if (element) {
-                  const y =
-                    element.getBoundingClientRect().top +
-                    window.scrollY +
-                    yOffset;
-                  window.scrollTo({ top: y, behavior: "smooth" });
-                }
-              }}
-            >
-              {item?.text}
-            </a>
-          </li>
-        );
-      })}
-    </ul>
-  ) : null;
-});
+import { extractOutlineFromTiptap, mdxToTiptap } from "@rxdrag/tiptap-preview";
+import { forwardRef, useEffect } from "react";
+import { useAcitviedHeading } from "./useAcitviedHeading";
+import clsx from "clsx";
+
+export type RichTextOutlineProps = {
+  className?: string;
+  itemClassName?: string;
+  value?: string;
+  //滚动偏移量
+  yOffset?: number;
+  style?: React.CSSProperties;
+};
+
+export const RichTextOutline = forwardRef<
+  HTMLUListElement,
+  RichTextOutlineProps
+>((props, ref) => {
+  const { className, itemClassName, value, yOffset = 200, ...rest } = props;
+  const activiedId = useAcitviedHeading(yOffset);
+  const doc = mdxToTiptap(value ?? "");
+  const outline = extractOutlineFromTiptap(doc);
+
+  useEffect(() => {
+    const handleHashChange = () => {
+      const element = document.getElementById(
+        window.location.hash.substring(1)
+      );
+      if (element) {
+        const y =
+          element.getBoundingClientRect().top + window.scrollY - yOffset;
+        window.scrollTo({ top: y, behavior: "smooth" });
+      }
+    };
+
+    window.addEventListener("hashchange", handleHashChange);
+
+    return () => {
+      window.removeEventListener("hashchange", handleHashChange);
+    };
+  }, [yOffset]);
+
+  return outline?.length ? (
+    <ul ref={ref} className={className} {...rest}>
+      {outline?.map((item, index) => {
+        return (
+          <li
+            key={item?.key + index}
+            className={clsx(
+              activiedId === item?.key ? "actived" : "",
+              itemClassName
+            )}
+          >
+            <a
+              href={`#${item?.key}`}
+              onClick={(e) => {
+                e.preventDefault();
+                const element = document.getElementById(item?.key);
+                if (element) {
+                  const y =
+                    element.getBoundingClientRect().top +
+                    window.scrollY +
+                    yOffset;
+                  window.scrollTo({ top: y, behavior: "smooth" });
+                }
+              }}
+            >
+              {item?.text}
+            </a>
+          </li>
+        );
+      })}
+    </ul>
+  ) : null;
+});

package/src/react/components/RichTextOutline/useAnchorScroll.ts

@@ -1,24 +1,24 @@
-import { useCallback, useEffect } from 'react';
-
-export function useAnchorScroll() {
-  const handleAnchorClick = useCallback((event: MouseEvent): void => {
-    const target = event.target as HTMLAnchorElement;
-    if (target.tagName === 'A' && target.getAttribute('href')?.startsWith('#')) {
-      event.preventDefault();
-      const id = target.getAttribute('href')?.slice(1);
-      const element = document.getElementById(id || '');
-      if (element) {
-        const yOffset = -100; // 假设你想要元素距离顶部100px
-        const y = element.getBoundingClientRect().top + window.pageYOffset + yOffset;
-        window.scrollTo({ top: y, behavior: 'smooth' });
-      }
-    }
-  }, []);
-
-  useEffect(() => {
-    document.addEventListener('click', handleAnchorClick);
-    return () => document.removeEventListener('click', handleAnchorClick);
-  }, [handleAnchorClick]);
-}
-
+import { useCallback, useEffect } from 'react';
+
+export function useAnchorScroll() {
+  const handleAnchorClick = useCallback((event: MouseEvent): void => {
+    const target = event.target as HTMLAnchorElement;
+    if (target.tagName === 'A' && target.getAttribute('href')?.startsWith('#')) {
+      event.preventDefault();
+      const id = target.getAttribute('href')?.slice(1);
+      const element = document.getElementById(id || '');
+      if (element) {
+        const yOffset = -100; // 假设你想要元素距离顶部100px
+        const y = element.getBoundingClientRect().top + window.pageYOffset + yOffset;
+        window.scrollTo({ top: y, behavior: 'smooth' });
+      }
+    }
+  }, []);
+
+  useEffect(() => {
+    document.addEventListener('click', handleAnchorClick);
+    return () => document.removeEventListener('click', handleAnchorClick);
+  }, [handleAnchorClick]);
+}
+
 export default useAnchorScroll;

package/src/react/components/Scroller.tsx

@@ -1,39 +1,39 @@
-import { useCallback, useEffect, useRef, useState } from "react";
-
-export const defaultThreshold = 10;
-
-export type ScrollerProps = {
-  threshold?: number;
-};
-
-export function Scroller(props: ScrollerProps) {
-  const { threshold = defaultThreshold } = props;
-  const ref = useRef<HTMLDivElement>(null);
-  const [win, setWin] = useState<Window | null>(null);
-
-  useEffect(() => {
-    if (ref.current) {
-      setWin(ref.current.ownerDocument.defaultView);
-    }
-  }, []);
-
-  const onScroll = useCallback(() => {
-    if (!win) return;
-    const scrolled = win.scrollY > threshold;
-    const doc = win.document;
-
-    if (scrolled) {
-      doc.body.classList.add("scrolled");
-    } else {
-      doc.body.classList.remove("scrolled");
-    }
-  }, [threshold, win]);
-
-  useEffect(() => {
-    if (!win) return;
-    win.addEventListener("scroll", onScroll);
-    return () => win.removeEventListener("scroll", onScroll);
-  }, [onScroll, win]);
-
-  return <div ref={ref} style={{ display: "none" }} />;
-}
+import { useCallback, useEffect, useRef, useState } from "react";
+
+export const defaultThreshold = 10;
+
+export type ScrollerProps = {
+  threshold?: number;
+};
+
+export function Scroller(props: ScrollerProps) {
+  const { threshold = defaultThreshold } = props;
+  const ref = useRef<HTMLDivElement>(null);
+  const [win, setWin] = useState<Window | null>(null);
+
+  useEffect(() => {
+    if (ref.current) {
+      setWin(ref.current.ownerDocument.defaultView);
+    }
+  }, []);
+
+  const onScroll = useCallback(() => {
+    if (!win) return;
+    const scrolled = win.scrollY > threshold;
+    const doc = win.document;
+
+    if (scrolled) {
+      doc.body.classList.add("scrolled");
+    } else {
+      doc.body.classList.remove("scrolled");
+    }
+  }, [threshold, win]);
+
+  useEffect(() => {
+    if (!win) return;
+    win.addEventListener("scroll", onScroll);
+    return () => win.removeEventListener("scroll", onScroll);
+  }, [onScroll, win]);
+
+  return <div ref={ref} style={{ display: "none" }} />;
+}

package/src/react/components/SearchInput.tsx

@@ -1,21 +1,21 @@
-import { forwardRef, useState } from "react";
-
-export type SearchProps = React.InputHTMLAttributes<HTMLInputElement>;
-
-export const SearchInput = forwardRef<HTMLInputElement, SearchProps>(
-  (props, ref) => {
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const { children, ...rest } = props;
-    const [keyword, setKeyword] = useState<string>();
-
-    return (
-      <input
-        ref={ref}
-        name="q"
-        value={keyword}
-        onChange={(e) => setKeyword(e.target.value)}
-        {...rest}
-      />
-    );
-  }
-);
+import { forwardRef, useState } from "react";
+
+export type SearchProps = React.InputHTMLAttributes<HTMLInputElement>;
+
+export const SearchInput = forwardRef<HTMLInputElement, SearchProps>(
+  (props, ref) => {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { children, ...rest } = props;
+    const [keyword, setKeyword] = useState<string>();
+
+    return (
+      <input
+        ref={ref}
+        name="q"
+        value={keyword}
+        onChange={(e) => setKeyword(e.target.value)}
+        {...rest}
+      />
+    );
+  }
+);

package/src/react/components/Share/index.tsx

@@ -1,86 +1,86 @@
-import { forwardRef, useEffect, useState } from "react";
-import type { IconListType } from "./socials";
-import { iconList } from "./socials";
-import clsx from "clsx";
-
-export type ShareProps = {
-  socials?: string[];
-  size?: "xs" | "sm" | "md" | "lg" | "xl";
-  className?: string;
-  classNames?: {
-    item?: string;
-    itemIcon?: string;
-  };
-};
-
-function getPageDetails() {
-  if (typeof window === "undefined") {
-    return null;
-  }
-  const details = {
-    url: window?.location?.href,
-    title: document?.title || "null",
-    description: "null", // 默认为空字符串
-  };
-
-  const descriptionMetaTag = document.querySelector('meta[name="description"]');
-  if (descriptionMetaTag) {
-    details.description = (descriptionMetaTag as HTMLMetaElement).content;
-  }
-
-  return details;
-}
-
-export const Share = forwardRef<HTMLDivElement, ShareProps>(
-  (props: ShareProps, ref) => {
-    const { className, classNames, ...rest } = props;
-    const [socialList, setSolicalList] = useState<IconListType>();
-
-    const details = getPageDetails();
-
-    useEffect(() => {
-      setSolicalList(iconList);
-    }, [props.socials]);
-
-    // 生成每个社交媒体的分享链接
-    const generateLink = (key: string) => {
-      const social = iconList[key];
-      if (!social) return "#";
-      return social.url(
-        details?.url || "",
-        details?.title,
-        details?.description
-      );
-    };
-
-    return (
-      <div ref={ref} className={clsx("flex items-center", className)} {...rest}>
-        <div className="flex space-x-3">
-          {Object.keys(socialList || {}).map((key) => (
-            <a
-              key={key}
-              href={generateLink(key)}
-              target="_blank"
-              rel="noopener noreferrer"
-              title={`Share on ${iconList[key].title}`}
-              className={clsx(
-                "flex h-6 w-6 items-center justify-center ",
-                classNames?.item
-              )}
-            >
-              <svg
-                className={clsx("w-5 h-5", classNames?.itemIcon)}
-                fill="currentColor"
-                viewBox="0 0 24 24"
-                focusable="false"
-                aria-hidden="true"
-              >
-                {iconList[key].path}
-              </svg>
-            </a>
-          ))}
-        </div>
-      </div>
-    );
-  }
-);
+import { forwardRef, useEffect, useState } from "react";
+import type { IconListType } from "./socials";
+import { iconList } from "./socials";
+import clsx from "clsx";
+
+export type ShareProps = {
+  socials?: string[];
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
+  className?: string;
+  classNames?: {
+    item?: string;
+    itemIcon?: string;
+  };
+};
+
+function getPageDetails() {
+  if (typeof window === "undefined") {
+    return null;
+  }
+  const details = {
+    url: window?.location?.href,
+    title: document?.title || "null",
+    description: "null", // 默认为空字符串
+  };
+
+  const descriptionMetaTag = document.querySelector('meta[name="description"]');
+  if (descriptionMetaTag) {
+    details.description = (descriptionMetaTag as HTMLMetaElement).content;
+  }
+
+  return details;
+}
+
+export const Share = forwardRef<HTMLDivElement, ShareProps>(
+  (props: ShareProps, ref) => {
+    const { className, classNames, ...rest } = props;
+    const [socialList, setSolicalList] = useState<IconListType>();
+
+    const details = getPageDetails();
+
+    useEffect(() => {
+      setSolicalList(iconList);
+    }, [props.socials]);
+
+    // 生成每个社交媒体的分享链接
+    const generateLink = (key: string) => {
+      const social = iconList[key];
+      if (!social) return "#";
+      return social.url(
+        details?.url || "",
+        details?.title,
+        details?.description
+      );
+    };
+
+    return (
+      <div ref={ref} className={clsx("flex items-center", className)} {...rest}>
+        <div className="flex space-x-3">
+          {Object.keys(socialList || {}).map((key) => (
+            <a
+              key={key}
+              href={generateLink(key)}
+              target="_blank"
+              rel="noopener noreferrer"
+              title={`Share on ${iconList[key].title}`}
+              className={clsx(
+                "flex h-6 w-6 items-center justify-center ",
+                classNames?.item
+              )}
+            >
+              <svg
+                className={clsx("w-5 h-5", classNames?.itemIcon)}
+                fill="currentColor"
+                viewBox="0 0 24 24"
+                focusable="false"
+                aria-hidden="true"
+              >
+                {iconList[key].path}
+              </svg>
+            </a>
+          ))}
+        </div>
+      </div>
+    );
+  }
+);