feat: TTD dialog UI tweaks (excalidraw#7384)

src/components/TTDDialog/MermaidToExcalidraw.tsx

@@ -7,7 +7,6 @@ import "./MermaidToExcalidraw.scss";
 import { t } from "../../i18n";
 import Trans from "../Trans";
 import {
- LOCAL_STORAGE_KEY_MERMAID_TO_EXCALIDRAW,
  MermaidToExcalidrawLibProps,
  convertMermaidToExcalidraw,
  insertToEditor,
@@ -17,30 +16,26 @@ import { TTDDialogPanels } from "./TTDDialogPanels";
 import { TTDDialogPanel } from "./TTDDialogPanel";
 import { TTDDialogInput } from "./TTDDialogInput";
 import { TTDDialogOutput } from "./TTDDialogOutput";
+import { EditorLocalStorage } from "../../data/EditorLocalStorage";
+import { EDITOR_LS_KEYS } from "../../constants";
+import { debounce } from "../../utils";
+import { TTDDialogSubmitShortcut } from "./TTDDialogSubmitShortcut";
 
 const MERMAID_EXAMPLE =
  "flowchart TD\n A[Christmas] -->|Get money| B(Go shopping)\n B --> C{Let me think}\n C -->|One| D[Laptop]\n C -->|Two| E[iPhone]\n C -->|Three| F[Car]";
 
-const importMermaidDataFromStorage = () => {
- try {
- const data = localStorage.getItem(LOCAL_STORAGE_KEY_MERMAID_TO_EXCALIDRAW);
- if (data) {
- return data;
- }
- } catch (error: any) {
- // Unable to access localStorage
- console.error(error);
- }
-
- return null;
-};
+const debouncedSaveMermaidDefinition = debounce(saveMermaidDataToStorage, 300);
 
 const MermaidToExcalidraw = ({
  mermaidToExcalidrawLib,
 }: {
  mermaidToExcalidrawLib: MermaidToExcalidrawLibProps;
 }) => {
- const [text, setText] = useState("");
+ const [text, setText] = useState(
+ () =>
+ EditorLocalStorage.get<string>(EDITOR_LS_KEYS.MERMAID_TO_EXCALIDRAW) ||
+ MERMAID_EXAMPLE,
+ );
  const deferredText = useDeferredValue(text.trim());
  const [error, setError] = useState<Error | null>(null);
 
@@ -52,11 +47,6 @@ const MermaidToExcalidraw = ({
 
  const app = useApp();
 
- useEffect(() => {
- const data = importMermaidDataFromStorage() || MERMAID_EXAMPLE;
- setText(data);
- }, []);
-
  useEffect(() => {
  convertMermaidToExcalidraw({
  canvasRef,
@@ -65,22 +55,25 @@ const MermaidToExcalidraw = ({
  setError,
  mermaidDefinition: deferredText,
  }).catch(() => {});
+
+ debouncedSaveMermaidDefinition(deferredText);
  }, [deferredText, mermaidToExcalidrawLib]);
 
- const textRef = useRef(text);
+ useEffect(
+ () => () => {
+ debouncedSaveMermaidDefinition.flush();
+ },
+ [],
+ );
 
- // slightly hacky but really quite simple
- // essentially, we want to save the text to LS when the component unmounts
- useEffect(() => {
- textRef.current = text;
- }, [text]);
- useEffect(() => {
- return () => {
- if (textRef.current) {
- saveMermaidDataToStorage(textRef.current);
- }
- };
- }, []);
+ const onInsertToEditor = () => {
+ insertToEditor({
+ app,
+ data,
+ text,
+ shouldSaveMermaidDataToStorage: true,
+ });
+ };
 
  return (
  <>
@@ -103,22 +96,21 @@ const MermaidToExcalidraw = ({
  input={text}
  placeholder={"Write Mermaid diagram defintion here..."}
  onChange={(event) => setText(event.target.value)}
+ onKeyboardSubmit={() => {
+ onInsertToEditor();
+ }}
  />
  </TTDDialogPanel>
  <TTDDialogPanel
  label={t("mermaid.preview")}
  panelAction={{
  action: () => {
- insertToEditor({
- app,
- data,
- text,
- shouldSaveMermaidDataToStorage: true,
- });
+ onInsertToEditor();
  },
  label: t("mermaid.button"),
  icon: ArrowRightIcon,
  }}
+ renderSubmitShortcut={() => <TTDDialogSubmitShortcut />}
  >
  <TTDDialogOutput
  canvasRef={canvasRef}

src/components/TTDDialog/TTDDialog.scss

@@ -298,4 +298,18 @@ $verticalBreakpoint: 861px;
  }
  }
  }
+
+ .ttd-dialog-submit-shortcut {
+ margin-inline-start: 0.5rem;
+ font-size: 0.625rem;
+ opacity: 0.6;
+ display: flex;
+ gap: 0.125rem;
+
+ &__key {
+ border: 1px solid gray;
+ padding: 2px 3px;
+ border-radius: 4px;
+ }
+ }
 }

src/components/TTDDialog/TTDDialog.tsx

@@ -1,5 +1,5 @@
 import { Dialog } from "../Dialog";
-import { useApp } from "../App";
+import { useApp, useExcalidrawSetAppState } from "../App";
 import MermaidToExcalidraw from "./MermaidToExcalidraw";
 import TTDDialogTabs from "./TTDDialogTabs";
 import { ChangeEventHandler, useEffect, useRef, useState } from "react";
@@ -27,6 +27,8 @@ import "./TTDDialog.scss";
 import { isFiniteNumber } from "../../utils";
 import { atom, useAtom } from "jotai";
 import { trackEvent } from "../../analytics";
+import { InlineIcon } from "../InlineIcon";
+import { TTDDialogSubmitShortcut } from "./TTDDialogSubmitShortcut";
 
 const MIN_PROMPT_LENGTH = 3;
 const MAX_PROMPT_LENGTH = 1000;
@@ -36,6 +38,11 @@ const rateLimitsAtom = atom<{
  rateLimitRemaining: number;
 } | null>(null);
 
+const ttdGenerationAtom = atom<{
+ generatedResponse: string | null;
+ prompt: string | null;
+} | null>(null);
+
 type OnTestSubmitRetValue = {
  rateLimit?: number | null;
  rateLimitRemaining?: number | null;
@@ -80,17 +87,24 @@ export const TTDDialogBase = withInternalFallback(
  | { __fallback: true }
  )) => {
  const app = useApp();
+ const setAppState = useExcalidrawSetAppState();
 
  const someRandomDivRef = useRef<HTMLDivElement>(null);
 
- const [text, setText] = useState("");
+ const [ttdGeneration, setTtdGeneration] = useAtom(ttdGenerationAtom);
+
+ const [text, setText] = useState(ttdGeneration?.prompt ?? "");
 
  const prompt = text.trim();
 
  const handleTextChange: ChangeEventHandler<HTMLTextAreaElement> = (
  event,
  ) => {
  setText(event.target.value);
+ setTtdGeneration((s) => ({
+ generatedResponse: s?.generatedResponse ?? null,
+ prompt: event.target.value,
+ }));
  };
 
  const [onTextSubmitInProgess, setOnTextSubmitInProgess] = useState(false);
@@ -131,6 +145,13 @@ export const TTDDialogBase = withInternalFallback(
  const { generatedResponse, error, rateLimit, rateLimitRemaining } =
  await rest.onTextSubmit(prompt);
 
+ if (typeof generatedResponse === "string") {
+ setTtdGeneration((s) => ({
+ generatedResponse,
+ prompt: s?.prompt ?? null,
+ }));
+ }
+
  if (isFiniteNumber(rateLimit) && isFiniteNumber(rateLimitRemaining)) {
  setRateLimits({ rateLimit, rateLimitRemaining });
  }
@@ -153,7 +174,6 @@ export const TTDDialogBase = withInternalFallback(
  mermaidDefinition: generatedResponse,
  });
  trackEvent("ai", "mermaid parse success", "ttd");
- saveMermaidDataToStorage(generatedResponse);
  } catch (error: any) {
  console.info(
  `%cTTD mermaid render errror: ${error.message}`,
@@ -293,7 +313,32 @@ export const TTDDialogBase = withInternalFallback(
  </div>
  );
  }}
+ renderSubmitShortcut={() => <TTDDialogSubmitShortcut />}
  renderBottomRight={() => {
+ if (typeof ttdGeneration?.generatedResponse === "string") {
+ return (
+ <div
+ className="excalidraw-link"
+ style={{ marginLeft: "auto", fontSize: 14 }}
+ onClick={() => {
+ if (
+ typeof ttdGeneration?.generatedResponse ===
+ "string"
+ ) {
+ saveMermaidDataToStorage(
+ ttdGeneration.generatedResponse,
+ );
+ setAppState({
+ openDialog: { name: "ttd", tab: "mermaid" },
+ });
+ }
+ }}
+ >
+ View as Mermaid
+ <InlineIcon icon={ArrowRightIcon} />
+ </div>
+ );
+ }
  const ratio = prompt.length / MAX_PROMPT_LENGTH;
  if (ratio > 0.8) {
  return (

src/components/TTDDialog/TTDDialogPanel.tsx

@@ -14,6 +14,7 @@ interface TTDDialogPanelProps {
  panelActionDisabled?: boolean;
  onTextSubmitInProgess?: boolean;
  renderTopRight?: () => ReactNode;
+ renderSubmitShortcut?: () => ReactNode;
  renderBottomRight?: () => ReactNode;
 }
 
@@ -24,6 +25,7 @@ export const TTDDialogPanel = ({
  panelActionDisabled = false,
  onTextSubmitInProgess,
  renderTopRight,
+ renderSubmitShortcut,
  renderBottomRight,
 }: TTDDialogPanelProps) => {
  return (
@@ -51,6 +53,9 @@ export const TTDDialogPanel = ({
  </div>
  {onTextSubmitInProgess && <Spinner />}
  </Button>
+ {!panelActionDisabled &&
+ !onTextSubmitInProgess &&
+ renderSubmitShortcut?.()}
  {renderBottomRight?.()}
  </div>
  </div>

src/components/TTDDialog/TTDDialogSubmitShortcut.tsx

@@ -0,0 +1,14 @@
+import { getShortcutKey } from "../../utils";
+
+export const TTDDialogSubmitShortcut = () => {
+ return (
+ <div className="ttd-dialog-submit-shortcut">
+ <div className="ttd-dialog-submit-shortcut__key">
+ {getShortcutKey("CtrlOrCmd")}
+ </div>
+ <div className="ttd-dialog-submit-shortcut__key">
+ {getShortcutKey("Enter")}
+ </div>
+ </div>
+ );
+};

src/components/TTDDialog/common.ts

@@ -1,13 +1,18 @@
 import { MermaidOptions } from "@excalidraw/mermaid-to-excalidraw";
 import { MermaidToExcalidrawResult } from "@excalidraw/mermaid-to-excalidraw/dist/interfaces";
-import { DEFAULT_EXPORT_PADDING, DEFAULT_FONT_SIZE } from "../../constants";
+import {
+ DEFAULT_EXPORT_PADDING,
+ DEFAULT_FONT_SIZE,
+ EDITOR_LS_KEYS,
+} from "../../constants";
 import {
  convertToExcalidrawElements,
  exportToCanvas,
 } from "../../packages/excalidraw/index";
 import { NonDeletedExcalidrawElement } from "../../element/types";
 import { AppClassProperties, BinaryFiles } from "../../types";
 import { canvasToBlob } from "../../data/blob";
+import { EditorLocalStorage } from "../../data/EditorLocalStorage";
 
 const resetPreview = ({
  canvasRef,
@@ -110,7 +115,6 @@ export const convertMermaidToExcalidraw = async ({
  parent.style.background = "var(--default-bg-color)";
  canvasNode.replaceChildren(canvas);
  } catch (err: any) {
- console.error(err);
  parent.style.background = "var(--default-bg-color)";
  if (mermaidDefinition) {
  setError(err);
@@ -120,14 +124,11 @@ export const convertMermaidToExcalidraw = async ({
  }
 };
 
-export const LOCAL_STORAGE_KEY_MERMAID_TO_EXCALIDRAW = "mermaid-to-excalidraw";
-export const saveMermaidDataToStorage = (data: string) => {
- try {
- localStorage.setItem(LOCAL_STORAGE_KEY_MERMAID_TO_EXCALIDRAW, data);
- } catch (error: any) {
- // Unable to access window.localStorage
- console.error(error);
- }
+export const saveMermaidDataToStorage = (mermaidDefinition: string) => {
+ EditorLocalStorage.set(
+ EDITOR_LS_KEYS.MERMAID_TO_EXCALIDRAW,
+ mermaidDefinition,
+ );
 };
 
 export const insertToEditor = ({

src/components/dropdownMenu/DropdownMenuItem.tsx

@@ -49,12 +49,12 @@ export const DropDownMenuItemBadge = ({
  style={{
  display: "inline-flex",
  marginLeft: "auto",
- padding: "1px 4px",
+ padding: "2px 4px",
  background: "pink",
  borderRadius: 6,
- fontSize: 11,
+ fontSize: 9,
  color: "black",
- fontFamily: "monospace",
+ fontFamily: "Cascadia, monospace",
  }}
  >
  {children}

src/constants.ts

@@ -373,5 +373,6 @@ export const TOOL_TYPE = {
 export const EDITOR_LS_KEYS = {
  OAI_API_KEY: "excalidraw-oai-api-key",
  // legacy naming (non)scheme
+ MERMAID_TO_EXCALIDRAW: "mermaid-to-excalidraw",
  PUBLISH_LIBRARY: "publish-library-data",
 } as const;

src/css/styles.scss

@@ -53,14 +53,20 @@
  // component (e.g. if you select text in a sidebar)
  user-select: none;
 
+ .excalidraw-link,
  a {
  font-weight: 500;
  text-decoration: none;
  color: var(--link-color);
+ user-select: none;
+ cursor: pointer;
 
  &:hover {
  text-decoration: underline;
  }
+ &:active {
+ text-decoration: none;
+ }
  }
 
  canvas {

src/tests/__snapshots__/MermaidToExcalidraw.test.tsx.snap

@@ -6,5 +6,5 @@ exports[`Test <MermaidToExcalidraw/> > should open mermaid popup when active too
  B --&gt; C{Let me think}
  C --&gt;|One| D[Laptop]
  C --&gt;|Two| E[iPhone]
- C --&gt;|Three| F[Car]</textarea><div class=\\"ttd-dialog-panel-button-container invisible\\" style=\\"display: flex; align-items: center;\\"><button type=\\"button\\" class=\\"excalidraw-button ttd-dialog-panel-button\\"><div class=\\"\\"></div></button></div></div><div class=\\"ttd-dialog-panel\\"><div class=\\"ttd-dialog-panel__header\\"><label>Preview</label></div><div class=\\"ttd-dialog-output-wrapper\\"><div style=\\"opacity: 1;\\" class=\\"ttd-dialog-output-canvas-container\\"><canvas width=\\"89\\" height=\\"158\\" dir=\\"ltr\\"></canvas></div></div><div class=\\"ttd-dialog-panel-button-container\\" style=\\"display: flex; align-items: center;\\"><button type=\\"button\\" class=\\"excalidraw-button ttd-dialog-panel-button\\"><div class=\\"\\">Insert<span><svg aria-hidden=\\"true\\" focusable=\\"false\\" role=\\"img\\" viewBox=\\"0 0 20 20\\" class=\\"\\" fill=\\"none\\" stroke=\\"currentColor\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\"><g stroke-width=\\"1.25\\"><path d=\\"M4.16602 10H15.8327\\"></path><path d=\\"M12.5 13.3333L15.8333 10\\"></path><path d=\\"M12.5 6.66666L15.8333 9.99999\\"></path></g></svg></span></div></button></div></div></div></div></div></div></div></div></div>"
+ C --&gt;|Three| F[Car]</textarea><div class=\\"ttd-dialog-panel-button-container invisible\\" style=\\"display: flex; align-items: center;\\"><button type=\\"button\\" class=\\"excalidraw-button ttd-dialog-panel-button\\"><div class=\\"\\"></div></button></div></div><div class=\\"ttd-dialog-panel\\"><div class=\\"ttd-dialog-panel__header\\"><label>Preview</label></div><div class=\\"ttd-dialog-output-wrapper\\"><div style=\\"opacity: 1;\\" class=\\"ttd-dialog-output-canvas-container\\"><canvas width=\\"89\\" height=\\"158\\" dir=\\"ltr\\"></canvas></div></div><div class=\\"ttd-dialog-panel-button-container\\" style=\\"display: flex; align-items: center;\\"><button type=\\"button\\" class=\\"excalidraw-button ttd-dialog-panel-button\\"><div class=\\"\\">Insert<span><svg aria-hidden=\\"true\\" focusable=\\"false\\" role=\\"img\\" viewBox=\\"0 0 20 20\\" class=\\"\\" fill=\\"none\\" stroke=\\"currentColor\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\"><g stroke-width=\\"1.25\\"><path d=\\"M4.16602 10H15.8327\\"></path><path d=\\"M12.5 13.3333L15.8333 10\\"></path><path d=\\"M12.5 6.66666L15.8333 9.99999\\"></path></g></svg></span></div></button><div class=\\"ttd-dialog-submit-shortcut\\"><div class=\\"ttd-dialog-submit-shortcut__key\\">Ctrl</div><div class=\\"ttd-dialog-submit-shortcut__key\\">Enter</div></div></div></div></div></div></div></div></div></div></div>"
 `;