@sia.soul/sia-react-ui 0.1.22 → 0.1.24

package/dist/markdown-editor.cjs

@@ -34,28 +34,269 @@ __export(markdown_editor_exports, {
 });
 module.exports = __toCommonJS(markdown_editor_exports);
 
-// src/components/shared.ts
+// src/components/titleTooltip.tsx
+var import_client = require("react-dom/client");
+
+// src/components/PopupPortal.tsx
 var import_react = require("react");
-var ControlSizeContext = (0, import_react.createContext)("medium");
-var PlaceholderModeContext = (0, import_react.createContext)("default");
+var import_react_dom = require("react-dom");
+var import_jsx_runtime = require("react/jsx-runtime");
+function setForwardedRef(ref, value) {
+  if (typeof ref === "function") ref(value);
+  else if (ref) ref.current = value;
+}
+function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), Math.max(min, max));
+}
+var PopupPortal = (0, import_react.forwardRef)(function PopupPortal2({
+  anchorRef,
+  open = true,
+  placement = "bottom-start",
+  offset = 6,
+  viewportPadding = 8,
+  className = "",
+  style,
+  children,
+  ...props
+}, forwardedRef) {
+  const popupRef = (0, import_react.useRef)(null);
+  const [position, setPosition] = (0, import_react.useState)();
+  (0, import_react.useLayoutEffect)(() => {
+    if (!open || typeof document === "undefined") {
+      setPosition(void 0);
+      return;
+    }
+    const update = () => {
+      const anchor = anchorRef.current;
+      const popup = popupRef.current;
+      if (!anchor || !popup) return;
+      const anchorRect = anchor.getBoundingClientRect();
+      const popupRect = popup.getBoundingClientRect();
+      const viewportWidth = document.documentElement.clientWidth;
+      const viewportHeight = document.documentElement.clientHeight;
+      let resolvedPlacement = placement;
+      const availableBelow = Math.max(0, viewportHeight - viewportPadding - anchorRect.bottom - offset);
+      const availableAbove = Math.max(0, anchorRect.top - offset - viewportPadding);
+      const availableRight = Math.max(0, viewportWidth - viewportPadding - anchorRect.right - offset);
+      const availableLeft = Math.max(0, anchorRect.left - offset - viewportPadding);
+      const horizontalSide = placement.startsWith("right") || placement.startsWith("left");
+      if (horizontalSide) {
+        const prefersRight = placement.startsWith("right");
+        const fitsRight = popupRect.width <= availableRight;
+        const fitsLeft = popupRect.width <= availableLeft;
+        if (prefersRight && !fitsRight && (fitsLeft || availableLeft > availableRight)) {
+          resolvedPlacement = placement.replace("right", "left");
+        } else if (!prefersRight && !fitsLeft && (fitsRight || availableRight > availableLeft)) {
+          resolvedPlacement = placement.replace("left", "right");
+        }
+      } else {
+        const prefersBottom = placement.startsWith("bottom");
+        const fitsBelow = popupRect.height <= availableBelow;
+        const fitsAbove = popupRect.height <= availableAbove;
+        if (prefersBottom && !fitsBelow && (fitsAbove || availableAbove > availableBelow)) {
+          resolvedPlacement = placement.replace("bottom", "top");
+        } else if (!prefersBottom && !fitsAbove && (fitsBelow || availableBelow > availableAbove)) {
+          resolvedPlacement = placement.replace("top", "bottom");
+        }
+      }
+      const resolvedHorizontalSide = resolvedPlacement.startsWith("right") || resolvedPlacement.startsWith("left");
+      const top = resolvedHorizontalSide ? resolvedPlacement.endsWith("end") ? anchorRect.bottom - popupRect.height : anchorRect.top : resolvedPlacement.startsWith("bottom") ? anchorRect.bottom + offset : anchorRect.top - popupRect.height - offset;
+      const availableHeight = resolvedHorizontalSide ? Math.max(0, viewportHeight - viewportPadding * 2) : resolvedPlacement.startsWith("bottom") ? availableBelow : availableAbove;
+      const alignedLeft = resolvedHorizontalSide ? resolvedPlacement.startsWith("right") ? anchorRect.right + offset : anchorRect.left - popupRect.width - offset : resolvedPlacement.endsWith("end") ? anchorRect.right - popupRect.width : anchorRect.left;
+      const next = {
+        top: clamp(top, viewportPadding, viewportHeight - popupRect.height - viewportPadding),
+        left: clamp(alignedLeft, viewportPadding, viewportWidth - popupRect.width - viewportPadding),
+        anchorWidth: anchorRect.width,
+        availableHeight,
+        placement: resolvedPlacement
+      };
+      setPosition((current) => current && current.top === next.top && current.left === next.left && current.anchorWidth === next.anchorWidth && current.availableHeight === next.availableHeight && current.placement === next.placement ? current : next);
+    };
+    update();
+    window.addEventListener("resize", update);
+    window.addEventListener("scroll", update, true);
+    const observer = new ResizeObserver(update);
+    if (anchorRef.current) observer.observe(anchorRef.current);
+    if (popupRef.current) observer.observe(popupRef.current);
+    return () => {
+      window.removeEventListener("resize", update);
+      window.removeEventListener("scroll", update, true);
+      observer.disconnect();
+    };
+  }, [anchorRef, offset, open, placement, viewportPadding]);
+  if (!open || typeof document === "undefined") return null;
+  return (0, import_react_dom.createPortal)(
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        ref: (node) => {
+          popupRef.current = node;
+          setForwardedRef(forwardedRef, node);
+        },
+        className: `sia-popup-portal ${className}`.trim(),
+        "data-sia-popup-layer": "",
+        "data-placement": position?.placement ?? placement,
+        style: {
+          ...style,
+          "--sia-popup-anchor-width": `${position?.anchorWidth ?? anchorRef.current?.getBoundingClientRect().width ?? 0}px`,
+          "--sia-popup-available-height": position ? `${position.availableHeight}px` : void 0,
+          top: position?.top ?? 0,
+          left: position?.left ?? 0,
+          visibility: position ? "visible" : "hidden"
+        },
+        ...withTitleTooltip(props),
+        children
+      }
+    ),
+    document.body
+  );
+});
+
+// src/components/titleTooltip.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var documents = /* @__PURE__ */ new WeakSet();
+function withTitleTooltip(props) {
+  if (!props || typeof props !== "object" || !("title" in props)) return props;
+  const { title, ...rest } = props;
+  if (typeof document !== "undefined") installTitleTooltips(document);
+  return { ...rest, "data-sia-title": title == null ? void 0 : String(title) };
+}
+function installTitleTooltips(doc) {
+  if (documents.has(doc)) return;
+  documents.add(doc);
+  let hovered = null;
+  let focused = null;
+  let active = null;
+  let pending = null;
+  let timer;
+  let root;
+  let observer;
+  let tooltipId = "";
+  const candidate = (target) => {
+    if (!(target instanceof Element)) return null;
+    const element = target.closest("[data-sia-title]");
+    return element?.getAttribute("data-sia-title") && !element.closest(".sia-floating") ? element : null;
+  };
+  const hasExplicitTooltip = (target) => target instanceof Element && Boolean(target.closest(".sia-floating"));
+  const hide = () => {
+    clearTimeout(timer);
+    pending = null;
+    observer?.disconnect();
+    observer = void 0;
+    if (active) {
+      const ids = (active.getAttribute("aria-describedby") ?? "").split(/\s+/).filter((id) => id && id !== tooltipId);
+      if (ids.length) active.setAttribute("aria-describedby", ids.join(" "));
+      else active.removeAttribute("aria-describedby");
+    }
+    active = null;
+    root?.render(null);
+  };
+  const render = () => {
+    const text = active?.getAttribute("data-sia-title");
+    if (!active?.isConnected || !text) {
+      hide();
+      return;
+    }
+    if (!root) {
+      const host = doc.createElement("div");
+      host.setAttribute("data-sia-title-tooltip-host", "");
+      doc.body.append(host);
+      root = (0, import_client.createRoot)(host);
+      tooltipId = `sia-title-tooltip-${Math.random().toString(36).slice(2)}`;
+    }
+    const ids = new Set((active.getAttribute("aria-describedby") ?? "").split(/\s+/).filter(Boolean));
+    ids.add(tooltipId);
+    active.setAttribute("aria-describedby", [...ids].join(" "));
+    root.render(/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      PopupPortal,
+      {
+        anchorRef: { current: active },
+        placement: "top-start",
+        id: tooltipId,
+        role: "tooltip",
+        className: "sia-title-tooltip",
+        children: text
+      }
+    ));
+  };
+  const show = (element) => {
+    if (!element && !active && !pending) return;
+    if (element && (element === active || element === pending)) return;
+    hide();
+    if (!element) return;
+    pending = element;
+    timer = setTimeout(() => {
+      pending = null;
+      if (!element.isConnected) return;
+      active = element;
+      render();
+      if (!active) return;
+      observer = new MutationObserver(() => {
+        if (!active?.isConnected) hide();
+        else if (active.getAttribute("data-sia-title") !== doc.getElementById(tooltipId)?.textContent) render();
+      });
+      observer.observe(doc.body, { childList: true, subtree: true, attributes: true, attributeFilter: ["data-sia-title"] });
+    }, 250);
+  };
+  doc.addEventListener("pointerover", (event) => {
+    if (event.pointerType === "touch") return;
+    hovered = candidate(event.target);
+    if (hasExplicitTooltip(event.target)) hide();
+    else show(hovered ?? focused);
+  }, true);
+  doc.addEventListener("pointermove", (event) => {
+    if (event.pointerType === "touch" || event.buttons) return;
+    hovered = candidate(event.target);
+    if (!hasExplicitTooltip(event.target)) show(hovered ?? focused);
+  }, true);
+  doc.addEventListener("pointerout", (event) => {
+    if (event.pointerType === "touch") return;
+    hovered = candidate(event.relatedTarget);
+    if (hasExplicitTooltip(event.relatedTarget)) hide();
+    else show(hovered ?? focused);
+  }, true);
+  doc.addEventListener("focusin", (event) => {
+    focused = candidate(event.target);
+    if (hasExplicitTooltip(event.target)) hide();
+    else show(focused ?? hovered);
+  }, true);
+  doc.addEventListener("focusout", (event) => {
+    focused = candidate(event.relatedTarget);
+    show(hovered ?? focused);
+  }, true);
+  doc.addEventListener("pointerdown", hide, true);
+  doc.addEventListener("keydown", (event) => {
+    if (event.key === "Escape") hide();
+  }, true);
+  doc.addEventListener("scroll", hide, true);
+  doc.defaultView?.addEventListener("blur", () => {
+    hovered = focused = null;
+    hide();
+  });
+}
+
+// src/components/shared.ts
+var import_react2 = require("react");
+var ControlSizeContext = (0, import_react2.createContext)("medium");
+var PlaceholderModeContext = (0, import_react2.createContext)("default");
 function usePlaceholderMode(mode) {
-  const inherited = (0, import_react.useContext)(PlaceholderModeContext);
+  const inherited = (0, import_react2.useContext)(PlaceholderModeContext);
   return mode ?? inherited;
 }
 
 // src/components/FloatingPlaceholder.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 function useFloatingPlaceholder({ mode, placeholder, filled, active = false }) {
   const enabled = usePlaceholderMode(mode) === "floating" && Boolean(placeholder);
   return {
     enabled,
     className: enabled ? ` sia-placeholder-floating${filled ? " sia-placeholder-floating--filled" : ""}${active ? " sia-placeholder-floating--active" : ""}` : "",
-    label: enabled ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "sia-floating-placeholder", "aria-hidden": "true", children: placeholder }) : null
+    label: enabled ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "sia-floating-placeholder", "aria-hidden": "true", children: placeholder }) : null
   };
 }
 
 // src/components/MarkdownEditor.tsx
