finish modernizing timetravel implementation

Author: williamstein

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

@@ -202,7 +202,7 @@ export function TimeTravel(props: Props) {
       <Document
         actions={props.actions}
         id={props.id}
-        doc={doc.to_str()}
+        value={doc.to_str()}
         path={doc.value == null ? "a.js" : docpath}
         project_id={props.project_id}
         font_size={props.font_size}
@@ -394,9 +394,7 @@ export function TimeTravel(props: Props) {
         id={props.id}
         actions={props.actions}
         disabled={versions.size <= 1}
-        changes_mode={
-          props.desc != null && props.desc.get("changes_mode", false)
-        }
+        changes_mode={props.desc?.get("changes_mode", false)}
       />
     );
   };
@@ -419,18 +417,19 @@ export function TimeTravel(props: Props) {
         }}
       >
         {renderChangesMode()}
-        {HAS_SPECIAL_VIEWER.has(docext ?? "") && (
-          <Tooltip title="Display underlying file as text">
-            <Checkbox
-              defaultChecked={!!props.desc.get("text_mode")}
-              onChange={(e) =>
-                props.actions.setTextMode(props.id, e.target.checked)
-              }
-            >
-              Text
-            </Checkbox>
-          </Tooltip>
-        )}
+        {!props.desc?.get("changes_mode", false) &&
+          HAS_SPECIAL_VIEWER.has(docext ?? "") && (
+            <Tooltip title="Display underlying file as text">
+              <Checkbox
+                defaultChecked={!!props.desc.get("text_mode")}
+                onChange={(e) =>
+                  props.actions.setTextMode(props.id, e.target.checked)
+                }
+              >
+                Text
+              </Checkbox>
+            </Tooltip>
+          )}
         <Tooltip title="Show Git history instead of CoCalc edit history">
           <Checkbox
             defaultChecked={!!props.desc.get("git_mode")}

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

@@ -3,18 +3,18 @@
  *  License: MS-RSL – see LICENSE.md for details
  */
 
-import { Rendered, Component } from "../../app-framework";
-import { TimeAgo } from "../../components";
+import { TimeAgo } from "@cocalc/frontend/components";
 
 interface Props {
   date: Date;
   number: number;
   max: number;
 }
 
-export class Version extends Component<Props> {
-  private render_time(): Rendered {
-    return (
+export function Version({ date, number, max }: Props) {
+  if (max == 0) return <span />;
+  return (
+    <span>
       <span
         style={{
           fontWeight: "bold",
@@ -23,26 +23,14 @@ export class Version extends Component<Props> {
           whiteSpace: "nowrap",
         }}
       >
-        <TimeAgo date={this.props.date} />
+        <TimeAgo date={date} />
       </span>
-    );
-  }
-  private render_number(): Rendered {
-    return (
+      ,{" "}
       <span style={{ whiteSpace: "nowrap" }}>
-        revision {this.props.number} (of {this.props.max})
-      </span>
-    );
-  }
-
-  public render(): Rendered {
-    if (this.props.max == 0) return <span />;
-    return (
-      <span>
-        {this.render_time()}, {this.render_number()}
+        revision {number} (of {max})
       </span>
-    );
-  }
+    </span>
+  );
 }
 
 interface RangeProps {
@@ -51,14 +39,13 @@ interface RangeProps {
   max: number;
 }
 
-export class VersionRange extends Component<RangeProps> {
-  public render(): Rendered {
-    if (this.props.max == 0) return <span />;
-    return (
-      <span style={{ whiteSpace: "nowrap" }}>
-        Versions {this.props.version0 + 1} to {this.props.version1 + 1} (of{" "}
-        {this.props.max})
-      </span>
-    );
+export function VersionRange({ version0, version1, max }: RangeProps) {
+  if (max == 0) {
+    return <span />;
   }
+  return (
+    <span style={{ whiteSpace: "nowrap" }}>
+      Versions {version0 + 1} to {version1 + 1} (of {max})
+    </span>
+  );
 }