StandaloneSketchEditor.tsx

/** @jsxImportSource @emotion/react */
/**
 * StandaloneSketchEditor
 *
 * Loads a persisted sketch document by id and mounts the full `SketchEditor`
 * (the same component used in the in-node modal) once the document resolves.
 * Used by both the `/sketch/:documentId` page and the embedded workspace image
 * tab.
 *
 * ## Seed-once contract
 *
 * `useStandaloneSketchDocument` hydrates the global sketch store from the
 * initial document/session state when the id first resolves. React Query
 * background refetches would replace that initial seed and clobber in-progress
 * edits managed by the autosave system, so this component:
 *
 *   1. Disables all background refetches for the load query.
 *   2. Captures the first non-null payload per `documentId` into local state
 *      and feeds *that* stable reference to `SketchEditor`. Subsequent query
 *      data is ignored for the lifetime of the mount, and a new `documentId`
 *      resets the seed.
 */

import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
import { css } from "@emotion/react";
import FileDownloadOutlinedIcon from "@mui/icons-material/FileDownloadOutlined";
import SaveOutlinedIcon from "@mui/icons-material/SaveOutlined";
import AddPhotoAlternateOutlinedIcon from "@mui/icons-material/AddPhotoAlternateOutlined";
import { useTheme } from "@mui/material/styles";
import type { Theme } from "@mui/material/styles";

import { EmptyState, EditorButton, FlexColumn, FlexRow, LoadingSpinner } from "../ui_primitives";
import SketchEditor, { type SketchEditorHandle } from "./SketchEditor";
import SaveToFolderMenu from "../assets/SaveToFolderMenu";
import { trpc } from "../../trpc/client";
import type { SketchDocument } from "./types";
import { useStandaloneSketchDocument } from "../../stores/sketch/SketchSessionStore";
import {
  SketchProvider,
  useSketchSessionStoreApi
} from "../../stores/sketch/SketchInstance";
import {
  useWorkspaceTabsStore,
  tabId
} from "../../stores/WorkspaceTabsStore";
import { useSaveSketchDocument } from "../../hooks/sketch/useSaveSketchDocument";
import { useSaveSketchAsAsset } from "../../hooks/sketch/useSaveSketchAsAsset";

const containerStyles = (theme: Theme) =>
  css({
    width: "100%",
    height: "100%",
    overflow: "hidden",
    backgroundColor: theme.vars.palette.background.default
  });

const centered = { flex: 1, width: "100%", height: "100%" } as const;

interface StandaloneSketchEditorProps {
  documentId: string;
  /** Actions rendered at the trailing edge of the editor's top mode bar. */
  headerActions?: React.ReactNode;
  /**
   * Whether this editor is the focused/visible surface. Drives which instance
   * receives imperative tool/keyboard/save actions. Defaults to `true` for the
   * standalone page; the workspace tab passes its active flag.
   */
  active?: boolean;
}