-var import_react2 = require("react");
+var import_react3 = require("react");
 var import_dist = require("vditor/dist/index.css");
 
 // src/components/markdownPaste.ts
@@ -164,7 +405,7 @@ var VDITOR_ZH_CN = {
 };
 
 // src/components/MarkdownEditor.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 var vditorLoaders = /* @__PURE__ */ new Map();
 var BASE_TOOLBAR = [
   "headings",
@@ -282,21 +523,21 @@ function MarkdownEditor({
   style,
   ...props
 }) {
-  const mountRef = (0, import_react2.useRef)(null);
-  const editorRef = (0, import_react2.useRef)(null);
-  const onChangeRef = (0, import_react2.useRef)(onChange);
-  const saveShortcutRef = (0, import_react2.useRef)(saveShortcut);
-  const uploadImageRef = (0, import_react2.useRef)(onUploadImage);
-  const disabledRef = (0, import_react2.useRef)(disabled);
-  const smartMarkdownPasteRef = (0, import_react2.useRef)(smartMarkdownPaste);
-  const valueRef = (0, import_react2.useRef)(value ?? defaultValue);
-  const lastEmittedValueRef = (0, import_react2.useRef)(value ?? defaultValue);
-  const [hasContent, setHasContent] = (0, import_react2.useState)(Boolean((value ?? defaultValue).trim()));
+  const mountRef = (0, import_react3.useRef)(null);
+  const editorRef = (0, import_react3.useRef)(null);
+  const onChangeRef = (0, import_react3.useRef)(onChange);
+  const saveShortcutRef = (0, import_react3.useRef)(saveShortcut);
+  const uploadImageRef = (0, import_react3.useRef)(onUploadImage);
+  const disabledRef = (0, import_react3.useRef)(disabled);
+  const smartMarkdownPasteRef = (0, import_react3.useRef)(smartMarkdownPaste);
+  const valueRef = (0, import_react3.useRef)(value ?? defaultValue);
+  const lastEmittedValueRef = (0, import_react3.useRef)(value ?? defaultValue);
+  const [hasContent, setHasContent] = (0, import_react3.useState)(Boolean((value ?? defaultValue).trim()));
   const floating = useFloatingPlaceholder({ mode: placeholderMode, placeholder, filled: hasContent });
-  const [ready, setReady] = (0, import_react2.useState)(false);
-  const [loadError, setLoadError] = (0, import_react2.useState)("");
+  const [ready, setReady] = (0, import_react3.useState)(false);
+  const [loadError, setLoadError] = (0, import_react3.useState)("");
   const hasImageUpload = Boolean(onUploadImage);
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     if (value !== void 0) setHasContent(Boolean(value.trim()));
   }, [value]);
   onChangeRef.current = onChange;
