Merge pull request #8347 from sagemathinc/chat-fix-fontSize-typing

frontend/frame-editor: add typing info to instantiated FrameTreeLeaf

Author: williamstein

src/packages/frontend/account/editor-settings/color-schemes.tsx

@@ -4,13 +4,14 @@
  */
 
 import { useIntl } from "react-intl";
-import { Map } from "immutable";
+
+import { Button } from "@cocalc/frontend/antd-bootstrap";
 import { LabeledRow, SelectorInput } from "@cocalc/frontend/components";
-import { CodeMirrorStatic } from "@cocalc/frontend/jupyter/codemirror-static";
 import { cm_options } from "@cocalc/frontend/frame-editors/codemirror/cm-options";
-import { Button } from "@cocalc/frontend/antd-bootstrap";
+import { CodeMirrorStatic } from "@cocalc/frontend/jupyter/codemirror-static";
 import { AsyncComponent } from "@cocalc/frontend/misc/async-component";
 import { EDITOR_COLOR_SCHEMES } from "@cocalc/util/db-schema/accounts";
+import { AccountState } from "../types";
 
 interface Props {
   theme: string;
@@ -71,7 +72,10 @@ def is_prime_lucas_lehmer(p):
 // bundle.  This probably doesn't work so well yet though.
 const CodeMirrorPreview = AsyncComponent(async () => {
   await import("@cocalc/frontend/codemirror/init");
-  return (props: { editor_settings: Map<string, any>; font_size?: number }) => {
+  return (props: {
+    editor_settings: AccountState["editor_settings"];
+    font_size?: number;
+  }) => {
     // Ensure that we load all the codemirror plugins, modes, etc., so that
     // we can show the codemirror preview of the current theme, fonts, etc.
     import("@cocalc/frontend/codemirror/init");

src/packages/frontend/account/types.ts

@@ -36,6 +36,9 @@ export interface AccountState {
   editor_settings: TypedMap<{
     jupyter_classic?: boolean;
     jupyter?: { kernel: string };
+    theme?: string;
+    physical_keyboard?: string;
+    keyboard_variant?: string;
   }>;
   font_size: number;
   other_settings: TypedMap<{

src/packages/frontend/chat/chatroom.tsx

@@ -20,7 +20,7 @@ import { Icon, Loading } from "@cocalc/frontend/components";
 import StaticMarkdown from "@cocalc/frontend/editors/slate/static-markdown";
 import { FrameContext } from "@cocalc/frontend/frame-editors/frame-tree/frame-context";
 import { hoursToTimeIntervalHuman } from "@cocalc/util/misc";
-import type { ChatActions } from "./actions";
+import { EditorComponentProps } from "../frame-editors/frame-tree/types";
 import { ChatLog } from "./chat-log";
 import Filter from "./filter";
 import { FoldAllThreads } from "./fold-threads";
@@ -65,23 +65,14 @@ const CHAT_LOG_STYLE: React.CSSProperties = {
   position: "relative",
 } as const;
 
-interface Props {
-  actions: ChatActions;
-  project_id: string;
-  path: string;
-  is_visible?: boolean;
-  font_size: number;
-  desc?;
-}
-
 export function ChatRoom({
   actions,
   project_id,
   path,
   is_visible,
   font_size,
   desc,
-}: Props) {
+}: EditorComponentProps) {
   const useEditor = useEditorRedux<ChatState>({ project_id, path });
   const [input, setInput] = useState("");
   const search = desc?.get("data-search") ?? "";

src/packages/frontend/chat/side-chat.tsx

@@ -1,7 +1,8 @@
 import { Button, Flex, Space, Tooltip } from "antd";
-import { CSSProperties, useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 
 import {
+  CSS,
   redux,
   useActions,
   useRedux,
@@ -26,7 +27,7 @@ import VideoChatButton from "./video/launch-button";
 interface Props {
   project_id: string;
   path: string;
-  style?: CSSProperties;
+  style?: CSS;
   fontSize?: number;
   actions?: ChatActions;
   desc?;

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

@@ -11,7 +11,7 @@ import { createElement } from "react";
 
 import { ChatRoom } from "@cocalc/frontend/chat/chatroom";
 import { createEditor } from "@cocalc/frontend/frame-editors/frame-tree/editor";
-import type { EditorDescription } from "@cocalc/frontend/frame-editors/frame-tree/types";
+import type { EditorComponentProps, EditorDescription } from "@cocalc/frontend/frame-editors/frame-tree/types";
 import { terminal } from "@cocalc/frontend/frame-editors/terminal-editor/editor";
 import { time_travel } from "@cocalc/frontend/frame-editors/time-travel-editor/editor";
 import { set } from "@cocalc/util/misc";
@@ -22,7 +22,7 @@ const chatroom: EditorDescription = {
   short: "Chatroom",
   name: "Chatroom",
   icon: "comment",
-  component: (props) => {
+  component: (props: EditorComponentProps) => {
     const actions = props.actions.getChatActions(props.id);
     return createElement(ChatRoom, {
       ...props,

src/packages/frontend/frame-editors/code-editor/codemirror-editor.tsx

@@ -12,62 +12,64 @@ trigger actions when certain props change. This manages the state of a single
 codemirror editor instance mainly for use in a frame tree.
 */
 
-import { SAVE_DEBOUNCE_MS } from "./const";
-import { Map, Set } from "immutable";
 import * as CodeMirror from "codemirror";
+import { Map, Set } from "immutable";
+
 import {
+  CSS,
   React,
   ReactDOM,
   Rendered,
-  CSS,
   useEffect,
   useIsMountedRef,
   useRef,
   useState,
-} from "../../app-framework";
-import { debounce, throttle, isEqual } from "lodash";
+} from "@cocalc/frontend/app-framework";
+import { initFold, saveFold } from "@cocalc/frontend/codemirror/util";
 import { Cursors } from "@cocalc/frontend/jupyter/cursors";
+import { debounce, isEqual, throttle } from "lodash";
 import { cm_options } from "../codemirror/cm-options";
-import { init_style_hacks } from "../codemirror/util";
 import { get_state, set_state } from "../codemirror/codemirror-state";
-import { has_doc, set_doc, get_linked_doc } from "./doc";
-import { GutterMarkers } from "./codemirror-gutter-markers";
-import { Actions } from "./actions";
-import { EditorState } from "../frame-tree/types";
+import { init_style_hacks } from "../codemirror/util";
 import { Path } from "../frame-tree/path";
-import { initFold, saveFold } from "@cocalc/frontend/codemirror/util";
+import { EditorState } from "../frame-tree/types";
+import { Actions } from "./actions";
+import { GutterMarkers } from "./codemirror-gutter-markers";
+import { SAVE_DEBOUNCE_MS } from "./const";
+import { get_linked_doc, has_doc, set_doc } from "./doc";
+import { AccountState } from "../../account/types";
 
-const STYLE = {
+const STYLE: CSS = {
   width: "100%",
   overflow: "auto",
-  marginbottom: "1ex",
-  minheight: "2em",
+  // marginbottom: "1ex",
+  // minheight: "2em",
   border: "0px",
   background: "#fff",
-} as CSS;
+} as const;
 
 export interface Props {
   id: string;
   actions: any;
   path: string;
   project_id: string;
   font_size: number;
-  cursors: Map<string, any>;
+  cursors?: Map<string, any>;
   editor_state: EditorState;
   read_only: boolean;
   is_current: boolean;
   is_public: boolean;
   value?: string; // if defined and is_public, use this static value and editor is read-only  (TODO: public was deprecated years ago)
-  misspelled_words: Set<string> | string; // **or** show these words as not spelled correctly
+  misspelled_words?: Set<string> | string; // **or** show these words as not spelled correctly
   resize: number;
-  gutters: string[];
-  gutter_markers: Map<string, any>;
-  editor_settings: Map<string, any>;
+  gutters?: string[];
+  gutter_markers?: Map<string, any>;
+  editor_settings: AccountState["editor_settings"];
   is_subframe?: boolean;
   placeholder?: string;
 }
 
-export const CodemirrorEditor: React.FC<Props> = React.memo((props) => {
+export const CodemirrorEditor: React.FC<Props> = React.memo((props: Props) => {
   const [has_cm, set_has_cm] = useState<boolean>(false);
 
   const cmRef = useRef<CodeMirror.Editor | undefined>(undefined);
@@ -139,7 +141,7 @@ export const CodemirrorEditor: React.FC<Props> = React.memo((props) => {
 
   function cm_highlight_misspelled_words(): void {
     const words = props.misspelled_words;
-    if (cmRef.current == null) return;
+    if (cmRef.current == null || words == null) return;
     if (words == "browser") {
       // just ensure browser spellcheck is enabled
       cmRef.current.setOption("spellcheck", true);
@@ -286,7 +288,7 @@ export const CodemirrorEditor: React.FC<Props> = React.memo((props) => {
     const foldKey = `${props.path}\\${props.id}`;
     const saveFoldState = () => {
       if (cmRef.current != null) {
-        saveFold(cmRef.current,foldKey);
+        saveFold(cmRef.current, foldKey);
       }
     };
     cmRef.current.on("fold" as any, saveFoldState);

src/packages/frontend/frame-editors/codemirror/cm-options.ts

@@ -8,18 +8,18 @@ Compute the codemirror options for file with given name,
 using the given editor settings.
 */
 
+import { EDITOR_COLOR_SCHEMES } from "@cocalc/util/db-schema/accounts";
+import { path_split } from "@cocalc/util/misc";
 import * as CodeMirror from "codemirror";
-import { file_associations } from "../../file-associations";
 import * as feature from "../../feature";
-import { path_split } from "@cocalc/util/misc";
+import { file_associations } from "../../file-associations";
 import { get_editor_settings } from "../generic/client";
-import { EDITOR_COLOR_SCHEMES } from "@cocalc/util/db-schema/accounts";
 
-import { filename_extension_notilde, defaults } from "@cocalc/util/misc";
+import { defaults, filename_extension_notilde } from "@cocalc/util/misc";
 
 import { extra_alt_keys } from "./mobile";
-import { Map } from "immutable";
 
+import { AccountState } from "../../account/types";
 import { valid_indent } from "./util";
 
 function save(cm) {
@@ -36,17 +36,17 @@ export function default_opts(filename) {
 
 export function cm_options(
   filename: string, // extension determines editor mode
-  editor_settings: Map<string, any>,
+  editor_settings: AccountState["editor_settings"],
   gutters: string[] = [], // array of extra gutters
   editor_actions: any = undefined,
   frame_tree_actions: any = undefined,
-  frame_id: string = ""
+  frame_id: string = "",
 ) {
-  let theme = editor_settings.get("theme");
+  let theme = editor_settings?.get("theme");
   // if we do not know the theme, fallback to default
-  if (EDITOR_COLOR_SCHEMES[theme] == null) {
+  if (!theme || EDITOR_COLOR_SCHEMES[theme] == null) {
     console.warn(
-      `codemirror theme '${theme}' not known -- fallback to 'Default'`
+      `codemirror theme '${theme}' not known -- fallback to 'Default'`,
     );
     theme = "default";
   }
@@ -57,7 +57,7 @@ export function cm_options(
     mode: "txt",
     show_trailing_whitespace: editor_settings.get(
       "show_trailing_whitespace",
-      true
+      true,
     ),
     allow_javascript_eval: true, // if false, the one use of eval isn't allowed.
     line_numbers: editor_settings.get("line_numbers", true),
@@ -132,7 +132,7 @@ export function cm_options(
       } else {
         if (get_editor_settings().get("show_exec_warning")) {
           frame_tree_actions.set_error(
-            "You can evaluate code in a file with the extension 'sagews' or 'ipynb'.   Please create a Sage Worksheet or Jupyter notebook instead."
+            "You can evaluate code in a file with the extension 'sagews' or 'ipynb'.   Please create a Sage Worksheet or Jupyter notebook instead.",
           );
         }
       }

src/packages/frontend/frame-editors/course-editor/course-panel-wrapper.tsx

@@ -8,36 +8,37 @@ This is some slightly complicated code to avoid needless duplication.
 
 It's a bit more complicated than you might expect partly due to the fact
 we have to insert these course tab components as frame in a frame tree,
-so there is no commoon containing react component that we control...
+so there is no common containing react component that we control...
 */
 
+import { Map } from "immutable";
+
 import {
+  AppRedux,
   React,
   Rendered,
   redux,
-  AppRedux,
   useEditorRedux,
   useRedux,
   useTypedRedux,
 } from "@cocalc/frontend/app-framework";
-import { Loading, ActivityDisplay } from "@cocalc/frontend/components";
+import { ActivityDisplay, Loading } from "@cocalc/frontend/components";
 import ShowError from "@cocalc/frontend/components/error";
+import Modals from "@cocalc/frontend/course/modals";
+import { PayBanner } from "@cocalc/frontend/course/pay-banner";
 import {
   AssignmentsMap,
   CourseSettingsRecord,
-  StudentsMap,
+  CourseStore,
   HandoutsMap,
+  StudentsMap,
 } from "@cocalc/frontend/course/store";
-import { Map } from "immutable";
-import { ProjectMap, UserMap } from "../../todo-types";
-import { CourseActions, course_redux_name } from "./course-actions";
+import { getScale } from "@cocalc/frontend/frame-editors/frame-tree/hooks";
+import { ProjectMap, UserMap } from "@cocalc/frontend/todo-types";
 import { values } from "@cocalc/util/misc";
-import { CourseTabBar } from "./course-tab-bar";
 import type { CourseEditorActions, CourseEditorState } from "./actions";
-import { CourseStore } from "@cocalc/frontend/course/store";
-import { PayBanner } from "@cocalc/frontend/course/pay-banner";
-import Modals from "@cocalc/frontend/course/modals";
-import { getScale } from "@cocalc/frontend/frame-editors/frame-tree/hooks";
+import { CourseActions, course_redux_name } from "./course-actions";
+import { CourseTabBar } from "./course-tab-bar";
 
 export interface FrameProps {
   id: string;