mirror of
https://github.com/AmruthPillai/Reactive-Resume.git
synced 2026-07-14 14:57:00 +10:00
Bring back Undo/Redo functionality in the resume builder (#2629)
This commit is contained in:
Amruth Pillai
GitHub
+21
-19
@@ -31,12 +31,12 @@
|
||||
"typecheck": "tsc --noEmit"
|
||||
},
|
||||
"dependencies": {
|
||||
"@ai-sdk/anthropic": "^3.0.23",
|
||||
"@ai-sdk/google": "^3.0.13",
|
||||
"@ai-sdk/openai": "^3.0.19",
|
||||
"@ai-sdk/anthropic": "^3.0.28",
|
||||
"@ai-sdk/google": "^3.0.15",
|
||||
"@ai-sdk/openai": "^3.0.21",
|
||||
"@aws-sdk/client-s3": "^3.975.0",
|
||||
"@better-auth/core": "1.5.0-beta.9",
|
||||
"@better-auth/passkey": "1.5.0-beta.9",
|
||||
"@better-auth/core": "1.5.0-beta.10",
|
||||
"@better-auth/passkey": "1.5.0-beta.10",
|
||||
"@dnd-kit/core": "^6.3.1",
|
||||
"@dnd-kit/sortable": "^10.0.0",
|
||||
"@dnd-kit/utilities": "^3.2.2",
|
||||
@@ -56,39 +56,40 @@
|
||||
"@sindresorhus/slugify": "^3.0.0",
|
||||
"@t3-oss/env-core": "^0.13.10",
|
||||
"@tanstack/react-query": "5.90.20",
|
||||
"@tanstack/react-router": "^1.157.15",
|
||||
"@tanstack/react-router-ssr-query": "^1.157.15",
|
||||
"@tanstack/react-start": "^1.157.15",
|
||||
"@tanstack/zod-adapter": "^1.157.15",
|
||||
"@tanstack/react-router": "^1.157.16",
|
||||
"@tanstack/react-router-ssr-query": "^1.157.16",
|
||||
"@tanstack/react-start": "^1.157.16",
|
||||
"@tanstack/zod-adapter": "^1.157.16",
|
||||
"@tiptap/extension-highlight": "^3.17.1",
|
||||
"@tiptap/extension-table": "^3.17.1",
|
||||
"@tiptap/extension-text-align": "^3.17.1",
|
||||
"@tiptap/pm": "^3.17.1",
|
||||
"@tiptap/react": "^3.17.1",
|
||||
"@tiptap/starter-kit": "^3.17.1",
|
||||
"ai": "^6.0.50",
|
||||
"ai": "^6.0.57",
|
||||
"ai-sdk-ollama": "^3.3.0",
|
||||
"bcrypt": "^6.0.0",
|
||||
"better-auth": "1.5.0-beta.9",
|
||||
"better-auth": "1.5.0-beta.10",
|
||||
"class-variance-authority": "^0.7.1",
|
||||
"clsx": "^2.1.1",
|
||||
"cmdk": "^1.1.1",
|
||||
"dompurify": "^3.3.1",
|
||||
"drizzle-orm": "^1.0.0-beta.12-a5629fb",
|
||||
"es-toolkit": "^1.44.0",
|
||||
"fast-deep-equal": "^3.1.3",
|
||||
"fuse.js": "^7.1.0",
|
||||
"immer": "^11.1.3",
|
||||
"input-otp": "^1.4.2",
|
||||
"js-cookie": "^3.0.5",
|
||||
"monaco-editor": "^0.55.1",
|
||||
"motion": "^12.29.2",
|
||||
"nodemailer": "^7.0.12",
|
||||
"nodemailer": "^7.0.13",
|
||||
"pg": "^8.17.2",
|
||||
"puppeteer-core": "^24.36.0",
|
||||
"puppeteer-core": "^24.36.1",
|
||||
"qrcode.react": "^4.2.0",
|
||||
"radix-ui": "^1.4.3",
|
||||
"react": "^19.2.3",
|
||||
"react-dom": "^19.2.3",
|
||||
"react": "^19.2.4",
|
||||
"react-dom": "^19.2.4",
|
||||
"react-hook-form": "^7.71.1",
|
||||
"react-hotkeys-hook": "^5.2.3",
|
||||
"react-resizable-panels": "^4.5.2",
|
||||
@@ -108,6 +109,7 @@
|
||||
"uuid": "^13.0.0",
|
||||
"workbox-window": "^7.4.0",
|
||||
"zod": "^4.3.6",
|
||||
"zundo": "^2.3.0",
|
||||
"zustand": "^5.0.10"
|
||||
},
|
||||
"devDependencies": {
|
||||
@@ -119,9 +121,9 @@
|
||||
"@types/bcrypt": "^6.0.0",
|
||||
"@types/js-cookie": "^3.0.6",
|
||||
"@types/node": "^25.0.10",
|
||||
"@types/nodemailer": "^7.0.5",
|
||||
"@types/nodemailer": "^7.0.9",
|
||||
"@types/pg": "^8.16.0",
|
||||
"@types/react": "^19.2.9",
|
||||
"@types/react": "^19.2.10",
|
||||
"@types/react-dom": "^19.2.3",
|
||||
"@vitejs/plugin-react": "^5.1.2",
|
||||
"babel-plugin-macros": "^3.1.0",
|
||||
@@ -129,8 +131,8 @@
|
||||
"knip": "^5.82.1",
|
||||
"nitro": "npm:nitro-nightly@latest",
|
||||
"node-addon-api": "^8.5.0",
|
||||
"node-gyp": "^12.1.0",
|
||||
"npm-check-updates": "^19.3.1",
|
||||
"node-gyp": "^12.2.0",
|
||||
"npm-check-updates": "^19.3.2",
|
||||
"tsx": "^4.21.0",
|
||||
"typescript": "^5.9.3",
|
||||
"vite": "npm:rolldown-vite@latest",
|
||||
|
||||
Generated
+1031
-1427
File diff suppressed because it is too large
Load Diff
@@ -1,10 +1,14 @@
|
||||
import { t } from "@lingui/core/macro";
|
||||
import { debounce } from "es-toolkit";
|
||||
import isDeepEqual from "fast-deep-equal";
|
||||
import type { WritableDraft } from "immer";
|
||||
import { current } from "immer";
|
||||
import { toast } from "sonner";
|
||||
import type { TemporalState } from "zundo";
|
||||
import { temporal } from "zundo";
|
||||
import { immer } from "zustand/middleware/immer";
|
||||
import { create } from "zustand/react";
|
||||
import { useStoreWithEqualityFn } from "zustand/traditional";
|
||||
import { orpc, type RouterOutput } from "@/integrations/orpc/client";
|
||||
import type { ResumeData } from "@/schema/resume/data";
|
||||
|
||||
@@ -33,30 +37,44 @@ const syncResume = debounce(_syncResume, 500, { signal });
|
||||
|
||||
let errorToastId: string | number | undefined;
|
||||
|
||||
type PartializedState = { resume: Resume | null };
|
||||
|
||||
export const useResumeStore = create<ResumeStore>()(
|
||||
immer((set) => ({
|
||||
resume: null as unknown as Resume,
|
||||
isReady: false,
|
||||
temporal(
|
||||
immer((set) => ({
|
||||
resume: null as unknown as Resume,
|
||||
isReady: false,
|
||||
|
||||
initialize: (resume) => {
|
||||
set((state) => {
|
||||
state.resume = resume as Resume;
|
||||
state.isReady = resume !== null;
|
||||
});
|
||||
initialize: (resume) => {
|
||||
set((state) => {
|
||||
state.resume = resume as Resume;
|
||||
state.isReady = resume !== null;
|
||||
useResumeStore.temporal.getState().clear();
|
||||
});
|
||||
},
|
||||
|
||||
updateResumeData: (fn) => {
|
||||
set((state) => {
|
||||
if (!state.resume) return state;
|
||||
|
||||
if (state.resume.isLocked) {
|
||||
errorToastId = toast.error(t`This resume is locked and cannot be updated.`, { id: errorToastId });
|
||||
return state;
|
||||
}
|
||||
|
||||
fn(state.resume.data);
|
||||
syncResume(current(state.resume));
|
||||
});
|
||||
},
|
||||
})),
|
||||
{
|
||||
partialize: (state) => ({ resume: state.resume }),
|
||||
equality: (pastState, currentState) => isDeepEqual(pastState, currentState),
|
||||
limit: 100,
|
||||
},
|
||||
|
||||
updateResumeData: (fn) => {
|
||||
set((state) => {
|
||||
if (!state.resume) return state;
|
||||
|
||||
if (state.resume.isLocked) {
|
||||
errorToastId = toast.error(t`This resume is locked and cannot be updated.`, { id: errorToastId });
|
||||
return state;
|
||||
}
|
||||
|
||||
fn(state.resume.data);
|
||||
syncResume(current(state.resume));
|
||||
});
|
||||
},
|
||||
})),
|
||||
),
|
||||
);
|
||||
|
||||
export function useTemporalStore<T>(selector: (state: TemporalState<PartializedState>) => T): T {
|
||||
return useStoreWithEqualityFn(useResumeStore.temporal, selector);
|
||||
}
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
import { BetterAuthError } from "@better-auth/core/error";
|
||||
import { and, eq, or } from "drizzle-orm";
|
||||
import { passkey } from "@better-auth/passkey";
|
||||
import { drizzleAdapter } from "better-auth/adapters/drizzle";
|
||||
import { betterAuth } from "better-auth/minimal";
|
||||
import { apiKey, type GenericOAuthConfig, genericOAuth, twoFactor } from "better-auth/plugins";
|
||||
import { username } from "better-auth/plugins/username";
|
||||
import { tanstackStartCookies } from "better-auth/tanstack-start";
|
||||
import { and, eq, or } from "drizzle-orm";
|
||||
import { db } from "@/integrations/drizzle/client";
|
||||
import { env } from "@/utils/env";
|
||||
import { hashPassword, verifyPassword } from "@/utils/password";
|
||||
@@ -111,7 +111,7 @@ const getAuthConfig = () => {
|
||||
user: {
|
||||
changeEmail: {
|
||||
enabled: true,
|
||||
sendChangeEmailVerification: async ({ user, newEmail, url }) => {
|
||||
sendChangeEmailConfirmation: async ({ user, newEmail, url }) => {
|
||||
await sendEmail({
|
||||
to: newEmail,
|
||||
subject: "Verify your new email",
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
import { t } from "@lingui/core/macro";
|
||||
import {
|
||||
ArrowUUpLeftIcon,
|
||||
ArrowUUpRightIcon,
|
||||
CircleNotchIcon,
|
||||
CubeFocusIcon,
|
||||
FileJsIcon,
|
||||
@@ -13,9 +15,11 @@ import { useMutation, useQuery } from "@tanstack/react-query";
|
||||
import { useParams } from "@tanstack/react-router";
|
||||
import { motion } from "motion/react";
|
||||
import { useCallback, useMemo } from "react";
|
||||
import { useHotkeys } from "react-hotkeys-hook";
|
||||
import { useControls } from "react-zoom-pan-pinch";
|
||||
import { toast } from "sonner";
|
||||
import { useCopyToClipboard } from "usehooks-ts";
|
||||
import { useTemporalStore } from "@/components/resume/store/resume";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
|
||||
import { authClient } from "@/integrations/auth/client";
|
||||
@@ -35,6 +39,19 @@ export function BuilderDock() {
|
||||
orpc.printer.printResumeAsPDF.mutationOptions(),
|
||||
);
|
||||
|
||||
const { undo, redo, pastStates, futureStates } = useTemporalStore((state) => ({
|
||||
undo: state.undo,
|
||||
redo: state.redo,
|
||||
pastStates: state.pastStates,
|
||||
futureStates: state.futureStates,
|
||||
}));
|
||||
|
||||
const canUndo = pastStates.length > 1;
|
||||
const canRedo = futureStates.length > 0;
|
||||
|
||||
useHotkeys("mod+z", () => undo(), { enabled: canUndo, preventDefault: true });
|
||||
useHotkeys(["mod+y", "mod+shift+z"], () => redo(), { enabled: canRedo, preventDefault: true });
|
||||
|
||||
const publicUrl = useMemo(() => {
|
||||
if (!session?.user.username || !resume?.slug) return "";
|
||||
return `${window.location.origin}/${session.user.username}/${resume.slug}`;
|
||||
@@ -82,6 +99,9 @@ export function BuilderDock() {
|
||||
transition={{ duration: 0.2 }}
|
||||
className="flex items-center rounded-r-full rounded-l-full bg-popover px-2 shadow-xl"
|
||||
>
|
||||
<DockIcon icon={ArrowUUpLeftIcon} title={t`Undo (Ctrl+Z)`} disabled={!canUndo} onClick={() => undo()} />
|
||||
<DockIcon icon={ArrowUUpRightIcon} title={t`Redo (Ctrl+Y)`} disabled={!canRedo} onClick={() => redo()} />
|
||||
<div className="mx-1 h-8 w-px bg-border" />
|
||||
<DockIcon icon={MagnifyingGlassPlusIcon} title={t`Zoom in`} onClick={() => zoomIn(0.1)} />
|
||||
<DockIcon icon={MagnifyingGlassMinusIcon} title={t`Zoom out`} onClick={() => zoomOut(0.1)} />
|
||||
<DockIcon icon={CubeFocusIcon} title={t`Center view`} onClick={() => centerView()} />
|
||||
|
||||
Reference in New Issue
Block a user