Sync QWord statusbar view modes

src/features/qword/QWord.tsx

@@ -1,4 +1,4 @@
-import { useLayoutEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useLayoutEffect, useMemo, useRef, useState } from "react";
 import type { CSSProperties, MouseEvent } from "react";
 import {
   AlignCenter,
@@ -43,8 +43,10 @@ import { useQOfficeCommand } from "../../hooks/useQOfficeCommand";
 interface QWordProps {
   document: WordDocument;
   zoom?: number;
+  viewMode?: WordViewMode;
   onChange: (document: WordDocument) => void;
   onStatusChange?: (status: QWordStatus) => void;
+  onViewModeChange?: (viewMode: WordViewMode) => void;
 }
 
 interface TableCellLocation {
@@ -153,7 +155,7 @@ const styleGalleryOptions = [
   { value: "blockquote", label: "Цитата" }
 ];
 type WordRibbonTabId = "file" | "home" | "insert" | "design" | "layout" | "references" | "mailings" | "review" | "view" | "help";
-type WordViewMode = "print" | "read" | "web";
+export type WordViewMode = "print" | "read" | "web";
 
 const wordRibbonTabs: Array<{ id: WordRibbonTabId; label: string }> = [
   { id: "file", label: "Файл" },
@@ -256,7 +258,7 @@ export function qwordCurrentPageFromViewport(input: { stageTop: number; paperTop
   return Math.min(pageCount, Math.max(1, Math.floor(visiblePaperOffset / visualPageHeight) + 1));
 }
 
-export function QWord({ document, zoom = 100, onChange, onStatusChange }: QWordProps) {
+export function QWord({ document, zoom = 100, viewMode, onChange, onStatusChange, onViewModeChange }: QWordProps) {
   const stageRef = useRef<HTMLElement>(null);
   const editorRef = useRef<HTMLDivElement>(null);
   const activeTableCellRef = useRef<HTMLTableCellElement | null>(null);
@@ -265,7 +267,7 @@ export function QWord({ document, zoom = 100, onChange, onStatusChange }: QWordP
   const fileInputRef = useRef<HTMLInputElement>(null);
   const imageInputRef = useRef<HTMLInputElement>(null);
   const [activeRibbonTab, setActiveRibbonTab] = useState<WordRibbonTabId>("home");
-  const [viewMode, setViewMode] = useState<WordViewMode>("print");
+  const [internalViewMode, setInternalViewMode] = useState<WordViewMode>("print");
   const [tableRowCount, setTableRowCount] = useState(3);
   const [tableColumnCount, setTableColumnCount] = useState(3);
   const [pageView, setPageView] = useState({ count: 1, current: 1, height: defaultPageViewHeight });
@@ -278,7 +280,16 @@ export function QWord({ document, zoom = 100, onChange, onStatusChange }: QWordP
     paddingBottom: pageView.count > 1 ? `${(pageView.count - 1) * defaultPageGap}px` : undefined
   } as CSSProperties;
   const activeRibbonTabLabel = wordRibbonTabs.find((tab) => tab.id === activeRibbonTab)?.label ?? "Главная";
-  const stageClassName = ["document-stage", `qword-view-${viewMode}`].join(" ");
+  const activeViewMode = viewMode ?? internalViewMode;
+  const stageClassName = ["document-stage", `qword-view-${activeViewMode}`].join(" ");
+
+  const changeViewMode = useCallback(
+    (nextViewMode: WordViewMode) => {
+      setInternalViewMode(nextViewMode);
+      onViewModeChange?.(nextViewMode);
+    },
+    [onViewModeChange]
+  );
 
   useLayoutEffect(() => {
     const editor = editorRef.current;
@@ -970,11 +981,11 @@ export function QWord({ document, zoom = 100, onChange, onStatusChange }: QWordP
                 {wordViewModes.map((mode) => (
                   <button
                     key={mode.id}
-                    className={`compact-command${viewMode === mode.id ? " is-active" : ""}`}
+                    className={`compact-command${activeViewMode === mode.id ? " is-active" : ""}`}
                     type="button"
                     aria-label={mode.label}
-                    aria-pressed={viewMode === mode.id}
-                    onClick={() => setViewMode(mode.id)}
+                    aria-pressed={activeViewMode === mode.id}
+                    onClick={() => changeViewMode(mode.id)}
                   >
                     <FileText size={16} />
                     {mode.label}