Merge pull request #8612 from sagemathinc/latex-output-fixes2

latex output fixes round 2

Author: williamstein

src/packages/frontend/account/editor-settings/font-size.tsx

@@ -5,6 +5,7 @@
 
 import { InputNumber } from "antd";
 import { LabeledRow } from "@cocalc/frontend/components";
+import { DEFAULT_FONT_SIZE } from "@cocalc/util/consts/ui";
 import { useIntl } from "react-intl";
 
 interface Props {
@@ -24,7 +25,7 @@ export function EditorSettingsFontSize(props: Props) {
       className="cc-account-prefs-font-size"
     >
       <InputNumber
-        onChange={(n) => props.on_change("font_size", n ?? 14)}
+        onChange={(n) => props.on_change("font_size", n ?? DEFAULT_FONT_SIZE)}
         min={5}
         max={32}
         value={props.font_size}

src/packages/frontend/editors/slate/editable-markdown.tsx

@@ -28,6 +28,7 @@ import { EditorFunctions } from "@cocalc/frontend/editors/markdown-input/multimo
 import { SAVE_DEBOUNCE_MS } from "@cocalc/frontend/frame-editors/code-editor/const";
 import { useFrameContext } from "@cocalc/frontend/frame-editors/frame-tree/frame-context";
 import { Path } from "@cocalc/frontend/frame-editors/frame-tree/path";
+import { DEFAULT_FONT_SIZE } from "@cocalc/util/consts/ui";
 import { EditorState } from "@cocalc/frontend/frame-editors/frame-tree/types";
 import { markdown_to_html } from "@cocalc/frontend/markdown";
 import Fragment, { FragmentId } from "@cocalc/frontend/misc/fragment-id";
@@ -171,7 +172,7 @@ export const EditableMarkdown: React.FC<Props> = React.memo((props: Props) => {
   const isMountedRef = useIsMountedRef();
   const id = id0 ?? "";
   const actions = actions0 ?? {};
-  const font_size = font_size0 ?? desc?.get("font_size") ?? 14; // so possible to use without specifying this.  TODO: should be from account settings
+  const font_size = font_size0 ?? desc?.get("font_size") ?? DEFAULT_FONT_SIZE; // so possible to use without specifying this.  TODO: should be from account settings
   const [change, setChange] = useState<number>(0);
 
   const editor = useMemo(() => {

src/packages/frontend/frame-editors/latex-editor/output-files.tsx

@@ -63,7 +63,7 @@ export function OutputFiles({
       path: filePath,
       displayPath,
       isMain: false,
-      summary: fileSummaries[filePath] ?? "Loading...",
+      summary: fileSummaries[filePath] ?? "Summary not available...",
     };
   });
 

src/packages/frontend/frame-editors/latex-editor/output.tsx

@@ -40,6 +40,7 @@ import {
 import { EditorState } from "@cocalc/frontend/frame-editors/frame-tree/types";
 import { project_api } from "@cocalc/frontend/frame-editors/generic/client";
 import { editor, labels } from "@cocalc/frontend/i18n";
+import { DEFAULT_FONT_SIZE } from "@cocalc/util/consts/ui";
 
 import { TITLE_BAR_BORDER } from "../frame-tree/style";
 import { Actions } from "./actions";
@@ -253,8 +254,8 @@ export function Output(props: OutputProps) {
   // Handle zoom changes from pinch-to-zoom or wheel gestures
   const handleZoomChange = useCallback(
     (data: Data) => {
-      // Convert fontSize to zoom scale (fontSize 14 = 1.0 zoom)
-      const newZoom = data.fontSize / 14;
+      // Convert fontSize to zoom scale (DEFAULT_FONT_SIZE = 1.0 zoom)
+      const newZoom = data.fontSize / DEFAULT_FONT_SIZE;
       const local_view_state = actions.store.get("local_view_state");
       actions.setState({
         local_view_state: local_view_state.setIn([id, "pdf_zoom"], newZoom),
@@ -369,11 +370,8 @@ export function Output(props: OutputProps) {
               const autoSyncInProgress =
                 actions.store.get("autoSyncInProgress");
               if (autoSyncInProgress) {
-                // Debounce the flag clearing to avoid clearing too early during scrolling
-                clearTimeout((window as any).__autoSyncClearTimeout);
-                (window as any).__autoSyncClearTimeout = setTimeout(() => {
-                  actions.setState({ autoSyncInProgress: false });
-                }, 500); // Wait longer to ensure scrolling has stabilized
+                // Clear immediately to allow next forward sync without delay
+                actions.setState({ autoSyncInProgress: false });
               }
             }}
             onPageDimensions={setPageDimensions}

src/packages/frontend/frame-editors/latex-editor/pdfjs.tsx

@@ -35,6 +35,7 @@ import usePinchToZoom, {
 } from "@cocalc/frontend/frame-editors/frame-tree/pinch-to-zoom";
 import { EditorState } from "@cocalc/frontend/frame-editors/frame-tree/types";
 import { list_alternatives, seconds_ago } from "@cocalc/util/misc";
+import { DEFAULT_FONT_SIZE } from "@cocalc/util/consts/ui";
 import { COLORS } from "@cocalc/util/theme";
 import { Actions, Actions as LatexEditorActions } from "./actions";
 import { dblclick } from "./mouse-click";
@@ -248,7 +249,7 @@ export function PDFJS({
     if (evt.key == "0" && (evt.metaKey || evt.ctrlKey)) {
       actions.set_font_size(
         id,
-        redux.getStore("account").get("font_size") ?? 14,
+        redux.getStore("account").get("font_size") ?? DEFAULT_FONT_SIZE,
       );
       return;
     }
@@ -440,7 +441,8 @@ export function PDFJS({
 
     // Use onZoom callback if available (new zoom system), otherwise fall back to font_size
     if (onZoom) {
-      const fontSize = getFontSize(scale);
+      // For zoom-to-fit, always use DEFAULT_FONT_SIZE as base to avoid account font size dependency
+      const fontSize = scale * DEFAULT_FONT_SIZE;
       onZoom({ fontSize });
     } else {
       actions.set_font_size(id, getFontSize(scale));
@@ -464,7 +466,8 @@ export function PDFJS({
 
     // Use onZoom callback if available (new zoom system), otherwise fall back to font_size
     if (onZoom) {
-      const fontSize = getFontSize(scale);
+      // For zoom-to-fit, always use DEFAULT_FONT_SIZE as base to avoid account font size dependency
+      const fontSize = scale * DEFAULT_FONT_SIZE;
       onZoom({ fontSize });
     } else {
       actions.set_font_size(id, getFontSize(scale));
@@ -840,11 +843,16 @@ export function PDFJS({
     if (zoom !== undefined) {
       return zoom;
     }
-    return font_size / (redux.getStore("account").get("font_size") ?? 14);
+    return (
+      font_size /
+      (redux.getStore("account").get("font_size") ?? DEFAULT_FONT_SIZE)
+    );
   }, [zoom, font_size]);
 
   function getFontSize(scale: number): number {
-    return (redux.getStore("account").get("font_size") ?? 14) * scale;
+    return (
+      (redux.getStore("account").get("font_size") ?? DEFAULT_FONT_SIZE) * scale
+    );
   }
 
   function renderOtherViewers() {

src/packages/frontend/frame-editors/whiteboard-editor/overview.tsx

@@ -12,6 +12,7 @@ import { VirtuosoGrid } from "react-virtuoso";
 
 import { useEditorRedux } from "@cocalc/frontend/app-framework";
 import { Loading } from "@cocalc/frontend/components";
+import { DEFAULT_FONT_SIZE } from "@cocalc/util/consts/ui";
 import { State, elementsList } from "./actions";
 import DeletePage from "./delete-page";
 import { useFrameContext } from "./hooks";
@@ -21,7 +22,7 @@ import { Overview as OnePage } from "./tools/navigation";
 export default function Overview() {
   const { actions, id: frameId, project_id, path, desc } = useFrameContext();
   const useEditor = useEditorRedux<State>({ project_id, path });
-  const size = 15 * (desc?.get("font_size") ?? 14);
+  const size = 15 * (desc?.get("font_size") ?? DEFAULT_FONT_SIZE);
   const isLoaded = useEditor("is_loaded");
   const pagesMap = useEditor("pages");
   const elementsMap = useEditor("elements");

src/packages/frontend/frame-editors/x11-editor/x11.tsx

@@ -23,6 +23,7 @@ import {
 } from "@cocalc/frontend/app-framework";
 import { Loading } from "@cocalc/frontend/components";
 import { retry_until_success } from "@cocalc/util/async-utils";
+import { DEFAULT_FONT_SIZE } from "@cocalc/util/consts/ui";
 import { cmp } from "@cocalc/util/misc";
 import { Actions } from "./actions";
 import { TAB_BAR_GREY } from "./theme";
@@ -56,7 +57,8 @@ export function X11({
   const windowRef = useRef<HTMLDivElement>(null as any);
   const focusRef = useRef<HTMLTextAreaElement>(null as any);
 
-  const default_font_size = useTypedRedux("account", "font_size") ?? 14;
+  const default_font_size =
+    useTypedRedux("account", "font_size") ?? DEFAULT_FONT_SIZE;
   const windows: Map<string, any> = useRedux(name, "windows");
   const x11_is_idle: boolean = useRedux(name, "x11_is_idle");
   const disabled: boolean = useRedux(name, "disabled");

src/packages/frontend/jupyter/history-viewer.tsx

@@ -11,6 +11,7 @@ import { fromJS, List, Map } from "immutable";
 import { redux, useTypedRedux } from "@cocalc/frontend/app-framework";
 import { ErrorDisplay } from "@cocalc/frontend/components";
 import * as cell_utils from "@cocalc/jupyter/util/cell-utils";
+import { DEFAULT_FONT_SIZE } from "@cocalc/util/consts/ui";
 import { path_split } from "@cocalc/util/misc";
 import { CellList } from "./cell-list";
 import { cm_options } from "./cm_options";
@@ -30,7 +31,7 @@ function get_cells(doc): { cells: Map<string, any>; cell_list: List<string> } {
 
 export function HistoryViewer({ project_id, path, doc, font_size }) {
   const default_font_size =
-    font_size ?? useTypedRedux("account", "font_size") ?? 14;
+    font_size ?? useTypedRedux("account", "font_size") ?? DEFAULT_FONT_SIZE;
   const { head: directory } = path_split(path);
   const { cells, cell_list } = get_cells(doc);
 

src/packages/util/consts/ui.ts

@@ -29,5 +29,7 @@ export const DOC_AI = "https://doc.cocalc.com/ai.html";
 // anywhere in our frontend.
 export const R_IDE = "R IDE";
 
+// Default font size for account settings and UI elements
+export const DEFAULT_FONT_SIZE = 14;
 // Icon unicode character for dark mode toggle (◑ - circle with right half black)
 export const DARK_MODE_ICON = 0x25d1;