@beyondwork/docx-react-component 1.0.27 → 1.0.29

package/src/ui-tailwind/chrome/tw-page-ruler.tsx

@@ -1,386 +0,0 @@
-import React, { useEffect, useMemo, useRef, useState } from "react";
-
-import type {
-  EditorViewStateSnapshot,
-  PageLayoutSnapshot,
-} from "../../api/public-types";
-
-interface ActiveParagraphLayout {
-  leftIndent: number;
-  rightIndent: number;
-  firstLineOffset: number;
-  tabStops: Array<{ pos: number; val?: string; leader?: string }>;
-}
-
-export interface TwPageRulerProps {
-  pageLayout: PageLayoutSnapshot;
-  viewState: EditorViewStateSnapshot;
-  paragraphLayout: ActiveParagraphLayout | null;
-  readOnly: boolean;
-  onReturnToBody: () => void;
-  onOpenHeader?: () => void;
-  onOpenFooter?: () => void;
-  onSetIndentation?: (indentation: {
-    left?: number;
-    right?: number;
-    firstLine?: number;
-    hanging?: number;
-  }) => void;
-  onSetTabStops?: (tabStops: Array<{ pos: number; val?: string; leader?: string }>) => void;
-  onRestartNumbering?: () => void;
-  onContinueNumbering?: () => void;
-}
-
-type DragKind = "left-indent" | "first-line";
-
-const MIN_HANDLE_TWIPS = 0;
-const HANDLE_OVERLAP_THRESHOLD_PERCENT = 1.4;
-const HANDLE_OFFSET_PERCENT = 0.9;
-const MARKER_HALF_PX = 8;
-
-export function TwPageRuler(props: TwPageRulerProps) {
-  const trackRef = useRef<HTMLDivElement | null>(null);
-  const dragCleanupRef = useRef<(() => void) | null>(null);
-  const [, setDragState] = useState<{
-    kind: DragKind;
-    startClientX: number;
-    startLeftIndent: number;
-    startFirstLineOffset: number;
-  } | null>(null);
-  const [previewLayout, setPreviewLayout] = useState<ActiveParagraphLayout | null>(null);
-
-  const effectiveLayout = previewLayout ?? props.paragraphLayout;
-  const activeRegion = props.viewState.activePageRegion?.region ?? "body";
-  const isBodyParagraphContext =
-    activeRegion === "body" && Boolean(props.paragraphLayout);
-  const availableHeader = props.pageLayout.headerVariants[0];
-  const availableFooter = props.pageLayout.footerVariants[0];
-
-  const usablePageWidth = Math.max(
-    1440,
-    props.pageLayout.pageWidth - props.pageLayout.marginLeft - props.pageLayout.marginRight,
-  );
-
-  useEffect(() => {
-    return () => {
-      dragCleanupRef.current?.();
-    };
-  }, []);
-
-  function beginDrag(kind: DragKind, clientX: number): void {
-    if (!isBodyParagraphContext || !props.paragraphLayout || props.readOnly) {
-      return;
-    }
-
-    dragCleanupRef.current?.();
-    const activeDrag = {
-      kind,
-      startClientX: clientX,
-      startLeftIndent: props.paragraphLayout.leftIndent,
-      startFirstLineOffset: props.paragraphLayout.firstLineOffset,
-    };
-    setDragState(activeDrag);
-
-    const handleMouseMove = (event: MouseEvent): void => {
-      const track = trackRef.current;
-      if (!track) {
-        return;
-      }
-      const rect = track.getBoundingClientRect();
-      const deltaPx = event.clientX - activeDrag.startClientX;
-      const deltaTwips = pxToTwips(deltaPx, rect.width, usablePageWidth);
-
-      if (activeDrag.kind === "left-indent") {
-        setPreviewLayout({
-          ...props.paragraphLayout!,
-          leftIndent: clampTwips(activeDrag.startLeftIndent + deltaTwips),
-          firstLineOffset: activeDrag.startFirstLineOffset,
-        });
-        return;
-      }
-
-      setPreviewLayout({
-        ...props.paragraphLayout!,
-        leftIndent: activeDrag.startLeftIndent,
-        firstLineOffset: activeDrag.startFirstLineOffset + deltaTwips,
-      });
-    };
-
-    const handleMouseUp = (event: MouseEvent): void => {
-      const track = trackRef.current;
-      if (!track || !props.onSetIndentation) {
-        cleanupDrag();
-        setDragState(null);
-        setPreviewLayout(null);
-        return;
-      }
-
-      const rect = track.getBoundingClientRect();
-      const deltaPx = event.clientX - activeDrag.startClientX;
-      const deltaTwips = pxToTwips(deltaPx, rect.width, usablePageWidth);
-      const leftIndent =
-        activeDrag.kind === "left-indent"
-          ? clampTwips(activeDrag.startLeftIndent + deltaTwips)
-          : activeDrag.startLeftIndent;
-      const firstLineOffset =
-        activeDrag.kind === "first-line"
-          ? activeDrag.startFirstLineOffset + deltaTwips
-          : activeDrag.startFirstLineOffset;
-
-      cleanupDrag();
-      props.onSetIndentation(
-        composeIndentation(leftIndent, effectiveLayout?.rightIndent ?? props.paragraphLayout?.rightIndent ?? 0, firstLineOffset),
-      );
-      setDragState(null);
-      setPreviewLayout(null);
-    };
-
-    const cleanupDrag = (): void => {
-      window.removeEventListener("mousemove", handleMouseMove);
-      window.removeEventListener("mouseup", handleMouseUp);
-      if (dragCleanupRef.current === cleanupDrag) {
-        dragCleanupRef.current = null;
-      }
-    };
-
-    dragCleanupRef.current = cleanupDrag;
-    window.addEventListener("mousemove", handleMouseMove);
-    window.addEventListener("mouseup", handleMouseUp);
-  }
-
-  const markerLayout = useMemo(() => {
-    if (!effectiveLayout || !isBodyParagraphContext) {
-      return null;
-    }
-    return {
-      leftIndent: twipsToPercent(effectiveLayout.leftIndent, usablePageWidth),
-      firstLine: twipsToPercent(
-        Math.max(MIN_HANDLE_TWIPS, effectiveLayout.leftIndent + effectiveLayout.firstLineOffset),
-        usablePageWidth,
-      ),
-      tabStops: effectiveLayout.tabStops.map((tabStop, index) => ({
-        id: `${tabStop.pos}-${index}`,
-        left: twipsToPercent(tabStop.pos, usablePageWidth),
-      })),
-    };
-  }, [effectiveLayout, isBodyParagraphContext, usablePageWidth]);
-  const handlesOverlap = markerLayout
-    ? Math.abs(markerLayout.leftIndent - markerLayout.firstLine) < HANDLE_OVERLAP_THRESHOLD_PERCENT
-    : false;
-  const leftIndentHandleLeft = markerLayout
-    ? offsetHandlePercent(markerLayout.leftIndent, handlesOverlap ? -HANDLE_OFFSET_PERCENT : 0)
-    : 0;
-  const firstLineHandleLeft = markerLayout
-    ? offsetHandlePercent(markerLayout.firstLine, handlesOverlap ? HANDLE_OFFSET_PERCENT : 0)
-    : 0;
-
-  return (
-    <div
-      aria-label="Page ruler"
-      className="mb-4 rounded-2xl border border-border bg-surface/80 px-4 py-3 shadow-sm"
-    >
-      <div className="mb-3 flex flex-wrap items-center gap-2">
-        <button
-          type="button"
-          aria-label="Return to document body"
-          title="Return to document body"
-          onClick={props.onReturnToBody}
-          className={regionButtonClass(activeRegion === "body")}
-        >
-          Body
-        </button>
-        {availableHeader ? (
-          <button
-            type="button"
-            aria-label="Open header story"
-            title="Open header story"
-            onClick={props.onOpenHeader}
-            className={regionButtonClass(activeRegion === "header")}
-          >
-            Header
-          </button>
-        ) : null}
-        {availableFooter ? (
-          <button
-            type="button"
-            aria-label="Open footer story"
-            title="Open footer story"
-            onClick={props.onOpenFooter}
-            className={regionButtonClass(activeRegion === "footer")}
-          >
-            Footer
-          </button>
-        ) : null}
-        {props.viewState.activeListContext ? (
-          <>
-            <div className="h-4 w-px bg-border" />
-            <button
-              type="button"
-              aria-label="Continue numbering"
-              title="Continue numbering from previous list"
-              disabled={props.readOnly}
-              onClick={props.onContinueNumbering}
-              className={controlButtonClass}
-            >
-              Continue
-            </button>
-            <button
-              type="button"
-              aria-label="Restart numbering"
-              title="Restart numbering at 1"
-              disabled={props.readOnly}
-              onClick={props.onRestartNumbering}
-              className={controlButtonClass}
-            >
-              Restart
-            </button>
-          </>
-        ) : null}
-      </div>
-
-      <div
-        className="mb-2 flex items-center justify-between"
-        aria-label={`Section ${props.pageLayout.sectionIndex + 1}, ${props.pageLayout.orientation}`}
-        title={`Section ${props.pageLayout.sectionIndex + 1} · ${props.pageLayout.orientation}`}
-      >
-        <span className="sr-only">Page ruler</span>
-      </div>
-
-      <div
-        ref={trackRef}
-        aria-label="Page ruler track"
-        className="relative h-14 overflow-hidden rounded-xl border border-border bg-canvas"
-        onClick={(event) => {
-          if (
-            props.readOnly ||
-            !isBodyParagraphContext ||
-            !props.paragraphLayout ||
-            !props.onSetTabStops
-          ) {
-            return;
-          }
-          if ((event.target as HTMLElement).dataset.handle === "true") {
-            return;
-          }
-          const rect = event.currentTarget.getBoundingClientRect();
-          const nextPos = clampTwips(pxToTwips(event.clientX - rect.left, rect.width, usablePageWidth));
-          props.onSetTabStops(
-            [...props.paragraphLayout.tabStops, { pos: nextPos, val: "left" }]
-              .sort((left, right) => left.pos - right.pos),
-          );
-        }}
-      >
-        <div className="absolute inset-x-4 top-2 h-px bg-border" />
-        <div className="absolute inset-x-4 top-7 h-px bg-border/70" />
-        {Array.from({ length: 8 }, (_, index) => (
-          <div
-            key={`tick-${index}`}
-            className="absolute top-1 h-3 w-px bg-border/80"
-            style={{ left: `${12 + index * 12}%` }}
-          />
-        ))}
-
-        {markerLayout ? (
-          <>
-            <button
-              type="button"
-              data-handle="true"
-              aria-label="Left indent handle"
-              title={`Left indent: ${effectiveLayout?.leftIndent ?? 0} twips`}
-              disabled={props.readOnly}
-              className={`absolute top-8 h-4 w-4 -translate-x-1/2 rounded-[5px] border border-accent/40 bg-accent-soft shadow-sm transition-opacity ${
-                handlesOverlap ? "opacity-80 z-10" : ""
-              }`}
-              style={{ left: markerLeftStyle(leftIndentHandleLeft) }}
-              onMouseDown={(event) => {
-                event.preventDefault();
-                beginDrag("left-indent", event.clientX);
-              }}
-            />
-            <button
-              type="button"
-              data-handle="true"
-              aria-label="First line indent handle"
-              title={`First line offset: ${effectiveLayout?.firstLineOffset ?? 0} twips`}
-              disabled={props.readOnly}
-              className={`absolute top-1 h-4 w-4 -translate-x-1/2 rotate-45 rounded-[4px] border border-primary/30 bg-surface-raised shadow-sm transition-opacity ${
-                handlesOverlap ? "opacity-80 z-20" : ""
-              }`}
-              style={{ left: markerLeftStyle(firstLineHandleLeft) }}
-              onMouseDown={(event) => {
-                event.preventDefault();
-                beginDrag("first-line", event.clientX);
-              }}
-            />
-            {markerLayout.tabStops.map((tabStop) => (
-              <div
-                key={tabStop.id}
-                data-handle="true"
-                aria-label={`Tab stop at ${tabStop.left.toFixed(0)}%`}
-                title={`Tab stop`}
-                className="absolute top-5 h-4 w-4 -translate-x-1/2 rounded-sm border border-border bg-surface-raised shadow-sm"
-                style={{ left: markerLeftStyle(tabStop.left) }}
-              />
-            ))}
-          </>
-        ) : null}
-      </div>
-    </div>
-  );
-}
-
-function composeIndentation(leftIndent: number, rightIndent: number, firstLineOffset: number) {
-  const indentation: {
-    left?: number;
-    right?: number;
-    firstLine?: number;
-    hanging?: number;
-  } = {};
-  if (leftIndent > 0) {
-    indentation.left = leftIndent;
-  }
-  if (rightIndent > 0) {
-    indentation.right = rightIndent;
-  }
-  if (firstLineOffset > 0) {
-    indentation.firstLine = Math.round(firstLineOffset);
-  } else if (firstLineOffset < 0) {
-    indentation.hanging = Math.round(Math.abs(firstLineOffset));
-  }
-  return indentation;
-}
-
-function regionButtonClass(active: boolean): string {
-  return `inline-flex items-center rounded-full border px-3 py-1 text-xs transition-colors ${
-    active
-      ? "border-accent/30 bg-accent-soft text-accent"
-      : "border-border bg-canvas text-secondary hover:bg-surface"
-  }`;
-}
-
-const controlButtonClass =
-  "inline-flex items-center rounded-full border border-border bg-canvas px-3 py-1 text-xs text-secondary transition-colors hover:bg-surface disabled:cursor-not-allowed disabled:opacity-50";
-
-function twipsToPercent(value: number, usablePageWidth: number): number {
-  return Math.max(0, Math.min(100, (value / usablePageWidth) * 100));
-}
-
-function pxToTwips(px: number, width: number, usablePageWidth: number): number {
-  if (width <= 0) {
-    return 0;
-  }
-  return Math.round((px / width) * usablePageWidth);
-}
-
-function clampTwips(value: number): number {
-  return Math.max(MIN_HANDLE_TWIPS, Math.round(value));
-}
-
-function offsetHandlePercent(value: number, offset: number): number {
-  return Math.max(0, Math.min(100, value + offset));
-}
-
-function markerLeftStyle(value: number): string {
-  const clamped = Math.max(0, Math.min(100, value));
-  return `clamp(${MARKER_HALF_PX}px, ${clamped}%, calc(100% - ${MARKER_HALF_PX}px))`;
-}

