@plaudit/gutenberg-api-extensions 2.88.0 → 2.90.0

package/src/editor/post-featured-image.tsx

@@ -1,161 +0,0 @@
-import {Button, FocalPointPicker, Spinner} from "@wordpress/components";
-import type {Attachment} from "@wordpress/core-data";
-import {dispatch, select, useSelect, type SelectFunction} from "@wordpress/data";
-import {PostFeaturedImageCheck, store as editorStore} from "@wordpress/editor";
-import {memo, useCallback, useEffect, useMemo, useState} from "@wordpress/element";
-import {addFilter, applyFilters} from "@wordpress/hooks";
-import {__} from "@wordpress/i18n";
-
-import type {ComponentType} from "react";
-
-type MediaDetailsArgs = Omit<Attachment, 'media_details'>&{media_details: Record<string, any>};
-function getMediaDetails(media: MediaDetailsArgs, postId: any) {
-	if (!media) {
-		return {};
-	}
-
-	const sizes = (media?.media_details?.['sizes'] ?? {}) as Record<string, {width: any, height: any, source_url: string}>;
-
-	const activeSize = sizes[getImageSize('large', media, postId)];
-	if (activeSize !== undefined) {
-		return {
-			mediaWidth: activeSize.width,
-			mediaHeight: activeSize.height,
-			mediaSourceUrl: activeSize.source_url,
-		};
-	}
-
-	// Use fallbackSize when defaultSize is not available.
-	const fallbackSize = sizes[getImageSize('thumbnail', media, postId)];
-	if (fallbackSize !== undefined) {
-		return {
-			mediaWidth: fallbackSize.width,
-			mediaHeight: fallbackSize.height,
-			mediaSourceUrl: fallbackSize.source_url,
-		};
-	}
-
-	// Use full image size when fallbackSize and defaultSize are not available.
-	return {
-		mediaWidth: media.media_details['width'],
-		mediaHeight: media.media_details['height'],
-		mediaSourceUrl: media.source_url,
-	};
-}
-
-type Position = {x: number, y: number};
-function getLivePosition(selectFunction: SelectFunction = select): Position {
-	const {x = 50, y = 50} = (selectFunction(editorStore).getEditedPostAttribute('meta')?.["plaudit_card-image_pos"] ?? {}) as Record<string, any>;
-	return {x: x / 100, y: y / 100};
-}
-function setLivePosition({x, y}: Position) {
-	dispatch(editorStore)
-		.editPost({
-			meta: {"plaudit_card-image_pos": {x: Math.round(x * 100), y: Math.round(y * 100)}}
-		})
-		.catch(e => {
-			console.error(e);
-		});
-}
-
-function getRawLivePosition() {
-	return {x: 50, y: 50, ...((select(editorStore).getEditedPostAttribute('meta')?.["plaudit_card-image_pos"] ?? {}) as Partial<Position>)};
-}
-
-function getImageSize(defaultSize: string, media: MediaDetailsArgs, postId: any): string {
-	let filteredSize = applyFilters('editor.PostFeaturedImage.imageSize', defaultSize, media.id, postId);
-	if (typeof filteredSize !== 'string') {
-		console.error(`The 'editor.PostFeaturedImage.imageSize' filter returned a non-string size (${filteredSize}).`, `Using '${defaultSize}' as a fallback.`);
-		return defaultSize;
-	}
-	return filteredSize;
-}
-
-function wrapPostFeaturedImage(OriginalComponent: ComponentType) {
-	return (props: Record<string, any>) => {
-		const [inFocusMode, setInFocusMode] = useState(false);
-		// This useMemo call makes it so that we only update restorablePosition when the state changes.
-		const restorablePosition = useMemo(getLivePosition, [inFocusMode]);
-
-		const {mediaSourceUrl} = getMediaDetails(props.media, props.currentPostId);
-
-		if (!mediaSourceUrl) {
-			if (select(editorStore).getEditedPostAttribute('featured_media')) {
-				return <Spinner/>;
-			}
-			return <OriginalComponent {...props} />;
-		} else if (!inFocusMode) {
-			return <NotInFocusMode OriginalComponent={OriginalComponent} props={props} setInFocusMode={setInFocusMode} />;
-		}
-		return <InFocusMode mediaSourceUrl={mediaSourceUrl} props={props} restorablePosition={restorablePosition} setInFocusMode={setInFocusMode} />;
-	};
-}
-
-type NotInFocusModeProps = {OriginalComponent: ComponentType, props: Record<string, any>, setInFocusMode(value: boolean): void};
-const NotInFocusMode = memo(({OriginalComponent, props, setInFocusMode}: NotInFocusModeProps) => {
-	const {x, y} = getRawLivePosition();
-	useEffect(() => {
-		let sheet = document.adoptedStyleSheets.find(s => (s as any).identifier === '__POST_FEATURED_IMAGE__');
-		if (!sheet) {
-			sheet = new CSSStyleSheet();
-			(sheet as any).identifier = '__POST_FEATURED_IMAGE__';
-		}
-		sheet.replace(`.plauditPostFeaturedImageWithFocalPoint__wrapper .editor-post-featured-image__preview-image {object-fit: ${x}% ${y}% !important;}`)
-			.catch(e => {
-				console.error(e);
-			});
-		return () => {
-			const sheet = document.adoptedStyleSheets.findIndex(s => (s as any).identifier === '__POST_FEATURED_IMAGE__');
-			if (sheet) {
-				document.adoptedStyleSheets.splice(sheet, 1);
-			}
-		};
-	}, [x, y]);
-	return <PostFeaturedImageCheck>
-		<div className="plauditPostFeaturedImageWithFocalPoint__wrapper">
-			<div className="plauditPostFeaturedImageWithFocalPoint__toggle">
-				<Button onClick={useCallback(() => setInFocusMode(true), [setInFocusMode])} className="editor-post-featured-image__action" text={__("Change Focal Point", 'plaudit')} />
-			</div>
-			<OriginalComponent {...props} />
-		</div>
-	</PostFeaturedImageCheck>;
-});
-
-type InFocusModeProps = {mediaSourceUrl: string, props: Record<string, any>, restorablePosition: Position, setInFocusMode(value: boolean): void};
-const InFocusMode = memo(({mediaSourceUrl, props, restorablePosition, setInFocusMode}: InFocusModeProps) => {
-	// This assembly makes it so that we both get updates if something else triggers a position change while making the focus picker doesn't reset itself
-	const {x, y} = useSelect(getLivePosition, []);
-	const [position, setPosition] = useState({x, y});
-	useEffect(() => setPosition(getLivePosition()), [x, y]);
-
-	return <PostFeaturedImageCheck>
-		{props.noticeUI}
-		<div className="editor-post-featured-image">
-			<FocalPointPicker
-				onChange={useCallback(pos => {
-					setPosition(pos);
-					setLivePosition(pos);
-				}, [setPosition])}
-				url={mediaSourceUrl}
-				value={position}
-			/>
-			<div>
-				<Button text={__("Done", 'plaudit')} onClick={useCallback(() => setInFocusMode(false), [setInFocusMode])} variant="primary" />
-				<Button text={__('Cancel', 'plaudit')} onClick={useCallback(() => {
-					setLivePosition(restorablePosition);
-					setInFocusMode(false);
-				}, [setInFocusMode])} isDestructive />
-			</div>
-		</div>
-	</PostFeaturedImageCheck>;
-})
-
-export function installPostFeaturedImageCardFocusTargeting() {
-	if (!installPostFeaturedImageCardFocusTargeting.called) {
-		installPostFeaturedImageCardFocusTargeting.called = true;
-		addFilter('editor.PostFeaturedImage', 'plaudit-gutenberg-api-extensions/inject-post-featured-image-card-focus-targeting', wrapPostFeaturedImage);
-	}
-}
-export namespace installPostFeaturedImageCardFocusTargeting {
-	export let called: boolean = false;
-}