@beyondwork/docx-react-component 1.0.30 → 1.0.31

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

@@ -28,8 +28,10 @@ import {
   Monitor,
   MoreHorizontal,
   Outdent,
+  PanelRight,
   Plus,
   Redo2,
+  RotateCcw,
   Rows3,
   Strikethrough,
   Subscript,
@@ -56,6 +58,7 @@ import type {
 import type { SessionCapabilities } from "../../runtime/session-capabilities";
 import { preserveEditorSelectionMouseDown } from "../../ui/headless/preserve-editor-selection";
 import { TwHealthPanel } from "../review/tw-health-panel";
+import { resolveToolbarLayoutModel } from "./toolbar-layout";
 import { TwToolbarIconButton } from "./tw-toolbar-icon-button";
 
 export interface TwToolbarProps {
@@ -66,6 +69,7 @@ export interface TwToolbarProps {
   showDiagnosticsChrome?: boolean;
   interactionPolicy?: ToolbarInteractionPolicy;
   preset?: WordReviewEditorChromePreset;
+  compactMode?: boolean;
   workspaceMode: WorkspaceMode;
   zoomLevel?: ZoomLevel;
   formattingState?: FormattingStateSnapshot;
@@ -102,6 +106,9 @@ export interface TwToolbarProps {
   onInsertImage?: (options: InsertImageOptions) => void;
   onExport: () => void;
   onWorkspaceModeChange: (value: WorkspaceMode) => void;
+  showSidebarToggle?: boolean;
+  isSidebarOpen?: boolean;
+  onToggleSidebar?: () => void;
   onZoomChange?: (level: ZoomLevel) => void;
   onShowTrackedChangesChange: (show: boolean) => void;
   onRestartNumbering?: () => void;
@@ -138,6 +145,7 @@ const HIGHLIGHT_COLORS = [
 export function TwToolbar(props: TwToolbarProps) {
   const caps = props.capabilities;
   const preset = props.preset ?? "advanced";
+  const isCompact = props.compactMode ?? false;
   const workspaceMode = props.workspaceMode;
   const paragraphStyles = props.styleCatalog?.paragraphs ?? [];
   const zoomLevel = props.zoomLevel ?? 100;
@@ -153,6 +161,18 @@ export function TwToolbar(props: TwToolbarProps) {
   const showHealth = showDiagnosticsChrome && Boolean(props.compatibility && props.warnings);
   const showListActions = preset === "simple" || preset === "advanced";
   const showUpdateActions = preset === "advanced";
+  const showSidebarToggle = props.showSidebarToggle ?? false;
+  const layoutModel = resolveToolbarLayoutModel({
+    compactMode: isCompact,
+    preset,
+    hasActiveListContext: Boolean(props.activeListContext),
+  });
+  const showPostFormattingDivider =
+    layoutModel.showListActionsInRow ||
+    layoutModel.showSpacingActionsInRow ||
+    (showInsertMenu && layoutModel.showInsertActionsInRow) ||
+    (showUpdateActions && layoutModel.showUpdateActionsInRow) ||
+    layoutModel.showCompactOverflow;
   const zoomLabel =
     typeof zoomLevel === "number"
       ? `${zoomLevel}%`
@@ -161,9 +181,16 @@ export function TwToolbar(props: TwToolbarProps) {
         : "Fit page";
 
   return (
-    <header className="flex h-11 shrink-0 items-center gap-1 rounded-xl border border-border/70 bg-canvas/92 px-2.5 shadow-[0_8px_20px_-18px_var(--color-shadow-strong)] backdrop-blur-sm">
+    <header
+      className={[
+        "shrink-0 rounded-xl border border-border/70 bg-canvas/92 px-2.5 shadow-[0_8px_20px_-18px_var(--color-shadow-strong)] backdrop-blur-sm",
+        isCompact
+          ? "flex min-h-11 flex-wrap items-center gap-1.5 py-2"
+          : "flex h-11 items-center gap-1",
+      ].join(" ")}
+    >
       {/* Left cluster: undo/redo + formatting */}
-      <div className="flex min-w-0 flex-1 items-center gap-0.5">
+      <div className={`flex min-w-0 flex-1 items-center gap-0.5 ${isCompact ? "flex-wrap" : ""}`}>
         <TwToolbarIconButton
           icon={Undo2}
           label="Undo"
@@ -178,7 +205,7 @@ export function TwToolbar(props: TwToolbarProps) {
         />
         <div className="mx-1 h-4 w-px bg-border" />
 
-        {showStyleSelectors ? (
+        {showStyleSelectors && layoutModel.showStyleSelectorsInRow ? (
           <>
             <ToolbarParagraphStyleSelect
               disabled={!canEdit || paragraphStyles.length === 0 || !props.onSetParagraphStyle}
@@ -262,9 +289,9 @@ export function TwToolbar(props: TwToolbarProps) {
           </>
         ) : null}
 
-        <div className="mx-1 h-4 w-px bg-border" />
+        {showPostFormattingDivider ? <div className="mx-1 h-4 w-px bg-border" /> : null}
 
-        {showListActions ? (
+        {showListActions && layoutModel.showListActionsInRow ? (
           <>
             <TwToolbarIconButton
               icon={List}
@@ -282,20 +309,23 @@ export function TwToolbar(props: TwToolbarProps) {
             />
           </>
         ) : null}
-
-        <TwToolbarIconButton
-          icon={Outdent}
-          label="Outdent"
-          disabled={!canEdit}
-          onClick={props.onOutdent}
-        />
-        <TwToolbarIconButton
-          icon={Indent}
-          label="Indent"
-          disabled={!canEdit}
-          onClick={props.onIndent}
-        />
-        {showListActions && props.activeListContext ? (
+        {layoutModel.showSpacingActionsInRow ? (
+          <>
+            <TwToolbarIconButton
+              icon={Outdent}
+              label="Outdent"
+              disabled={!canEdit}
+              onClick={props.onOutdent}
+            />
+            <TwToolbarIconButton
+              icon={Indent}
+              label="Indent"
+              disabled={!canEdit}
+              onClick={props.onIndent}
+            />
+          </>
+        ) : null}
+        {layoutModel.showListContinuationInRow ? (
           <>
             <button
               type="button"
@@ -319,7 +349,7 @@ export function TwToolbar(props: TwToolbarProps) {
             </button>
           </>
         ) : null}
-        {showInsertMenu ? (
+        {showInsertMenu && layoutModel.showInsertActionsInRow ? (
           <ToolbarInsertMenu
             disabled={!canInsertStructural}
             onInsertImage={props.onInsertImage}
@@ -328,7 +358,7 @@ export function TwToolbar(props: TwToolbarProps) {
             onInsertTable={props.onInsertTable}
           />
         ) : null}
-        {showUpdateActions ? (
+        {showUpdateActions && layoutModel.showUpdateActionsInRow ? (
           <>
             <button
               type="button"
@@ -352,6 +382,34 @@ export function TwToolbar(props: TwToolbarProps) {
             </button>
           </>
         ) : null}
+        {layoutModel.showCompactOverflow ? (
+          <ToolbarCompactOverflow
+            activeListContext={props.activeListContext}
+            canEdit={canEdit}
+            canInsertStructural={canInsertStructural}
+            formattingState={props.formattingState}
+            paragraphStyles={paragraphStyles}
+            showInsertMenu={showInsertMenu}
+            showListActions={showListActions}
+            showStyleSelectors={showStyleSelectors}
+            showUpdateActions={showUpdateActions}
+            onSetParagraphStyle={props.onSetParagraphStyle}
+            onSetFontFamily={props.onSetFontFamily}
+            onSetFontSize={props.onSetFontSize}
+            onToggleBulletedList={props.onToggleBulletedList}
+            onToggleNumberedList={props.onToggleNumberedList}
+            onOutdent={props.onOutdent}
+            onIndent={props.onIndent}
+            onRestartNumbering={props.onRestartNumbering}
+            onContinueNumbering={props.onContinueNumbering}
+            onInsertPageBreak={props.onInsertPageBreak}
+            onInsertTable={props.onInsertTable}
+            onInsertSectionBreak={props.onInsertSectionBreak}
+            onInsertImage={props.onInsertImage}
+            onUpdateFields={props.onUpdateFields}
+            onUpdateTableOfContents={props.onUpdateTableOfContents}
+          />
+        ) : null}
 
         {/* Story focus breadcrumb — visible when editing a secondary story */}
         {props.activeStory && props.activeStory.kind !== "main" ? (
@@ -372,7 +430,19 @@ export function TwToolbar(props: TwToolbarProps) {
       </div>
 
       {/* Right cluster: comment, track changes, markup, view, export */}
-      <div className="flex items-center gap-0.5">
+      <div className={`flex items-center gap-0.5 ${isCompact ? "ml-auto flex-wrap justify-end" : ""}`}>
+        {showSidebarToggle ? (
+          <>
+            <TwToolbarIconButton
+              icon={PanelRight}
+              label="Toggle sidebar"
+              active={props.isSidebarOpen ?? false}
+              onClick={props.onToggleSidebar}
+            />
+            <div className="mx-1 h-4 w-px bg-border" />
+          </>
+        ) : null}
+
         <TwToolbarIconButton
           icon={MessageSquare}
           label="Add comment"
@@ -766,6 +836,281 @@ function ToolbarFontSizeSelect(props: {
   );
 }
 
+function ToolbarCompactOverflow(props: {
+  activeListContext?: ActiveListContext | null;
+  canEdit: boolean;
+  canInsertStructural: boolean;
+  formattingState?: FormattingStateSnapshot;
+  paragraphStyles: StyleCatalogSnapshot["paragraphs"];
+  showInsertMenu: boolean;
+  showListActions: boolean;
+  showStyleSelectors: boolean;
+  showUpdateActions: boolean;
+  onSetParagraphStyle?: (styleId: string) => void;
+  onSetFontFamily?: (fontFamily: string) => void;
+  onSetFontSize?: (fontSize: number) => void;
+  onToggleBulletedList?: () => void;
+  onToggleNumberedList?: () => void;
+  onOutdent?: () => void;
+  onIndent?: () => void;
+  onRestartNumbering?: () => void;
+  onContinueNumbering?: () => void;
+  onInsertPageBreak?: () => void;
+  onInsertTable?: () => void;
+  onInsertSectionBreak?: (type: SectionBreakType) => void;
+  onInsertImage?: (options: InsertImageOptions) => void;
+  onUpdateFields?: () => void;
+  onUpdateTableOfContents?: () => void;
+}) {
+  const [open, setOpen] = React.useState(false);
+
+  async function handleImageChange(event: React.ChangeEvent<HTMLInputElement>): Promise<void> {
+    const file = event.target.files?.[0];
+    if (!file || !props.canInsertStructural || !props.onInsertImage) {
+      event.target.value = "";
+      return;
+    }
+
+    const data = new Uint8Array(await file.arrayBuffer());
+    props.onInsertImage({
+      data,
+      mimeType: file.type || "image/png",
+      altText: file.name,
+    });
+    setOpen(false);
+    event.target.value = "";
+  }
+
+  return (
+    <div className="relative">
+      <Tooltip.Root>
+        <Tooltip.Trigger asChild>
+          <button
+            type="button"
+            aria-label="More document tools"
+            aria-expanded={open}
+            onMouseDown={preserveEditorSelectionMouseDown}
+            onClick={() => setOpen((value) => !value)}
+            className={`inline-flex h-7 items-center gap-1 rounded-md border border-border bg-canvas px-2 text-xs font-medium text-primary transition-colors hover:bg-surface outline-none ${focusRingClass}`}
+          >
+            More
+            <ChevronDown className="h-3.5 w-3.5 text-tertiary" />
+          </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}>
+            More document tools
+          </Tooltip.Content>
+        </Tooltip.Portal>
+      </Tooltip.Root>
+      {open ? (
+        <div className="absolute left-0 top-9 z-50 w-[min(20rem,calc(100vw-2rem))] rounded-lg bg-canvas p-2 shadow-lg ring-1 ring-border">
+          <div className="space-y-3">
+            {props.showStyleSelectors ? (
+              <div className="space-y-2">
+                <div className="px-1 text-[10px] font-semibold uppercase tracking-[0.12em] text-tertiary">
+                  Text
+                </div>
+                <div className="grid gap-2">
+                  <ToolbarParagraphStyleSelect
+                    disabled={!props.canEdit || props.paragraphStyles.length === 0 || !props.onSetParagraphStyle}
+                    styles={props.paragraphStyles}
+                    value={props.formattingState?.paragraphStyleId}
+                    onValueChange={(styleId) => {
+                      props.onSetParagraphStyle?.(styleId);
+                      setOpen(false);
+                    }}
+                  />
+                  <div className="grid grid-cols-2 gap-2">
+                    <ToolbarFontFamilySelect
+                      disabled={!props.canEdit || !props.onSetFontFamily}
+                      value={props.formattingState?.fontFamily}
+                      onValueChange={(fontFamily) => {
+                        props.onSetFontFamily?.(fontFamily);
+                        setOpen(false);
+                      }}
+                    />
+                    <ToolbarFontSizeSelect
+                      disabled={!props.canEdit || !props.onSetFontSize}
+                      value={props.formattingState?.fontSize}
+                      onValueChange={(fontSize) => {
+                        props.onSetFontSize?.(fontSize);
+                        setOpen(false);
+                      }}
+                    />
+                  </div>
+                </div>
+              </div>
+            ) : null}
+
+            {props.showListActions ? (
+              <div className="space-y-1">
+                <div className="px-1 text-[10px] font-semibold uppercase tracking-[0.12em] text-tertiary">
+                  Structure
+                </div>
+                <ToolbarMenuButton
+                  ariaLabel="Bulleted list"
+                  disabled={!props.canEdit || !props.onToggleBulletedList}
+                  icon={<List className="h-3.5 w-3.5" />}
+                  label="Bulleted list"
+                  onClick={() => {
+                    props.onToggleBulletedList?.();
+                    setOpen(false);
+                  }}
+                />
+                <ToolbarMenuButton
+                  ariaLabel="Numbered list"
+                  disabled={!props.canEdit || !props.onToggleNumberedList}
+                  icon={<Rows3 className="h-3.5 w-3.5" />}
+                  label="Numbered list"
+                  onClick={() => {
+                    props.onToggleNumberedList?.();
+                    setOpen(false);
+                  }}
+                />
+              </div>
+            ) : null}
+
+            <div className="space-y-1">
+              <div className="px-1 text-[10px] font-semibold uppercase tracking-[0.12em] text-tertiary">
+                Paragraph
+              </div>
+              <ToolbarMenuButton
+                ariaLabel="Outdent"
+                disabled={!props.canEdit || !props.onOutdent}
+                icon={<Outdent className="h-3.5 w-3.5" />}
+                label="Outdent"
+                onClick={() => {
+                  props.onOutdent?.();
+                  setOpen(false);
+                }}
+              />
+              <ToolbarMenuButton
+                ariaLabel="Indent"
+                disabled={!props.canEdit || !props.onIndent}
+                icon={<Indent className="h-3.5 w-3.5" />}
+                label="Indent"
+                onClick={() => {
+                  props.onIndent?.();
+                  setOpen(false);
+                }}
+              />
+              {props.activeListContext ? (
+                <>
+                  <ToolbarMenuButton
+                    ariaLabel="Restart numbering"
+                    disabled={!props.canEdit || !props.onRestartNumbering}
+                    icon={<Rows3 className="h-3.5 w-3.5" />}
+                    label="Restart numbering"
+                    onClick={() => {
+                      props.onRestartNumbering?.();
+                      setOpen(false);
+                    }}
+                  />
+                  <ToolbarMenuButton
+                    ariaLabel="Continue numbering"
+                    disabled={!props.canEdit || !props.onContinueNumbering}
+                    icon={<Rows3 className="h-3.5 w-3.5" />}
+                    label="Continue numbering"
+                    onClick={() => {
+                      props.onContinueNumbering?.();
+                      setOpen(false);
+                    }}
+                  />
+                </>
+              ) : null}
+            </div>
+
+            {props.showInsertMenu ? (
+              <div className="space-y-1">
+                <div className="px-1 text-[10px] font-semibold uppercase tracking-[0.12em] text-tertiary">
+                  Insert
+                </div>
+                <ToolbarMenuButton
+                  ariaLabel="Insert page break"
+                  disabled={!props.canInsertStructural || !props.onInsertPageBreak}
+                  icon={<Minus className="h-3.5 w-3.5" />}
+                  label="Page break"
+                  onClick={() => {
+                    props.onInsertPageBreak?.();
+                    setOpen(false);
+                  }}
+                />
+                <ToolbarMenuButton
+                  ariaLabel="Insert table"
+                  disabled={!props.canInsertStructural || !props.onInsertTable}
+                  icon={<Rows3 className="h-3.5 w-3.5" />}
+                  label="Table"
+                  onClick={() => {
+                    props.onInsertTable?.();
+                    setOpen(false);
+                  }}
+                />
+                <label
+                  className={`flex h-8 cursor-pointer items-center gap-2 rounded-md px-2 text-left text-xs font-medium text-primary transition-colors hover:bg-surface ${
+                    !props.canInsertStructural || !props.onInsertImage ? "pointer-events-none opacity-40" : ""
+                  }`}
+                >
+                  <ImagePlus className="h-3.5 w-3.5 text-secondary" />
+                  <span>Image</span>
+                  <input
+                    accept="image/png,image/jpeg,image/gif"
+                    aria-label="Insert image"
+                    className="sr-only"
+                    disabled={!props.canInsertStructural || !props.onInsertImage}
+                    type="file"
+                    onChange={(event) => {
+                      void handleImageChange(event);
+                    }}
+                  />
+                </label>
+                <ToolbarMenuButton
+                  ariaLabel="Insert next-page section break"
+                  disabled={!props.canInsertStructural || !props.onInsertSectionBreak}
+                  icon={<FileText className="h-3.5 w-3.5" />}
+                  label="Next-page section break"
+                  onClick={() => {
+                    props.onInsertSectionBreak?.("nextPage");
+                    setOpen(false);
+                  }}
+                />
+              </div>
+            ) : null}
+
+            {props.showUpdateActions ? (
+              <div className="space-y-1">
+                <div className="px-1 text-[10px] font-semibold uppercase tracking-[0.12em] text-tertiary">
+                  Refresh
+                </div>
+                <ToolbarMenuButton
+                  ariaLabel="Refresh fields"
+                  disabled={!props.canEdit || !props.onUpdateFields}
+                  icon={<RotateCcw className="h-3.5 w-3.5" />}
+                  label="Fields"
+                  onClick={() => {
+                    props.onUpdateFields?.();
+                    setOpen(false);
+                  }}
+                />
+                <ToolbarMenuButton
+                  ariaLabel="Refresh table of contents"
+                  disabled={!props.canEdit || !props.onUpdateTableOfContents}
+                  icon={<RotateCcw className="h-3.5 w-3.5" />}
+                  label="Table of contents"
+                  onClick={() => {
+                    props.onUpdateTableOfContents?.();
+                    setOpen(false);
+                  }}
+                />
+              </div>
+            ) : null}
+          </div>
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
 function ToolbarFormattingOverflow(props: {
   disabled: boolean;
   formattingState?: FormattingStateSnapshot;