Smart Post – Post Grid, Post Carousel, Post Slider Gutenberg Blocks for Blog & News / 4.0.8

Smart Post – Post Grid, Post Carousel, Post Slider Gutenberg Blocks for Blog & News v4.0.8

post-carousel / src / blocks / smart-info-box / editHtml.js

editHtml.js in Smart Post – Post Grid, Post Carousel, Post Slider Gutenberg Blocks for Blog & News 4.0.8, at src/blocks/smart-info-box/editHtml.js

775 lines 21.6 KB

Raw Download Zip

1	import { RichText } from "@wordpress/block-editor";
2	import { memo, useMemo, useEffect } from "@wordpress/element";
3	import { usePanelBodyContext } from "../../context";
4	import useIconList from "../../components/iconLibrary/useIconList";
5
6	const Icon = memo(
7	({
8	iconEnable,
9	iconSource,
10	iconSourceCustom,
11	iconOverlayEnable,
12	iconHoverEffects,
13	currentIcon,
14	togglePanelBody,
15	}) => {
16	const iconClasses = useMemo(
17	() => `sp-smart-post-info-box-icon ${iconOverlayEnable ? "icon-img-overlay" : ""} ${iconHoverEffects}`,
18	[iconOverlayEnable, iconHoverEffects]
19	);
20
21	const imgClasses = useMemo(
22	() => `sp-smart-post-info-box-img ${iconOverlayEnable ? "icon-img-overlay" : ""} ${iconHoverEffects}`,
23	[iconOverlayEnable, iconHoverEffects]
24	);
25
26	if (
27	!iconEnable \|\|
28	(iconSource === "library" && !currentIcon) \|\|
29	(iconSource === "custom" && !iconSourceCustom)
30	) {
31	return null;
32	}
33
34	return (
35	<div
36	className="sp-smart-post-info-box-icon-container editor-selector-hover sp-panel-data"
37	data-component="icon-image"
38	onClick={togglePanelBody}
39	>
40	{iconSource === "library" ? (
41	<span className={iconClasses}>
42	<svg width={currentIcon?.width} height={currentIcon?.height} viewBox={currentIcon?.viewBox}>
43	<path d={currentIcon?.path} />
44	</svg>
45	</span>
46	) : (
47	<div className={imgClasses}>
48	<img src={iconSourceCustom?.url} alt={iconSourceCustom?.alt \|\| "Custom icon"} />
49	</div>
50	)}
51	</div>
52	);
53	}
54	);
55
56	const Title = memo(
57	({
58	titleTag,
59	titleText,
60	titleHoverEffects,
61	subTitleEnable,
62	subTitleTag,
63	subTitleText,
64	setAttributes,
65	togglePanelBody,
66	titleGlobalTypography,
67	subTitleGlobalTypography,
68	}) => {
69	const handleTitleChange = (newValue) => {
70	setAttributes({ titleText: newValue });
71	};
72
73	const handleSubTitleChange = (newValue) => {
74	setAttributes({ subTitleText: newValue });
75	};
76
77	const titleClasses = useMemo(
78	() =>
79	`sp-smart-post-info-box-title title-hover-${titleHoverEffects} ${titleGlobalTypography?.class ? titleGlobalTypography?.class : ""}`,
80	[titleHoverEffects, titleGlobalTypography?.class]
81	);
82
83	return (
84	<div
85	className={`sp-smart-post-info-box-title-container editor-selector-hover sp-panel-data`}
86	data-component="title"
87	onClick={togglePanelBody}
88	>
89	<RichText
90	tagName={titleTag}
91	value={titleText}
92	className={titleClasses}
93	onChange={handleTitleChange}
94	contentEditable={true}
95	/>
96
97	{subTitleEnable && (
98	<RichText
99	tagName={subTitleTag}
100	value={subTitleText}
101	className={`sp-smart-post-info-box-sub-title ${subTitleGlobalTypography?.class ? subTitleGlobalTypography?.class : ""}`}
102	onChange={handleSubTitleChange}
103	contentEditable={true}
104	/>
105	)}
106	</div>
107	);
108	}
109	);
110
111	const Description = memo(({ descText, dropCapsEnable, setAttributes, togglePanelBody, desGlobalTypography }) => {
112	const handleChange = (newValue) => {
113	setAttributes({ descText: newValue });
114	};
115
116	const descClasses = useMemo(
117	() =>
118	`sp-smart-post-info-box-desc sp-panel-data editor-selector-hover ${
119	dropCapsEnable ? "drop-caps" : ""
120	} ${desGlobalTypography?.class ? desGlobalTypography?.class : ""}`,
121	[dropCapsEnable, desGlobalTypography?.class]
122	);
123
124	return (
125	<RichText
126	tagName="p"
127	data-component="description"
128	value={descText}
129	className={descClasses}
130	onChange={handleChange}
131	contentEditable={true}
132	onClick={togglePanelBody}
133	/>
134	);
135	});
136
137	const Rating = memo(
138	({
139	iconsNum,
140	ratingIconSource,
141	ratingIconSourceLibrary,
142	ratingValueEnable,
143	scale,
144	togglePanelBody,
145	ratingGlobalTypography,
146	currentRatingIconSourceLibrary,
147	}) => {
148	const ratingIcons = useMemo(() => Array(iconsNum).fill(null), [iconsNum]);
149
150	const containerClasses = useMemo(
151	() => `sp-smart-post-info-box-rating-container ${ratingIconSource}`,
152	[ratingIconSource]
153	);
154
155	return (
156	<div
157	className={`sp-smart-post-info-box-rating-wrapper editor-selector-hover sp-panel-data ${ratingGlobalTypography?.class ? ratingGlobalTypography?.class : ""}`}
158	data-component="rating"
159	onClick={togglePanelBody}
160	>
161	<div className={containerClasses}>
162	<span className="sp-smart-post-info-box-rating-icons-background">
163	{ratingIcons.map((_, index) => (
164	<svg
165	key={index}
166	width={currentRatingIconSourceLibrary?.width}
167	height={currentRatingIconSourceLibrary?.height}
168	viewBox={currentRatingIconSourceLibrary?.viewBox}
169	className={ratingIconSourceLibrary}
170	>
171	<path d={currentRatingIconSourceLibrary?.path} />
172	</svg>
173	))}
174	</span>
175
176	<span className="sp-smart-post-info-box-rating-icons-foreground">
177	{ratingIcons.map((_, index) => (
178	<svg
179	key={index}
180	width={currentRatingIconSourceLibrary?.width}
181	height={currentRatingIconSourceLibrary?.height}
182	viewBox={currentRatingIconSourceLibrary?.viewBox}
183	className={ratingIconSourceLibrary}
184	>
185	<path d={currentRatingIconSourceLibrary?.path} />
186	</svg>
187	))}
188	</span>
189	</div>
190	{ratingValueEnable && <span className="sp-smart-post-info-box-rating-label">{scale}/5</span>}
191	</div>
192	);
193	}
194	);
195
196	const Separator = memo(({ separatorEnable, togglePanelBody }) => {
197	if (!separatorEnable) {
198	return null;
199	}
200
201	return (
202	<div
203	className="sp-smart-post-info-box-separator-container editor-selector-hover sp-panel-data"
204	data-component="separator"
205	onClick={togglePanelBody}
206	></div>
207	);
208	});
209
210	const CallToActionIcon = memo(
211	({ buttonIconEnable, cAIconSource, cAIconSourceLibrary, cAIconSourceCustom, currentCAIcon }) => {
212	if (!buttonIconEnable) {
213	return null;
214	}
215
216	if (cAIconSource === "library" && cAIconSourceLibrary) {
217	return (
218	<span className={`sp-smart-post-info-box-cta-icon ${cAIconSource}`}>
219	<svg width={currentCAIcon?.width} height={currentCAIcon?.height} viewBox={currentCAIcon?.viewBox}>
220	<path d={currentCAIcon?.path} />
221	</svg>
222	</span>
223	);
224	}
225
226	// Custom image icon rendering
227	if (cAIconSource === "custom" && cAIconSourceCustom?.url) {
228	return (
229	<div className={`sp-smart-post-info-box-cta-icon ${cAIconSource}`}>
230	<img src={cAIconSourceCustom.url} alt={cAIconSourceCustom.alt \|\| "CTA Icon"} />
231	<div className="overlay"></div>
232	</div>
233	);
234	}
235
236	return null;
237	}
238	);
239
240	const CallToActionText = memo(({ caButtonText, setAttributes }) => {
241	const handleTextChange = (newValue) => {
242	setAttributes({ caButtonText: newValue });
243	};
244
245	const buttonTextWithDefault = useMemo(() => caButtonText?.trim() \|\| "Learn More", [caButtonText]);
246
247	return (
248	<RichText
249	tagName="span"
250	value={buttonTextWithDefault}
251	className="sp-smart-post-info-box-cta-label"
252	onChange={handleTextChange}
253	/>
254	);
255	});
256
257	const CallToActionButton = memo(
258	({
259	linkingType = "button",
260	caButtonText,
261	setAttributes,
262	togglePanelBody,
263	buttonIconEnable,
264	cAIconSource,
265	cAIconSourceLibrary,
266	cAIconSourceCustom,
267	callActionEnable,
268	callToActionGlobalTypography,
269	fullWidthButton = false,
270	currentCAIcon,
271	}) => {
272	const buttonClasses = useMemo(
273	() =>
274	`sp-smart-post-info-box-cta sp-panel-data linking-type-${linkingType} sp-smart-post-info-box-cta-link editor-selector-hover${linkingType === "button" && fullWidthButton ? " sp-btn-full-width" : ""} ${callToActionGlobalTypography?.class ? callToActionGlobalTypography?.class : ""}`,
275	[linkingType, callToActionGlobalTypography?.class, fullWidthButton]
276	);
277
278	if (!callActionEnable) {
279	return null;
280	}
281	if (linkingType === "fullBox") {
282	return null;
283	}
284
285	return (
286	<a
287	// href="javascript:void(0)"
288	className={buttonClasses}
289	data-component="callToAction"
290	onClick={(event) => {
291	event.preventDefault();
292	togglePanelBody();
293	}}
294	>
295	<CallToActionText caButtonText={caButtonText} setAttributes={setAttributes} />
296
297	<CallToActionIcon
298	buttonIconEnable={buttonIconEnable}
299	cAIconSource={cAIconSource}
300	cAIconSourceLibrary={cAIconSourceLibrary}
301	cAIconSourceCustom={cAIconSourceCustom}
302	currentCAIcon={currentCAIcon}
303	/>
304	</a>
305	);
306	}
307	);
308
309	const Badge = memo(({ badgeEnable, badgeLabel, badgePosition, togglePanelBody, badgeGlobalTypography }) => {
310	const badgeClasses = useMemo(
311	() =>
312	`sp-smart-post-info-box-badge sp-panel-data editor-selector-hover ${badgePosition} ${badgeGlobalTypography?.class ? badgeGlobalTypography?.class : ""}`,
313	[badgePosition, badgeGlobalTypography?.class]
314	);
315
316	if (!badgeEnable \|\| !badgeLabel) {
317	return null;
318	}
319
320	return (
321	<div className={badgeClasses} data-component="badge" onClick={togglePanelBody}>
322	<span className="sp-smart-post-info-box-badge-label">{badgeLabel}</span>
323	</div>
324	);
325	});
326
327	const Overlay = memo(({ infoBoxBg, imageOverlayEnable, imageOverlayHoverEnable }) => {
328	const shouldShowOverlay = useMemo(
329	() =>
330	(infoBoxBg.color.style === "image" \|\| infoBoxBg.hover.style === "image") &&
331	(imageOverlayEnable \|\| imageOverlayHoverEnable),
332	[infoBoxBg, imageOverlayEnable, imageOverlayHoverEnable]
333	);
334
335	if (!shouldShowOverlay) {
336	return null;
337	}
338
339	return <div className="sp-smart-post-info-box-overlay"></div>;
340	});
341
342	function EditHtml({ attributes, setAttributes }) {
343	const { togglePanelBody } = usePanelBodyContext();
344	const iconList = useIconList();
345
346	const {
347	uniqueId,
348	infoBoxLayout,
349	iconEnable,
350	iconSource,
351	iconHoverEffects,
352	iconSourceCustom,
353	iconOverlayEnable,
354	titleTag,
355	titleText,
356	subTitleTag,
357	subTitleText,
358	subTitleEnable,
359	separatorEnable,
360	titleHoverEffects,
361	caButtonText,
362	descText,
363	descriptionEnable,
364	dropCapsEnable,
365	badgeEnable,
366	badgeLabel,
367	badgePosition,
368	ratingEnable,
369	ratingIconSourceLibrary,
370	ratingIconSource,
371	cAIconSourceCustom,
372	scale,
373	linkingType,
374	titleEnable,
375	buttonIconEnable,
376	cAIconSource,
377	cAIconSourceLibrary,
378	overlayOnHover,
379	externalLinkIcon,
380	callActionEnable,
381	ratingValueEnable,
382	imageOverlayEnable,
383	imageOverlayHoverEnable,
384	iconName,
385	infoBoxBg,
386	advancedAdditionalClass,
387	titleGlobalTypography,
388	subTitleGlobalTypography,
389	desGlobalTypography,
390	callToActionGlobalTypography,
391	ratingGlobalTypography,
392	badgeGlobalTypography,
393	buttonLink,
394	currentIcon,
395	fullWidthButton,
396	currentCAIcon,
397	currentRatingIconSourceLibrary,
398	} = attributes;
399
400	useEffect(() => {
401	setAttributes({ currentIcon: iconList[iconName] });
402	}, [iconList, iconName]);
403
404	useEffect(() => {
405	setAttributes({ currentCAIcon: iconList[cAIconSourceLibrary] });
406	}, [iconList, cAIconSourceLibrary]);
407
408	useEffect(() => {
409	setAttributes({ currentRatingIconSourceLibrary: iconList[ratingIconSourceLibrary] });
410	}, [iconList, ratingIconSourceLibrary]);
411
412	useEffect(() => {
413	setAttributes({ currentIcon: iconList[iconName] });
414	}, [iconList, iconName]);
415
416	const iconsNum = 5;
417
418	const layoutOne = () => {
419	return (
420	<>
421	<Badge
422	badgeEnable={badgeEnable}
423	badgeLabel={badgeLabel}
424	badgePosition={badgePosition}
425	togglePanelBody={togglePanelBody}
426	badgeGlobalTypography={badgeGlobalTypography}
427	/>
428
429	<Overlay
430	infoBoxBg={infoBoxBg}
431	imageOverlayEnable={imageOverlayEnable}
432	imageOverlayHoverEnable={imageOverlayHoverEnable}
433	/>
434
435	<Icon
436	iconEnable={iconEnable}
437	iconSource={iconSource}
438	iconSourceCustom={iconSourceCustom}
439	iconOverlayEnable={iconOverlayEnable}
440	iconHoverEffects={iconHoverEffects}
441	currentIcon={currentIcon}
442	togglePanelBody={togglePanelBody}
443	/>
444
445	{titleEnable && (
446	<Title
447	titleTag={titleTag}
448	titleText={titleText}
449	titleHoverEffects={titleHoverEffects}
450	subTitleEnable={subTitleEnable}
451	subTitleTag={subTitleTag}
452	subTitleText={subTitleText}
453	setAttributes={setAttributes}
454	togglePanelBody={togglePanelBody}
455	titleGlobalTypography={titleGlobalTypography}
456	subTitleGlobalTypography={subTitleGlobalTypography}
457	/>
458	)}
459
460	<Separator separatorEnable={separatorEnable} togglePanelBody={togglePanelBody} />
461
462	{descriptionEnable && (
463	<Description
464	descText={descText}
465	dropCapsEnable={dropCapsEnable}
466	setAttributes={setAttributes}
467	togglePanelBody={togglePanelBody}
468	desGlobalTypography={desGlobalTypography}
469	/>
470	)}
471
472	{ratingEnable && (
473	<Rating
474	iconsNum={iconsNum}
475	ratingIconSource={ratingIconSource}
476	ratingIconSourceLibrary={ratingIconSourceLibrary}
477	ratingValueEnable={ratingValueEnable}
478	scale={scale}
479	togglePanelBody={togglePanelBody}
480	ratingGlobalTypography={ratingGlobalTypography}
481	currentRatingIconSourceLibrary={currentRatingIconSourceLibrary}
482	/>
483	)}
484
485	<CallToActionButton
486	linkingType={linkingType}
487	caButtonText={caButtonText}
488	setAttributes={setAttributes}
489	togglePanelBody={togglePanelBody}
490	buttonIconEnable={buttonIconEnable}
491	cAIconSource={cAIconSource}
492	cAIconSourceLibrary={cAIconSourceLibrary}
493	cAIconSourceCustom={cAIconSourceCustom}
494	buttonLink={buttonLink}
495	callActionEnable={callActionEnable}
496	callToActionGlobalTypography={callToActionGlobalTypography}
497	fullWidthButton={infoBoxLayout !== "smart-info-box-layout-four" && fullWidthButton}
498	currentCAIcon={currentCAIcon}
499	/>
500	</>
501	);
502	};
503
504	const layoutTwo = () => {
505	return (
506	<>
507	<Badge
508	badgeEnable={badgeEnable}
509	badgeLabel={badgeLabel}
510	badgePosition={badgePosition}
511	togglePanelBody={togglePanelBody}
512	badgeGlobalTypography={badgeGlobalTypography}
513	/>
514	<Overlay
515	infoBoxBg={infoBoxBg}
516	imageOverlayEnable={imageOverlayEnable}
517	imageOverlayHoverEnable={imageOverlayHoverEnable}
518	/>
519	<div className="sp-smart-post-info-box-layout-two-top">
520	<Icon
521	iconEnable={iconEnable}
522	iconSource={iconSource}
523	iconSourceCustom={iconSourceCustom}
524	iconOverlayEnable={iconOverlayEnable}
525	iconHoverEffects={iconHoverEffects}
526	currentIcon={currentIcon}
527	togglePanelBody={togglePanelBody}
528	/>
529	{infoBoxLayout === "smart-info-box-layout-two" && titleEnable && (
530	<Title
531	titleTag={titleTag}
532	titleText={titleText}
533	titleHoverEffects={titleHoverEffects}
534	subTitleEnable={subTitleEnable}
535	subTitleTag={subTitleTag}
536	subTitleText={subTitleText}
537	setAttributes={setAttributes}
538	togglePanelBody={togglePanelBody}
539	titleGlobalTypography={titleGlobalTypography}
540	subTitleGlobalTypography={subTitleGlobalTypography}
541	/>
542	)}
543
544	{infoBoxLayout === "smart-info-box-layout-four" && (
545	<CallToActionButton
546	linkingType={linkingType}
547	caButtonText={caButtonText}
548	setAttributes={setAttributes}
549	togglePanelBody={togglePanelBody}
550	buttonIconEnable={buttonIconEnable}
551	cAIconSource={cAIconSource}
552	cAIconSourceLibrary={cAIconSourceLibrary}
553	cAIconSourceCustom={cAIconSourceCustom}
554	callActionEnable={callActionEnable}
555	buttonLink={buttonLink}
556	callToActionGlobalTypography={callToActionGlobalTypography}
557	fullWidthButton={infoBoxLayout !== "smart-info-box-layout-four" && fullWidthButton}
558	currentCAIcon={currentCAIcon}
559	/>
560	)}
561	</div>
562
563	<Separator separatorEnable={separatorEnable} togglePanelBody={togglePanelBody} />
564
565	{descriptionEnable && (
566	<Description
567	descText={descText}
568	dropCapsEnable={dropCapsEnable}
569	setAttributes={setAttributes}
570	togglePanelBody={togglePanelBody}
571	desGlobalTypography={desGlobalTypography}
572	/>
573	)}
574
575	{ratingEnable && (
576	<Rating
577	iconsNum={iconsNum}
578	ratingIconSource={ratingIconSource}
579	ratingIconSourceLibrary={ratingIconSourceLibrary}
580	ratingValueEnable={ratingValueEnable}
581	scale={scale}
582	togglePanelBody={togglePanelBody}
583	ratingGlobalTypography={ratingGlobalTypography}
584	currentRatingIconSourceLibrary={currentRatingIconSourceLibrary}
585	/>
586	)}
587
588	{infoBoxLayout === "smart-info-box-layout-two" && (
589	<CallToActionButton
590	linkingType={linkingType}
591	caButtonText={caButtonText}
592	setAttributes={setAttributes}
593	togglePanelBody={togglePanelBody}
594	buttonIconEnable={buttonIconEnable}
595	cAIconSource={cAIconSource}
596	cAIconSourceLibrary={cAIconSourceLibrary}
597	cAIconSourceCustom={cAIconSourceCustom}
598	callActionEnable={callActionEnable}
599	buttonLink={buttonLink}
600	callToActionGlobalTypography={callToActionGlobalTypography}
601	fullWidthButton={infoBoxLayout !== "smart-info-box-layout-four" && fullWidthButton}
602	currentCAIcon={currentCAIcon}
603	/>
604	)}
605
606	{infoBoxLayout === "smart-info-box-layout-four" && titleEnable && (
607	<Title
608	titleTag={titleTag}
609	titleText={titleText}
610	titleHoverEffects={titleHoverEffects}
611	subTitleEnable={subTitleEnable}
612	subTitleTag={subTitleTag}
613	subTitleText={subTitleText}
614	setAttributes={setAttributes}
615	togglePanelBody={togglePanelBody}
616	titleGlobalTypography={titleGlobalTypography}
617	subTitleGlobalTypography={subTitleGlobalTypography}
618	/>
619	)}
620	</>
621	);
622	};
623
624	const layoutThree = () => {
625	return (
626	<>
627	<div className="sp-smart-post-info-box-icon-wrapper">
628	<Icon
629	iconEnable={iconEnable}
630	iconSource={iconSource}
631	iconSourceCustom={iconSourceCustom}
632	iconOverlayEnable={iconOverlayEnable}
633	iconHoverEffects={iconHoverEffects}
634	currentIcon={currentIcon}
635	togglePanelBody={togglePanelBody}
636	/>
637	</div>
638	<article className="sp-smart-post-info-box-content-wrapper">
639	<Badge
640	badgeEnable={badgeEnable}
641	badgeLabel={badgeLabel}
642	badgePosition={badgePosition}
643	togglePanelBody={togglePanelBody}
644	badgeGlobalTypography={badgeGlobalTypography}
645	/>
646	<Overlay
647	infoBoxBg={infoBoxBg}
648	imageOverlayEnable={imageOverlayEnable}
649	imageOverlayHoverEnable={imageOverlayHoverEnable}
650	/>
651
652	{titleEnable && (
653	<Title
654	titleTag={titleTag}
655	titleText={titleText}
656	titleHoverEffects={titleHoverEffects}
657	subTitleEnable={subTitleEnable}
658	subTitleTag={subTitleTag}
659	subTitleText={subTitleText}
660	setAttributes={setAttributes}
661	togglePanelBody={togglePanelBody}
662	titleGlobalTypography={titleGlobalTypography}
663	subTitleGlobalTypography={subTitleGlobalTypography}
664	/>
665	)}
666
667	<Separator separatorEnable={separatorEnable} togglePanelBody={togglePanelBody} />
668
669	{descriptionEnable && (
670	<Description
671	descText={descText}
672	dropCapsEnable={dropCapsEnable}
673	setAttributes={setAttributes}
674	togglePanelBody={togglePanelBody}
675	desGlobalTypography={desGlobalTypography}
676	/>
677	)}
678
679	{ratingEnable && (
680	<Rating
681	iconsNum={iconsNum}
682	ratingIconSource={ratingIconSource}
683	ratingIconSourceLibrary={ratingIconSourceLibrary}
684	ratingValueEnable={ratingValueEnable}
685	scale={scale}
686	togglePanelBody={togglePanelBody}
687	ratingGlobalTypography={ratingGlobalTypography}
688	currentRatingIconSourceLibrary={currentRatingIconSourceLibrary}
689	/>
690	)}
691
692	{callActionEnable && (
693	<CallToActionButton
694	linkingType={linkingType}
695	caButtonText={caButtonText}
696	setAttributes={setAttributes}
697	togglePanelBody={togglePanelBody}
698	buttonIconEnable={buttonIconEnable}
699	cAIconSource={cAIconSource}
700	cAIconSourceLibrary={cAIconSourceLibrary}
701	cAIconSourceCustom={cAIconSourceCustom}
702	callActionEnable={callActionEnable}
703	buttonLink={buttonLink}
704	callToActionGlobalTypography={callToActionGlobalTypography}
705	fullWidthButton={infoBoxLayout !== "smart-info-box-layout-four" && fullWidthButton}
706	currentCAIcon={currentCAIcon}
707	/>
708	)}
709	</article>
710	</>
711	);
712	};
713
714	return (
715	<div
716	className={`sp-smart-post-wrapper sp-panel-data sp-smart-post-info-box-wrapper sp-smart-post-info-box-editor-page ${advancedAdditionalClass}`}
717	id={uniqueId}
718	data-component="general"
719	onClick={togglePanelBody}
720	>
721	{callActionEnable && linkingType === "fullBox" ? (
722	<div className="sp-smart-post-info-box-fullbox-link">
723	<section className={`sp-smart-post-info-box ${infoBoxLayout}`}>
724	{overlayOnHover && (
725	<div className="sp-smart-post-info-button-fullbox-overlay">
726	{externalLinkIcon && (
727	<span>
728	<svg
729	className="sp-smart-post-info-button-fullbox-overlay-svg"
730	xmlns="http://www.w3.org/2000/svg"
731	width="40"
732	height="40"
733	viewBox="0 0 40 40"
734	fill="none"
735	>
736	<path
737	d="M32.5001 7.5H20.8334V10H28.2323L18.2829 19.9494L20.0506 21.7172L30.0001 11.7678V19.1667H32.5001V7.5Z"
738	fill="white"
739	/>
740	<path
741	d="M10.8333 9.16667C8.99238 9.16667 7.5 10.6591 7.5 12.5V29.1667C7.5 31.0076 8.99238 32.5 10.8333 32.5H27.5C29.3409 32.5 30.8333 31.0076 30.8333 29.1667V24.1667H28.3333V29.1667C28.3333 29.6269 27.9602 30 27.5 30H10.8333C10.3731 30 10 29.6269 10 29.1667V12.5C10 12.0398 10.3731 11.6667 10.8333 11.6667H15.8333V9.16667H10.8333Z"
742	fill="white"
743	/>
744	</svg>
745	</span>
746	)}
747	</div>
748	)}
749
750	{(infoBoxLayout === "smart-info-box-layout-one" \|\|
751	infoBoxLayout === "smart-info-box-layout-five") &&
752	layoutOne()}
753	{(infoBoxLayout === "smart-info-box-layout-two" \|\|
754	infoBoxLayout === "smart-info-box-layout-four") &&
755	layoutTwo()}
756	{infoBoxLayout === "smart-info-box-layout-three" && layoutThree()}
757	</section>
758	</div>
759	) : (
760	<section className={`sp-smart-post-info-box ${infoBoxLayout}`}>
761	{(infoBoxLayout === "smart-info-box-layout-one" \|\|
762	infoBoxLayout === "smart-info-box-layout-five") &&
763	layoutOne()}
764	{(infoBoxLayout === "smart-info-box-layout-two" \|\|
765	infoBoxLayout === "smart-info-box-layout-four") &&
766	layoutTwo()}
767	{infoBoxLayout === "smart-info-box-layout-three" && layoutThree()}
768	</section>
769	)}
770	</div>
771	);
772	}
773
774	export default EditHtml;
775