Collaborative Whiteboard and use of Slate *everywhere* (including Jupyter markdown cells)

src/packages/frontend/_editor.sass

@@ -614,22 +614,33 @@ code
  margin-right : -5px
 
 /* IMPORTANT FOR SAGE WORKSHEETS! Do not remove!
+ This is for the hi font-size's below!
  We override the bootstrap css styles, which hardcode a specific
  pixel font-size for headers, and hence can't be zoomed.
- See https://github.com/sagemathinc/cocalc/issues/585 */
+ See https://github.com/sagemathinc/cocalc/issues/585
+
+ And the color:inherit is because antd sets the color to black-ish,
+ which is very annoying if we have a dark background and want
+ color white uniformly, e.g., on sticky notes. */
 
 h1
  font-size: 250%
+ color: inherit
 h2
  font-size: 200%
+ color: inherit
 h3
  font-size: 170%
+ color: inherit
 h4
  font-size: 150%
+ color: inherit
 h5
  font-size: 130%
+ color: inherit
 h6
  font-size: 110%
+ color: inherit
 
 /* Important: for display math in Sage Worksheets.
  See https://github.com/sagemathinc/cocalc/issues/136
@@ -723,4 +734,13 @@ h6
  font-size: inherit
  pre
  font-size: inherit
- padding: 5px
+ padding: 5px
+
+.cocalc-whiteboard-edge-select
+ &:hover
+ border: 2.5px solid #ccc
+ margin: -2.5px
+
+.cocalc-whiteboard-edge-selected
+ border: 2.5px solid #ccc
+ margin: -2.5px

src/packages/frontend/account/avatar/avatar.tsx

@@ -51,9 +51,8 @@ export const Avatar: React.FC<Props> = (props) => {
  // we use the user_map to display the username and face:
  const user_map = useTypedRedux("users", "user_map");
  const [image, set_image] = useState<string | undefined>(undefined);
- const [background_color, set_background_color] = useState<string>(
- DEFAULT_COLOR
- );
+ const [background_color, set_background_color] =
+ useState<string>(DEFAULT_COLOR);
 
  useAsyncEffect(
  async (isMounted) => {
@@ -95,6 +94,15 @@ export const Avatar: React.FC<Props> = (props) => {
  redux.getProjectActions(project_id).open_file({ path });
  return;
  case "file":
+ const actions = redux.getEditorActions(project_id, path);
+ const gotoUser = actions["gotoUser"];
+ if (gotoUser != null) {
+ // This is at least implemented for the whiteboard (which doesn't
+ // have a good notion of lines), but should be done more
+ // generally, replacing the stuff below about cursor_line...
+ gotoUser(props.account_id);
+ return;
+ }
  var line = get_cursor_line();
  if (line != null) {
  redux.getProjectActions(project_id).goto_line(path, line);

src/packages/frontend/account/avatar/font-color.ts

@@ -6,16 +6,12 @@ import onecolor from "onecolor";
 
 export function avatar_fontcolor(bg): "white" | "black" {
  const col_bg = onecolor(bg);
- // col_bg === false happens when for unknown reasons (maybe output produced by an old buggy version of a library?),
- // the color in the profile is invalid -- {"color": "rgb(255,-8,0)", "image": ""}.
- if (col_bg === false) {
- return "white";
+ if (!col_bg) {
+ return "black";
  }
- if (
- ((typeof col_bg?.magenta === "function" && col_bg.magenta()) || 0) >= 0.4
- ) {
- return "white";
- } else {
+ if (col_bg.lightness() > 0.5) {
  return "black";
+ } else {
+ return "white";
  }
 }

src/packages/frontend/app-framework/hooks.ts

@@ -30,9 +30,10 @@ import useToggle from "./toggle-hook";
 export { useToggle };
 
 export function useForceUpdate() {
- const [state, set_state] = useState<boolean>(true);
+ const counterRef = useRef<any>(0);
+ const [, setCounter] = useState<number>(0);
  return () => {
- set_state(!state);
+ setCounter((counterRef.current += 1));
  };
 }
 

src/packages/frontend/app/page.tsx

@@ -13,6 +13,7 @@ declare var DEBUG: boolean;
 import { ProjectsNav } from "../projects/projects-nav";
 
 import { COLORS } from "@cocalc/util/theme";
+import { IS_SAFARI, IS_MOBILE, IS_IOS } from "../feature";
 
 import { Button, Navbar, Nav } from "../antd-bootstrap";
 import {
@@ -77,7 +78,19 @@ const PROJECTS_STYLE: React.CSSProperties = {
  padding: "10px 7px",
 } as const;
 
-let page_height: string = "100vh";
+// ipad and ios have a weird trick where they make the screen
+// actually smaller than 100vh and have it be scrollable, even
+// when overflow:hidden, which causes massive UI pain to cocalc.
+// so in that case we make the page_height less. Without this
+// one little tricky, cocalc is very, very frustrating to use
+// on mobile safari. See the million discussions over the years:
+// https://liuhao.im/english/2015/05/29/ios-safari-window-height.html
+// ...
+// https://lukechannings.com/blog/2021-06-09-does-safari-15-fix-the-vh-bug/
+let page_height: string =
+ IS_MOBILE || IS_SAFARI
+ ? `calc(100vh - env(safe-area-inset-bottom) - ${IS_IOS ? 80 : 20}px)`
+ : "100vh";
 
 const PAGE_STYLE: React.CSSProperties = {
  display: "flex",

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

@@ -63,7 +63,9 @@ export const ChatLog: React.FC<ChatLogProps> = React.memo(
  }
  include_avatar_col={show_heads}
  get_user_name={(account_id) => get_user_name(user_map, account_id)}
- scroll_into_view={() => windowed_list_ref?.current?.scrollToRow(i)}
+ scroll_into_view={() =>
+ windowed_list_ref?.current?.scrollToRow(i, "top")
+ }
  />
  );
  }

src/packages/frontend/chat/chatroom.tsx

@@ -325,8 +325,6 @@ export const ChatRoom: React.FC<Props> = ({ project_id, path }) => {
  }}
  >
  <ChatInput
- project_id={project_id}
- path={path}
  input={input}
  on_send={on_send}
  height={INPUT_HEIGHT}

src/packages/frontend/chat/input.tsx

@@ -3,28 +3,37 @@
  * License: AGPLv3 s.t. "Commons Clause" – see LICENSE.md for details
  */
 
