fix #7739 -- timetravel with rendered markdown doesn't respect font size selection in menu

Author: williamstein

src/packages/frontend/frame-editors/frame-tree/hooks.ts

@@ -2,7 +2,7 @@
  *  This file is part of CoCalc: Copyright © 2020 Sagemath, Inc.
  *  License: MS-RSL – see LICENSE.md for details
  */
-import { React, redux } from "../../app-framework";
+import { redux } from "../../app-framework";
 import { DEFAULT_FONT_SIZE } from "@cocalc/util/db-schema/defaults";
 
 // this doesn't react to font size changes. maybe at some point we want to...
@@ -25,17 +25,10 @@ export function baseFontSize() {
 //    transformOrigin: "center 0", // or "0 0"
 //  }
 export function use_font_size_scaling(font_size: number): number {
-  const [font_size_prev, set_font_size_prev] =
-    React.useState<number>(DEFAULT_FONT_SIZE);
-  const [scaling, set_scaling] = React.useState<number>(1);
-
-  if (font_size != font_size_prev) {
-    set_font_size_prev(font_size);
-  } else {
-    return scaling;
-  }
+  return getScale(font_size);
+}
 
+export function getScale(fontSize: number): number {
   const base = baseFontSize();
-  set_scaling((font_size != null ? font_size : base) / base);
-  return scaling;
+  return (fontSize != null ? fontSize : base) / base;
 }

src/packages/frontend/frame-editors/markdown-editor/editor.ts

@@ -31,6 +31,7 @@ const EDITOR_SPEC = {
       //"print",
       "decrease_font_size",
       "increase_font_size",
+      "set_zoom",
       "save",
       "time_travel",
       "show_table_of_contents",
@@ -51,6 +52,7 @@ const EDITOR_SPEC = {
       "readonly_view",
       "decrease_font_size",
       "increase_font_size",
+      "set_zoom",
       "sync",
       "show_table_of_contents",
     ]),
@@ -105,6 +107,7 @@ const EDITOR_SPEC = {
       "print",
       "decrease_font_size",
       "increase_font_size",
+      "set_zoom",
       "show_table_of_contents",
       "time_travel",
       "undo", // need these because button bars at top let you do something even in rendered only view.

src/packages/frontend/frame-editors/time-travel-editor/viewer.tsx

@@ -10,6 +10,7 @@ import { HistoryViewer as JupyterHistoryViewer } from "../../jupyter/history-vie
 import { SagewsCodemirror } from "./sagews-codemirror";
 import Whiteboard from "@cocalc/frontend/frame-editors/whiteboard-editor/time-travel";
 import { isObjectDoc } from "./view-document";
+import { getScale } from "@cocalc/frontend/frame-editors/frame-tree/hooks";
 
 export function Viewer({
   ext,
@@ -58,9 +59,13 @@ export function Viewer({
     case "sagews":
       return <SagewsCodemirror {...opts} />;
     case "md":
+      const scale = getScale(font_size);
       return (
         <div style={{ overflow: "auto", padding: "50px 70px" }}>
-          <StaticMarkdown value={doc.to_str()} />
+          <StaticMarkdown
+            value={doc.to_str()}
+            style={{ fontSize: `${100 * scale}%` }}
+          />
         </div>
       );
     case "board":