Merge remote-tracking branch 'origin/release' into danieljgeiger-mathjax

2023-06-15 14:36:09 -05:00
parent be057bde39 81ebf82979
commit 795176b256
221 changed files with 15664 additions and 8165 deletions
@@ -157,6 +157,8 @@ class Collab extends PureComponent<Props, CollabState> {
    window.addEventListener("offline", this.onOfflineStatusToggle);
    window.addEventListener(EVENT.UNLOAD, this.onUnload);

+    this.onOfflineStatusToggle();
+
    const collabAPI: CollabAPI = {
      isCollaborating: this.isCollaborating,
      onPointerUpdate: this.onPointerUpdate,
@@ -168,7 +170,6 @@ class Collab extends PureComponent<Props, CollabState> {
    };

    appJotaiStore.set(collabAPIAtom, collabAPI);
-    this.onOfflineStatusToggle();

    if (
      process.env.NODE_ENV === ENV.TEST ||
@@ -380,6 +381,13 @@ class Collab extends PureComponent<Props, CollabState> {
  startCollaboration = async (
    existingRoomLinkData: null | { roomId: string; roomKey: string },
  ): Promise<ImportedDataState | null> => {
+    if (!this.state.username) {
+      import("@excalidraw/random-username").then(({ getRandomUsername }) => {
+        const username = getRandomUsername();
+        this.onUsernameChange(username);
+      });
+    }
+
    if (this.portal.socket) {
      return null;
    }
@@ -834,7 +842,6 @@ class Collab extends PureComponent<Props, CollabState> {
            setErrorMessage={(errorMessage) => {
              this.setState({ errorMessage });
            }}
-            theme={this.excalidrawAPI.getAppState().theme}
          />
        )}
        {errorMessage && (
@@ -1,76 +1,149 @@
@import "../../css/variables.module";

 .excalidraw {
-  .RoomDialog__button {
-    border: 1px solid var(--default-border-color) !important;
-  }
-
-  .RoomDialog-linkContainer {
+  .RoomDialog {
    display: flex;
-    margin: 1.5em 0;
-  }
+    flex-direction: column;
+    gap: 1.5rem;

-  input.RoomDialog-link {
-    color: var(--text-primary-color);
-    min-width: 0;
-    flex: 1 1 auto;
-    margin-inline-start: 1em;
-    display: inline-block;
-    cursor: pointer;
-    border: none;
-    padding: 0 0.5rem;
-    white-space: nowrap;
-    border-radius: var(--space-factor);
-    background-color: var(--button-gray-1);
-  }
-
-  .RoomDialog-emoji {
-    font-family: sans-serif;
-  }
-
-  .RoomDialog-usernameContainer {
-    display: flex;
-    margin: 1.5em 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
    @include isMobile {
-      flex-direction: column;
-      align-items: stretch;
+      height: calc(100vh - 5rem);
    }
-  }

-  @include isMobile {
-    .RoomDialog-usernameLabel {
-      font-weight: bold;
+    &__popover {
+      @keyframes RoomDialog__popover__scaleIn {
+        from {
+          opacity: 0;
+        }
+        to {
+          opacity: 1;
+        }
+      }
+
+      box-sizing: border-box;
+      z-index: 100;
+
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+      align-items: flex-start;
+      padding: 0.125rem 0.5rem;
+      gap: 0.125rem;
+
+      height: 1.125rem;
+
+      border: none;
+      border-radius: 0.6875rem;
+
+      font-family: "Assistant";
+      font-style: normal;
+      font-weight: 600;
+      font-size: 0.75rem;
+      line-height: 110%;
+
+      background: var(--color-success-lighter);
+      color: var(--color-success);
+
+      & > svg {
+        width: 0.875rem;
+        height: 0.875rem;
+      }
+
+      transform-origin: var(--radix-popover-content-transform-origin);
+      animation: RoomDialog__popover__scaleIn 150ms ease-out;
    }
-  }

-  .RoomDialog-username {
-    background-color: var(--input-bg-color);
-    border-color: var(--input-border-color);
-    appearance: none;
-    min-width: 0;
-    flex: 1 1 auto;
-    margin-inline-start: 1em;
-    @include isMobile {
-      margin-top: 0.5em;
-      margin-inline-start: 0;
+    &__inactive {
+      font-family: "Assistant";
+
+      &__illustration {
+        display: flex;
+        width: 100%;
+        align-items: center;
+        justify-content: center;
+
+        & svg {
+          filter: var(--theme-filter);
+        }
+      }
+
+      &__header {
+        display: flex;
+        width: 100%;
+        align-items: center;
+        justify-content: center;
+
+        font-weight: 700;
+        font-size: 1.3125rem;
+        line-height: 130%;
+
+        color: var(--color-primary);
+      }
+
+      &__description {
+        font-weight: 400;
+        font-size: 0.875rem;
+        line-height: 150%;
+
+        text-align: center;
+
+        color: var(--text-primary-color);
+
+        & strong {
+          display: block;
+          font-weight: 700;
+        }
+      }
+
+      &__start_session {
+        display: flex;
+
+        align-items: center;
+        justify-content: center;
+      }
    }
-    font-size: 1em;
-  }

-  .RoomDialog-sessionStartButtonContainer {
-    display: flex;
-    justify-content: center;
-  }
+    &__active {
+      &__share {
+        display: none !important;

-  .Modal .RoomDialog-stopSession {
-    background-color: var(--button-destructive-bg-color);
+        @include isMobile {
+          display: flex !important;
+        }
+      }

-    .ToolIcon__label,
-    .ToolIcon__icon svg {
-      color: var(--button-destructive-color);
+      &__header {
+        margin: 0;
+      }
+
+      &__linkRow {
+        display: flex;
+        flex-direction: row;
+        align-items: flex-end;
+        gap: 0.75rem;
+      }
+
+      &__description {
+        border-top: 1px solid var(--color-gray-20);
+
+        padding: 0.5rem 0.5rem 0;
+        font-weight: 400;
+        font-size: 0.75rem;
+        line-height: 150%;
+
+        & p {
+          margin: 0;
+        }
+
+        & p + p {
+          margin-top: 1em;
+        }
+      }
+
+      &__actions {
+        display: flex;
+        justify-content: center;
+      }
    }
  }
 }
@@ -1,22 +1,27 @@
-import React, { useRef } from "react";
+import { useRef, useState } from "react";
+import * as Popover from "@radix-ui/react-popover";
+
 import { copyTextToSystemClipboard } from "../../clipboard";
+import { trackEvent } from "../../analytics";
+import { getFrame } from "../../utils";
+import { useI18n } from "../../i18n";
+import { KEYS } from "../../keys";
+
 import { Dialog } from "../../components/Dialog";
 import {
-  clipboard,
-  start,
-  stop,
+  copyIcon,
+  playerPlayIcon,
+  playerStopFilledIcon,
  share,
  shareIOS,
  shareWindows,
+  tablerCheckIcon,
 } from "../../components/icons";
-import { ToolButton } from "../../components/ToolButton";
+import { TextField } from "../../components/TextField";
+import { FilledButton } from "../../components/FilledButton";
+
+import { ReactComponent as CollabImage } from "../../assets/lock.svg";
 import "./RoomDialog.scss";
-import Stack from "../../components/Stack";
-import { AppState } from "../../types";
-import { trackEvent } from "../../analytics";
-import { getFrame } from "../../utils";
-import DialogActionButton from "../../components/DialogActionButton";
-import { useI18n } from "../../i18n";

 const getShareIcon = () => {
  const navigator = window.navigator as any;
@@ -32,16 +37,7 @@ const getShareIcon = () => {
  return share;
 };

-const RoomDialog = ({
-  handleClose,
-  activeRoomLink,
-  username,
-  onUsernameChange,
-  onRoomCreate,
-  onRoomDestroy,
-  setErrorMessage,
-  theme,
-}: {
+export type RoomModalProps = {
  handleClose: () => void;
  activeRoomLink: string;
  username: string;
@@ -49,20 +45,41 @@ const RoomDialog = ({
  onRoomCreate: () => void;
  onRoomDestroy: () => void;
  setErrorMessage: (message: string) => void;
-  theme: AppState["theme"];
-}) => {
+};
+
+export const RoomModal = ({
+  activeRoomLink,
+  onRoomCreate,
+  onRoomDestroy,
+  setErrorMessage,
+  username,
+  onUsernameChange,
+  handleClose,
+}: RoomModalProps) => {
  const { t } = useI18n();
-  const roomLinkInput = useRef<HTMLInputElement>(null);
+  const [justCopied, setJustCopied] = useState(false);
+  const timerRef = useRef<number>(0);
+  const ref = useRef<HTMLInputElement>(null);
+  const isShareSupported = "share" in navigator;

  const copyRoomLink = async () => {
    try {
      await copyTextToSystemClipboard(activeRoomLink);
+
+      setJustCopied(true);
+
+      if (timerRef.current) {
+        window.clearTimeout(timerRef.current);
+      }
+
+      timerRef.current = window.setTimeout(() => {
+        setJustCopied(false);
+      }, 3000);
    } catch (error: any) {
      setErrorMessage(error.message);
    }
-    if (roomLinkInput.current) {
-      roomLinkInput.current.select();
-    }
+
+    ref.current?.select();
  };

  const shareRoomLink = async () => {
@@ -77,112 +94,124 @@ const RoomDialog = ({
    }
  };

-  const selectInput = (event: React.MouseEvent<HTMLInputElement>) => {
-    if (event.target !== document.activeElement) {
-      event.preventDefault();
-      (event.target as HTMLInputElement).select();
-    }
-  };
-
-  const renderRoomDialog = () => {
+  if (activeRoomLink) {
    return (
-      <div className="RoomDialog-modal">
-        {!activeRoomLink && (
-          <>
-            <p>{t("roomDialog.desc_intro")}</p>
-            <p>{`🔒 ${t("roomDialog.desc_privacy")}`}</p>
-            <div className="RoomDialog-sessionStartButtonContainer">
-              <DialogActionButton
-                label={t("roomDialog.button_startSession")}
-                onClick={() => {
-                  trackEvent("share", "room creation", `ui (${getFrame()})`);
-                  onRoomCreate();
-                }}
-              >
-                {start}
-              </DialogActionButton>
-            </div>
-          </>
-        )}
-        {activeRoomLink && (
-          <>
-            <p>{t("roomDialog.desc_inProgressIntro")}</p>
-            <p>{t("roomDialog.desc_shareLink")}</p>
-            <div className="RoomDialog-linkContainer">
-              <Stack.Row gap={2}>
-                {"share" in navigator ? (
-                  <ToolButton
-                    className="RoomDialog__button"
-                    type="button"
-                    icon={getShareIcon()}
-                    title={t("labels.share")}
-                    aria-label={t("labels.share")}
-                    onClick={shareRoomLink}
-                  />
-                ) : null}
-                <ToolButton
-                  className="RoomDialog__button"
-                  type="button"
-                  icon={clipboard}
-                  title={t("labels.copy")}
-                  aria-label={t("labels.copy")}
-                  onClick={copyRoomLink}
-                />
-              </Stack.Row>
-              <input
-                type="text"
-                value={activeRoomLink}
-                readOnly={true}
-                className="RoomDialog-link"
-                ref={roomLinkInput}
-                onPointerDown={selectInput}
+      <>
+        <h3 className="RoomDialog__active__header">
+          {t("labels.liveCollaboration")}
+        </h3>
+        <TextField
+          value={username}
+          placeholder="Your name"
+          label="Your name"
+          onChange={onUsernameChange}
+          onKeyDown={(event) => event.key === KEYS.ENTER && handleClose()}
+        />
+        <div className="RoomDialog__active__linkRow">
+          <TextField
+            ref={ref}
+            label="Link"
+            readonly
+            fullWidth
+            value={activeRoomLink}
+          />
+          {isShareSupported && (
+            <FilledButton
+              size="large"
+              variant="icon"
+              label="Share"
+              startIcon={getShareIcon()}
+              className="RoomDialog__active__share"
+              onClick={shareRoomLink}
+            />
+          )}
+          <Popover.Root open={justCopied}>
+            <Popover.Trigger asChild>
+              <FilledButton
+                size="large"
+                label="Copy link"
+                startIcon={copyIcon}
+                onClick={copyRoomLink}
              />
-            </div>
-            <div className="RoomDialog-usernameContainer">
-              <label className="RoomDialog-usernameLabel" htmlFor="username">
-                {t("labels.yourName")}
-              </label>
-              <input
-                type="text"
-                id="username"
-                value={username.trim() || ""}
-                className="RoomDialog-username TextInput"
-                onChange={(event) => onUsernameChange(event.target.value)}
-                onKeyPress={(event) => event.key === "Enter" && handleClose()}
-              />
-            </div>
-            <p>
-              <span role="img" aria-hidden="true" className="RoomDialog-emoji">
-                {"🔒"}
-              </span>
-              {t("roomDialog.desc_privacy")}
-            </p>
-            <p>{t("roomDialog.desc_exitSession")}</p>
-            <div className="RoomDialog-sessionStartButtonContainer">
-              <DialogActionButton
-                actionType="danger"
-                label={t("roomDialog.button_stopSession")}
-                onClick={() => {
-                  trackEvent("share", "room closed");
-                  onRoomDestroy();
-                }}
-              >
-                {stop}
-              </DialogActionButton>
-            </div>
-          </>
-        )}
-      </div>
+            </Popover.Trigger>
+            <Popover.Content
+              onOpenAutoFocus={(event) => event.preventDefault()}
+              onCloseAutoFocus={(event) => event.preventDefault()}
+              className="RoomDialog__popover"
+              side="top"
+              align="end"
+              sideOffset={5.5}
+            >
+              {tablerCheckIcon} copied
+            </Popover.Content>
+          </Popover.Root>
+        </div>
+        <div className="RoomDialog__active__description">
+          <p>
+            <span
+              role="img"
+              aria-hidden="true"
+              className="RoomDialog__active__description__emoji"
+            >
+              🔒{" "}
+            </span>
+            {t("roomDialog.desc_privacy")}
+          </p>
+          <p>{t("roomDialog.desc_exitSession")}</p>
+        </div>
+
+        <div className="RoomDialog__active__actions">
+          <FilledButton
+            size="large"
+            variant="outlined"
+            color="danger"
+            label={t("roomDialog.button_stopSession")}
+            startIcon={playerStopFilledIcon}
+            onClick={() => {
+              trackEvent("share", "room closed");
+              onRoomDestroy();
+            }}
+          />
+        </div>
+      </>
    );
-  };
+  }
+
  return (
-    <Dialog
-      small
-      onCloseRequest={handleClose}
-      title={t("labels.liveCollaboration")}
-      theme={theme}
-    >
-      {renderRoomDialog()}
+    <>
+      <div className="RoomDialog__inactive__illustration">
+        <CollabImage />
+      </div>
+      <div className="RoomDialog__inactive__header">
+        {t("labels.liveCollaboration")}
+      </div>
+
+      <div className="RoomDialog__inactive__description">
+        <strong>{t("roomDialog.desc_intro")}</strong>
+        {t("roomDialog.desc_privacy")}
+      </div>
+
+      <div className="RoomDialog__inactive__start_session">
+        <FilledButton
+          size="large"
+          label={t("roomDialog.button_startSession")}
+          startIcon={playerPlayIcon}
+          onClick={() => {
+            trackEvent("share", "room creation", `ui (${getFrame()})`);
+            onRoomCreate();
+          }}
+        />
+      </div>
+    </>
+  );
+};
+
+const RoomDialog = (props: RoomModalProps) => {
+  return (
+    <Dialog size="small" onCloseRequest={props.handleClose} title={false}>
+      <div className="RoomDialog">
+        <RoomModal {...props} />
+      </div>
    </Dialog>
  );
 };
@@ -6,6 +6,7 @@ import { LanguageList } from "./LanguageList";
 export const AppMainMenu: React.FC<{
  setCollabDialogShown: (toggle: boolean) => any;
  isCollaborating: boolean;
+  isCollabEnabled: boolean;
 }> = React.memo((props) => {
  return (
    <MainMenu>
@@ -13,10 +14,12 @@ export const AppMainMenu: React.FC<{
      <MainMenu.DefaultItems.SaveToActiveFile />
      <MainMenu.DefaultItems.Export />
      <MainMenu.DefaultItems.SaveAsImage />
-      <MainMenu.DefaultItems.LiveCollaborationTrigger
-        isCollaborating={props.isCollaborating}
-        onSelect={() => props.setCollabDialogShown(true)}
-      />
+      {props.isCollabEnabled && (
+        <MainMenu.DefaultItems.LiveCollaborationTrigger
+          isCollaborating={props.isCollaborating}
+          onSelect={() => props.setCollabDialogShown(true)}
+        />
+      )}

      <MainMenu.DefaultItems.Help />
      <MainMenu.DefaultItems.ClearCanvas />
@@ -6,6 +6,7 @@ import { isExcalidrawPlusSignedUser } from "../app_constants";

 export const AppWelcomeScreen: React.FC<{
  setCollabDialogShown: (toggle: boolean) => any;
+  isCollabEnabled: boolean;
 }> = React.memo((props) => {
  const { t } = useI18n();
  let headingContent;
@@ -46,9 +47,11 @@ export const AppWelcomeScreen: React.FC<{
        <WelcomeScreen.Center.Menu>
          <WelcomeScreen.Center.MenuItemLoadScene />
          <WelcomeScreen.Center.MenuItemHelp />
-          <WelcomeScreen.Center.MenuItemLiveCollaborationTrigger
-            onSelect={() => props.setCollabDialogShown(true)}
-          />
+          {props.isCollabEnabled && (
+            <WelcomeScreen.Center.MenuItemLiveCollaborationTrigger
+              onSelect={() => props.setCollabDialogShown(true)}
+            />
+          )}
          {!isExcalidrawPlusSignedUser && (
            <WelcomeScreen.Center.MenuItemLink
              href="https://plus.excalidraw.com/plus?utm_source=excalidraw&utm_medium=app&utm_content=welcomeScreenGuest"
@@ -43,6 +43,7 @@ import {
  preventUnload,
  ResolvablePromise,
  resolvablePromise,
+  isRunningInIframe,
 } from "../utils";
 import {
  FIREBASE_STORAGE_PREFIXES,
@@ -99,7 +100,7 @@ languageDetector.init({
 });

 const initializeScene = async (opts: {
-  collabAPI: CollabAPI;
+  collabAPI: CollabAPI | null;
  excalidrawAPI: ExcalidrawImperativeAPI;
 }): Promise<
  { scene: ExcalidrawInitialDataState | null } & (
@@ -184,7 +185,7 @@ const initializeScene = async (opts: {
    }
  }

-  if (roomLinkData) {
+  if (roomLinkData && opts.collabAPI) {
    const { excalidrawAPI } = opts;

    const scene = await opts.collabAPI.startCollaboration(roomLinkData);
@@ -238,6 +239,7 @@ export const appLangCodeAtom = atom(
 const ExcalidrawWrapper = () => {
  const [errorMessage, setErrorMessage] = useState("");
  const [langCode, setLangCode] = useAtom(appLangCodeAtom);
+  const isCollabDisabled = isRunningInIframe();

  // initial state
  // ---------------------------------------------------------------------------
@@ -275,7 +277,7 @@ const ExcalidrawWrapper = () => {
  });

  useEffect(() => {
-    if (!collabAPI || !excalidrawAPI) {
+    if (!excalidrawAPI || (!isCollabDisabled && !collabAPI)) {
      return;
    }

@@ -286,7 +288,7 @@ const ExcalidrawWrapper = () => {
      if (!data.scene) {
        return;
      }
-      if (collabAPI.isCollaborating()) {
+      if (collabAPI?.isCollaborating()) {
        if (data.scene.elements) {
          collabAPI
            .fetchImageFilesFromFirebase({
@@ -356,7 +358,7 @@ const ExcalidrawWrapper = () => {
      const libraryUrlTokens = parseLibraryTokensFromUrl();
      if (!libraryUrlTokens) {
        if (
-          collabAPI.isCollaborating() &&
+          collabAPI?.isCollaborating() &&
          !isCollaborationLink(window.location.href)
        ) {
          collabAPI.stopCollaboration(false);
@@ -385,7 +387,10 @@ const ExcalidrawWrapper = () => {
      if (isTestEnv()) {
        return;
      }
-      if (!document.hidden && !collabAPI.isCollaborating()) {
+      if (
+        !document.hidden &&
+        ((collabAPI && !collabAPI.isCollaborating()) || isCollabDisabled)
+      ) {
        // don't sync if local state is newer or identical to browser state
        if (isBrowserStorageStateNewer(STORAGE_KEYS.VERSION_DATA_STATE)) {
          const localDataState = importFromLocalStorage();
@@ -401,7 +406,7 @@ const ExcalidrawWrapper = () => {
          excalidrawAPI.updateLibrary({
            libraryItems: getLibraryItemsFromStorage(),
          });
-          collabAPI.setUsername(username || "");
+          collabAPI?.setUsername(username || "");
        }

        if (isBrowserStorageStateNewer(STORAGE_KEYS.VERSION_FILES)) {
@@ -469,7 +474,7 @@ const ExcalidrawWrapper = () => {
      );
      clearTimeout(titleTimeout);
    };
-  }, [collabAPI, excalidrawAPI, setLangCode]);
+  }, [isCollabDisabled, collabAPI, excalidrawAPI, setLangCode]);

  useEffect(() => {
    const unloadHandler = (event: BeforeUnloadEvent) => {
@@ -654,7 +659,7 @@ const ExcalidrawWrapper = () => {
        autoFocus={true}
        theme={theme}
        renderTopRightUI={(isMobile) => {
-          if (isMobile) {
+          if (isMobile || !collabAPI || isCollabDisabled) {
            return null;
          }
          return (
@@ -668,16 +673,22 @@ const ExcalidrawWrapper = () => {
        <AppMainMenu
          setCollabDialogShown={setCollabDialogShown}
          isCollaborating={isCollaborating}
+          isCollabEnabled={!isCollabDisabled}
+        />
+        <AppWelcomeScreen
+          setCollabDialogShown={setCollabDialogShown}
+          isCollabEnabled={!isCollabDisabled}
        />
-        <AppWelcomeScreen setCollabDialogShown={setCollabDialogShown} />
        <AppFooter />
        {isCollaborating && isOffline && (
          <div className="collab-offline-warning">
            {t("alerts.collabOfflineWarning")}
          </div>
        )}
+        {excalidrawAPI && !isCollabDisabled && (
+          <Collab excalidrawAPI={excalidrawAPI} />
+        )}
      </Excalidraw>
-      {excalidrawAPI && <Collab excalidrawAPI={excalidrawAPI} />}
      {errorMessage && (
        <ErrorDialog onClose={() => setErrorMessage("")}>
          {errorMessage}