/* global React, firebase */
/* ============================================
EditableText / EditableImage / EditableLink
- Wraps any text or image on the site.
- Admin can toggle "Page Edit Mode" via a floating button.
- In edit mode, text becomes contentEditable; images can be replaced.
- Stored in Firestore collection: site_content/{id} { text | url | href }
============================================ */
(function () {
// In-memory cache + subscribers (so all components stay in sync)
const CACHE = {}; // { id: { text, url, href } }
const LISTENERS = {}; // { id: [fn, fn, ...] }
let initialized = false;
function notify(id) {
(LISTENERS[id] || []).forEach(fn => { try { fn(CACHE[id]); } catch (e) {} });
}
function initFirestoreSync() {
if (initialized || !window.fb) return;
initialized = true;
window.fb.db.collection('site_content').onSnapshot(snap => {
snap.docChanges().forEach(ch => {
const id = ch.doc.id;
if (ch.type === 'removed') delete CACHE[id];
else CACHE[id] = ch.doc.data() || {};
notify(id);
});
}, err => console.warn('site_content sync error:', err));
}
if (window.fb) initFirestoreSync();
else setTimeout(initFirestoreSync, 500);
function useContent(id) {
const [val, setVal] = React.useState(CACHE[id] || null);
React.useEffect(() => {
if (!id) return;
const fn = (v) => setVal(v || null);
LISTENERS[id] = LISTENERS[id] || [];
LISTENERS[id].push(fn);
setVal(CACHE[id] || null);
return () => {
LISTENERS[id] = (LISTENERS[id] || []).filter(f => f !== fn);
};
}, [id]);
return val;
}
function useEditMode() {
const [on, setOn] = React.useState(!!window.__effEditMode);
React.useEffect(() => {
const h = () => setOn(!!window.__effEditMode);
window.addEventListener('eff_edit_mode_changed', h);
return () => window.removeEventListener('eff_edit_mode_changed', h);
}, []);
return on;
}
async function saveContent(id, patch) {
if (!window.fb) return;
await window.fb.db.collection('site_content').doc(id).set({
...patch,
updatedAt: firebase.firestore.FieldValue.serverTimestamp(),
}, { merge: true });
}
/* ============================================
...
============================================ */
function childrenToText(children) {
if (children == null || children === false) return '';
if (typeof children === 'string' || typeof children === 'number') return String(children);
if (Array.isArray(children)) return children.map(childrenToText).join('');
if (React.isValidElement(children)) return childrenToText(children.props.children);
return '';
}
function EditableText({ id, children, tag: Tag = 'span', className = '', style, placeholder = 'Click to edit' }) {
const content = useContent(id);
const editMode = useEditMode();
const isAdmin = !!window.__effAdminMode;
const ref = React.useRef(null);
const stored = content?.text;
const canEdit = !!(isAdmin && editMode);
// Render strategy: render empty Tag, set textContent imperatively in a layout effect.
// This prevents React from clobbering user edits during re-renders.
React.useLayoutEffect(() => {
const node = ref.current;
if (!node) return;
if (document.activeElement === node) return; // user is typing
const fallback = childrenToText(children);
const target = stored != null ? stored : fallback;
const display = target || (canEdit ? placeholder : '');
if (node.textContent !== display) node.textContent = display;
}, [stored, canEdit, children, placeholder]);
async function onBlur(e) {
const next = (e.target.innerText || '').replace(/\u00A0/g, ' ').trimEnd();
const fallback = childrenToText(children);
const current = stored != null ? stored : fallback;
if (next === current) return;
try { await saveContent(id, { text: next }); }
catch (err) { console.warn('Save EditableText failed:', err); }
}
function onKeyDown(e) {
if (e.key === 'Enter' && !e.shiftKey) {
e.preventDefault();
e.target.blur();
}
}
function onPaste(e) {
e.preventDefault();
const text = (e.clipboardData || window.clipboardData).getData('text/plain');
document.execCommand('insertText', false, text);
}
if (!id) return {children};
if (typeof Tag === 'string') {
return (
);
}
return {stored != null ? stored : children};
}
/* ============================================
- Admin can click to upload a replacement
- Uses Cloudinary
============================================ */
function EditableImage({ id, defaultSrc, alt = '', style, className = '' }) {
const content = useContent(id);
const editMode = useEditMode();
const isAdmin = !!window.__effAdminMode;
const fileRef = React.useRef(null);
const [uploading, setUploading] = React.useState(false);
const url = content?.url || defaultSrc;
const canEdit = !!(isAdmin && editMode);
async function pick(file) {
if (!file || !window.Cloudinary) return;
setUploading(true);
try {
const u = await window.Cloudinary.uploadToCloudinary(file, `site/${id}`);
await saveContent(id, { url: u });
} catch (e) { alert('Upload failed: ' + e.message); }
finally { setUploading(false); }
}
return (
{url ? 
:
(canEdit ? [ no image ] : null)}
{canEdit && (
<>
e.target.files[0] && pick(e.target.files[0])} />
)}
);
}
/* ============================================
Floating page-edit toggle (only when admin mode is on)
============================================ */
function PageEditToggle() {
const [adminOn, setAdminOn] = React.useState(!!window.__effAdminMode);
const [editOn, setEditOn] = React.useState(!!window.__effEditMode);
React.useEffect(() => {
const h = () => setAdminOn(!!window.__effAdminMode);
window.addEventListener('eff_admin_changed', h);
return () => window.removeEventListener('eff_admin_changed', h);
}, []);
function toggle() {
const next = !editOn;
window.__effEditMode = next;
document.body.classList.toggle('eff-edit-mode', next);
window.dispatchEvent(new CustomEvent('eff_edit_mode_changed'));
setEditOn(next);
}
if (!adminOn) return null;
return (
);
}
// Public API
window.EditableText = EditableText;
window.EditableImage = EditableImage;
window.PageEditToggle = PageEditToggle;
window.EditableSaveContent = saveContent;
})();