ꦫꦣꦺꦤ꧀ꦄꦤ꧀ꦠꦱꦺꦤ

PATH: home / bnathsfovv / marcopaolini.info / wp-content / plugins / extendify / src / QuickEdit / components

import {
	addCustomMediaViewsCss,
	removeCustomMediaViewsCss,
} from '@shared/lib/media-views';
import { track } from '@shared/lib/track';
import { useEffect, useRef, useState } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { loadProduct, save, saveProduct } from '../lib/api';
import { invalidateBlockSource } from '../lib/block-source-cache';
import { splice } from '../lib/dom';
import { friendlyMessage } from '../lib/errors';
import { closeModal, mountModal } from '../lib/modal-root';
import { useQuickEditStore } from '../state/store';
import { pushUndo } from '../state/undo';
import { BlockTextEditor } from './BlockTextEditor';
import { ErrorPill } from './ErrorPill';
import { AiImagePickerModal } from './modals/AiImagePickerModal';
import { NavItemModal } from './modals/NavItemModal';
import { ProductPriceModal } from './modals/ProductPriceModal';
import { ProductTextModal } from './modals/ProductTextModal';
import { SiteIdentityModal } from './modals/SiteIdentityModal';
import { SocialLinkModal } from './modals/SocialLinkModal';
import { UnsplashImagePickerModal } from './modals/UnsplashImagePickerModal';
import { WPFormsFieldModal } from './modals/WPFormsFieldModal';

// id parsed from the wp-image-N class; null when the image is a raw URL.
const readImageAttrs = (liveEl) => {
	const img =
		liveEl.querySelector('.wp-block-cover__image-background') ||
		liveEl.querySelector('img');
	if (!img) return null;
	const url = img.getAttribute('src') || '';
	const alt = img.getAttribute('alt') || '';
	let id = null;
	for (const cls of img.classList) {
		const m = /^wp-image-(\d+)$/.exec(cls);
		if (m) {
			id = Number(m[1]);
			break;
		}
	}
	return { url, id, alt };
};

const TEXT_STRATEGIES = {
	'core/paragraph': {
		textTarget: (el) => el,
		textField: 'content',
		extras: ['align'],
	},
	'core/heading': {
		textTarget: (el) => el,
		textField: 'content',
		extras: ['align'],
	},
	'core/button': {
		textTarget: (el) => el.querySelector('a'),
		textField: 'text',
		extras: ['url'],
	},
};

const PICKER_STRATEGIES = {
	'core/image': { field: 'image' },
	'core/cover': { field: 'background' },
	'core/media-text:image': { field: 'media' },
	'product:image': { field: 'image' },
};

// Mounted via lib/modal-root so wp-components' Modal portal stays outside
// our prefix scope. Anything single-field or out-of-band (wp_options) goes here.
const MODAL_BLOCK_TYPES = new Set([
	'core/site-title',
	'core/site-tagline',
	'core/site-logo',
	'core/social-link',
	'core/navigation-link',
	'core/navigation-submenu',
	// product:image is omitted — it routes through ImagePicker so it
	// shares the Library/Upload/AI/Unsplash UX with core/image.
	'product:name',
	'product:short_description',
	'product:description',
	'product:price',
	'wpforms:field',
]);

const SITE_IDENTITY_KIND_BY_BLOCK_TYPE = {
	'core/site-title': 'title',
	'core/site-tagline': 'tagline',
	'core/site-logo': 'logo',
};

