Add editable headline, description and overline for extra-large-promo…

blocks/extra-large-promo-block/features/extra-large-promo/default.jsx

@@ -39,9 +39,12 @@ const getType = (type, content) => (content?.type === type ? content : undefined
 
 export const ExtraLargePromoPresentation = ({
 	hasOverline,
+	editableOverline,
 	contentHeading,
+	editableHeading,
 	showImage,
 	contentDescription,
+	editableDescription,
 	hasDate,
 	shouldLazyLoad,
 	overlineUrl,
@@ -61,7 +64,11 @@ export const ExtraLargePromoPresentation = ({
 	hasOverline || contentHeading || showImage || contentDescription || contentAuthors || hasDate ? (
 		<LazyLoad enabled={shouldLazyLoad}>
 			<article className={BLOCK_CLASS_NAME}>
-				{hasOverline ? <Overline href={overlineUrl}>{overlineText}</Overline> : null}
+				{hasOverline ? (
+					<Overline href={overlineUrl} suppressContentEditableWarning {...editableOverline}>
+						{overlineText}
+					</Overline>
+				) : null}
 				{contentHeading ||
 				showImage ||
 				contentDescription ||
@@ -71,7 +78,7 @@ export const ExtraLargePromoPresentation = ({
 					<Stack>
 						{contentHeading ? (
 							<HeadingSection>
-								<Heading>
+								<Heading suppressContentEditableWarning {...editableHeading}>
 									<Conditional component={Link} condition={contentUrl} href={contentUrl}>
 										{contentHeading}
 									</Conditional>
@@ -112,7 +119,11 @@ export const ExtraLargePromoPresentation = ({
 								)}
 							</MediaItem>
 						) : null}
-						{contentDescription ? <Paragraph>{contentDescription}</Paragraph> : null}
+						{contentDescription ? (
+							<Paragraph suppressContentEditableWarning {...editableDescription}>
+								{contentDescription}
+							</Paragraph>
+						) : null}
 						{contentAuthors || hasDate ? (
 							<Attribution>
 								<Join separator={Separator}>
@@ -136,7 +147,7 @@ export const ExtraLargePromoPresentation = ({
 
 const ExtraLargePromo = ({ customFields }) => {
 	const { arcSite, isAdmin } = useFusionContext();
-	const { searchableField } = useEditableContent();
+	const { editableContent, searchableField } = useEditableContent();
 	const {
 		dateLocalization: { language, timeZone, dateTimeFormat } = {
 			language: "en",
@@ -290,17 +301,32 @@ const ExtraLargePromo = ({ customFields }) => {
 
 	// Default to websites object data
 	let [overlineText, overlineUrl] = [sectionText, sectionUrl];
+	let editableOverline = content?.websites?.[arcSite]?.website_section?.name
+		? editableContent(content, `websites.${[arcSite]}.website_section.name`)
+		: {};
 
 	if (content?.owner?.sponsored) {
 		overlineText = content?.label?.basic?.text || phrases.t("global.sponsored-content");
 		overlineUrl = null;
+		editableOverline = content?.label?.basic?.text
+			? editableContent(content, "label.basic.text")
+			: {};
 	} else if (shouldUseLabel) {
 		[overlineText, overlineUrl] = [labelText, labelUrl];
+		editableOverline = content?.label?.basic?.text
+			? editableContent(content, "label.basic.text")
+			: {};
 	}
 
 	const hasOverline = showOverline && overlineText;
 	const contentDescription = showDescription ? content?.description?.basic : null;
+	const editableDescription = content?.description
+		? editableContent(content, "description.basic")
+		: {};
 	const contentHeading = showHeadline ? content?.headlines?.basic : null;
+	const editableHeading = content?.headlines?.basic
+		? editableContent(content, "headlines.basic")
+		: {};
 	const contentUrl = content?.websites?.[arcSite]?.website_url;
 	const embedMarkup = playVideoInPlace && getVideoFromANS(content);
 	const contentAuthors =
@@ -351,9 +377,12 @@ const ExtraLargePromo = ({ customFields }) => {
 	return (
 		<ExtraLargePromoPresentation
 			hasOverline={hasOverline}
+			editableOverline={editableOverline}
 			contentHeading={contentHeading}
+			editableHeading={editableHeading}
 			showImage={showImage}
 			contentDescription={contentDescription}
+			editableDescription={editableDescription}
 			hasDate={hasDate}
 			shouldLazyLoad={shouldLazyLoad}
 			overlineUrl={overlineUrl}

blocks/extra-large-promo-block/features/extra-large-promo/default.test.jsx

@@ -1,4 +1,5 @@
 import React from "react";
+import "@testing-library/jest-dom";
 import { render, screen } from "@testing-library/react";
 import { useContent } from "fusion:content";
 
@@ -28,13 +29,13 @@
 			lazyLoad: true,
 		};
 		const { container } = render(<ExtraLargePromo customFields={config} />);
 		expect(container.firstChild).toBe(null);
 	});
 
 	it("should return null if no show flag is true", () => {
 		const config = {};
 		const { container } = render(<ExtraLargePromo customFields={config} />);
 		expect(container.firstChild).toBeNull();
 	});
 
 	it("should return an overline if showOverline is true", () => {
@@ -42,17 +43,56 @@
 			showOverline: true,
 		};
 		render(<ExtraLargePromo customFields={config} />);
 		expect(screen.queryByRole("link", { name: "Premium" })).not.toBeNull();
 	});
 
+	it("should overline text be an editable field", () => {
+		const arcSite = "dagen"; // using default website
+
+		const config = {
+			showOverline: true,
+		};
+		render(<ExtraLargePromo customFields={config} />);
+
+		let overline = mockData?.websites[arcSite]?.website_section?.name;
+
+		if (!!mockData.owner?.sponsored) {
+			overline = mockData.label.basic.text;
+		} else if (!!mockData?.label?.basic?.display) {
+			overline = mockData?.label?.basic?.text;
+		}
+
+		overline ? expect(screen.getByText(overline)).toHaveAttribute("contenteditable", "true") : null; // Bypass test if overline value doesn't exist (to be editable)
+	});
+
 	it("should return a headline if showHeadline is true", () => {
 		const config = {
 			showHeadline: true,
 		};
 		render(<ExtraLargePromo customFields={config} />);
 		expect(screen.queryByRole("heading", { name: config.headline })).not.toBeNull();
 	});
 
+	it("should headline be an editable field", () => {
+		const config = {
+			showHeadline: true,
+		};
+		render(<ExtraLargePromo customFields={config} />);
+
+		expect(screen.queryByRole("heading", { name: mockData.headlines.basic })).toHaveAttribute(
+			"contenteditable",
+		);
+	});
+
+	it("should description be an editable field", () => {
+		const config = {
+			showDescription: true,
+		};
+		render(<ExtraLargePromo customFields={config} />);
+
+		expect(screen.queryByText(mockData.description.basic)).toHaveAttribute("contenteditable");
+	});
+
 	it("should return a image if showImage is true", () => {
 		const config = {
 			imageOverrideURL: "#",
@@ -65,7 +105,7 @@
 			}),
 		};
 		render(<ExtraLargePromo customFields={config} />);
 		expect(screen.queryByRole("img", { name: config.headline })).not.toBeNull();
 	});
 
 	it("should return a fallback image if showImage is true and imageUrl is not valid", () => {
@@ -74,7 +114,7 @@
 			showImage: true,
 		};
 		render(<ExtraLargePromo customFields={config} />);
 		expect(screen.queryByRole("img", { name: config.headline })).not.toBeNull();
 	});
 
 	it("should make a blank call to the signing-service if the image is from PhotoCenter and has an Auth value", () => {
@@ -125,7 +165,7 @@
 		};
 		render(<ExtraLargePromo customFields={config} />);
 		expect(
 			screen.queryByText("Why does August seem hotter? Maybe it comes from weariness."),
 		).not.toBeNull();
 	});
 
@@ -135,7 +175,7 @@
 		};
 		const { getByText } = render(<ExtraLargePromo customFields={config} />);
 		expect(
 			getByText("global.by-text Example Author1, Example Author2, global.and-text Example Author3"),
 		).not.toBeNull();
 	});
 
@@ -144,7 +184,7 @@
 			showDate: true,
 		};
 		render(<ExtraLargePromo customFields={config} />);
 		expect(screen.queryByText("January 30, 2020", { exact: false })).not.toBeNull();
 	});
 
 	it("should returned a sponsored overline if it's sponsored content", () => {
@@ -153,7 +193,7 @@
 			showOverline: true,
 		};
 		render(<ExtraLargePromo customFields={config} />);
 		expect(screen.queryByText("Sponsored")).not.toBeNull();
 	});
 
 	it("should return a video if playVideoInPlace is true and video content available", () => {