@@ -305,7 +546,7 @@ function MarkdownEditor({
   disabledRef.current = disabled;
   smartMarkdownPasteRef.current = smartMarkdownPaste;
   valueRef.current = value ?? valueRef.current;
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     const mount = mountRef.current;
     if (!mount) return;
     let disposed = false;
@@ -407,14 +648,14 @@ function MarkdownEditor({
       if (editorInitialized) createdEditor?.destroy();
     };
   }, [ariaLabel, assetBaseUrl, hasImageUpload, minHeight, mode, placeholder, floating.enabled]);
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     const editor = editorRef.current;
     if (!editor || value === void 0) return;
     if (value === lastEmittedValueRef.current || editor.getValue() === value) return;
     lastEmittedValueRef.current = value;
     editor.setValue(value, true);
   }, [ready, value]);
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     const editor = editorRef.current;
     if (!editor) return;
     if (disabled) editor.disabled();
@@ -424,13 +665,13 @@ function MarkdownEditor({
     ...style,
     "--sia-markdown-editor-min-height": typeof minHeight === "number" ? `${minHeight}px` : minHeight
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
     "div",
     {
       className: ["sia-markdown-editor", floating.className, disabled ? "is-disabled" : "", className].filter(Boolean).join(" "),
       style: editorStyle,
       "data-ready": ready ? "true" : "false",
-      ...props,
+      ...withTitleTooltip(props),
       onBlurCapture: (event) => {
         props.onBlurCapture?.(event);
         const current = editorRef.current?.getValue();
@@ -438,8 +679,8 @@ function MarkdownEditor({
       },
       children: [
         floating.label,
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { ref: mountRef, className: "sia-markdown-editor__mount" }),
-        !ready ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "sia-markdown-editor__loading", "aria-live": "polite", children: loadError || "\u6B63\u5728\u52A0\u8F7D\u7F16\u8F91\u5668\u2026" }) : null
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { ref: mountRef, className: "sia-markdown-editor__mount" }),
+        !ready ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "sia-markdown-editor__loading", "aria-live": "polite", children: loadError || "\u6B63\u5728\u52A0\u8F7D\u7F16\u8F91\u5668\u2026" }) : null
       ]
     }
   );

