Preserve scroll position when switching between edit and view mode

**AI Analysis** (by Claude)

# Issue #52 Analysis: Preserve Scroll Position When Switching Between Edit and View Mode

## 1. Root Cause Analysis

The issue stems from the edit/view mode toggle likely triggering a full page re-render or navigation that doesn't preserve the current scroll position. This typically happens when:

- The edit/view toggle causes a route change or component unmounting/remounting

- React's default behavior resets scroll position on state changes

- No scroll position management is implemented in the mode switching logic

The user experience is degraded because they lose their place on longer pages, requiring manual scrolling to return to their working area.

## 2. Affected Files

Based on typical Next.js website builder architecture, these files are likely involved:

- `/app/editor/[siteId]/page.tsx` - Main editor page component

- `/components/editor/EditorLayout.tsx` - Editor layout wrapper

- `/components/editor/EditModeToggle.tsx` or similar - Mode switching component

- `/hooks/useEditorMode.ts` - Custom hook for managing edit state (if exists)

- `/store/editorStore.ts` - Zustand store for editor state

- `/components/preview/PreviewMode.tsx` - Preview/view mode component

## 3. Resolution Approach

### Step 1: Implement Scroll Position Hook

Create a custom hook to manage scroll position:

```typescript

// hooks/useScrollPosition.ts

export const useScrollPosition = () => {

const [scrollPosition, setScrollPosition] = useState(0);

const saveScrollPosition = useCallback(() => {

setScrollPosition(window.scrollY);

}, []);

const restoreScrollPosition = useCallback(() => {

window.scrollTo(0, scrollPosition);

}, [scrollPosition]);

return { saveScrollPosition, restoreScrollPosition, scrollPosition };

};

```

### Step 2: Update Editor Store

Add scroll position management to the Zustand store:

```typescript

// store/editorStore.ts

interface EditorState {

isEditMode: boolean;

savedScrollPosition: number;

toggleEditMode: () => void;

setSavedScrollPosition: (position: number) => void;

}

```

### Step 3: Implement in Mode Toggle Component

Update the edit mode toggle to save/restore scroll position:

```typescript

// components/editor/EditModeToggle.tsx

const toggleMode = () => {

// Save current scroll position before switching

setSavedScrollPosition(window.scrollY);

toggleEditMode();

// Restore scroll position after mode switch (next frame)

setTimeout(() => {

window.scrollTo(0, savedScrollPosition);

}, 0);

};

```

### Step 4: Add Configuration Option

Implement user preference for scroll behavior:

```typescript

// Add to user preferences or editor settings

interface EditorSettings {

preserveScrollPosition: boolean;

}

```

### Step 5: Handle Edge Cases

- Account for different page heights between modes

- Handle smooth scrolling preferences

- Ensure compatibility with mobile devices

## 4. Complexity Estimate

**Medium Complexity**

**Reasoning:**

- Requires creating new scroll management logic

- Needs integration with existing state management

- Must handle timing issues with React re-renders

- Should include user preference configuration

- Requires testing across different page layouts and devices

- Not overly complex but involves multiple touchpoints in the codebase

## 5. Dependencies

### Prerequisites:

- Understanding of current edit/view mode implementation

- Access to editor state management system

- Knowledge of how page renders are triggered during mode switches

### Potential Blockers:

- If edit/view modes use different routing that causes full page reloads

- Complex page structure differences between modes that affect scroll behavior

- Performance considerations if pages are very long with heavy content

- Mobile Safari scroll restoration quirks may need special handling

### Related Work:

- May want to coordinate with any planned editor UX improvements

- Consider impact on existing keyboard shortcuts or editor workflows

- Ensure compatibility with any planned accessibility improvements

This enhancement would significantly improve the user experience for content creators working on longer pages, making the editor more efficient and user-friendly.

View→edit scroll preservation is live; edit→view was investigated, found infeasible, and the commit message documents why (with a pointer to issue #52) so a future contributor doesn't redo the same dead-end work.

View→edit scroll preservation is live; edit→view was investigated, found infeasible, and the commit message documents why (with a pointer to issue #52) so a future contributor doesn't redo the same dead-end work.