-import { useActions, useRedux } from "../app-framework";
-import { MarkdownInput } from "../editors/markdown-input";
+import { CSSProperties } from "react";
+import { useRedux } from "../app-framework";
+import MarkdownInput from "@cocalc/frontend/editors/markdown-input/multimode";
 import { IS_MOBILE } from "../feature";
+import { useFrameContext } from "../frame-editors/frame-tree/frame-context";
 
 interface Props {
- project_id: string;
- path: string;
- input: string;
+ input?: string;
  on_paste?: (e) => void;
- on_send: () => void;
+ on_send?: (value: string) => void;
  height?: string;
  onChange: (string) => void;
- submitMentionsRef: any;
+ submitMentionsRef?: any;
+ font_size?: number;
+ hideHelp?: boolean;
+ style?: CSSProperties;
+ cacheId?: string;
+ onFocus?: () => void;
+ onBlur?: () => void;
 }
 
 export const ChatInput: React.FC<Props> = (props) => {
- const actions = useActions(props.project_id, props.path);
- const font_size = useRedux(["font_size"], props.project_id, props.path);
+ const { project_id, path, actions } = useFrameContext();
+ const font_size =
+ props.font_size ?? useRedux(["font_size"], project_id, path);
  return (
  <MarkdownInput
- project_id={props.project_id}
- path={props.path}
+ saveDebounceMs={0}
+ onFocus={props.onFocus}
+ onBlur={props.onBlur}
+ cacheId={props.cacheId}
  value={props.input}
  enableUpload={true}
  onUploadStart={() => actions?.set_uploading(true)}
@@ -42,7 +51,9 @@ export const ChatInput: React.FC<Props> = (props) => {
  }
  fontSize={font_size}
  lineWrapping={true}
+ hideHelp={props.hideHelp}
  autoFocus
+ style={props.style}
  />
  );
 };

