PluginProbe
BetterDocs – AI Documentation, Knowledge Base, MCP Server, Docs, Wikis, FAQ & Chatbot / 4.9.5
BetterDocs – AI Documentation, Knowledge Base, MCP Server, Docs, Wikis, FAQ & Chatbot v4.9.5
4.9.5 4.9.4 4.9.3 4.9.2 4.9.1 4.9.0 4.8.2 4.8.1 4.8.0 4.7.0 4.6.2 4.6.1 4.6.0 4.5.6 4.5.5 4.5.4 4.5.3 4.5.2 4.5.1 4.5.0 4.4.1 4.4.0 3.3.4 3.4.0 3.4.1 All 203 releases
betterdocs / react-src / gutenberg / blocks / reactions / src / edit.js

edit.js in BetterDocs – AI Documentation, Knowledge Base, MCP Server, Docs, Wikis, FAQ & Chatbot 4.9.5, at react-src/gutenberg/blocks/reactions/src/edit.js

560 lines 21.5 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 import { __ } from '@wordpress/i18n';
2 import { useEffect, useState } from '@wordpress/element';
3 import { select } from '@wordpress/data';
4 import { useBlockProps } from '@wordpress/block-editor';
5
6 import { ReactionIcon, ReactionIcon2, ReactionIcon3, ReactionIconLayout2Happy, ReactionIconLayout2Neutral, ReactionIconLayout2Sad, ReactionIconLayout3Happy, ReactionIconLayout3Neutral, ReactionIconLayout3Sad } from "../icons/reactionIcon";
7 import { generateTypographyStyles, generateResponsiveRangeStyles, duplicateBlockIdFix, softMinifyCssStrings, isCssExists, generateDimensionsControlStyles, generateBorderShadowStyles } from "../../../util/helpers";
8 import { typoPrefix_reaction_icon_text_layout_3, typoPrefix_title, typoPrefix_title_layout_2, typoPrefix_title_layout_3 } from "./typographyPrefixConstants";
9 import { REACTION_ICON_WIDTH, REACTION_TITLE_PADDING, REACTION_TITLE_MARGIN, REACTION_ICON_HEIGHT, REACTION_ICON_BORDER, REACTION_BOX_PADDING, REACTION_BOX_MARGIN, REACTION_BOX_BORDER, REACTION_ICON_WIDTH_LAYOUT_2, REACTION_ICON_HEIGHT_LAYOUT_2, REACTION_TITLE_PADDING_LAYOUT_2, REACTION_TITLE_MARGIN_LAYOUT_2, REACTION_ICON_BORDER_LAYOUT_2, REACTION_BOX_PADDING_LAYOUT_2, REACTION_BOX_MARGIN_LAYOUT_2, REACTION_BOX_BORDER_LAYOUT_2, REACTION_ICON_WIDTH_LAYOUT_3, REACTION_ICON_HEIGHT_LAYOUT_3, REACTION_TITLE_PADDING_LAYOUT_3, REACTION_TITLE_MARGIN_LAYOUT_3, REACTION_ICON_BORDER_LAYOUT_3, REACTION_BOX_PADDING_LAYOUT_3, REACTION_BOX_MARGIN_LAYOUT_3, REACTION_BOX_BORDER_LAYOUT_3 } from './constants';
10 import Inspector from "./inspector";
11 import { usePreviewDeviceType } from '../../../hooks';
12
13 const edit = ({ attributes, setAttributes, isSelected, clientId }) => {
14 const { resOption, reaction_text, reaction_text_tag, blockId, blockMeta, reaction_text_color, reaction_icon_text_color_layout_3, reaction_icon_color, reaction_icon_hover_color, reaction_inner_icon_color, reaction_inner_icon_hover_color, reaction_box_color, reaction_box_hover_color, layout, reaction_text_color_layout_2, reaction_box_color_layout_2, reaction_box_hover_color_layout_2, reaction_text_color_layout_3, reaction_box_color_layout_3, reaction_box_hover_color_layout_3, show_happy_icon, happy_icon_url, show_neutral_icon, neutral_icon_url, show_sad_icon, sad_icon_url } = attributes;
15
16 const blockProps = useBlockProps({
17 className: `eb-guten-block-main-parent-wrapper`
18 });
19
20 const { typoStylesDesktop:titleTypoDesk, typoStylesTab:titleTypoTab, typoStylesMobile:titleTypoMobile } = generateTypographyStyles({
21 attributes,
22 prefixConstant:layout == 'layout-1' ? typoPrefix_title : ( layout == 'layout-2' ? typoPrefix_title_layout_2 : typoPrefix_title_layout_3 )
23 });
24
25 const { rangeStylesDesktop:iconWidthDesk, rangeStylesTab:iconWidthTab, rangeStylesMobile:iconWidthMob } = generateResponsiveRangeStyles({
26 controlName:layout == 'layout-1' ? REACTION_ICON_WIDTH : ( layout == 'layout-2' ? REACTION_ICON_WIDTH_LAYOUT_2 : REACTION_ICON_WIDTH_LAYOUT_3 ),
27 property:"width",
28 attributes
29 });
30
31 const { rangeStylesDesktop:iconHeightDesk, rangeStylesTab:iconHeightTab, rangeStylesMobile:iconHeightMob } = generateResponsiveRangeStyles({
32 controlName:layout == 'layout-1' ? REACTION_ICON_HEIGHT : ( layout == 'layout-2' ? REACTION_ICON_HEIGHT_LAYOUT_2 : REACTION_ICON_HEIGHT_LAYOUT_3 ),
33 property:"height",
34 attributes
35 });
36
37 const { dimensionStylesDesktop:titlePaddingDesk, dimensionStylesTab:titlePaddingTab, dimensionStylesMobile:titlePaddingMob } = generateDimensionsControlStyles({
38 controlName:layout == 'layout-1' ? REACTION_TITLE_PADDING : ( layout == 'layout-2' ? REACTION_TITLE_PADDING_LAYOUT_2 : REACTION_TITLE_PADDING_LAYOUT_3 ),
39 styleFor:"padding",
40 attributes
41 });
42
43 const { dimensionStylesDesktop:titleMarginDesk, dimensionStylesTab:titleMarginTab, dimensionStylesTab:titleMarginMob } = generateDimensionsControlStyles({
44 controlName:layout == 'layout-1' ? REACTION_TITLE_MARGIN : ( layout == 'layout-2' ? REACTION_TITLE_MARGIN_LAYOUT_2 : REACTION_TITLE_MARGIN_LAYOUT_3 ),
45 styleFor:"margin",
46 attributes
47 })
48
49 const { stylesDesktop:borderIconDeskStyle, stylesTab:borderIconTabStyle, stylesMobile:borderIconMobStyle, stylesHoverDesktop:borderIconHovDeskStyle, stylesHoverTab:borderIconHovTabStyle, stylesHoverMobile:borderIconHovMobStyle, transitionStyle: borderIconTransition } = generateBorderShadowStyles({
50 controlName:layout == 'layout-1' ? REACTION_ICON_BORDER : ( layout == 'layout-2' ? REACTION_ICON_BORDER_LAYOUT_2 : REACTION_ICON_BORDER_LAYOUT_3 ),
51 attributes
52 });
53
54 const { dimensionStylesDesktop:boxStylesDesk, dimensionStylesTab:boxStylesTab, dimensionStylesMobile:boxStylesMob} = generateDimensionsControlStyles({
55 controlName:layout == 'layout-1' ? REACTION_BOX_PADDING : ( layout == 'layout-2' ? REACTION_BOX_PADDING_LAYOUT_2 : REACTION_BOX_PADDING_LAYOUT_3 ),
56 styleFor:"padding",
57 attributes
58 });
59
60 const { dimensionStylesDesktop:boxStylesMarginDesk, dimensionStylesTab:boxStylesMarginTab, dimensionStylesMobile:boxStylesMarginMob } = generateDimensionsControlStyles({
61 controlName:layout == 'layout-1' ? REACTION_BOX_MARGIN : ( layout == 'layout-2' ? REACTION_BOX_MARGIN_LAYOUT_2 : REACTION_BOX_MARGIN_LAYOUT_3 ),
62 styleFor:"margin",
63 attributes
64 })
65
66 const { stylesDesktop:borderBoxDeskStyle, stylesTab:borderBoxTabStyle, stylesMobile:borderBoxMobStyle, stylesHoverDesktop:borderBoxHovDeskStyle, stylesHoverTab:borderBoxHovTabStyle, stylesHoverMobile:borderBoxHovMobStyle, transitionStyle: borderBoxTransition } = generateBorderShadowStyles({
67 controlName:layout == 'layout-1' ? REACTION_BOX_BORDER : (layout == 'layout-2' ? REACTION_BOX_BORDER_LAYOUT_2 : REACTION_BOX_BORDER_LAYOUT_3 ),
68 attributes
69 })
70
71 const { typoStylesDesktop:reactionIconTextTypoDeskLayout3, typoStylesTab:reactionIconTextTypoTabLayout3, typoStylesMobile:reactionIconTextTypoMobLayout3 } = generateTypographyStyles({
72 attributes,
73 prefixConstant:typoPrefix_reaction_icon_text_layout_3
74 });
75
76 //Set the default screen type value to Desktop On Every Reload
77 /**
78 * resOption: __experimentalPreviewDeviceType()
79 * Set Responsive Option
80 */
81 usePreviewDeviceType(setAttributes);
82
83 //Generate Unique Block ID For Every Block Instance
84 useEffect(() => {
85 const BLOCK_PREFIX = "betterdocs-reactions";
86 duplicateBlockIdFix({
87 BLOCK_PREFIX,
88 blockId,
89 setAttributes,
90 select,
91 clientId,
92 });
93 });
94
95 const desktopStyles = `
96 .betterdocs-article-reactions.${blockId}{
97 background:${reaction_box_color};
98 ${boxStylesDesk}
99 ${boxStylesMarginDesk}
100 ${borderBoxDeskStyle}
101 transition:${borderBoxTransition}
102 }
103
104 .betterdocs-article-reactions.${blockId}:hover{
105 background:${reaction_box_hover_color};
106 ${borderBoxHovDeskStyle}
107 }
108
109 .betterdocs-article-reactions.${blockId} .betterdocs-article-reactions-heading .betterdocs-reactions-title-tag {
110 ${titlePaddingDesk}
111 ${titleMarginDesk}
112 color:${reaction_text_color};
113 ${titleTypoDesk}
114 }
115
116 .betterdocs-article-reactions.${blockId} .betterdocs-article-reaction-links li a{
117 ${iconWidthDesk}
118 ${iconHeightDesk}
119 background:${reaction_icon_color}
120 }
121
122 .betterdocs-article-reactions.${blockId} .betterdocs-article-reaction-links li a:hover{
123 background:${reaction_icon_hover_color}
124 }
125
126 .betterdocs-article-reactions .betterdocs-article-reaction-links li a{
127 ${borderIconDeskStyle}
128 transition:${borderIconTransition}
129 }
130
131 .betterdocs-article-reactions .betterdocs-article-reaction-links li a:hover{
132 ${borderIconHovDeskStyle}
133 }
134
135 .betterdocs-article-reactions .betterdocs-article-reaction-links li a svg path{
136 fill:${reaction_inner_icon_color}
137 }
138
139 .betterdocs-article-reactions .betterdocs-article-reaction-links li a:hover svg path{
140 fill:${reaction_inner_icon_hover_color}
141 }
142
143 .${blockId} .betterdocs-article-reactions-box{
144 background:${reaction_box_color_layout_2};
145 ${boxStylesDesk}
146 ${boxStylesMarginDesk}
147 ${borderBoxDeskStyle}
148 transition:${borderBoxTransition}
149 }
150
151 .${blockId} .betterdocs-article-reactions-box:hover{
152 background:${reaction_box_hover_color_layout_2};
153 ${borderBoxHovDeskStyle}
154 }
155
156 .${blockId} .betterdocs-article-reactions-box p {
157 ${titlePaddingDesk}
158 ${titleMarginDesk}
159 color:${reaction_text_color_layout_2};
160 ${titleTypoDesk}
161 }
162
163 .${blockId} .betterdocs-article-reactions-box .layout-2 li a.betterdocs-emoji{
164 ${iconWidthDesk}
165 ${iconHeightDesk}
166 }
167
168 .${blockId} .betterdocs-article-reactions-box .layout-2 li a.betterdocs-emoji{
169 ${borderIconDeskStyle}
170 transition:${borderIconTransition}
171 }
172
173 .${blockId} .betterdocs-article-reactions-box .layout-2 li a.betterdocs-emoji:hover{
174 ${borderIconHovDeskStyle}
175 }
176
177 .${blockId}.betterdocs-article-reactions-blocks{
178 background:${reaction_box_color_layout_3};
179 ${boxStylesDesk}
180 ${boxStylesMarginDesk}
181 ${borderBoxDeskStyle}
182 transition:${borderBoxTransition}
183 }
184
185 .${blockId}.betterdocs-article-reactions-blocks:hover{
186 background:${reaction_box_hover_color_layout_3};
187 ${borderBoxHovDeskStyle}
188 }
189
190 .${blockId}.betterdocs-article-reactions-blocks .betterdocs-article-reactions-sidebar .betterdocs-reactions-title-tag {
191 ${titlePaddingDesk}
192 ${titleMarginDesk}
193 color:${reaction_text_color_layout_3};
194 ${titleTypoDesk}
195 }
196
197 .${blockId}.betterdocs-article-reactions-blocks .betterdocs-article-reactions-sidebar .betterdocs-article-reaction-links li a svg{
198 ${iconWidthDesk}
199 ${iconHeightDesk}
200 }
201
202 .${blockId}.betterdocs-article-reactions-blocks .betterdocs-article-reactions-sidebar .betterdocs-article-reaction-links li a svg{
203 ${borderIconDeskStyle}
204 transition:${borderIconTransition}
205 }
206
207 .${blockId}.betterdocs-article-reactions-blocks .betterdocs-article-reactions-sidebar .betterdocs-article-reaction-links li a svg:hover{
208 ${borderIconHovDeskStyle}
209 }
210
211 .${blockId}.betterdocs-article-reactions-blocks .betterdocs-article-reactions-sidebar .betterdocs-article-reaction-links li .betterdocs-tooltip{
212 color:${reaction_icon_text_color_layout_3};
213 ${reactionIconTextTypoDeskLayout3}
214 }
215 `;
216
217 const tabStyles = `
218 .betterdocs-article-reactions.${blockId}{
219 background:${reaction_box_color};
220 ${boxStylesTab}
221 ${boxStylesMarginTab}
222 ${borderBoxTabStyle}
223 }
224
225 .betterdocs-article-reactions.${blockId}:hover{
226 background:${reaction_box_hover_color};
227 ${borderBoxHovTabStyle}
228 }
229
230 .betterdocs-article-reactions.${blockId} .betterdocs-article-reactions-heading .betterdocs-reactions-title-tag {
231 ${titlePaddingTab}
232 ${titleMarginTab}
233 color:${reaction_text_color};
234 ${titleTypoTab}
235 }
236
237 .betterdocs-article-reactions.${blockId} .betterdocs-article-reaction-links li a{
238 ${iconWidthTab}
239 ${iconHeightTab}
240 background:${reaction_icon_color}
241 }
242
243 .betterdocs-article-reactions .betterdocs-article-reaction-links li a{
244 ${borderIconTabStyle}
245 ${borderIconTransition}
246 }
247
248 .betterdocs-article-reactions .betterdocs-article-reaction-links li a:hover{
249 ${borderIconHovTabStyle}
250 }
251
252 .betterdocs-article-reactions.${blockId} .betterdocs-article-reaction-links li a:hover{
253 background:${reaction_icon_hover_color}
254 fill:${reaction_inner_icon_color}
255 }
256
257
258 .betterdocs-article-reactions .betterdocs-article-reaction-links li a:hover svg path{
259 fill:${reaction_inner_icon_hover_color}
260 }
261
262 .${blockId} .betterdocs-article-reactions-box{
263 ${boxStylesTab}
264 ${boxStylesMarginTab}
265 ${borderBoxTabStyle}
266 }
267
268 .${blockId} .betterdocs-article-reactions-box:hover{
269 ${borderBoxHovTabStyle}
270 }
271
272 .${blockId} .betterdocs-article-reactions-box p {
273 ${titlePaddingTab}
274 ${titleMarginTab}
275 ${titleTypoTab}
276 }
277
278 .${blockId} .betterdocs-article-reactions-box .layout-2 li a.betterdocs-emoji{
279 ${iconWidthTab}
280 ${iconHeightTab}
281 }
282
283 .${blockId} .betterdocs-article-reactions-box .layout-2 li a.betterdocs-emoji{
284 ${borderIconTabStyle}
285 }
286
287 .${blockId} .betterdocs-article-reactions-box .layout-2 li a.betterdocs-emoji:hover{
288 ${borderIconHovTabStyle}
289 }
290
291 .${blockId}.betterdocs-article-reactions-blocks{
292 background:${reaction_box_color_layout_3};
293 ${boxStylesTab}
294 ${boxStylesMarginTab}
295 ${borderBoxTabStyle}
296 }
297
298 .${blockId}.betterdocs-article-reactions-blocks:hover{
299 ${borderBoxHovTabStyle}
300 }
301
302 .${blockId}.betterdocs-article-reactions-blocks .betterdocs-article-reactions-sidebar h5 {
303 ${titlePaddingTab}
304 ${titleMarginTab}
305 ${titleTypoTab}
306 }
307
308 .${blockId}.betterdocs-article-reactions-blocks .betterdocs-article-reactions-sidebar .betterdocs-article-reaction-links li a svg{
309 ${iconWidthTab}
310 ${iconHeightTab}
311 }
312
313 .${blockId}.betterdocs-article-reactions-blocks .betterdocs-article-reactions-sidebar .betterdocs-article-reaction-links li a svg{
314 ${borderIconTabStyle}
315 }
316
317 .${blockId}.betterdocs-article-reactions-blocks .betterdocs-article-reactions-sidebar .betterdocs-article-reaction-links li a svg:hover{
318 ${borderIconHovTabStyle}
319 }
320
321 .${blockId}.betterdocs-article-reactions-blocks .betterdocs-article-reactions-sidebar .betterdocs-article-reaction-links li .betterdocs-tooltip{
322 ${reactionIconTextTypoTabLayout3}
323 }
324 `;
325
326 const mobileStyles = `
327 .betterdocs-article-reactions.${blockId}{
328 background:${reaction_box_color};
329 ${boxStylesMob}
330 ${boxStylesMarginMob}
331 ${borderBoxMobStyle}
332 }
333
334 .betterdocs-article-reactions.${blockId}:hover{
335 background:${reaction_box_hover_color};
336 ${borderBoxHovMobStyle}
337 }
338
339 .betterdocs-article-reactions.${blockId} .betterdocs-article-reactions-heading .betterdocs-reactions-title-tag {
340 ${titlePaddingMob}
341 ${titleMarginMob}
342 color:${reaction_text_color};
343 ${titleTypoMobile}
344 }
345
346 .betterdocs-article-reactions.${blockId} .betterdocs-article-reaction-links li a{
347 ${iconWidthMob}
348 ${iconHeightMob}
349 background:${reaction_icon_color}
350 }
351
352 .betterdocs-article-reactions .betterdocs-article-reaction-links li a{
353 ${borderIconMobStyle}
354 ${borderIconTransition}
355 }
356
357 .betterdocs-article-reactions .betterdocs-article-reaction-links li a:hover{
358 ${borderIconHovMobStyle}
359 }
360
361 .betterdocs-article-reactions.${blockId} .betterdocs-article-reaction-links li a:hover{
362 background:${reaction_icon_hover_color}
363 fill:${reaction_inner_icon_color}
364 }
365
366 .betterdocs-article-reactions .betterdocs-article-reaction-links li a:hover svg path{
367 fill:${reaction_inner_icon_hover_color}
368 }
369
370 .${blockId} .betterdocs-article-reactions-box{
371 ${boxStylesMob}
372 ${boxStylesMarginMob}
373 ${borderBoxMobStyle}
374 }
375
376 .${blockId} .betterdocs-article-reactions-box:hover{
377 ${borderBoxHovMobStyle}
378 }
379
380 .${blockId} .betterdocs-article-reactions-box p {
381 ${titlePaddingMob}
382 ${titleMarginMob}
383 ${titleTypoMobile}
384 }
385
386 .${blockId} .betterdocs-article-reactions-box .layout-2 li a.betterdocs-emoji{
387 ${iconWidthMob}
388 ${iconHeightMob}
389 }
390
391 .${blockId} .betterdocs-article-reactions-box .layout-2 li a.betterdocs-emoji{
392 ${borderIconMobStyle}
393 }
394
395 .${blockId} .betterdocs-article-reactions-box .layout-2 li a.betterdocs-emoji:hover{
396 ${borderIconHovMobStyle}
397 }
398
399 .${blockId}.betterdocs-article-reactions-blocks{
400 background:${reaction_box_color_layout_3};
401 ${boxStylesMob}
402 ${boxStylesMarginMob}
403 ${borderBoxMobStyle}
404 }
405
406 .${blockId}.betterdocs-article-reactions-blocks:hover{
407 ${borderBoxHovMobStyle}
408 }
409
410 .${blockId}.betterdocs-article-reactions-blocks .betterdocs-article-reactions-sidebar h5 {
411 ${titlePaddingMob}
412 ${titleMarginMob}
413 ${titleTypoMobile}
414 }
415
416 .${blockId}.betterdocs-article-reactions-blocks .betterdocs-article-reactions-sidebar .betterdocs-article-reaction-links li a svg{
417 ${iconWidthMob}
418 ${iconHeightMob}
419 }
420
421 .${blockId}.betterdocs-article-reactions-blocks .betterdocs-article-reactions-sidebar .betterdocs-article-reaction-links li a svg{
422 ${borderIconMobStyle}
423 }
424
425 .${blockId}.betterdocs-article-reactions-blocks .betterdocs-article-reactions-sidebar .betterdocs-article-reaction-links li a svg:hover{
426 ${borderIconHovMobStyle}
427 }
428
429 .${blockId}.betterdocs-article-reactions-blocks .betterdocs-article-reactions-sidebar .betterdocs-article-reaction-links li .betterdocs-tooltip{
430 ${reactionIconTextTypoMobLayout3}
431 }
432 `;
433
434 const desktopAllStyles = softMinifyCssStrings(`
435 ${isCssExists(desktopStyles) ? desktopStyles : ''}
436 `);
437
438 const tabAllStyles = softMinifyCssStrings(`
439 ${isCssExists(tabStyles) ? tabStyles : ''}
440 `)
441
442 const mobileAllStyles = softMinifyCssStrings(`
443 ${isCssExists(mobileStyles) ? mobileStyles : ''}
444 `)
445
446 useEffect( () => {
447 const styleObject = {
448 desktop: desktopAllStyles,
449 tab: tabAllStyles,
450 mobile: mobileAllStyles
451 };
452
453 if( JSON.stringify(blockMeta) != JSON.stringify( styleObject ) ) {
454 setAttributes({blockMeta:styleObject})
455 }
456 }, [attributes]);
457
458 return (
459 <>
460 <div {...blockProps}>
461 <style>
462 {`
463 ${desktopAllStyles}
464
465 ${resOption === 'Tablet' ? tabAllStyles : ''}
466 ${resOption === 'Mobile' ? mobileAllStyles : ''}
467
468 @media all and (max-width: 1024px) {
469 ${tabAllStyles}
470 }
471
472 @media all and (max-width: 767px) {
473 ${mobileAllStyles}
474 }
475 `}
476 </style>
477 {isSelected && <Inspector attributes={attributes} setAttributes={setAttributes}/>}
478 {layout == 'layout-1' && <div className={`betterdocs-article-reactions ${blockId}`}>
479 <div className={"betterdocs-article-reactions-heading"}>
480 {React.createElement(reaction_text_tag, { className: "betterdocs-reactions-title-tag" }, reaction_text)}
481 </div>
482 <ul className={"betterdocs-article-reaction-links"}>
483 {show_happy_icon && <li>
484 <a className={"betterdocs-feelings"} data-feelings="happy" href="#">
485 {happy_icon_url?.length > 0 ? <img src={happy_icon_url}/> : <ReactionIcon/>}
486 </a>
487 </li>}
488 {show_neutral_icon && <li>
489 <a className={"betterdocs-feelings"} data-feelings="happy" href="#">
490 {neutral_icon_url?.length > 0 ? <img src={neutral_icon_url}/> : <ReactionIcon2/>}
491 </a>
492 </li>}
493 { show_sad_icon && <li>
494 <a className={"betterdocs-feelings"} data-feelings="happy" href="#">
495 {sad_icon_url?.length > 0 ? <img src={sad_icon_url}/> : <ReactionIcon3/>}
496 </a>
497 </li> }
498 </ul>
499 </div>}
500 {layout == 'layout-2' && <>
501 <div className={`${blockId}`}>
502 <div className="betterdocs-article-reactions-box">
503 <p className="betterdocs-article-reactions-subheading">{reaction_text}</p>
504 <ul className="betterdocs-article-reaction-links layout-2">
505 {show_happy_icon && <li>
506 <a className="betterdocs-emoji" data-feelings="happy" href="#">
507 {happy_icon_url?.length > 0 ? <img src={happy_icon_url}/> : <ReactionIconLayout2Happy/>}
508 </a>
509 <span class="betterdocs-tooltip">Happy</span>
510 </li>}
511 {show_neutral_icon && <li>
512 <a class="betterdocs-emoji" data-feelings="normal" href="#">
513 {neutral_icon_url?.length > 0 ? <img src={neutral_icon_url}/> : <ReactionIconLayout2Neutral/>}
514 </a>
515 <span class="betterdocs-tooltip">Normal</span>
516 </li>}
517 {show_sad_icon && <li>
518 <a class="betterdocs-emoji" data-feelings="sad" href="#">
519 {sad_icon_url?.length > 0 ? <img src={sad_icon_url}/> : <ReactionIconLayout2Sad/>}
520 </a>
521 <span class="betterdocs-tooltip">Sad</span>
522 </li>}
523 </ul>
524 </div>
525 </div>
526 </>}
527 {layout == 'layout-3' && <>
528 <div className={`${blockId} betterdocs-article-reactions-blocks`}>
529 <div className="betterdocs-article-reactions-sidebar">
530 {React.createElement(reaction_text_tag, { className: "betterdocs-reactions-title-tag" }, reaction_text)}
531 <ul className="betterdocs-article-reaction-links layout-3" style={{padding:'0px', margin:"0px"}}>
532 {show_happy_icon && <li>
533 <a className="betterdocs-emoji" data-feelings="happy" href="#">
534 {happy_icon_url?.length > 0 ? <img src={happy_icon_url}/> : <ReactionIconLayout3Happy/>}
535 <span className="betterdocs-tooltip">Happy</span>
536 </a>
537 </li>}
538 {show_neutral_icon && <li>
539 <a className="betterdocs-emoji" data-feelings="normal" href="#">
540 {neutral_icon_url?.length > 0 ? <img src={neutral_icon_url}/> : <ReactionIconLayout3Neutral/>}
541 <span className="betterdocs-tooltip">Normal</span>
542 </a>
543 </li>}
544 {show_sad_icon && <li>
545 <a className="betterdocs-emoji" data-feelings="sad" href="#">
546 {sad_icon_url?.length > 0 ? <img src={sad_icon_url}/> : <ReactionIconLayout3Sad/>}
547 <span className="betterdocs-tooltip">Sad</span>
548 </a>
549 </li>}
550 </ul>
551 </div>
552 </div>
553 </>}
554 </div>
555 </>
556 )
557 }
558
559 export default edit;
560