willa-workspace 0.0.3-alpha.2739b3e

package/packages/willa-content/src/components/Typography/types.ts

@@ -0,0 +1,144 @@
+import type {
+  AnchorHTMLAttributes,
+  CSSProperties,
+  HTMLAttributes,
+  MouseEvent,
+  ReactNode,
+} from "react";
+
+export type TypographyType = "secondary" | "success" | "warning" | "danger";
+export type TypographyTitleLevel = 1 | 2 | 3 | 4 | 5;
+
+export type TypographyCopyable =
+  | boolean
+  | {
+      text?: string | (() => string | Promise<string>);
+      copiedDuration?: number;
+      icon?: ReactNode | [ReactNode, ReactNode];
+      tooltips?: false | [ReactNode, ReactNode];
+      tabIndex?: number;
+      onCopy?: (text: string) => void;
+    };
+
+export type TypographyEditable =
+  | boolean
+  | {
+      text?: string;
+      editing?: boolean;
+      defaultEditing?: boolean;
+      maxLength?: number;
+      autoSize?: boolean | { minRows?: number; maxRows?: number };
+      icon?: ReactNode;
+      tooltip?: ReactNode | false;
+      triggerType?: Array<"icon" | "text">;
+      enterIcon?: ReactNode | null;
+      tabIndex?: number;
+      onChange?: (value: string) => void;
+      onCancel?: () => void;
+      onStart?: () => void;
+      onEnd?: () => void;
+    };
+
+export type TypographyEllipsis =
+  | boolean
+  | {
+      rows?: number;
+      expandable?: boolean | "collapsible";
+      expanded?: boolean;
+      defaultExpanded?: boolean;
+      suffix?: ReactNode;
+      symbol?: ReactNode | ((expanded: boolean) => ReactNode);
+      tooltip?: ReactNode | boolean;
+      onExpand?: (
+        event: MouseEvent<HTMLButtonElement>,
+        info: { expanded: boolean },
+      ) => void;
+      onEllipsis?: (ellipsis: boolean) => void;
+    };
+
+export type TypographyActions = {
+  placement?: "start" | "end";
+};
+
+export type TypographySemanticDOM =
+  | "root"
+  | "content"
+  | "actions"
+  | "action"
+  | "textarea";
+
+export type TypographyClassNames = Partial<
+  Record<TypographySemanticDOM, string>
+>;
+
+export type TypographyStyles = Partial<
+  Record<TypographySemanticDOM, CSSProperties>
+>;
+
+export type TypographyProps = {
+  children?: ReactNode;
+  className?: string;
+  classNames?: TypographyClassNames;
+  styles?: TypographyStyles;
+} & HTMLAttributes<HTMLDivElement>;
+
+export type TypographyTextBaseProps = {
+  children?: ReactNode;
+  type?: TypographyType;
+  strong?: boolean;
+  italic?: boolean;
+  underline?: boolean;
+  delete?: boolean;
+  code?: boolean;
+  mark?: boolean;
+  keyboard?: boolean;
+  disabled?: boolean;
+  copyable?: TypographyCopyable;
+  editable?: TypographyEditable;
+  ellipsis?: TypographyEllipsis;
+  actions?: TypographyActions;
+  className?: string;
+  classNames?: TypographyClassNames;
+  styles?: TypographyStyles;
+};
+
+export type TypographyTextProps = TypographyTextBaseProps &
+  Omit<HTMLAttributes<HTMLSpanElement>, keyof TypographyTextBaseProps>;
+
+export type TypographyParagraphProps = TypographyTextBaseProps &
+  Omit<HTMLAttributes<HTMLParagraphElement>, keyof TypographyTextBaseProps>;
+
+export type TypographyTitleProps = TypographyTextBaseProps & {
+  level?: TypographyTitleLevel;
+} & Omit<HTMLAttributes<HTMLHeadingElement>, keyof TypographyTextBaseProps>;
+
+export type TypographyLinkProps = TypographyTextBaseProps &
+  Omit<
+    AnchorHTMLAttributes<HTMLAnchorElement>,
+    keyof TypographyTextBaseProps | "href"
+  > & {
+    href?: string;
+  };
+
+export type TypographyContentKind = "text" | "paragraph" | "title" | "link";
+export type CopyStatus = "idle" | "copied" | "failed";
+
+export type RenderTypographyContentOptions = TypographyTextBaseProps & {
+  kind: TypographyContentKind;
+  level?: TypographyTitleLevel;
+  href?: string;
+  target?: string;
+  rel?: string;
+  className?: string;
+  classNames?: TypographyClassNames;
+  styles?: TypographyStyles;
+  style?: CSSProperties;
+  rootProps:
+    | Omit<HTMLAttributes<HTMLSpanElement>, keyof TypographyTextBaseProps>
+    | Omit<HTMLAttributes<HTMLParagraphElement>, keyof TypographyTextBaseProps>
+    | Omit<HTMLAttributes<HTMLHeadingElement>, keyof TypographyTextBaseProps>
+    | Omit<
+        AnchorHTMLAttributes<HTMLAnchorElement>,
+        keyof TypographyTextBaseProps | "href"
+      >;
+};

