@beyondwork/docx-react-component 1.0.29 → 1.0.31

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

@@ -0,0 +1,365 @@
+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 }>;
+  indentationReadOnly?: boolean;
+  tabStopsReadOnly?: boolean;
+}
+
+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 indentationReadOnly = props.readOnly || Boolean(props.paragraphLayout?.indentationReadOnly);
+  const tabStopsReadOnly = props.readOnly || Boolean(props.paragraphLayout?.tabStopsReadOnly);
+  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 || indentationReadOnly) {
+      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}
+      </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 (
+            tabStopsReadOnly ||
+            !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={indentationReadOnly}
+              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={indentationReadOnly}
+              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-tool-blocked.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+
+import type { BlockedExplainerSelectionToolModel } from "../../ui/headless/selection-tool-types";
+
+export interface TwSelectionToolBlockedProps {
+  model: BlockedExplainerSelectionToolModel;
+}
+
+export function TwSelectionToolBlocked(props: TwSelectionToolBlockedProps) {
+  return (
+    <div
+      data-testid="blocked-selection-tool"
+      className="max-w-[min(20rem,calc(100vw-1.5rem))] rounded-lg border border-border bg-canvas px-2.5 py-1.5 shadow-md"
+      role="status"
+      aria-live="polite"
+    >
+      <div className="text-[9px] font-semibold uppercase tracking-[0.12em] text-tertiary">
+        Unavailable here
+      </div>
+      <div className="mt-0.5 text-[13px] text-primary">{props.model.disabledReason}</div>
+    </div>
+  );
+}

package/src/ui-tailwind/chrome/tw-selection-tool-comment.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+
+import type { CommentThreadSelectionToolModel } from "../../ui/headless/selection-tool-types";
+import { preserveEditorSelectionMouseDown } from "../../ui/headless/preserve-editor-selection";
+
+export interface TwSelectionToolCommentProps {
+  model: CommentThreadSelectionToolModel;
+  onAddComment?: () => void;
+}
+
+export function TwSelectionToolComment(props: TwSelectionToolCommentProps) {
+  return (
+    <div
+      data-testid="comment-thread-selection-tool"
+      className="max-w-[min(20rem,calc(100vw-1.5rem))] rounded-lg border border-border bg-canvas px-2.5 py-1.5 shadow-md"
+    >
+      <div className="text-[9px] font-semibold uppercase tracking-[0.12em] text-tertiary">
+        Comment
+      </div>
+      <div className="mt-0.5 truncate text-[13px] text-primary">
+        {props.model.previewText ?? "Comment thread"}
+      </div>
+      <button
+        type="button"
+        aria-label="Add comment from thread"
+        disabled={!props.model.canAddComment || !props.onAddComment}
+        onMouseDown={preserveEditorSelectionMouseDown}
+        onClick={props.onAddComment}
+        className="mt-1.5 inline-flex h-7 items-center rounded-md border border-border px-2 text-[11px] font-medium text-secondary transition-colors hover:bg-surface disabled:cursor-not-allowed disabled:opacity-40"
+      >
+        Comment
+      </button>
+    </div>
+  );
+}

package/src/ui-tailwind/chrome/tw-selection-tool-formatting.tsx

@@ -0,0 +1,37 @@
+import React, { forwardRef } from "react";
+import type { FocusEventHandler } from "react";
+
+import type { FormattingInlineSelectionToolModel } from "../../ui/headless/selection-tool-types";
+import { TwSelectionToolbar } from "./tw-selection-toolbar";
+
+export interface TwSelectionToolFormattingProps {
+  model: FormattingInlineSelectionToolModel;
+  onFocusCapture?: FocusEventHandler<HTMLDivElement>;
+  onBlurCapture?: FocusEventHandler<HTMLDivElement>;
+  onToggleBold?: () => void;
+  onToggleItalic?: () => void;
+  onToggleUnderline?: () => void;
+  onSetTextColor?: (color: string) => void;
+  onSetHighlightColor?: (color: string | null) => void;
+  onAddComment?: () => void;
+}
+
+export const TwSelectionToolFormatting = forwardRef<HTMLDivElement, TwSelectionToolFormattingProps>(
+  function TwSelectionToolFormatting(props, ref) {
+    return (
+      <TwSelectionToolbar
+        ref={ref}
+        model={props.model}
+        disabledReason={props.model.disabledReason}
+        onFocusCapture={props.onFocusCapture}
+        onBlurCapture={props.onBlurCapture}
+        onToggleBold={props.onToggleBold}
+        onToggleItalic={props.onToggleItalic}
+        onToggleUnderline={props.onToggleUnderline}
+        onSetTextColor={props.onSetTextColor}
+        onSetHighlightColor={props.onSetHighlightColor}
+        onAddComment={props.onAddComment}
+      />
+    );
+  },
+);