base-js-sw 1.0.11 → 1.0.12

package/components/LinkPicker.js

@@ -106,6 +106,39 @@ const getResultStatus = (result) => {
 	).toLowerCase();
 };
 
+const getPostId = (value) => {
+	if (typeof value === 'number') {
+		return Number.isInteger(value) && value > 0 ? value : '';
+	}
+
+	if (typeof value !== 'string') {
+		return '';
+	}
+
+	const trimmedValue = value.trim();
+
+	if (!/^\d+$/.test(trimmedValue)) {
+		return '';
+	}
+
+	const numericValue = Number(trimmedValue);
+
+	return Number.isSafeInteger(numericValue) && numericValue > 0
+		? numericValue
+		: '';
+};
+
+const isDirectUrlValue = ({ id, kind, type, url }) => {
+	const normalizedKind = String(kind || '').toLowerCase();
+	const normalizedType = String(type || '').toLowerCase();
+
+	return (
+		normalizedKind === 'url' ||
+		normalizedType === 'url' ||
+		(typeof id === 'string' && id === url)
+	);
+};
+
 const getLinkedPostStatusMessage = (result) => {
 	const status = getResultStatus(result);
 
@@ -151,84 +184,105 @@ const BrokenLinkBadge = ({ message }) => {
 	);
 };
 