const StandaloneSketchEditorBody: React.FC<StandaloneSketchEditorProps> = memo(
  function StandaloneSketchEditorBody({ documentId, headerActions, active }) {
    const theme = useTheme();
    const styles = useMemo(() => containerStyles(theme), [theme]);
    const editorRef = useRef<SketchEditorHandle | null>(null);
    const { save, saving } = useSaveSketchDocument();
    const { saveAsAsset, saving: savingAsAsset } = useSaveSketchAsAsset();
    const [saveAsAssetAnchor, setSaveAsAssetAnchor] =
      useState<HTMLElement | null>(null);

    const documentQuery = trpc.sketch.get.useQuery(
      { id: documentId },
      {
        enabled: !!documentId,
        // Background refetches would replace `initialDocument` and clobber
        // unsaved edits managed by the autosave system. Disable them here.
        staleTime: Infinity,
        refetchOnMount: false,
        refetchOnWindowFocus: false,
        refetchOnReconnect: false
      }
    );

    // Seed the editor exactly once per documentId. Keyed by id so navigating
    // between documents in the same session correctly re-seeds.
    const [seed, setSeed] = useState<{
      id: string;
      document: SketchDocument;
    } | null>(null);

    const initialEditorState = useStandaloneSketchDocument(
      documentQuery.data,
      !!documentId
    );

    useEffect(() => {
      if (seed?.id === documentId) return;
      if (!initialEditorState) return;
      setSeed({ id: documentId, document: initialEditorState.document });
    }, [documentId, initialEditorState, seed?.id]);

    // Mirror the workspace tab title into the session name. Renaming the tab
    // persists immediately to the server, but the content autosave also writes
    // `session.name`; without this it would later revert the rename.
    const sessionStore = useSketchSessionStoreApi();
    const tabTitle = useWorkspaceTabsStore(
      (state) =>
        state.tabs.find((t) => t.id === tabId("sketch", documentId))?.title
    );
    useEffect(() => {
      if (tabTitle && tabTitle !== sessionStore.getState().name) {
        sessionStore.getState().setName(tabTitle);
      }
    }, [tabTitle, sessionStore]);

    const handleSave = useCallback(() => {
      void save();
    }, [save]);

    useEffect(() => {
      const handleKeyDown = (event: KeyboardEvent) => {
        if (!(event.metaKey || event.ctrlKey) || event.altKey || event.shiftKey) {
          return;
        }
        if (event.key.toLowerCase() !== "s") {
          return;
        }
        event.preventDefault();
        event.stopPropagation();
        void save();
      };
      window.addEventListener("keydown", handleKeyDown, true);
      return () => window.removeEventListener("keydown", handleKeyDown, true);
    }, [save]);

    const handleExportPng = () => {
      editorRef.current?.exportPng();
    };

    const documentActions = (
      <FlexRow gap={2} align="center" sx={{ flexShrink: 0 }}>
        <EditorButton
          size="small"
          variant="outlined"
          onClick={handleSave}
          disabled={saving}
          startIcon={<SaveOutlinedIcon fontSize="small" />}
          data-testid="sketch-save-document"
          sx={{ height: 34 }}
        >
          {saving ? "Saving…" : "Save"}
        </EditorButton>
        <EditorButton
          size="small"
          variant="outlined"
          onClick={(e) => setSaveAsAssetAnchor(e.currentTarget)}
          disabled={savingAsAsset}
          startIcon={<AddPhotoAlternateOutlinedIcon fontSize="small" />}
          data-testid="sketch-save-as-asset"
          sx={{ height: 34 }}
        >
          {savingAsAsset ? "Saving…" : "Save as Asset"}
        </EditorButton>
        <EditorButton
          size="small"
          variant="outlined"
          onClick={handleExportPng}
          startIcon={<FileDownloadOutlinedIcon fontSize="small" />}
          data-testid="sketch-export-png"
          sx={{ height: 34 }}
        >
          Export PNG
        </EditorButton>
      </FlexRow>
    );

    // Show the spinner until we've captured a seed for this documentId.
    // Using `seed` (not the live query state) keeps the canvas mounted across
    // any future background query state changes.
    if (!seed || seed.id !== documentId) {
      if (documentQuery.isError) {
        return (
          <FlexColumn align="center" justify="center" sx={centered}>
            <EmptyState
              variant="error"
              title="Sketch document not found"
              description="The image document you requested does not exist or you do not have access to it."
            />
          </FlexColumn>
        );
      }
      return (
        <FlexColumn align="center" justify="center" sx={centered}>
          <LoadingSpinner />
        </FlexColumn>
      );
    }

    return (
      <div className="sketch-editor-page" css={styles}>
        <SketchEditor
          ref={editorRef}
          documentId={documentId}
          active={active}
          initialDocument={seed.document}
          initialEditorState={initialEditorState ?? undefined}
          headerActions={
            headerActions ? (
              <>
                {documentActions}
                {headerActions}
              </>
            ) : (
              documentActions
            )
          }
        />
        <SaveToFolderMenu
          anchorEl={saveAsAssetAnchor}
          open={!!saveAsAssetAnchor}
          onClose={() => setSaveAsAssetAnchor(null)}
          onSelectFolder={(folderId) => void saveAsAsset(folderId)}
        />
      </div>
    );
  }
);

StandaloneSketchEditorBody.displayName = "StandaloneSketchEditorBody";

/**
 * Wraps the editor body in a {@link SketchProvider} so each tab / page gets
 * its own isolated sketch stores (editor, session, canvas refs). The autosave
 * and save hooks run inside the body, under the provider, so they bind to this
 * instance's stores rather than a shared singleton.
 */
const StandaloneSketchEditor: React.FC<StandaloneSketchEditorProps> = ({
  active = true,
  ...bodyProps
}) => (
  <SketchProvider active={active}>
    <StandaloneSketchEditorBody active={active} {...bodyProps} />
  </SketchProvider>
);

StandaloneSketchEditor.displayName = "StandaloneSketchEditor";

export default StandaloneSketchEditor;