package/src/ui-tailwind/chrome/tw-selection-toolbar.tsx

@@ -1,186 +0,0 @@
-import React, { forwardRef } from "react";
-import type { FocusEventHandler } from "react";
-import * as Tooltip from "@radix-ui/react-tooltip";
-import { Baseline, Bold, Highlighter, Italic, MessageSquare, Underline } from "lucide-react";
-
-import type { SelectionToolbarModel } from "../../ui/headless/selection-toolbar-model";
-import { preserveEditorSelectionMouseDown } from "../../ui/headless/preserve-editor-selection";
-
-export interface TwSelectionToolbarProps {
-  model: SelectionToolbarModel;
-  disabledReason?: string;
-  onFocusCapture?: FocusEventHandler<HTMLDivElement>;
-  onBlurCapture?: FocusEventHandler<HTMLDivElement>;
-  onToggleBold?: () => void;
-  onToggleItalic?: () => void;
-  onToggleUnderline?: () => void;
-  onSetTextColor?: (color: string) => void;
-  onSetHighlightColor?: (color: string | null) => void;
-  onAddComment?: () => void;
-}
-
-const focusRingClass =
-  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-canvas";
-
-export const TwSelectionToolbar = forwardRef<HTMLDivElement, TwSelectionToolbarProps>(function TwSelectionToolbar(props, ref) {
-  const { model } = props;
-  const addCommentDisabled = !model.canAddComment;
-  const formattingDisabled = !model.canToggleFormatting;
-  const contextLabel = summarizeSelectionContext(model);
-  const tooltipLabel = addCommentDisabled
-    ? props.disabledReason ?? "Select text within one paragraph to add a DOCX comment"
-    : "Add comment";
-
-  return (
-    <div
-      ref={ref}
-      data-testid="selection-toolbar"
-      className="inline-flex max-w-[min(24rem,calc(100vw-2rem))] items-center gap-1.5 rounded-xl border border-border/80 bg-canvas px-1.5 py-1.5 shadow-lg ring-1 ring-border/80"
-      role="toolbar"
-      aria-label="Selection actions"
-      onFocusCapture={props.onFocusCapture}
-      onBlurCapture={props.onBlurCapture}
-    >
-      <ToolbarActionButton
-        icon={<Bold className="h-3.5 w-3.5" />}
-        label="Bold selection"
-        pressed={model.boldActive}
-        disabled={formattingDisabled}
-        onClick={props.onToggleBold}
-      />
-      <ToolbarActionButton
-        icon={<Italic className="h-3.5 w-3.5" />}
-        label="Italic selection"
-        pressed={model.italicActive}
-        disabled={formattingDisabled}
-        onClick={props.onToggleItalic}
-      />
-      <ToolbarActionButton
-        icon={<Underline className="h-3.5 w-3.5" />}
-        label="Underline selection"
-        pressed={model.underlineActive}
-        disabled={formattingDisabled}
-        onClick={props.onToggleUnderline}
-      />
-      <ToolbarActionButton
-        icon={<Baseline className="h-3.5 w-3.5" />}
-        label="Text color blue"
-        pressed={false}
-        disabled={formattingDisabled}
-        onClick={() => props.onSetTextColor?.("#1660a8")}
-      />
-      <ToolbarActionButton
-        icon={<Highlighter className="h-3.5 w-3.5" />}
-        label="Highlight yellow"
-        pressed={false}
-        disabled={formattingDisabled}
-        onClick={() => props.onSetHighlightColor?.("#ffff00")}
-      />
-
-      <div className="mx-0.5 h-4 w-px bg-border" />
-
-      <Tooltip.Root>
-        <Tooltip.Trigger asChild>
-          <button
-            type="button"
-            aria-label="Add comment from selection"
-            disabled={addCommentDisabled}
-            onMouseDown={preserveEditorSelectionMouseDown}
-            onClick={props.onAddComment}
-            className={`inline-flex h-7 w-7 items-center justify-center rounded-md transition-colors text-accent hover:bg-accent-soft disabled:cursor-not-allowed disabled:opacity-30 ${focusRingClass}`}
-          >
-            <MessageSquare className="h-3.5 w-3.5" />
-          </button>
-        </Tooltip.Trigger>
-        <Tooltip.Portal>
-          <Tooltip.Content
-            className="rounded-md bg-primary px-2 py-1 text-xs text-white shadow-md z-50"
-            sideOffset={6}
-          >
-            {tooltipLabel}
-          </Tooltip.Content>
-        </Tooltip.Portal>
-      </Tooltip.Root>
-
-      {model.previewText ? (
-        <>
-          <div className="mx-0.5 h-4 w-px bg-border" />
-          <span className="max-w-[8rem] truncate text-[11px] text-secondary">
-            {model.previewText}
-          </span>
-        </>
-      ) : null}
-
-      {contextLabel ? (
-        <>
-          {!model.previewText ? <div className="mx-0.5 h-4 w-px bg-border" /> : null}
-          <span
-            className={`min-w-0 max-w-[11rem] truncate rounded-full px-2 py-0.5 text-[10px] font-medium tracking-[0.08em] ${
-              model.badges.some((badge) => badge.tone === "accent")
-                ? "bg-accent-soft text-accent"
-                : "bg-surface text-tertiary"
-            }`}
-          >
-            {contextLabel}
-          </span>
-        </>
-      ) : null}
-    </div>
-  );
-});
-
-function summarizeSelectionContext(model: SelectionToolbarModel): string | null {
-  if (model.badges.length === 0) {
-    return null;
-  }
-
-  const accentBadges = model.badges.filter((badge) => badge.tone === "accent");
-  const source = accentBadges.length > 0 ? accentBadges : model.badges;
-  const labels = source.slice(0, 2).map((badge) => badge.label.trim()).filter(Boolean);
-  if (labels.length === 0) {
-    return null;
-  }
-
-  const summary = labels.join(" · ");
-  return summary.length > 30 ? `${summary.slice(0, 27)}...` : summary;
-}
-
-interface ToolbarActionButtonProps {
-  icon: React.ReactNode;
-  label: string;
-  pressed: boolean;
-  disabled: boolean;
-  onClick?: () => void;
-}
-
-function ToolbarActionButton(props: ToolbarActionButtonProps) {
-  return (
-    <Tooltip.Root>
-      <Tooltip.Trigger asChild>
-        <button
-          type="button"
-          aria-label={props.label}
-          aria-pressed={props.pressed}
-          disabled={props.disabled}
-          onMouseDown={preserveEditorSelectionMouseDown}
-          onClick={props.onClick}
-          className={`inline-flex h-7 w-7 items-center justify-center rounded-md transition-colors disabled:cursor-not-allowed disabled:opacity-30 ${
-            props.pressed
-              ? "bg-accent-soft text-accent"
-              : "text-secondary hover:bg-surface"
-          } ${focusRingClass}`}
-        >
-          {props.icon}
-        </button>
-      </Tooltip.Trigger>
-      <Tooltip.Portal>
-        <Tooltip.Content
-          className="rounded-md bg-primary px-2 py-1 text-xs text-white shadow-md z-50"
-          sideOffset={6}
-        >
-          {props.label}
-        </Tooltip.Content>
-      </Tooltip.Portal>
-    </Tooltip.Root>
-  );
-}