-export const LinkPicker = ({ setAttributes, at, linkRef = 'link' }) => {
+export const LinkPicker = ({
+	setAttributes,
+	at,
+	linkRef = 'link'
+}) => {
+
 	const linkObj = at[linkRef] || {};
-	const { url, linkTarget, id } = linkObj;
-	const opensInNewTab = linkTarget === '_blank';
 
-	const [localUrl, setLocalUrl] = useState(url || '');
-	const [localId, setLocalId] = useState(id || '');
-	const [localLinkTarget, setLocalLinkTarget] = useState(opensInNewTab);
+	const {
+		url,
+		linkTarget,
+		id
+	} = linkObj;
 
-	const [linkedPostStatus, setLinkedPostStatus] = useState({
-		isLoading: false,
-		result: null,
-	});
+	const opensInNewTab =
+		linkTarget === '_blank';
 
-	const isInternalPost = Boolean(localId);
-	const hasLinkData = Boolean(localUrl || localId);
+	const initialPostId =
+		getPostId(id);
 
-	const statusLabel = isInternalPost
-		? 'Dynamic WordPress link'
-		: 'External link';
+	const [localUrl, setLocalUrl] =
+		useState(url || '');
 
-	const currentStatus = linkedPostStatus.result
-		? getResultStatus(linkedPostStatus.result)
-		: '';
+	const [localId, setLocalId] =
+		useState(initialPostId);
 
-	const brokenLinkMessage = linkedPostStatus.result
-		? getLinkedPostStatusMessage(linkedPostStatus.result)
-		: '';
+	const [localLinkTarget, setLocalLinkTarget] =
+		useState(opensInNewTab);
+
+	const [linkedPostStatus, setLinkedPostStatus] =
+		useState({
+			isLoading: false,
+			result: null,
+		});
+
+	const postId =
+		getPostId(localId);
+
+	const isInternalPost =
+		Boolean(postId);
+
+	const hasLinkData =
+		Boolean(localUrl || postId);
+
+	const statusLabel =
+		isInternalPost
+			? 'Dynamic WordPress link'
+			: 'External link';
+
+	const currentStatus =
+		linkedPostStatus.result
+			? getResultStatus(linkedPostStatus.result)
+			: '';
+
+	const brokenLinkMessage =
+		linkedPostStatus.result
+			? getLinkedPostStatusMessage(linkedPostStatus.result)
+			: '';
 
 	const shouldShowBrokenLinkStatus =
-		isInternalPost &&
-		linkedPostStatus.result &&
-		STATUSES.includes(currentStatus);
+		isInternalPost
+		&& linkedPostStatus.result
+		&& STATUSES.includes(currentStatus);
 
 	useEffect(() => {
-		setAttributes({
-			[linkRef]: {
-				url: localUrl
-					? encodeURI(safeDecodeURI(localUrl))
-					: '',
-				linkTarget: localLinkTarget
-					? '_blank'
-					: undefined,
-				id: localId
-					? localId
-					: undefined,
-			},
-		});
-	}, [localUrl, localId, localLinkTarget]);
 
-	useEffect(() => {
-		const numericPostId = parseInt(localId, 10);
+		const numericPostId =
+			getPostId(localId);
 
 		const hasValidPostId =
-			Number.isInteger(numericPostId) &&
-			numericPostId > 0;
+			Boolean(numericPostId);
 
 		if (!hasValidPostId) {
+
 			setLinkedPostStatus({
 				isLoading: false,
 				result: null,
 			});
 
 			return;
+
 		}
 
 		if (linkedPostStatusCache[numericPostId]) {
+
 			setLinkedPostStatus({
 				isLoading: false,
 				result: linkedPostStatusCache[numericPostId],
 			});
 
 			return;
+
 		}
 
-		const apiFetch = window.wp?.apiFetch;
+		const apiFetch =
+			window.wp?.apiFetch;
 
 		if (!apiFetch) {
+
 			setLinkedPostStatus({
 				isLoading: false,
 				result: {
@@ -238,6 +292,7 @@ export const LinkPicker = ({ setAttributes, at, linkRef = 'link' }) => {
 			});
 
 			return;
+
 		}
 
 		let isMounted = true;
@@ -251,18 +306,22 @@ export const LinkPicker = ({ setAttributes, at, linkRef = 'link' }) => {
 			path: `/theme/v1/linked-post-validator/post/${numericPostId}`,
 		})
 			.then((result) => {
+
 				if (!isMounted) {
 					return;
 				}
 
-				linkedPostStatusCache[numericPostId] = result;
+				linkedPostStatusCache[numericPostId] =
+					result;
 
 				setLinkedPostStatus({
 					isLoading: false,
 					result,
 				});
+
 			})
 			.catch(() => {
+
 				if (!isMounted) {
 					return;
 				}
@@ -276,73 +335,99 @@ export const LinkPicker = ({ setAttributes, at, linkRef = 'link' }) => {
 					isLoading: false,
 					result: errorResult,
 				});
+
 			});
 
 		return () => {
 			isMounted = false;
 		};
+
 	}, [localId]);
 
-	const handleLinkChange = (updatedValue) => {
-		const { url, opensInNewTab, id } = updatedValue;
+	const handleLinkChange = (updatedValue = {}) => {
 
-		const nextUrl = url || '';
-		const isPostSelection = Boolean(id);
+		const {
+			url,
+			opensInNewTab,
+			id,
+			kind,
+			type,
+		} = updatedValue;
 
-		if (isPostSelection) {
-			setLocalId(id);
-			setLocalUrl(nextUrl);
-		} else {
-			setLocalUrl(nextUrl);
-			setLocalId('');
-		}
+		const nextUrl =
+			url || '';
+
+		/**
+		 * When manually typing,
+		 * Gutenberg keeps previous selected id.
+		 *
+		 * Manual typing has no kind/type.
+		 */
+		const isManualInput =
+			!kind
+			&& !type;
+
+		const nextPostId =
+			isManualInput
+				? undefined
+				: getPostId(id);
+
+		setLocalUrl(nextUrl);
+
+		setLocalId(
+			nextPostId || ''
+		);
+
+		setLocalLinkTarget(
+			Boolean(opensInNewTab)
+		);
+
+		setAttributes({
+			[linkRef]: {
+				url: nextUrl
+					? encodeURI(safeDecodeURI(nextUrl))
+					: '',
+				linkTarget: opensInNewTab
+					? '_blank'
+					: undefined,
+				id: nextPostId || undefined,
+			},
+		});
 
-		setLocalLinkTarget(Boolean(opensInNewTab));
 	};
 
 	return (
 		<div className="base-js-link-picker">
+
 			<style>{linkPickerStyles}</style>
 
 			<div className="base-js-link-picker__control">
+
 				<LinkControl
 					value={{
 						url: localUrl,
 						opensInNewTab: localLinkTarget,
-						id: localId,
+						id: postId || undefined,
 					}}
 					onChange={(updatedValue) => {
 						handleLinkChange(updatedValue);
 					}}
-					onBlur={() => {
-						setAttributes({
-							[linkRef]: {
-								url: localId
-									? ''
-									: localUrl
-										? encodeURI(safeDecodeURI(localUrl))
-										: '',
-								linkTarget: localLinkTarget
-									? '_blank'
-									: undefined,
-								id: localId
-									? localId
-									: undefined,
-							},
-						});
-					}}
 				/>
+
 			</div>
 
 			{hasLinkData && (
 				<div className="base-js-link-picker__status-wrapper">
+
 					<div className="base-js-link-picker__status">
+
 						<Icon
 							icon={isInternalPost ? update : external}
 							size={18}
 						/>
 
 						<span>{statusLabel}</span>
+
 					</div>
 
 					{isInternalPost && linkedPostStatus.isLoading && (
@@ -353,13 +438,18 @@ export const LinkPicker = ({ setAttributes, at, linkRef = 'link' }) => {
 
 					{shouldShowBrokenLinkStatus && (
 						<div className="base-js-link-picker__status-detail">
+
 							<BrokenLinkBadge
 								message={brokenLinkMessage}
 							/>
+
 						</div>
 					)}
+
 				</div>
 			)}
+
 		</div>
 	);
+
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "base-js-sw",
-	"version": "1.0.11",
+	"version": "1.0.12",
 	"description": "Reusable Gutenberg block components for WordPress projects",
 	"main": "index.js",
 	"author": "Shape Works",