src/packages/frontend/chat/message.tsx

@@ -13,7 +13,6 @@ import {
  message_colors,
  newest_content,
  sender_is_viewer,
- INPUT_HEIGHT,
 } from "./utils";
 import { Markdown } from "./markdown";
 
@@ -78,14 +77,15 @@ export const Message: React.FC<Props> = React.memo((props) => {
  [props.message] /* note -- edited_message is a function of props.message */
  );
 
- const history_size = useMemo(() => props.message.get("history").size, [
- props.message,
- ]);
+ const history_size = useMemo(
+ () => props.message.get("history").size,
+ [props.message]
+ );
 
- const isEditing = useMemo(() => is_editing(props.message, props.account_id), [
- props.message,
- props.account_id,
- ]);
+ const isEditing = useMemo(
+ () => is_editing(props.message, props.account_id),
+ [props.message, props.account_id]
+ );
 
  const editor_name = useMemo(() => {
  return props.get_user_name(
@@ -211,8 +211,8 @@ export const Message: React.FC<Props> = React.memo((props) => {
  // no editing functionality of not in a project with a path.
  return;
  }
- props.scroll_into_view();
  props.actions.set_editing(props.message, true);
+ props.scroll_into_view();
  }
 
  function avatar_column() {
@@ -297,9 +297,11 @@ export const Message: React.FC<Props> = React.memo((props) => {
  className="smc-chat-message"
  onDoubleClick={edit_message}
  >
- <span style={lighten}>
- <Time message={props.message} edit={edit_message} />
- </span>
+ {!isEditing && (
+ <span style={lighten}>
+ <Time message={props.message} edit={edit_message} />
+ </span>
+ )}
  {!isEditing ? (
  <Markdown
  value={value}
@@ -360,12 +362,10 @@ export const Message: React.FC<Props> = React.memo((props) => {
  }
  return (
  <ChatInput
- project_id={props.project_id}
- path={props.path}
  input={edited_message}
  submitMentionsRef={submitMentionsRef}
  on_send={on_send}
- height={INPUT_HEIGHT}
+ height={"auto"}
  onChange={(value) => {
  edited_message_ref.current = value;
  set_edited_message(value);

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

@@ -190,16 +190,12 @@ export const SideChat: React.FC<Props> = ({ project_id, path }: Props) => {
  style={{
  marginTop: "auto",
  padding: "5px",
- paddingLeft: "15px",
- paddingRight: "15px",
  display: "flex",
  flexDirection: "column",
  }}
  >
  <div style={{ display: "flex", flex: 1 }}>
  <ChatInput
- project_id={project_id}
- path={path}
  input={input}
  on_send={() => {
  send_chat();
@@ -216,9 +212,8 @@ export const SideChat: React.FC<Props> = ({ project_id, path }: Props) => {
  width: INPUT_HEIGHT /* yes, to make it square */,
  }}
  >
- <div style={{ flex: 1 }} />
  <Button
- style={{ height: INPUT_HEIGHT }}
+ style={{ flex: 1, marginLeft: "5px" }}
  onClick={() => {
  send_chat();
  user_activity("side_chat", "send_chat", "click");

src/packages/frontend/chat/utils.ts

@@ -12,7 +12,7 @@ import { redux } from "../app-framework";
 import { MentionList } from "./store";
 import { Message } from "./types";
 
-export const INPUT_HEIGHT = "100px";
+export const INPUT_HEIGHT = "130px";
 
 export const USER_MENTION_MARKUP =
  '<span class="user-mention" account-id=__id__ >@__display__</span>';