package/packages/willa-content/src/components/Typography/utils.tsx

@@ -0,0 +1,192 @@
+import type { CSSProperties, ReactElement, ReactNode } from "react";
+import { CheckIcon, ClipboardIcon, Pencil1Icon } from "@radix-ui/react-icons";
+import { flattenText } from "@willa-ui/shared";
+
+import { Tooltip } from "#content/components/Tooltip";
+
+import type {
+  CopyStatus,
+  TypographyContentKind,
+  TypographyCopyable,
+  TypographyEditable,
+  TypographyEllipsis,
+  TypographyTitleLevel,
+} from "#content/components/Typography/types";
+
+export const normalizeEditable = (editable?: TypographyEditable) => {
+  if (!editable) return undefined;
+  if (editable === true) {
+    return {
+      defaultEditing: false,
+      icon: <Pencil1Icon />,
+      tooltip: "编辑",
+      triggerType: ["icon"],
+    };
+  }
+
+  return {
+    defaultEditing: editable.defaultEditing ?? false,
+    editing: editable.editing,
+    maxLength: editable.maxLength,
+    autoSize: editable.autoSize,
+    text: editable.text,
+    icon: editable.icon ?? <Pencil1Icon />,
+    tooltip: editable.tooltip === undefined ? "编辑" : editable.tooltip,
+    triggerType: editable.triggerType ?? ["icon"],
+    enterIcon: editable.enterIcon,
+    tabIndex: editable.tabIndex,
+    onChange: editable.onChange,
+    onCancel: editable.onCancel,
+    onStart: editable.onStart,
+    onEnd: editable.onEnd,
+  };
+};
+
+export type NormalizedEditable = NonNullable<
+  ReturnType<typeof normalizeEditable>
+>;
+
+export const resolveEditableText = (
+  editableConfig: NormalizedEditable | undefined,
+  children: ReactNode,
+) => {
+  return editableConfig?.text ?? flattenText(children).trim();
+};
+
+export const normalizeEllipsis = (ellipsis?: TypographyEllipsis) => {
+  if (!ellipsis) return undefined;
+  if (ellipsis === true) {
+    return {
+      rows: 1,
+      expandable: false,
+      defaultExpanded: false,
+      tooltip: undefined,
+    };
+  }
+
+  return {
+    rows: Math.max(1, ellipsis.rows ?? 1),
+    expandable: ellipsis.expandable ?? false,
+    expanded: ellipsis.expanded,
+    defaultExpanded: ellipsis.defaultExpanded ?? false,
+    suffix: ellipsis.suffix,
+    symbol: ellipsis.symbol,
+    tooltip: ellipsis.tooltip,
+    onExpand: ellipsis.onExpand,
+    onEllipsis: ellipsis.onEllipsis,
+  };
+};
+
+export type NormalizedEllipsis = NonNullable<
+  ReturnType<typeof normalizeEllipsis>
+>;
+
+export const getDefaultExpanded = (ellipsis?: TypographyEllipsis) => {
+  if (!ellipsis || ellipsis === true) return false;
+  return ellipsis.defaultExpanded ?? false;
+};
+
+export const getTypographyContentStyle = (
+  ellipsisConfig: NormalizedEllipsis | undefined,
+  expanded: boolean,
+) => {
+  if (!ellipsisConfig || expanded) return undefined;
+
+  return {
+    "--willa-typography-ellipsis-rows": ellipsisConfig.rows,
+  } as CSSProperties;
+};
+
+export const getTypographyTag = (
+  kind: TypographyContentKind,
+  level: TypographyTitleLevel,
+) => {
+  if (kind === "paragraph") return "p";
+  if (kind === "title") return `h${level}` as const;
+  return "span";
+};
+
+export const resolveCopyText = (
+  copyable: TypographyCopyable | undefined,
+  displayText: string,
+  children: ReactNode,
+) => {
+  if (!copyable) return undefined;
+  if (typeof copyable === "object" && copyable.text !== undefined) {
+    return async () => {
+      if (typeof copyable.text === "function") {
+        return copyable.text();
+      }
+      return copyable.text ?? "";
+    };
+  }
+  return async () => displayText || flattenText(children).trim();
+};
+
+export const resolveEllipsisSymbol = (
+  symbol: ReactNode | ((expanded: boolean) => ReactNode) | undefined,
+  expanded: boolean,
+) => {
+  if (typeof symbol === "function") return symbol(expanded);
+  return symbol ?? (expanded ? "收起" : "展开");
+};
+
+export const getCopyIcon = (
+  copyable: TypographyCopyable | undefined,
+  copied: CopyStatus,
+) => {
+  if (typeof copyable === "object" && Array.isArray(copyable.icon)) {
+    return copied === "copied" ? copyable.icon[1] : copyable.icon[0];
+  }
+
+  if (typeof copyable === "object" && copyable.icon) {
+    return copyable.icon;
+  }
+
+  return copied === "copied" ? <CheckIcon /> : <ClipboardIcon />;
+};
+
+export const getCopyTooltip = (
+  copyable: TypographyCopyable | undefined,
+  copied: CopyStatus,
+) => {
+  if (typeof copyable === "object" && copyable.tooltips === false) {
+    return undefined;
+  }
+
+  if (typeof copyable === "object" && Array.isArray(copyable.tooltips)) {
+    return copied === "copied" ? copyable.tooltips[1] : copyable.tooltips[0];
+  }
+
+  return copied === "copied" ? "复制成功" : "复制文本";
+};
+
+export const renderTooltip = (
+  content: ReactNode | undefined | false,
+  children: ReactElement<any>,
+) => {
+  if (!content) return children;
+
+  return (
+    <Tooltip
+      content={content}
+      contentClassName="willa-typography-tooltip-content"
+      size="sm"
+    >
+      {children}
+    </Tooltip>
+  );
+};
+
+export const updateEllipsized = (
+  nextEllipsized: boolean,
+  ellipsisConfig: NormalizedEllipsis | undefined,
+  setEllipsized: (ellipsis: boolean) => void,
+  lastEllipsizedRef: { current: boolean | undefined },
+) => {
+  setEllipsized(nextEllipsized);
+
+  if (lastEllipsizedRef.current === nextEllipsized) return;
+  lastEllipsizedRef.current = nextEllipsized;
+  ellipsisConfig?.onEllipsis?.(nextEllipsized);
+};