export const InlineEditor = () => {
	const selected = useQuickEditStore((s) => s.selected);
	const clearSelected = useQuickEditStore((s) => s.clearSelected);

useEffect(() => {
		if (!selected) return undefined;
		const blockType = selected.blockType;
		if (!MODAL_BLOCK_TYPES.has(blockType)) return undefined;

// Reload on save so site-identity / nav-label changes propagate
		// to every render of those blocks on the page.
		const onAfterSave = (didSave) => {
			closeModal(false);
			clearSelected();
			if (didSave) window.location.reload();
		};

return () => {
			closeModal(false);
		};
	}, [selected, clearSelected]);

if (!selected) return null;
	if (MODAL_BLOCK_TYPES.has(selected.blockType)) return null;

if (TEXT_STRATEGIES[selected.blockType]) {
		return <BlockTextEditor selected={selected} />;
	}
	if (PICKER_STRATEGIES[selected.blockType]) {
		// Key on blockId so React remounts the picker — and its
		// `ImagePickerMenu`, which positions itself in `useState(compute)`
		// once at mount — when the user clicks a different image while
		// the menu is open. Without the key the same instance re-renders
		// with the new `selected` prop but keeps its stale `pos` state,
		// leaving the menu visually pinned to the prior image.
		return (
			<ImagePicker
				key={selected.blockId ?? selected.el}
				selected={selected}
				field={PICKER_STRATEGIES[selected.blockType].field}
			/>
		);
	}
	return <UnsupportedNotice blockType={selected.blockType} />;
};

const ImagePicker = ({ selected, field }) => {
	const [error, setError] = useState(null);
	const clearSelected = useQuickEditStore((s) => s.clearSelected);

useEffect(() => {
		const onDoc = (e) => {
			const menu = document.getElementById('extendify-quick-edit-image-menu');
			if (menu?.contains(e.target)) return;
			// Hover-bar clicks are routed by hover-bar.js' toggle.
			const bar = document.querySelector('.extendify-quick-edit-bar');
			if (bar?.contains(e.target)) return;
			clearSelected();
		};
		const onKey = (e) => {
			if (e.key === 'Escape') {
				e.preventDefault();
				clearSelected();
			}
		};
		// Defer click binding so the click that opened the menu
		// doesn't immediately close it.
		const t = window.setTimeout(() => {
			document.addEventListener('click', onDoc);
		}, 0);
		document.addEventListener('keydown', onKey);
		return () => {
			window.clearTimeout(t);
			document.removeEventListener('click', onDoc);
			document.removeEventListener('keydown', onKey);
		};
	}, [clearSelected]);

// Single-click auto-confirms; wp.media's "Use image" toolbar button
			// is otherwise required. trigger('select') alone leaves the modal
			// open, so close() too. For uploads, wait for the attachment's
			// `uploading` flag to flip and overlay our own spinner so wp.media
			// doesn't flash to the library view mid-upload.
			const selection = frame.state()?.get?.('selection');
			if (selection) {
				selection.on('add', (att) => {
					const commit = () => {
						$modal?.removeClass('extendify-quick-edit-media-uploading');
						frame.state().trigger('select');
						frame.close();
					};
					if (att?.get?.('uploading')) {
						$modal?.addClass('extendify-quick-edit-media-uploading');
						const onChange = () => {
							if (!att.get('uploading')) {
								att.off('change:uploading', onChange);
								commit();
							}
						};
						att.on('change:uploading', onChange);
					} else {
						commit();
					}
				});
			}
		});
		const cleanupModeClass = () => {
			const $modal = frame.modal?.$el;
			$modal?.removeClass(`extendify-quick-edit-mode-${mode}`);
			$modal?.removeClass('extendify-quick-edit-media-uploading');
			removeCustomMediaViewsCss();
		};
		frame.on('close', cleanupModeClass);

if (error) {
		return <ErrorPill message={error} onDismiss={clearSelected} />;
	}

return (
		<ImagePickerMenu selected={selected}>
			<MenuItem onClick={() => openFrame('browse')}>
				{__('Pick from media library', 'extendify-local')}
			</MenuItem>
			<MenuItem onClick={() => openFrame('upload')}>
				{__('Upload', 'extendify-local')}
			</MenuItem>
			<MenuItem onClick={() => openImageModal(AiImagePickerModal)}>
				{__('Generate with AI', 'extendify-local')}
			</MenuItem>
			<MenuItem onClick={() => openImageModal(UnsplashImagePickerModal)}>
				{__('Search for new image', 'extendify-local')}
			</MenuItem>
		</ImagePickerMenu>
	);
};

