Add QWord Word-style status bar

src/features/qword/QWord.tsx

@@ -1,4 +1,5 @@
 import { useLayoutEffect, useMemo, useRef, useState } from "react";
+import type { CSSProperties } from "react";
 import {
   AlignCenter,
   AlignJustify,
@@ -38,7 +39,14 @@ import { useQOfficeCommand } from "../../hooks/useQOfficeCommand";
 
 interface QWordProps {
   document: WordDocument;
+  zoom?: number;
   onChange: (document: WordDocument) => void;
+  onStatusChange?: (status: QWordStatus) => void;
+}
+
+export interface QWordStatus {
+  pageCount: number;
+  wordCount: number;
 }
 
 type PageSearchWindow = Window &
@@ -147,12 +155,13 @@ function pageHeightFromStyles(element: HTMLElement) {
   return Number.isFinite(pageHeight) && pageHeight > 0 ? pageHeight : defaultPageViewHeight;
 }
 
-export function QWord({ document, onChange }: QWordProps) {
+export function QWord({ document, zoom = 100, onChange, onStatusChange }: QWordProps) {
   const editorRef = useRef<HTMLDivElement>(null);
   const fileInputRef = useRef<HTMLInputElement>(null);
   const imageInputRef = useRef<HTMLInputElement>(null);
   const [pageView, setPageView] = useState({ count: 1, height: defaultPageViewHeight });
   const wordCount = useMemo(() => countWords(document.html), [document.html]);
+  const stageStyle = { "--qword-zoom": String(zoom / 100) } as CSSProperties;
 
   function refreshPageView() {
     window.requestAnimationFrame(() => {
@@ -177,7 +186,11 @@ export function QWord({ document, onChange }: QWordProps) {
     const observer = new ResizeObserver(refreshPageView);
     observer.observe(editor);
     return () => observer.disconnect();
-  }, [document.html]);
+  }, [document.html, zoom]);
+
+  useLayoutEffect(() => {
+    onStatusChange?.({ pageCount: pageView.count, wordCount });
+  }, [onStatusChange, pageView.count, wordCount]);
 
   function runCommand(command: string, value?: string) {
     editorRef.current?.focus();
@@ -358,7 +371,7 @@ export function QWord({ document, onChange }: QWordProps) {
 
   return (
     <div className="editor-layout qword-layout">
-      <section className="document-stage" aria-label="Редактор QWord">
+      <section className="document-stage" style={stageStyle} aria-label="Редактор QWord">
         <div className="module-toolbar word-module-toolbar">
           <input
             ref={fileInputRef}
@@ -563,9 +576,6 @@ export function QWord({ document, onChange }: QWordProps) {
                 <Replace size={16} />
                 Заменить
               </button>
-              <span className="toolbar-status">
-                Страниц: {pageView.count} · Слов: {wordCount}
-              </span>
               <span className="word-ribbon-title">Редактирование</span>
             </section>
           </div>