craft/src/components/basic/Footer.editguard.test.tsx

@@ -0,0 +1,105 @@
+import { describe, test, expect, vi, beforeEach } from 'vitest';
+import React from 'react';
+import { createRoot, Root } from 'react-dom/client';
+import { act } from 'react-dom/test-utils';
+
+/* Footer only needs useNode from @craftjs/core. Mock it following the
+   DOM-harness pattern in src/state/PageContext.slug.test.tsx (no
+   @testing-library/react in this repo) so we can drive `selected` across
+   re-renders and observe setProp calls without a real <Editor> tree. */
+let mockSelected = false;
+let lastCommittedProps: { text: string } = { text: '' };
+const setPropSpy = vi.fn((updater: (p: any) => void) => {
+  updater(lastCommittedProps);
+});
+
+vi.mock('@craftjs/core', () => ({
+  useNode: (collect?: (node: any) => any) => {
+    const node = { events: { selected: mockSelected } };
+    return {
+      connectors: { connect: (el: any) => el, drag: (el: any) => el },
+      actions: { setProp: setPropSpy },
+      ...(collect ? collect(node) : {}),
+    };
+  },
+}));
+
+import { Footer } from './Footer';
+
+let container: HTMLDivElement;
+let root: Root;
+
+function render(ui: React.ReactElement) {
+  container = document.createElement('div');
+  document.body.appendChild(container);
+  act(() => {
+    root = createRoot(container);
+    root.render(ui);
+  });
+}
+
+function rerender(ui: React.ReactElement) {
+  act(() => {
+    root.render(ui);
+  });
+}
+
+beforeEach(() => {
+  mockSelected = false;
+  lastCommittedProps = { text: 'Original' };
+  setPropSpy.mockClear();
+});
+
+describe('Footer edit-guard (mirrors Heading.tsx mechanism)', () => {
+  test('deselecting without a real blur still commits the in-progress edit', () => {
+    mockSelected = true;
+    render(<Footer text="Original" />);
+
+    const el = container.querySelector('footer')!;
+    act(() => {
+      el.innerText = 'Edited footer text';
+      el.dispatchEvent(new Event('input', { bubbles: true }));
+    });
+
+    // No blur event fired -- simulate selection clearing (e.g. clicking
+    // elsewhere) which is the scenario that used to lose the edit.
+    mockSelected = false;
+    rerender(<Footer text="Original" />);
+
+    expect(setPropSpy).toHaveBeenCalled();
+    expect(lastCommittedProps.text).toBe('Edited footer text');
+
+    container.remove();
+  });
+
+  test('a real blur still commits the edit (existing behavior preserved)', () => {
+    mockSelected = true;
+    render(<Footer text="Original" />);
+
+    const el = container.querySelector('footer')!;
+    act(() => {
+      el.innerText = 'Blurred edit';
+      el.dispatchEvent(new Event('input', { bubbles: true }));
+      // React delegates onBlur via native 'focusout' (which bubbles) rather
+      // than 'blur' (which doesn't) -- dispatch what React actually listens for.
+      el.dispatchEvent(new FocusEvent('focusout', { bubbles: true }));
+    });
+
+    expect(setPropSpy).toHaveBeenCalled();
+    expect(lastCommittedProps.text).toBe('Blurred edit');
+
+    container.remove();
+  });
+
+  test('deselecting with no edit made does not call setProp', () => {
+    mockSelected = true;
+    render(<Footer text="Original" />);
+
+    mockSelected = false;
+    rerender(<Footer text="Original" />);
+
+    expect(setPropSpy).not.toHaveBeenCalled();
+
+    container.remove();
+  });
+});

craft/src/components/basic/Footer.tsx

@@ -20,16 +20,33 @@ export const Footer: UserComponent<FooterProps> = ({
   }));
 
   const elRef = useRef<HTMLElement | null>(null);
+  const editedTextRef = useRef<string | null>(null);
 
-  const handleBlur = useCallback(() => {
+  const commitText = useCallback(() => {
     if (elRef.current) {
       const newText = elRef.current.innerText;
+      editedTextRef.current = newText;
       setProp((p: FooterProps) => { p.text = newText; }, 500);
     }
   }, [setProp]);
 
+  // Commit on blur
+  const handleBlur = useCallback(() => { commitText(); }, [commitText]);
+
+  // Also commit on deselect via effect -- covers the case where selection
+  // clears without a real blur (e.g. clicking a different element that
+  // steals selection programmatically), which used to lose the in-progress
+  // edit. Mirrors Heading.tsx's mechanism.
   useEffect(() => {
-    if (elRef.current && !selected) {
+    if (!selected && editedTextRef.current !== null) {
+      setProp((p: FooterProps) => { p.text = editedTextRef.current!; }, 500);
+      editedTextRef.current = null;
+    }
+  }, [selected, setProp]);
+
+  // Set DOM text on mount and when text prop changes externally (not during editing)
+  useEffect(() => {
+    if (elRef.current && !selected && editedTextRef.current === null) {
       elRef.current.innerText = text || '';
     }
   }, [text, selected]);
@@ -43,6 +60,12 @@ export const Footer: UserComponent<FooterProps> = ({
       contentEditable={selected}
       suppressContentEditableWarning
       onBlur={handleBlur}
+      onInput={() => {
+        // Track that we have unsaved edits
+        if (elRef.current) {
+          editedTextRef.current = elRef.current.innerText;
+        }
+      }}
       style={{
         padding: '24px 20px',
         textAlign: 'center',