package/packages/willa-content/src/components/Watermark/index.css

@@ -0,0 +1,37 @@
+.willa-watermark {
+  position: relative;
+  z-index: var(--willa-watermark-z-index);
+  isolation: isolate;
+}
+
+.willa-watermark--fixed {
+  pointer-events: none;
+}
+
+.willa-watermark__layer {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+  opacity: var(--willa-watermark-opacity);
+  background-position: var(--willa-watermark-position);
+  background-repeat: repeat;
+  background-size: var(--willa-watermark-size);
+}
+
+.willa-watermark__layer--image {
+  z-index: 0;
+}
+
+.willa-watermark__content {
+  position: relative;
+  z-index: 2;
+}
+
+.willa-watermark__layer--text {
+  z-index: 1;
+}
+
+.willa-watermark--fixed .willa-watermark__layer {
+  position: fixed;
+}

package/packages/willa-content/src/components/Watermark/index.tsx

@@ -0,0 +1,294 @@
+import {
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type CSSProperties,
+  type ComponentPropsWithoutRef,
+  type ReactNode,
+} from "react";
+import classNames from "classnames";
+import { resolveMediaAsset, type MediaContextProps } from "@willa-ui/shared";
+
+export type WatermarkFont = {
+  color?: string;
+  fontFamily?: string;
+  fontSize?: number;
+  fontStyle?: CSSProperties["fontStyle"];
+  fontWeight?: number | string;
+  letterSpacing?: number;
+  lineHeight?: number;
+};
+
+export type WatermarkProps = {
+  children?: ReactNode;
+  content?: string | Array<string>;
+  image?: string;
+  width?: number;
+  height?: number;
+  gap?: [number, number];
+  offset?: [number, number];
+  rotate?: number;
+  opacity?: number;
+  zIndex?: number;
+  fixed?: boolean;
+  font?: WatermarkFont;
+} & MediaContextProps &
+  Omit<ComponentPropsWithoutRef<"div">, "content">;
+
+const DEFAULT_WIDTH = 152;
+const DEFAULT_HEIGHT = 84;
+const DEFAULT_GAP: [number, number] = [96, 88];
+const DEFAULT_OFFSET: [number, number] = [24, 12];
+const DEFAULT_ROTATE = -22;
+const DEFAULT_OPACITY = 1;
+const LIGHT_FALLBACK_COLOR = "rgba(15, 23, 42, 0.12)";
+const DARK_FALLBACK_COLOR = "rgba(255, 255, 255, 0.12)";
+
+export function Watermark(props: WatermarkProps) {
+  const {
+    articleSourcePath,
+    resolveAssetUrl,
+    children,
+    content,
+    image,
+    width = DEFAULT_WIDTH,
+    height = DEFAULT_HEIGHT,
+    gap = DEFAULT_GAP,
+    offset = DEFAULT_OFFSET,
+    rotate = DEFAULT_ROTATE,
+    opacity = DEFAULT_OPACITY,
+    zIndex = 1,
+    fixed = false,
+    font,
+    className,
+    style,
+    ...rootProps
+  } = props;
+  const rootRef = useRef<HTMLDivElement | null>(null);
+  const [themeColor, setThemeColor] = useState(LIGHT_FALLBACK_COLOR);
+  const resolvedImage = resolveMediaAsset(
+    { articleSourcePath, resolveAssetUrl },
+    image,
+  );
+  const lines = normalizeWatermarkContent(content);
+  const watermarkFont = {
+    color: font?.color ?? themeColor,
+    fontFamily: font?.fontFamily,
+    fontSize: font?.fontSize,
+    fontStyle: font?.fontStyle,
+    fontWeight: font?.fontWeight,
+    letterSpacing: font?.letterSpacing,
+    lineHeight: font?.lineHeight,
+  };
+  const imageWatermarkDataUrl = useMemo(
+    () =>
+      resolvedImage
+        ? createWatermarkDataUrl({
+            lines: [],
+            image: resolvedImage,
+            width,
+            height,
+            gap,
+            rotate,
+            font: watermarkFont,
+          })
+        : "",
+    [resolvedImage, width, height, gap, rotate, watermarkFont],
+  );
+  const textWatermarkDataUrl = useMemo(
+    () =>
+      lines.length
+        ? createWatermarkDataUrl({
+            lines,
+            width,
+            height,
+            gap,
+            rotate,
+            font: watermarkFont,
+          })
+        : "",
+    [lines, width, height, gap, rotate, watermarkFont],
+  );
+
+  useEffect(() => {
+    const root = rootRef.current;
+    if (!root) return;
+
+    const readThemeColor = () => {
+      const scopedColor = getComputedStyle(root)
+        .getPropertyValue("--willa-watermark-ink")
+        .trim();
+
+      if (scopedColor) {
+        setThemeColor(scopedColor);
+        return;
+      }
+
+      const theme = document.documentElement.getAttribute("data-wk-theme");
+      setThemeColor(
+        theme === "dark" ? DARK_FALLBACK_COLOR : LIGHT_FALLBACK_COLOR,
+      );
+    };
+
+    readThemeColor();
+
+    const observer = new MutationObserver(readThemeColor);
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["data-wk-theme", "class"],
+    });
+
+    return () => observer.disconnect();
+  }, []);
+
+  const mergedStyle = {
+    ...style,
+    "--willa-watermark-size": `${width + gap[0]}px ${height + gap[1]}px`,
+    "--willa-watermark-position": `${offset[0]}px ${offset[1]}px`,
+    "--willa-watermark-opacity": `${opacity}`,
+    "--willa-watermark-z-index": `${zIndex}`,
+  } as CSSProperties;
+
+  return (
+    <div
+      {...rootProps}
+      ref={rootRef}
+      className={classNames(
+        "willa-watermark",
+        fixed && "willa-watermark--fixed",
+        className,
+      )}
+      style={mergedStyle}
+    >
+      <div
+        className="willa-watermark__layer willa-watermark__layer--image"
+        aria-hidden="true"
+        style={
+          {
+            backgroundImage: imageWatermarkDataUrl
+              ? `url("${imageWatermarkDataUrl}")`
+              : "none",
+          } as CSSProperties
+        }
+      />
+      <div
+        className="willa-watermark__layer willa-watermark__layer--text"
+        aria-hidden="true"
+        style={
+          {
+            backgroundImage: textWatermarkDataUrl
+              ? `url("${textWatermarkDataUrl}")`
+              : "none",
+          } as CSSProperties
+        }
+      />
+      {children ? (
+        <div className="willa-watermark__content">{children}</div>
+      ) : null}
+    </div>
+  );
+}
+
+const normalizeWatermarkContent = (content?: string | Array<string>) => {
+  if (!content) return new Array<string>();
+
+  return (Array.isArray(content) ? content : [content])
+    .map((item) => item.trim())
+    .filter(Boolean);
+};
+
+const escapeSvgText = (value: string) => {
+  return value
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#39;");
+};
+
+const createWatermarkDataUrl = (options: {
+  lines: Array<string>;
+  image?: string;
+  width: number;
+  height: number;
+  gap: [number, number];
+  rotate: number;
+  font: WatermarkFont;
+}) => {
+  const { lines, image, width, height, gap, rotate, font } = options;
+  if (!image && lines.length === 0) return "";
+
+  const tileWidth = width + gap[0];
+  const tileHeight = height + gap[1];
+  const centerX = tileWidth / 2;
+  const centerY = tileHeight / 2;
+  const fontSize = font.fontSize ?? 15;
+  const lineHeight = font.lineHeight ?? fontSize * 1.45;
+  const letterSpacing = font.letterSpacing ?? 0.6;
+  const fontWeight = font.fontWeight ?? 560;
+  const fontFamily =
+    font.fontFamily ?? "Inter, ui-sans-serif, system-ui, sans-serif";
+  const fontStyle = font.fontStyle ?? "normal";
+  const textColor = font.color ?? LIGHT_FALLBACK_COLOR;
+
+  const imageBlockHeight = image ? Math.min(height * 0.34, 34) : 0;
+  const textBlockHeight = lines.length
+    ? lineHeight * lines.length - (lineHeight - fontSize)
+    : 0;
+  const blockGap = image && lines.length ? Math.max(height * 0.08, 6) : 0;
+  const totalHeight = imageBlockHeight + blockGap + textBlockHeight;
+  const startY = centerY - totalHeight / 2;
+
+  const imageMarkup = image
+    ? createWatermarkImageMarkup({
+        image,
+        centerX,
+        startY,
+        width,
+        imageBlockHeight,
+      })
+    : "";
+
+  const textMarkup = lines
+    .map((line, index) => {
+      const y =
+        startY +
+        imageBlockHeight +
+        blockGap +
+        fontSize +
+        lineHeight * index -
+        fontSize * 0.16;
+
+      return `<text x="${centerX}" y="${y}" text-anchor="middle" fill="${textColor}" font-size="${fontSize}" font-weight="${fontWeight}" font-family="${fontFamily}" font-style="${fontStyle}" letter-spacing="${letterSpacing}">${escapeSvgText(line)}</text>`;
+    })
+    .join("");
+
+  const svg = `
+    <svg xmlns="http://www.w3.org/2000/svg" width="${tileWidth}" height="${tileHeight}" viewBox="0 0 ${tileWidth} ${tileHeight}">
+      <g transform="rotate(${rotate} ${centerX} ${centerY})">
+        ${imageMarkup}
+        ${textMarkup}
+      </g>
+    </svg>
+  `;
+
+  return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`;
+};
+
+const createWatermarkImageMarkup = (options: {
+  image: string;
+  centerX: number;
+  startY: number;
+  width: number;
+  imageBlockHeight: number;
+}) => {
+  const { image, centerX, startY, width, imageBlockHeight } = options;
+  const imageWidth = Math.min(width * 0.36, 52);
+  const imageX = centerX - imageWidth / 2;
+  const imageY = startY;
+
+  return `<image href="${escapeSvgText(image)}" x="${imageX}" y="${imageY}" width="${imageWidth}" height="${imageBlockHeight}" preserveAspectRatio="xMidYMid meet" opacity="0.96" />`;
+};
+
+Watermark.displayName = "Watermark";