package/dist/markdown-editor.css

@@ -0,0 +1,20 @@
+/* src/title-tooltip.css */
+body > .sia-title-tooltip[data-sia-popup-layer] {
+  position: fixed;
+  z-index: 1800;
+  display: block;
+  box-sizing: border-box;
+  width: max-content;
+  max-width: min(320px, calc(100vw - 16px));
+  max-height: calc(100vh - 16px);
+  padding: 7px 10px;
+  color: var(--sia-color-text, #1f2329);
+  background: var(--sia-color-surface, #fff);
+  border: 1px solid var(--sia-color-border, #d9d9d9);
+  border-radius: var(--sia-radius, 6px);
+  box-shadow: var(--sia-shadow-popup, 0 4px 16px rgb(0 0 0 / 12%));
+  font: 400 13px/1.5 system-ui, sans-serif;
+  pointer-events: none;
+  overflow-wrap: anywhere;
+  white-space: pre-wrap;
+}

package/dist/markdown-editor.js

@@ -1,7 +1,7 @@
 import {
   MarkdownEditor
-} from "./chunk-QJ4OQNQ4.js";
-import "./chunk-3VJ4CZDQ.js";
+} from "./chunk-LA7O3PN4.js";
+import "./chunk-NSSPGXNM.js";
 export {
   MarkdownEditor
 };