// Re-anchor on scroll/resize. The menu always drops from the hover bar — the
// pill the user clicked — which `positionBar` (lib/hover-bar.js) places above
// OR below the image depending on viewport room, and which stays mounted for
// picker blocks. Reading the live bar keeps the menu pinned under the pill
// during scroll: hover-bar.js' own scroll listener is registered first, so it
// repositions the bar before this one reads it. Falls back to the image's top
// edge (where the bar would have sat) if the bar is somehow gone.
const ImagePickerMenu = ({ selected, children }) => {
	const menuRef = useRef(null);
	const compute = () => {
		const bar = document
			.querySelector('.extendify-quick-edit-bar')
			?.getBoundingClientRect();
		// Anchor to the media figure for media-text so the menu lands over the
		// image, not the whole block (which spans the text side too).
		const image =
			(selected.mediaEl ?? selected.el)?.getBoundingClientRect?.() ??
			selected.anchorRect ??
			null;
		const anchor = bar ?? image;
		if (!anchor) return { top: 0, left: 0 };
		const MENU_W = 220;
		const MENU_H = 180;
		const GAP = 6;
		// Center on the pill (itself centered on the picked element). Left-
		// aligning to the element's left edge dropped the menu into dead space
		// when the picked element was a viewport-wide cover (`anchor.left ≈ 0`).
		let left = anchor.left + (anchor.width - MENU_W) / 2;
		if (left + MENU_W > window.innerWidth - 4) {
			left = window.innerWidth - MENU_W - 4;
		}
		if (left < 4) left = 4;
		// Drop below the pill; flip above it when there isn't room below.
		let top = bar ? bar.bottom + GAP : image.top;
		if (top + MENU_H > window.innerHeight - 4) {
			top = Math.max(4, (bar ? bar.top : image.bottom) - MENU_H - GAP);
		}
		if (top < 4) top = 4;
		return { top, left };
	};
	const [pos, setPos] = useState(compute);
	useEffect(() => {
		const handler = () => setPos(compute());
		window.addEventListener('scroll', handler, {
			capture: true,
			passive: true,
		});
		window.addEventListener('resize', handler);
		return () => {
			window.removeEventListener('scroll', handler, { capture: true });
			window.removeEventListener('resize', handler);
		};
	}, [selected.el]);

// Standard menu pattern: focus the first item on open. The menu renders
	// at the end of <body>, so Tab alone never reaches it — without this,
	// keyboard users can't operate the picker at all.
	useEffect(() => {
		menuRef.current
			?.querySelector('[role="menuitem"]')
			?.focus({ preventScroll: true });
	}, []);

return (
		<div
			id="extendify-quick-edit-image-menu"
			role="menu"
			ref={menuRef}
			className="extendify-quick-edit-image-menu fixed z-high flex min-w-[220px] flex-col gap-[2px] rounded-[12px] bg-white p-[6px] font-qe shadow-[0_12px_28px_-8px_rgba(15,23,42,0.25),0_0_0_1px_rgba(15,23,42,0.05)]"
			style={pos}
			onKeyDown={onKeyDown}
		>
			{children}
		</div>
	);
};

const MenuItem = ({ onClick, children }) => (
	<button
		type="button"
		role="menuitem"
		className="flex w-full cursor-pointer items-center justify-start rounded-[8px] border-0 bg-transparent px-[12px] py-[10px] text-left text-[13px] font-medium leading-[1.4] text-gray-900 transition-[background] duration-[120ms] hover:bg-gray-100 focus-visible:outline-offset-[-2px] focus-visible:[outline:2px_solid_var(--color-design-main)]"
		onMouseDown={(e) => e.preventDefault()}
		onClick={onClick}
	>
		{children}
	</button>
);

[-] ErrorPill.jsx [edit]
[-] BlockTextEditor.jsx [edit]
[+] modals
[-] InlineEditor.jsx [edit]
[+] toolbar
[+] ..