@beyondwork/docx-react-component 1.0.18 → 1.0.20

package/src/ui-tailwind/chrome/tw-layout-panel.tsx

@@ -0,0 +1,114 @@
+import React from "react";
+
+import type {
+  PageLayoutSnapshot,
+  SectionPageNumberingPatch,
+  SectionBreakType,
+  SectionLayoutPatch,
+} from "../../api/public-types";
+import { preserveEditorSelectionMouseDown } from "../../ui/headless/preserve-editor-selection";
+
+export interface TwLayoutPanelProps {
+  pageLayout: PageLayoutSnapshot;
+  readOnly: boolean;
+  onInsertSectionBreak?: (type: SectionBreakType) => void;
+  onDeleteSectionBreak?: (sectionIndex: number) => void;
+  onUpdateSectionLayout?: (sectionIndex: number, patch: SectionLayoutPatch) => void;
+  onSetSectionPageNumbering?: (
+    sectionIndex: number,
+    patch: SectionPageNumberingPatch | null,
+  ) => void;
+}
+
+export function TwLayoutPanel(props: TwLayoutPanelProps) {
+  const nextOrientation = props.pageLayout.orientation === "portrait" ? "landscape" : "portrait";
+  const titlePageEnabled = props.pageLayout.differentFirstPage;
+
+  return (
+    <div className="mt-3 flex flex-wrap items-center gap-2 rounded-xl border border-border bg-canvas px-3 py-2 shadow-sm">
+      <span className="text-[10px] font-semibold uppercase tracking-[0.12em] text-tertiary">
+        Section
+      </span>
+      <ToolbarButton
+        ariaLabel="Insert next-page section break"
+        disabled={props.readOnly || !props.onInsertSectionBreak}
+        onClick={() => props.onInsertSectionBreak?.("nextPage")}
+      >
+        Next-page break
+      </ToolbarButton>
+      <ToolbarButton
+        ariaLabel={`Switch section to ${nextOrientation}`}
+        disabled={props.readOnly || !props.onUpdateSectionLayout}
+        onClick={() =>
+          props.onUpdateSectionLayout?.(props.pageLayout.sectionIndex, {
+            pageSize: {
+              orientation: nextOrientation,
+              width: props.pageLayout.pageHeight,
+              height: props.pageLayout.pageWidth,
+            },
+          })}
+      >
+        {nextOrientation === "landscape" ? "Landscape" : "Portrait"}
+      </ToolbarButton>
+      <ToolbarButton
+        ariaLabel="Delete current section break"
+        disabled={props.readOnly || props.pageLayout.sectionIndex === 0 || !props.onDeleteSectionBreak}
+        onClick={() => props.onDeleteSectionBreak?.(props.pageLayout.sectionIndex)}
+      >
+        Delete break
+      </ToolbarButton>
+      <ToolbarButton
+        ariaLabel="Restart page numbering at 1"
+        disabled={props.readOnly || !props.onSetSectionPageNumbering}
+        onClick={() =>
+          props.onSetSectionPageNumbering?.(props.pageLayout.sectionIndex, {
+            ...(props.pageLayout.pageNumbering ?? {}),
+            start: 1,
+          })}
+      >
+        Restart numbering
+      </ToolbarButton>
+      <ToolbarButton
+        ariaLabel="Use roman page numbering"
+        disabled={props.readOnly || !props.onSetSectionPageNumbering}
+        onClick={() =>
+          props.onSetSectionPageNumbering?.(props.pageLayout.sectionIndex, {
+            ...(props.pageLayout.pageNumbering ?? {}),
+            format: "roman",
+          })}
+      >
+        Roman numerals
+      </ToolbarButton>
+      <ToolbarButton
+        ariaLabel="Toggle different first page"
+        disabled={props.readOnly || !props.onUpdateSectionLayout}
+        onClick={() =>
+          props.onUpdateSectionLayout?.(props.pageLayout.sectionIndex, {
+            titlePage: !titlePageEnabled,
+          })}
+      >
+        {titlePageEnabled ? "Same first page" : "Different first page"}
+      </ToolbarButton>
+    </div>
+  );
+}
+
+function ToolbarButton(props: {
+  ariaLabel: string;
+  children: React.ReactNode;
+  disabled: boolean;
+  onClick?: () => void;
+}) {
+  return (
+    <button
+      type="button"
+      aria-label={props.ariaLabel}
+      disabled={props.disabled}
+      onMouseDown={preserveEditorSelectionMouseDown}
+      onClick={props.onClick}
+      className="inline-flex h-8 items-center rounded-md px-2 text-xs font-medium text-primary transition-colors hover:bg-surface disabled:cursor-not-allowed disabled:opacity-40"
+    >
+      {props.children}
+    </button>
+  );
+}

package/src/ui-tailwind/chrome/tw-object-context-toolbar.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+
+export interface ActiveObjectContext {
+  kind: "textbox" | "shape";
+  display: "inline" | "floating";
+}
+
+export interface TwObjectContextToolbarProps {
+  activeObject: ActiveObjectContext;
+}
+
+export function TwObjectContextToolbar(props: TwObjectContextToolbarProps) {
+  const label = props.activeObject.kind === "textbox" ? "Text box" : "Shape";
+
+  return (
+    <div
+      data-testid="object-context-toolbar"
+      className="flex flex-wrap items-center gap-2 rounded-xl border border-border bg-canvas px-3 py-2 shadow-sm"
+    >
+      <span className="text-[10px] font-semibold uppercase tracking-[0.12em] text-tertiary">
+        Object
+      </span>
+      <span className="rounded-full bg-surface px-2 py-1 text-[10px] font-medium uppercase tracking-[0.1em] text-secondary">
+        {label}
+      </span>
+      <span className="rounded-full bg-surface px-2 py-1 text-[10px] font-medium uppercase tracking-[0.1em] text-secondary">
+        {props.activeObject.display}
+      </span>
+      <span className="text-xs text-secondary">
+        Object selection is active.
+      </span>
+    </div>
+  );
+}

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

@@ -0,0 +1,386 @@
+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))`;
+}