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 / searchbox / 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/searchbox/src/edit.js

1,558 lines 66.7 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /**
2 * WordPress dependencies
3 */
4 import { __ } from "@wordpress/i18n";
5 import { useEffect } from "@wordpress/element";
6 import { select } from "@wordpress/data";
7 import { useBlockProps } from "@wordpress/block-editor";
8 import { applyFilters, doAction } from "@wordpress/hooks";
9 import { safeHTML } from '@wordpress/dom';
10 import SearchField from "../../../../public/shortcodes/search-modal/SearchField";
11 import { useRef } from "@wordpress/element";
12
13 /**
14 * Internal dependencies
15 */
16 import Inspector from "./inspector";
17
18 import {
19 softMinifyCssStrings,
20 isCssExists,
21 duplicateBlockIdFix,
22 generateDimensionsControlStyles,
23 generateBorderShadowStyles,
24 generateTypographyStyles,
25 generateBackgroundControlStyles,
26 generateResponsiveRangeStyles,
27 } from "../../../util/helpers";
28 import {
29 BOX_BACKGROUND,
30 BOX_PADDING,
31 FIELD_PADDING,
32 FIELD_BORDER,
33 ICON_SIZE,
34 RESULT_BOX_WIDTH,
35 RESULT_BOX_MAXWIDTH,
36 RESULT_BOX_BACKGROUND,
37 RESULT_BOX_BORDER,
38 ITEM_PADDING,
39 ITEM_BORDER,
40 WRAPPER_MARGIN,
41 BOX_BACKGROUND_LAYOUT_2,
42 BOX_PADDING_LAYOUT_2,
43 FIELD_PADDING_LAYOUT_2,
44 FIELD_BORDER_LAYOUT_2,
45 ICON_SIZE_LAYOUT_2,
46 SEARCH_MODAL_FIELD_BACKGROUND,
47 SEARCH_MODAL_CONTENT_TABS_ICON_SIZE,
48 SEARCH_MODAL_CONTENT_TABS_BORDER,
49 SEARCH_MODAL_CONTENT_TABS_LIST_ICON_SIZE,
50 SEARCH_MODAL_CONTENT_TABS_LIST_BORDER,
51 SEARCH_MODAL_CONTENT_TABS_LIST_CATEGORY_ICON_SIZE,
52 SEARCH_BUTTON_BACKGROUND_LAYOUT_2,
53 WRAPPER_MARGIN_LAYOUT_2,
54 AI_SUGGESTION_MARGIN,
55 AI_SUGGESTION_PADDING,
56 AI_SUGGESTION_BUTTON_MARGIN,
57 AI_SUGGESTION_BUTTON_PADDING
58 } from "./constants";
59 import {
60 typoPrefix_fieldtext,
61 typoPrefix_resulttext,
62 typoPrefix_fieldtext_layout_2,
63 SEARCH_MODAL_FIELD_TYPO,
64 SEARCH_MODAL_CATEGORY_FIELD_TYPO,
65 SEARCH_MODAL_CONTENT_TABS_TYPO,
66 SEARCH_MODAL_CONTENT_TABS_LIST_TYPO,
67 SEARCH_MODAL_CONTENT_TABS_LIST_CATEGORY_TYPO,
68 SEARCH_BUTTON_LAYOUT_2_TYPO,
69 AI_SUGGESTION_TITLE_TYPO,
70 AI_SUGGESTION_QUERY_TYPO,
71 AI_SUGGESTION_RESPONSE_TYPO,
72 AI_SUGGESTION_BUTTON_TYPO
73 } from "./typographyPrefixConstants";
74
75 import { usePreviewDeviceType } from "../../../hooks";
76
77 const edit = ({ attributes, setAttributes, isSelected, clientId }) => {
78 const {
79 blockMeta,
80 blockId,
81 resOption,
82 placeholderText,
83 fieldBackgroundColor,
84 fieldTextColor,
85 searchIconColor,
86 closeIconColor,
87 closeBorderColor,
88 itemColor,
89 itemHoverColor,
90 categorySearch,
91 searchButton,
92 popularSearch,
93 searchLayout,
94 searchModalLayout,
95 searchModalWidth,
96 searchModalWidthUnit,
97 searchModalPosition,
98 fieldBackgroundColorLayout2,
99 fieldTextColorLayout2,
100 searchIconColorLayout2,
101 searchModalMagnifierColor,
102 searchModalFieldColor,
103 searchModalFieldPlaceholderColor,
104 searchModalCategoryColor,
105 searchModalContentTabsListColor,
106 searchModalContentTabsListCategoryColor,
107 searchHeading,
108 searchSubHeading,
109 popularSearchLayout2,
110 categorySearchLayout2,
111 searchButtonLayout2,
112 initialDocsNumber,
113 initialFAQNumber,
114 searchModalQueryDocIds,
115 searchModalQueryTermIds,
116 searchButtonLayout2Color,
117 searchModalQueriesFaqGroupIds,
118 docQueryType,
119 faqQueryType,
120 // AI Search Suggestions attributes
121 enable_ai_powered_search,
122 ai_suggestion_background_color,
123 ai_suggestion_hover_background_color,
124 ai_suggestion_title_color,
125 ai_suggestion_query_color,
126 ai_suggestion_response_color,
127 ai_suggestion_button_color,
128 ai_suggestion_button_bg_color
129 } = attributes;
130
131
132
133 // this useEffect is for setting the resOption attribute to desktop/tab/mobile depending on the added 'eb-res-option-' class
134 /**
135 * resOption: __experimentalPreviewDeviceType()
136 * Set Responsive Option
137 */
138 usePreviewDeviceType(setAttributes);
139
140 // this useEffect is for creating an unique id for each block's unique className by a random unique number
141 useEffect(() => {
142 const BLOCK_PREFIX = "betterdocs-searchbox";
143 duplicateBlockIdFix({
144 BLOCK_PREFIX,
145 blockId,
146 setAttributes,
147 select,
148 clientId,
149 });
150 }, []);
151
152 const blockProps = useBlockProps({
153 className: `bd-guten-block-main-parent-wrapper`,
154 });
155
156 // search box background
157 const {
158 backgroundStylesDesktop: boxBackgroundStylesDesktop,
159 hoverBackgroundStylesDesktop: boxHoverBackgroundStylesDesktop,
160 backgroundStylesTab: boxBackgroundStylesTab,
161 hoverBackgroundStylesTab: boxHoverBackgroundStylesTab,
162 backgroundStylesMobile: boxBackgroundStylesMobile,
163 hoverBackgroundStylesMobile: boxHoverBackgroundStylesMobile,
164 bgTransitionStyle: boxBgTransitionStyle,
165 } = generateBackgroundControlStyles({
166 attributes,
167 controlName: searchLayout == 'layout-1' ? BOX_BACKGROUND : BOX_BACKGROUND_LAYOUT_2,
168 noOverlay: true,
169 });
170
171 // Box Padding
172 const {
173 dimensionStylesDesktop: boxPaddingDesktop,
174 dimensionStylesTab: boxPaddingTab,
175 dimensionStylesMobile: boxPaddingMobile,
176 } = generateDimensionsControlStyles({
177 controlName: searchLayout == 'layout-1' ? BOX_PADDING : BOX_PADDING_LAYOUT_2,
178 styleFor: "padding",
179 attributes,
180 });
181
182 // search text typography
183 const {
184 typoStylesDesktop: textTypoStylesDesktop,
185 typoStylesTab: textTypoStylesTab,
186 typoStylesMobile: textTypoStylesMobile,
187 } = generateTypographyStyles({
188 attributes,
189 prefixConstant: searchLayout == 'layout-1' ? typoPrefix_fieldtext : typoPrefix_fieldtext_layout_2,
190 defaultFontSize: searchLayout == 'layout-1' ? 14 : 16,
191 });
192
193 // Box Padding
194 const {
195 dimensionStylesDesktop: textPaddingDesktop,
196 dimensionStylesTab: textPaddingTab,
197 dimensionStylesMobile: textPaddingMobile,
198 } = generateDimensionsControlStyles({
199 controlName: searchLayout == 'layout-1' ? FIELD_PADDING : FIELD_PADDING_LAYOUT_2,
200 styleFor: "padding",
201 attributes,
202 });
203
204 // text field border
205 const {
206 stylesDesktop: textFieldBdShadowStyesDesktop,
207 stylesTab: textFieldBdShadowStyesTab,
208 stylesMobile: textFieldBdShadowStyesMobile,
209 stylesHoverDesktop: textFieldBdShadowStylesHoverDesktop,
210 stylesHoverTab: textFieldBdShadowStylesHoverTab,
211 stylesHoverMobile: textFieldBdShadowStylesHoverMobile,
212 transitionStyle: textFieldBdShadowTransitionStyle,
213 } = generateBorderShadowStyles({
214 controlName: searchLayout == 'layout-1' ? FIELD_BORDER : FIELD_BORDER_LAYOUT_2,
215 noShadow: true,
216 attributes,
217 });
218
219 // search icon size
220 const {
221 rangeStylesDesktop: searchIconSizeDesktop,
222 rangeStylesTab: searchIconSizeTab,
223 rangeStylesMobile: searchIconSizeMobile,
224 } = generateResponsiveRangeStyles({
225 controlName: ICON_SIZE,
226 property: "width",
227 attributes,
228 });
229
230 // result box width
231 const {
232 rangeStylesDesktop: resultBoxWidthDesktop,
233 rangeStylesTab: resultBoxWidthTab,
234 rangeStylesMobile: resultBoxWidthMobile,
235 } = generateResponsiveRangeStyles({
236 controlName: RESULT_BOX_WIDTH,
237 property: "width",
238 attributes,
239 });
240
241 // result box max-width
242 const {
243 rangeStylesDesktop: resultBoxMaxWidthDesktop,
244 rangeStylesTab: resultBoxMaxWidthTab,
245 rangeStylesMobile: resultBoxMaxWidthMobile,
246 } = generateResponsiveRangeStyles({
247 controlName: RESULT_BOX_MAXWIDTH,
248 property: "max-width",
249 attributes,
250 });
251
252 // result box background
253 const {
254 backgroundStylesDesktop: resultBoxBackgroundStylesDesktop,
255 hoverBackgroundStylesDesktop: resultBoxHoverBackgroundStylesDesktop,
256 backgroundStylesTab: resultBoxBackgroundStylesTab,
257 hoverBackgroundStylesTab: resultBoxHoverBackgroundStylesTab,
258 backgroundStylesMobile: resultBoxBackgroundStylesMobile,
259 hoverBackgroundStylesMobile: resultBoxHoverBackgroundStylesMobile,
260 bgTransitionStyle: resultBoxBgTransitionStyle,
261 } = generateBackgroundControlStyles({
262 attributes,
263 controlName: RESULT_BOX_BACKGROUND,
264 noOverlay: true,
265 });
266
267 // result box border
268 const {
269 stylesDesktop: resultBoxBdShadowStyesDesktop,
270 stylesTab: resultBoxBdShadowStyesTab,
271 stylesMobile: resultBoxBdShadowStyesMobile,
272 stylesHoverDesktop: resultBoxBdShadowStylesHoverDesktop,
273 stylesHoverTab: resultBoxBdShadowStylesHoverTab,
274 stylesHoverMobile: resultBoxBdShadowStylesHoverMobile,
275 transitionStyle: resultBoxBdShadowTransitionStyle,
276 } = generateBorderShadowStyles({
277 controlName: RESULT_BOX_BORDER,
278 noShadow: true,
279 attributes,
280 });
281
282 // result list text typography
283 const {
284 typoStylesDesktop: resultListTypoStylesDesktop,
285 typoStylesTab: resultListTypoStylesTab,
286 typoStylesMobile: resultListTypoStylesMobile,
287 } = generateTypographyStyles({
288 attributes,
289 prefixConstant: typoPrefix_resulttext,
290 });
291
292 // result list Padding
293 const {
294 dimensionStylesDesktop: reslutListPaddingDesktop,
295 dimensionStylesTab: reslutListPaddingTab,
296 dimensionStylesMobile: reslutListPaddingMobile,
297 } = generateDimensionsControlStyles({
298 controlName: ITEM_PADDING,
299 styleFor: "padding",
300 attributes,
301 });
302
303 // result list border
304 const {
305 stylesDesktop: resultListBdShadowStyesDesktop,
306 stylesTab: resultListBdShadowStyesTab,
307 stylesMobile: resultListBdShadowStyesMobile,
308 stylesHoverDesktop: resultListBdShadowStylesHoverDesktop,
309 stylesHoverTab: resultListBdShadowStylesHoverTab,
310 stylesHoverMobile: resultListBdShadowStylesHoverMobile,
311 transitionStyle: resultListBdShadowTransitionStyle,
312 } = generateBorderShadowStyles({
313 controlName: ITEM_BORDER,
314 noShadow: true,
315 attributes,
316 });
317
318 // wrapper margin
319 const {
320 dimensionStylesDesktop: wrpMarginDesktop,
321 dimensionStylesTab: wrpMarginTab,
322 dimensionStylesMobile: wrpMarginMobile,
323 } = generateDimensionsControlStyles({
324 controlName: searchLayout == 'layout-1' ? WRAPPER_MARGIN : WRAPPER_MARGIN_LAYOUT_2,
325 styleFor: "margin",
326 attributes,
327 });
328
329 // AI Search Suggestions Margin
330 const {
331 dimensionStylesDesktop: aiSuggestionMarginDesktop,
332 dimensionStylesTab: aiSuggestionMarginTab,
333 dimensionStylesMobile: aiSuggestionMarginMobile,
334 } = generateDimensionsControlStyles({
335 controlName: AI_SUGGESTION_MARGIN,
336 styleFor: "margin",
337 attributes,
338 });
339
340 // AI Search Suggestions Padding
341 const {
342 dimensionStylesDesktop: aiSuggestionPaddingDesktop,
343 dimensionStylesTab: aiSuggestionPaddingTab,
344 dimensionStylesMobile: aiSuggestionPaddingMobile,
345 } = generateDimensionsControlStyles({
346 controlName: AI_SUGGESTION_PADDING,
347 styleFor: "padding",
348 attributes,
349 });
350
351 // AI Search Suggestions Button Margin
352 const {
353 dimensionStylesDesktop: aiSuggestionButtonMarginDesktop,
354 dimensionStylesTab: aiSuggestionButtonMarginTab,
355 dimensionStylesMobile: aiSuggestionButtonMarginMobile,
356 } = generateDimensionsControlStyles({
357 controlName: AI_SUGGESTION_BUTTON_MARGIN,
358 styleFor: "margin",
359 attributes,
360 });
361
362 // AI Search Suggestions Button Padding
363 const {
364 dimensionStylesDesktop: aiSuggestionButtonPaddingDesktop,
365 dimensionStylesTab: aiSuggestionButtonPaddingTab,
366 dimensionStylesMobile: aiSuggestionButtonPaddingMobile,
367 } = generateDimensionsControlStyles({
368 controlName: AI_SUGGESTION_BUTTON_PADDING,
369 styleFor: "padding",
370 attributes,
371 });
372
373 // AI Search Suggestions Title Typography
374 const {
375 typoStylesDesktop: aiSuggestionTitleTypoDesktop,
376 typoStylesTab: aiSuggestionTitleTypoTab,
377 typoStylesMobile: aiSuggestionTitleTypoMobile,
378 } = generateTypographyStyles({
379 attributes,
380 prefixConstant: AI_SUGGESTION_TITLE_TYPO,
381 defaultFontSize: 18,
382 });
383
384 // AI Search Suggestions Query Typography
385 const {
386 typoStylesDesktop: aiSuggestionQueryTypoDesktop,
387 typoStylesTab: aiSuggestionQueryTypoTab,
388 typoStylesMobile: aiSuggestionQueryTypoMobile,
389 } = generateTypographyStyles({
390 attributes,
391 prefixConstant: AI_SUGGESTION_QUERY_TYPO,
392 defaultFontSize: 14,
393 });
394
395 // AI Search Suggestions Response Typography
396 const {
397 typoStylesDesktop: aiSuggestionResponseTypoDesktop,
398 typoStylesTab: aiSuggestionResponseTypoTab,
399 typoStylesMobile: aiSuggestionResponseTypoMobile,
400 } = generateTypographyStyles({
401 attributes,
402 prefixConstant: AI_SUGGESTION_RESPONSE_TYPO,
403 defaultFontSize: 14,
404 });
405
406 // AI Search Suggestions Button Typography
407 const {
408 typoStylesDesktop: aiSuggestionButtonTypoDesktop,
409 typoStylesTab: aiSuggestionButtonTypoTab,
410 typoStylesMobile: aiSuggestionButtonTypoMobile,
411 } = generateTypographyStyles({
412 attributes,
413 prefixConstant: AI_SUGGESTION_BUTTON_TYPO,
414 defaultFontSize: 14,
415 });
416
417 //search modal field background
418 const {
419 backgroundStylesDesktop: searchModalFieldBackgroundDesktop,
420 hoverBackgroundStylesDesktop: searchModalFieldBackgroundDesktopHover,
421 backgroundStylesTab: searchModalFieldBackgroundTab,
422 hoverBackgroundStylesTab: searchModalFieldBackgroundHoverTab,
423 backgroundStylesMobile: searchModalFieldBackgroundMobile,
424 hoverBackgroundStylesMobile: searchModalFieldBackgroundHoverMobile,
425 bgTransitionStyle: searchModalFieldBackgroundTransition
426 } = generateBackgroundControlStyles({
427 attributes,
428 controlName: SEARCH_MODAL_FIELD_BACKGROUND,
429 noOverlay: true,
430 });
431
432 const {
433 typoStylesDesktop: searchModalFieldTypoDesktop,
434 typoStylesTab: searchModalFieldTypoTab,
435 typoStylesMobile: searchModalFieldTypoMobile,
436 } = generateTypographyStyles({
437 attributes,
438 prefixConstant: SEARCH_MODAL_FIELD_TYPO,
439 defaultFontSize: 16
440 });
441
442 const {
443 typoStylesDesktop: searchModalCategoryFieldTypoDesktop,
444 typoStylesTab: searchModalCaetgoryFieldTypoTab,
445 typoStylesMobile: searchModalCategoryFieldTypoMobile,
446 } = generateTypographyStyles({
447 attributes,
448 prefixConstant:SEARCH_MODAL_CATEGORY_FIELD_TYPO,
449 defaultFontSize:15
450 });
451
452 const {
453 typoStylesDesktop: searchModalContentTabsTypoDesktop,
454 typoStylesTab: searchModalContentTabsTypoTab,
455 typoStylesMobile: searchModalContentTabsTypoMobile,
456 } = generateTypographyStyles({
457 attributes,
458 prefixConstant:SEARCH_MODAL_CONTENT_TABS_TYPO,
459 defaultFontSize:14
460 });
461
462 const {
463 rangeStylesDesktop: searchModalContentTabsIconSizeDesktop,
464 rangeStylesTab: searchModalContentTabsIconSizeTab,
465 rangeStylesMobile: searchModalContentTabsIconSizeMobile,
466 } = generateResponsiveRangeStyles({
467 controlName: SEARCH_MODAL_CONTENT_TABS_ICON_SIZE,
468 property: "width",
469 attributes,
470 });
471
472 const {
473 stylesDesktop: searchModalContentTabsBorderDesktop,
474 stylesTab: searchModalContentTabsBorderTab,
475 stylesMobile: searchModalContentTabsBorderMobile,
476 stylesHoverDesktop: searchModalContentTabsBorderHoverDesktop,
477 stylesHoverTab: searchModalContentTabsBorderHoverTab,
478 stylesHoverMobile: searchModalContentTabsBorderHoverMobile,
479 transitionStyle: searchModalContentTabsTransition,
480 } = generateBorderShadowStyles({
481 controlName: SEARCH_MODAL_CONTENT_TABS_BORDER,
482 noShadow: true,
483 attributes,
484 });
485
486 const {
487 typoStylesDesktop: searchModalContentTabsListTypoDesktop,
488 typoStylesTab: searchModalContentTabsListTypoTab,
489 typoStylesMobile: searchModalContentTabsListTypoMobile,
490 } = generateTypographyStyles({
491 attributes,
492 prefixConstant:SEARCH_MODAL_CONTENT_TABS_LIST_TYPO,
493 defaultFontSize:16
494 });
495
496 const {
497 rangeStylesDesktop: searchModalContentTabsListIconSizeDesktop,
498 rangeStylesTab: searchModalContentTabsListIconSizeTab,
499 rangeStylesMobile: searchModalContentTabsListIconSizeMobile,
500 } = generateResponsiveRangeStyles({
501 controlName: SEARCH_MODAL_CONTENT_TABS_LIST_ICON_SIZE,
502 property: "width",
503 attributes,
504 });
505
506 const {
507 stylesDesktop: searchModalContentTabsListBorderDesktop,
508 stylesTab: searchModalContentTabsListBorderTab,
509 stylesMobile: searchModalContentTabsListBorderMobile,
510 stylesHoverDesktop: searchModalContentTabsListBorderHoverDesktop,
511 stylesHoverTab: searchModalContentTabsListBorderHoverTab,
512 stylesHoverMobile: searchModalContentTabsListBorderHoverMobile,
513 transitionStyle: searchModalContentTabsListTransition,
514 } = generateBorderShadowStyles({
515 controlName: SEARCH_MODAL_CONTENT_TABS_LIST_BORDER,
516 noShadow: true,
517 attributes,
518 });
519
520 const {
521 typoStylesDesktop: searchModalContentTabsListCategoryTypoDesktop,
522 typoStylesTab: searchModalContentTabsListCategoryTypoTab,
523 typoStylesMobile: searchModalContentTabsListCategoryTypoMobile,
524 } = generateTypographyStyles({
525 attributes,
526 prefixConstant:SEARCH_MODAL_CONTENT_TABS_LIST_CATEGORY_TYPO,
527 defaultFontSize:14
528 });
529
530 const {
531 rangeStylesDesktop: searchModalContentTabsListCategoryIconSizeDesktop,
532 rangeStylesTab: searchModalContentTabsListCategoryIconSizeTab,
533 rangeStylesMobile: searchModalContentTabsListCategoryIconSizeMobile,
534 } = generateResponsiveRangeStyles({
535 controlName: SEARCH_MODAL_CONTENT_TABS_LIST_CATEGORY_ICON_SIZE,
536 property: "width",
537 attributes,
538 });
539
540 const {
541 typoStylesDesktop: searchLayoutTwoButtonTypoDesk,
542 typoStylesTab: searchLayoutTwoButtonTypoTab,
543 typoStylesMobile: searchLayoutTwoButtonTypoMob,
544 } = generateTypographyStyles({
545 attributes,
546 prefixConstant:SEARCH_BUTTON_LAYOUT_2_TYPO,
547 defaultFontSize:16
548 });
549
550 const {
551 backgroundStylesDesktop: searchButtonLayoutTwoBackgroundColorDesk,
552 hoverBackgroundStylesDesktop: searchButtonLayoutTwoBackgroundColorHoverDesk,
553 backgroundStylesTab: searchButtonLayoutTwoBackgroundColorTab,
554 hoverBackgroundStylesTab: searchButtonLayoutTwoBackgroundColorHoverTab,
555 backgroundStylesMobile: searchButtonLayoutTwoBackgroundColorMobile,
556 hoverBackgroundStylesMobile: searchButtonLayoutTwoBackgroundColorHoverMobile,
557 bgTransitionStyle: searchButtonLayoutTwoBackgroundColorTransitionStyles,
558 } = generateBackgroundControlStyles({
559 attributes,
560 controlName: SEARCH_BUTTON_BACKGROUND_LAYOUT_2,
561 noOverlay: true,
562 });
563
564 const {
565 rangeStylesDesktop: searchIconSizeDesktopLayout2,
566 rangeStylesTab: searchIconSizeTabLayout2,
567 rangeStylesMobile: searchIconSizeMobileLayout2,
568 } = generateResponsiveRangeStyles({
569 controlName: ICON_SIZE_LAYOUT_2,
570 property: "height",
571 attributes,
572 });
573
574 const desktopStyles = `
575 .${blockId}.betterdocs-searchbox-wrapper, .${blockId}.betterdocs-search-form-wrapper {
576 ${wrpMarginDesktop}
577 ${boxBackgroundStylesDesktop}
578 }
579
580 .${blockId}.betterdocs-searchbox-wrapper .betterdocs-live-search, .${blockId}.betterdocs-search-form-wrapper .betterdocs-live-search {
581 ${boxPaddingDesktop}
582 transition: ${boxBgTransitionStyle};
583 }
584
585 .${blockId}.betterdocs-searchbox-wrapper .betterdocs-live-search:hover, .${blockId}.betterdocs-search-form-wrapper .betterdocs-live-search:hover {
586 ${boxHoverBackgroundStylesDesktop}
587 }
588
589 .${blockId}.betterdocs-searchbox-wrapper .betterdocs-live-search .betterdocs-searchform, .${blockId}.betterdocs-search-form-wrapper .betterdocs-live-search .betterdocs-searchform {
590 ${
591 fieldBackgroundColor
592 ? `background: ${fieldBackgroundColor};`
593 : ""
594 }
595 ${fieldTextColor ? `color:${fieldTextColor};` : ""}
596 ${textFieldBdShadowStyesDesktop}
597 transition: ${textFieldBdShadowTransitionStyle};
598 }
599
600 .${blockId}.betterdocs-searchbox-wrapper .betterdocs-live-search .betterdocs-searchform:hover, .${blockId}.betterdocs-search-form-wrapper .betterdocs-live-search .betterdocs-searchform:hover{
601 ${textFieldBdShadowStylesHoverDesktop}
602 }
603
604 .${blockId}.betterdocs-searchbox-wrapper .betterdocs-live-search .betterdocs-searchform .betterdocs-search-field::placeholder, .${blockId}.betterdocs-search-form-wrapper .betterdocs-live-search .betterdocs-searchform .betterdocs-search-field::placeholder {
605 ${fieldTextColor ? `color:${fieldTextColor};` : ""}
606 }
607
608 .${blockId}.betterdocs-searchbox-wrapper .betterdocs-searchform, .${blockId}.betterdocs-search-form-wrapper .betterdocs-searchform{
609 ${textPaddingDesktop}
610 }
611
612 .${blockId}.betterdocs-searchbox-wrapper .betterdocs-searchform .betterdocs-search-field, .${blockId}.betterdocs-search-form-wrapper .betterdocs-searchform .betterdocs-search-field{
613 ${textTypoStylesDesktop}
614 }
615
616 .${blockId}.betterdocs-searchbox-wrapper .betterdocs-searchform svg.docs-search-icon, .${blockId}.betterdocs-search-form-wrapper .betterdocs-searchform svg.docs-search-icon {
617 ${searchIconSizeDesktop}
618 height: auto;
619 }
620
621 .${blockId} .betterdocs-search-modal-layout-1 .betterdocs-search-layout-1 .search-bar .search-input-wrapper .search-icon path,
622 .${blockId} .betterdocs-search-modal-archive .betterdocs-live-search .betterdocs-searchform .betterdocs-searchform-input-wrap svg path,
623 .${blockId}.betterdocs-searchbox-wrapper .betterdocs-searchform svg.docs-search-icon path, .${blockId}.betterdocs-search-form-wrapper .betterdocs-searchform svg.docs-search-icon path {
624 ${searchIconColor ? `fill: ${searchIconColor};` : ""}
625 }
626
627 .${blockId}.betterdocs-searchbox-wrapper .docs-search-close .close-line, .${blockId}.betterdocs-search-form-wrapper .docs-search-close .close-line {
628 ${closeIconColor ? `fill: ${closeIconColor};` : ""}
629 }
630
631 .${blockId}.betterdocs-searchbox-wrapper .docs-search-loader, .${blockId}.betterdocs-searchbox-wrapper .docs-search-close .close-border, .${blockId}.betterdocs-search-form-wrapper .docs-search-loader, .${blockId}.betterdocs-search-form-wrapper .docs-search-close .close-border {
632 ${closeBorderColor ? `fill: ${closeBorderColor};` : ""}
633 }
634
635 .${blockId}.betterdocs-searchbox-wrapper .betterdocs-live-search .docs-search-result, .${blockId}.betterdocs-search-form-wrapper .betterdocs-live-search .docs-search-result {
636 ${resultBoxWidthDesktop}
637 ${resultBoxMaxWidthDesktop}
638 ${resultBoxBackgroundStylesDesktop}
639 ${resultBoxBdShadowStyesDesktop}
640 transition: ${resultBoxBdShadowTransitionStyle}, ${resultBoxBgTransitionStyle};
641 }
642
643 .${blockId}.betterdocs-searchbox-wrapper .betterdocs-live-search .docs-search-result:hover, .${blockId}.betterdocs-search-form-wrapper .betterdocs-live-search .docs-search-result:hover{
644 ${resultBoxHoverBackgroundStylesDesktop}
645 ${resultBoxBdShadowStylesHoverDesktop}
646 }
647
648
649 .${blockId}.betterdocs-searchbox-wrapper .betterdocs-live-search .docs-search-result li, .${blockId}.betterdocs-search-form-wrapper .betterdocs-live-search .docs-search-result li {
650 ${resultListBdShadowStyesDesktop}
651 transition: ${resultListBdShadowTransitionStyle};
652 }
653
654 .${blockId}.betterdocs-searchbox-wrapper .betterdocs-live-search .docs-search-result li:hover, .${blockId}.betterdocs-search-form-wrapper .betterdocs-live-search .docs-search-result li:hover {
655 ${resultBoxHoverBackgroundStylesDesktop}
656 ${resultListBdShadowStylesHoverDesktop}
657 }
658
659 .${blockId}.betterdocs-searchbox-wrapper .betterdocs-live-search .docs-search-result li:hover a span, .${blockId}.betterdocs-search-form-wrapper .betterdocs-live-search .docs-search-result li:hover a span{
660 ${itemHoverColor ? `color: ${itemHoverColor};` : ""}
661 }
662
663 .${blockId}.betterdocs-searchbox-wrapper .betterdocs-live-search .docs-search-result li a span, .${blockId}.betterdocs-search-form-wrapper .betterdocs-live-search .docs-search-result li a span {
664 ${resultListTypoStylesDesktop}
665 ${reslutListPaddingDesktop}
666 ${itemColor ? `color: ${itemColor};` : ""}
667 }
668
669 .${blockId} .betterdocs-search-modal-layout-1 .betterdocs-search-layout-1 {
670 ${boxBackgroundStylesDesktop}
671 ${boxPaddingDesktop}
672 ${wrpMarginDesktop}
673 transition: ${boxBgTransitionStyle};
674 }
675
676 .${blockId} .betterdocs-search-modal-archive .betterdocs-live-search,
677 .${blockId} .betterdocs-search-modal-sidebar .betterdocs-live-search {
678 ${boxBackgroundStylesDesktop}
679 transition: ${boxBgTransitionStyle};
680 }
681
682 .${blockId} .betterdocs-search-modal-layout-1 .betterdocs-search-layout-1:hover,
683 .${blockId} .betterdocs-search-modal-archive .betterdocs-live-search:hover,
684 .${blockId} .betterdocs-search-modal-sidebar .betterdocs-live-search:hover{
685 ${boxHoverBackgroundStylesDesktop}
686 }
687
688 .${blockId} .betterdocs-search-modal-layout-1 .betterdocs-search-layout-1 .search-bar,
689 .${blockId} .betterdocs-search-modal-archive .betterdocs-live-search .betterdocs-searchform {
690 background-color:${fieldBackgroundColorLayout2};
691 }
692
693 .${blockId} .betterdocs-search-modal-layout-1 .betterdocs-search-layout-1 .search-bar .search-input-wrapper .search-input,
694 .${blockId} .betterdocs-search-modal-archive .betterdocs-live-search .betterdocs-searchform .search-input-wrapper .search-input{
695 color:${fieldTextColorLayout2};
696 ${textTypoStylesDesktop}
697 }
698
699 .${blockId} .betterdocs-search-modal-layout-1 .betterdocs-search-layout-1 .search-bar,
700 .${blockId} .betterdocs-search-modal-archive .betterdocs-live-search .betterdocs-searchform {
701 ${textPaddingDesktop}
702 ${textFieldBdShadowStyesDesktop}
703 transition: ${textFieldBdShadowTransitionStyle};
704 }
705
706 .${blockId} .betterdocs-search-modal-layout-1 .betterdocs-search-layout-1 .search-bar:hover,
707 .${blockId} .betterdocs-search-modal-archive .betterdocs-live-search .betterdocs-searchform:hover {
708 ${textFieldBdShadowStylesHoverDesktop}
709 }
710
711 .${blockId} .betterdocs-search-wrapper .betterdocs-search-details .betterdocs-search-header svg g path{
712 fill:${searchModalMagnifierColor};
713 }
714
715 .${blockId} .betterdocs-search-wrapper .betterdocs-search-details .betterdocs-search-header .betterdocs-searchform-input-wrap .betterdocs-search-field {
716 color:${searchModalFieldColor};
717 ${searchModalFieldTypoDesktop};
718 }
719
720 .${blockId} .betterdocs-search-wrapper .betterdocs-search-details .betterdocs-search-header .betterdocs-searchform-input-wrap .betterdocs-search-field::placeholder {
721 color:${searchModalFieldPlaceholderColor};
722 }
723
724 .${blockId} .betterdocs-search-wrapper .betterdocs-search-details .betterdocs-search-header .betterdocs-select-option-wrapper .betterdocs-form-select .css-1jqq78o-placeholder{
725 color:${searchModalCategoryColor};
726 ${searchModalCategoryFieldTypoDesktop};
727 }
728
729 .${blockId} .betterdocs-search-wrapper .betterdocs-search-details .betterdocs-search-content .betterdocs-search-items-wrapper .betterdocs-search-item-content .betterdocs-search-item-list .content-main h4{
730 color:${searchModalContentTabsListColor};
731 }
732
733 .${blockId} .betterdocs-search-wrapper .betterdocs-search-details .betterdocs-search-content .betterdocs-search-items-wrapper .betterdocs-search-item-content .betterdocs-search-item-list .content-sub h5{
734 color:${searchModalContentTabsListCategoryColor};
735 }
736
737 .${blockId} .betterdocs-search-wrapper .betterdocs-search-details .betterdocs-search-header {
738 ${searchModalFieldBackgroundDesktop}
739 transition:${searchModalFieldBackgroundTransition};
740 }
741
742 .${blockId} .betterdocs-search-wrapper .betterdocs-search-details .betterdocs-search-header:hover {
743 ${searchModalFieldBackgroundDesktopHover}
744 }
745
746 .${blockId} .betterdocs-search-wrapper .betterdocs-search-details .betterdocs-search-content .betterdocs-search-info-tab .betterdocs-tab-items span:not(.tab-icon){
747 ${searchModalContentTabsTypoDesktop}
748 }
749
750 .${blockId} .betterdocs-search-wrapper .betterdocs-search-details .betterdocs-search-content .betterdocs-search-info-tab .betterdocs-tab-items span svg{
751 ${searchModalContentTabsIconSizeDesktop}
752 height:auto;
753 }
754
755 .${blockId} .betterdocs-search-wrapper .betterdocs-search-details .betterdocs-search-content .betterdocs-search-info-tab .betterdocs-tab-items{
756 ${searchModalContentTabsBorderDesktop}
757 transition:${searchModalContentTabsTransition};
758 }
759
760 .${blockId} .betterdocs-search-wrapper .betterdocs-search-details .betterdocs-search-content .betterdocs-search-info-tab .betterdocs-tab-items:hover{
761 ${searchModalContentTabsBorderHoverDesktop}
762 }
763
764 .${blockId} .betterdocs-search-wrapper .betterdocs-search-details .betterdocs-search-content .betterdocs-search-items-wrapper .betterdocs-search-item-content .betterdocs-search-item-list .content-main h4{
765 ${searchModalContentTabsListTypoDesktop}
766 }
767
768 .${blockId} .betterdocs-search-modal-layout-1 .betterdocs-search-layout-1 .search-bar .search-button,
769 .${blockId} .betterdocs-search-modal-archive .betterdocs-live-search .betterdocs-searchform .search-button {
770 color:${searchButtonLayout2Color};
771 ${searchLayoutTwoButtonTypoDesk}
772 ${searchButtonLayoutTwoBackgroundColorDesk}
773 transition:${searchButtonLayoutTwoBackgroundColorTransitionStyles};
774 }
775
776 .${blockId} .betterdocs-search-modal-layout-1 .betterdocs-search-layout-1 .search-bar .search-button:hover,
777 .${blockId} .betterdocs-search-modal-archive .betterdocs-live-search .betterdocs-searchform .search-button:hover{
778 ${searchButtonLayoutTwoBackgroundColorHoverDesk}
779 }
780
781 .${blockId} .betterdocs-search-modal-layout-1 .betterdocs-search-layout-1 .search-bar .search-input-wrapper .search-icon,
782 .${blockId} .betterdocs-search-modal-archive .betterdocs-live-search .betterdocs-searchform .betterdocs-searchform-input-wrap svg {
783 width:auto;
784 ${searchIconSizeDesktopLayout2}
785 }
786
787 .${blockId} .betterdocs-search-modal-archive .betterdocs-live-search .betterdocs-searchform .betterdocs-searchform-input-wrap svg path {
788 ${searchIconColor ? `fill: ${searchIconColor};` : ""}
789 }
790
791 .${blockId} .betterdocs-search-wrapper .betterdocs-search-details .betterdocs-search-content .betterdocs-search-items-wrapper .betterdocs-search-item-content .betterdocs-search-item-list .content-main svg{
792 ${searchModalContentTabsListIconSizeDesktop}
793 height:auto;
794 }
795
796 .${blockId} .betterdocs-search-wrapper .betterdocs-search-details .betterdocs-search-content .betterdocs-search-items-wrapper .betterdocs-search-item-content .betterdocs-search-item-list{
797 ${searchModalContentTabsListBorderDesktop}
798 }
799
800 .${blockId} .betterdocs-search-wrapper .betterdocs-search-details .betterdocs-search-content .betterdocs-search-items-wrapper .betterdocs-search-item-content .betterdocs-search-item-list:hover{
801 ${searchModalContentTabsListBorderHoverDesktop}
802 }
803
804 .${blockId} .betterdocs-search-wrapper .betterdocs-search-details .betterdocs-search-header .betterdocs-select-option-wrapper .css-19bb58m{
805 ${searchModalContentTabsListCategoryTypoDesktop}
806 }
807
808 .${blockId} .betterdocs-search-wrapper .betterdocs-search-wrapper .betterdocs-search-details .betterdocs-search-content .betterdocs-search-items-wrapper .betterdocs-search-item-content .betterdocs-search-item-list .content-sub svg{
809 ${searchModalContentTabsListCategoryIconSizeDesktop}
810 height:auto;
811 }
812
813 /* AI Search Suggestions Styles */
814 ${(() => {
815 // Check if AI Search Suggestions are enabled globally and for this block using block editor localization
816 const isAISearchEnabled = () => {
817 try {
818 return typeof window.betterDocsBlocksHelper !== 'undefined' &&
819 (window.betterDocsBlocksHelper.AI_SEARCH_SUGGESTIONS_ENABLED == true ||
820 window.betterDocsBlocksHelper.AI_SEARCH_SUGGESTIONS_ENABLED === 1);
821 } catch (error) {
822 return false;
823 }
824 };
825
826 if (!isAISearchEnabled() || !enable_ai_powered_search) {
827 return '';
828 }
829
830 return `
831 .${blockId} .betterdocs-ai-suggestion {
832 ${aiSuggestionMarginDesktop}
833 ${aiSuggestionPaddingDesktop}
834 background-color: ${ai_suggestion_background_color};
835 }
836 .${blockId} .betterdocs-ai-suggestion:hover {
837 background-color: ${ai_suggestion_hover_background_color};
838 }
839 .${blockId} .betterdocs-ai-suggestion .ai-suggestion-prompt .ai-suggestion-text .ai-suggestion-label {
840 color: ${ai_suggestion_title_color};
841 ${aiSuggestionTitleTypoDesktop}
842 }
843 .${blockId} .betterdocs-ai-suggestion .ai-suggestion-prompt .ai-suggestion-content .ai-suggestion-query {
844 color: ${ai_suggestion_query_color};
845 ${aiSuggestionQueryTypoDesktop}
846 }
847 .${blockId} .betterdocs-ai-suggestion .ai-response .ai-response-content {
848 color: ${ai_suggestion_response_color};
849 ${aiSuggestionResponseTypoDesktop}
850 }
851 .${blockId} .betterdocs-ai-suggestion .ai-response .ai-response-actions .continue-conversation-btn {
852 color: ${ai_suggestion_button_color};
853 background-color: ${ai_suggestion_button_bg_color};
854 ${aiSuggestionButtonMarginDesktop}
855 ${aiSuggestionButtonPaddingDesktop}
856 ${aiSuggestionButtonTypoDesktop}
857 }
858 `;
859 })()}
860 /* SearchModal Layout 2 & 3 Width and Position */
861 .${blockId} {
862 text-align: ${searchModalPosition};
863 }
864 .${blockId} .betterdocs-search-modal-archive,
865 .${blockId} .betterdocs-search-modal-sidebar {
866 width: ${searchModalWidth}${searchModalWidthUnit};
867 max-width: 100%;
868 display: inline-block;
869 text-align: left;
870 }
871 `;
872
873 const tabStyles = `
874 .${blockId}.betterdocs-searchbox-wrapper, .${blockId}.betterdocs-search-form-wrapper {
875 ${wrpMarginTab}
876 ${boxBackgroundStylesTab}
877 }
878
879 .${blockId}.betterdocs-searchbox-wrapper .betterdocs-live-search, .${blockId}.betterdocs-search-form-wrapper .betterdocs-live-search {
880 ${boxPaddingTab}
881 }
882
883 .${blockId}.betterdocs-searchbox-wrapper .betterdocs-live-search:hover, .${blockId}.betterdocs-search-form-wrapper .betterdocs-live-search:hover{
884 ${boxHoverBackgroundStylesTab}
885 }
886
887 .${blockId}.betterdocs-searchbox-wrapper .betterdocs-searchform, .${blockId}.betterdocs-search-form-wrapper .betterdocs-searchform{
888 ${textPaddingTab}
889 }
890
891 .${blockId}.betterdocs-searchbox-wrapper .betterdocs-searchform .betterdocs-search-field, .${blockId}.betterdocs-search-form-wrapper .betterdocs-searchform .betterdocs-search-field{
892 ${textTypoStylesTab}
893 }
894
895
896 .${blockId}.betterdocs-searchbox-wrapper .betterdocs-live-search .betterdocs-searchform, .${blockId}.betterdocs-search-form-wrapper .betterdocs-live-search .betterdocs-searchform {
897 ${textFieldBdShadowStyesTab}
898 }
899
900 .${blockId}.betterdocs-searchbox-wrapper .betterdocs-live-search .betterdocs-searchform:hover, .${blockId}.betterdocs-search-form-wrapper .betterdocs-live-search .betterdocs-searchform:hover {
901 ${textFieldBdShadowStylesHoverTab}
902 }
903
904 .${blockId}.betterdocs-searchbox-wrapper .betterdocs-searchform svg.docs-search-icon, .${blockId}.betterdocs-search-form-wrapper .betterdocs-searchform svg.docs-search-icon{
905 ${searchIconSizeTab}
906 }
907
908 .${blockId}.betterdocs-searchbox-wrapper .betterdocs-live-search .docs-search-result, .${blockId}.betterdocs-search-form-wrapper .betterdocs-live-search .docs-search-result {
909 ${resultBoxWidthTab}
910 ${resultBoxMaxWidthTab}
911 ${resultBoxBackgroundStylesTab}
912 ${resultBoxBdShadowStyesTab}
913 }
914
915 .${blockId}.betterdocs-searchbox-wrapper .betterdocs-live-search .docs-search-result:hover, .${blockId}.betterdocs-search-form-wrapper .betterdocs-live-search .docs-search-result:hover {
916 ${resultBoxBdShadowStylesHoverTab}
917 ${resultBoxHoverBackgroundStylesTab}
918 }
919
920 .${blockId}.betterdocs-searchbox-wrapper .betterdocs-live-search .docs-search-result li, .${blockId}.betterdocs-search-form-wrapper .betterdocs-live-search .docs-search-result li {
921 ${resultListBdShadowStyesTab}
922 }
923
924 .${blockId}.betterdocs-searchbox-wrapper .betterdocs-live-search .docs-search-result li:hover, .${blockId}.betterdocs-search-form-wrapper .betterdocs-live-search .docs-search-result li:hover {
925 ${resultListBdShadowStylesHoverTab}
926 }
927
928 .${blockId}.betterdocs-searchbox-wrapper .betterdocs-live-search .docs-search-result li a, .${blockId}.betterdocs-search-form-wrapper .betterdocs-live-search .docs-search-result li a{
929 ${resultListTypoStylesTab}
930 ${reslutListPaddingTab}
931 }
932
933 .${blockId} .betterdocs-search-modal-layout-1 .betterdocs-search-layout-1{
934 ${boxBackgroundStylesTab}
935 ${boxPaddingTab}
936 ${wrpMarginTab}
937 }
938
939 .${blockId} .betterdocs-search-modal-layout-1 .betterdocs-search-layout-1:hover{
940 ${boxHoverBackgroundStylesTab}
941 }
942
943 .${blockId} .betterdocs-search-modal-layout-1 .betterdocs-search-layout-1 .search-bar .search-input-wrapper .search-input{
944 ${textTypoStylesTab}
945 }
946
947 .${blockId} .betterdocs-search-modal-layout-1 .betterdocs-search-layout-1 .search-bar {
948 ${textPaddingTab}
949 ${textFieldBdShadowStyesTab}
950 }
951
952 .${blockId} .betterdocs-search-modal-layout-1 .betterdocs-search-layout-1 .search-bar:hover {
953 ${textFieldBdShadowStylesHoverTab}
954 }
955
956 .${blockId} .betterdocs-search-wrapper .betterdocs-search-details .betterdocs-search-header {
957 ${searchModalFieldBackgroundTab}
958 }
959
960 .${blockId} .betterdocs-search-wrapper .betterdocs-search-details .betterdocs-search-header:hover {
961 ${searchModalFieldBackgroundHoverTab}
962 }
963
964 .${blockId} .betterdocs-search-wrapper .betterdocs-search-details .betterdocs-search-header .betterdocs-searchform-input-wrap .betterdocs-search-field {
965 ${searchModalFieldTypoTab};
966 }
967
968 .${blockId} .betterdocs-search-wrapper .betterdocs-search-details .betterdocs-search-header .betterdocs-select-option-wrapper .betterdocs-form-select .css-1jqq78o-placeholder{
969 ${searchModalCaetgoryFieldTypoTab};
970 }
971
972 .${blockId} .betterdocs-search-wrapper .betterdocs-search-details .betterdocs-search-content .betterdocs-search-info-tab .betterdocs-tab-items span:not(.tab-icon){
973 ${searchModalContentTabsTypoTab}
974 }
975
976 .${blockId} .betterdocs-search-wrapper .betterdocs-search-details .betterdocs-search-content .betterdocs-search-info-tab .betterdocs-tab-items span svg{
977 ${searchModalContentTabsIconSizeTab}
978 height:auto;
979 }
980
981 .${blockId} .betterdocs-search-wrapper .betterdocs-search-details .betterdocs-search-content .betterdocs-search-info-tab .betterdocs-tab-items{
982 ${searchModalContentTabsBorderTab}
983 }
984
985 .${blockId} .betterdocs-search-wrapper .betterdocs-search-details .betterdocs-search-content .betterdocs-search-info-tab .betterdocs-tab-items:hover{
986 ${searchModalContentTabsBorderHoverTab}
987 }
988
989 .${blockId} .betterdocs-search-wrapper .betterdocs-search-details .betterdocs-search-content .betterdocs-search-items-wrapper .betterdocs-search-item-content .betterdocs-search-item-list .content-main h4{
990 ${searchModalContentTabsListTypoTab}
991 }
992
993 .${blockId} .betterdocs-search-wrapper .betterdocs-search-details .betterdocs-search-content .betterdocs-search-items-wrapper .betterdocs-search-item-content .betterdocs-search-item-list .content-main svg{
994 ${searchModalContentTabsListIconSizeTab}
995 height:auto;
996 }
997
998 .${blockId} .betterdocs-search-wrapper .betterdocs-search-details .betterdocs-search-content .betterdocs-search-items-wrapper .betterdocs-search-item-content .betterdocs-search-item-list{
999 ${searchModalContentTabsListBorderTab}
1000 }
1001
1002 .${blockId} .betterdocs-search-wrapper .betterdocs-search-details .betterdocs-search-content .betterdocs-search-items-wrapper .betterdocs-search-item-content .betterdocs-search-item-list:hover{
1003 ${searchModalContentTabsListBorderHoverTab}
1004 }
1005
1006 .${blockId} .betterdocs-search-wrapper .betterdocs-search-details .betterdocs-search-header .betterdocs-select-option-wrapper .css-19bb58m{
1007 ${searchModalContentTabsListCategoryTypoTab}
1008 }
1009
1010 .${blockId} .betterdocs-search-wrapper .betterdocs-search-details .betterdocs-search-content .betterdocs-search-items-wrapper .betterdocs-search-item-content .betterdocs-search-item-list .content-sub svg{
1011 ${searchModalContentTabsListCategoryIconSizeTab}
1012 height:auto;
1013 }
1014
1015 .${blockId} .betterdocs-search-modal-layout-1 .betterdocs-search-layout-1 .search-bar .search-button{
1016 ${searchLayoutTwoButtonTypoTab}
1017 ${searchButtonLayoutTwoBackgroundColorTab}
1018 }
1019
1020 .${blockId} .betterdocs-search-modal-layout-1 .betterdocs-search-layout-1 .search-bar .search-button:hover{
1021 ${searchButtonLayoutTwoBackgroundColorHoverTab}
1022 }
1023
1024 .${blockId} .betterdocs-search-modal-layout-1 .betterdocs-search-layout-1 .search-bar .search-input-wrapper .search-icon,
1025 .${blockId} .betterdocs-search-modal-archive .betterdocs-live-search .betterdocs-searchform .betterdocs-searchform-input-wrap svg {
1026 width:auto;
1027 ${searchIconSizeTabLayout2}
1028 }
1029
1030 ${(() => {
1031 const isAISearchEnabled = () => {
1032 try {
1033 return (typeof window !== 'undefined' &&
1034 window.betterDocsBlocksHelper &&
1035 window.betterDocsBlocksHelper.AI_SEARCH_SUGGESTIONS_ENABLED === 1);
1036 } catch (error) {
1037 return false;
1038 }
1039 };
1040
1041 if (!isAISearchEnabled() || !enable_ai_powered_search) {
1042 return '';
1043 }
1044
1045 return `
1046 .${blockId} .betterdocs-ai-suggestion {
1047 ${aiSuggestionMarginTab}
1048 ${aiSuggestionPaddingTab}
1049 }
1050 .${blockId} .betterdocs-ai-suggestion .ai-suggestion-prompt .ai-suggestion-text .ai-suggestion-label {
1051 ${aiSuggestionTitleTypoTab}
1052 }
1053 .${blockId} .betterdocs-ai-suggestion .ai-suggestion-prompt .ai-suggestion-content .ai-suggestion-query {
1054 ${aiSuggestionQueryTypoTab}
1055 }
1056 .${blockId} .betterdocs-ai-suggestion .ai-response .ai-response-content {
1057 ${aiSuggestionResponseTypoTab}
1058 }
1059 .${blockId} .betterdocs-ai-suggestion .ai-response .ai-response-actions .continue-conversation-btn {
1060 ${aiSuggestionButtonMarginTab}
1061 ${aiSuggestionButtonPaddingTab}
1062 ${aiSuggestionButtonTypoTab}
1063 }
1064 `;
1065 })()}
1066
1067 /* SearchModal Layout 2 & 3 Width and Position - Tablet */
1068 .${blockId} {
1069 text-align: ${searchModalPosition};
1070 }
1071 .${blockId} .betterdocs-search-modal-archive,
1072 .${blockId} .betterdocs-search-modal-sidebar {
1073 width: ${searchModalWidth}${searchModalWidthUnit};
1074 display: inline-block;
1075 text-align: left;
1076 }
1077 `;
1078 const mobileStyles = `
1079 .${blockId}.betterdocs-searchbox-wrapper, .${blockId}.betterdocs-search-form-wrapper {
1080 ${boxBackgroundStylesMobile}
1081 ${wrpMarginMobile}
1082 }
1083
1084 .${blockId}.betterdocs-searchbox-wrapper .betterdocs-live-search, .${blockId}.betterdocs-search-form-wrapper .betterdocs-live-search {
1085 ${boxPaddingMobile}
1086 }
1087
1088 .${blockId}.betterdocs-searchbox-wrapper .betterdocs-live-search:hover, .${blockId}.betterdocs-search-form-wrapper .betterdocs-live-search:hover {
1089 ${boxHoverBackgroundStylesMobile}
1090 }
1091
1092 .${blockId}.betterdocs-searchbox-wrapper .betterdocs-searchform, .${blockId}.betterdocs-search-form-wrapper .betterdocs-searchform {
1093 ${textPaddingMobile}
1094 }
1095
1096 .${blockId}.betterdocs-searchbox-wrapper .betterdocs-searchform .betterdocs-search-field, .${blockId}.betterdocs-search-form-wrapper .betterdocs-searchform .betterdocs-search-field{
1097 ${textTypoStylesMobile}
1098 }
1099
1100 .${blockId}.betterdocs-searchbox-wrapper .betterdocs-live-search .betterdocs-searchform, .${blockId}.betterdocs-search-form-wrapper .betterdocs-live-search .betterdocs-searchform {
1101 ${textFieldBdShadowStyesMobile}
1102 }
1103
1104 .${blockId}.betterdocs-searchbox-wrapper .betterdocs-live-search .betterdocs-searchform:hover, .${blockId}.betterdocs-search-form-wrapper .betterdocs-live-search .betterdocs-searchform:hover {
1105 ${textFieldBdShadowStylesHoverMobile}
1106 }
1107
1108 .${blockId}.betterdocs-searchbox-wrapper .betterdocs-searchform svg.docs-search-icon,
1109 .${blockId}.betterdocs-search-form-wrapper .betterdocs-searchform svg.docs-search-icon,
1110 .${blockId} .betterdocs-search-modal-archive .betterdocs-live-search .betterdocs-searchform .betterdocs-searchform-input-wrap svg {
1111 ${searchIconSizeMobile}
1112 }
1113
1114 .${blockId}.betterdocs-searchbox-wrapper .betterdocs-live-search .docs-search-result, .${blockId}.betterdocs-search-form-wrapper .betterdocs-live-search .docs-search-result {
1115 ${resultBoxWidthMobile}
1116 ${resultBoxMaxWidthMobile}
1117 ${resultBoxBackgroundStylesMobile}
1118 ${resultBoxBdShadowStyesMobile}
1119 }
1120
1121 .${blockId}.betterdocs-searchbox-wrapper .betterdocs-live-search .docs-search-result:hover, .${blockId}.betterdocs-search-form-wrapper .betterdocs-live-search .docs-search-result:hover {
1122 ${resultBoxBdShadowStylesHoverMobile}
1123 ${resultBoxHoverBackgroundStylesMobile}
1124 }
1125
1126 .${blockId}.betterdocs-searchbox-wrapper .betterdocs-live-search .docs-search-result li, .${blockId}.betterdocs-search-form-wrapper .betterdocs-live-search .docs-search-result li {
1127 ${resultListBdShadowStyesMobile}
1128 }
1129
1130 .${blockId}.betterdocs-searchbox-wrapper .betterdocs-live-search .docs-search-result li:hover, .${blockId}.betterdocs-search-form-wrapper .betterdocs-live-search .docs-search-result li:hover {
1131 ${resultListBdShadowStylesHoverMobile}
1132 }
1133
1134 .${blockId}.betterdocs-searchbox-wrapper .betterdocs-live-search .docs-search-result li a, .${blockId}.betterdocs-search-form-wrapper .betterdocs-live-search .docs-search-result li a {
1135 ${resultListTypoStylesMobile}
1136 ${reslutListPaddingMobile}
1137 }
1138
1139 .${blockId} .betterdocs-search-modal-layout-1 .betterdocs-search-layout-1{
1140 ${boxBackgroundStylesMobile}
1141 ${boxPaddingMobile}
1142 ${wrpMarginMobile}
1143 }
1144
1145 .${blockId} .betterdocs-search-modal-layout-1 .betterdocs-search-layout-1:hover{
1146 ${boxHoverBackgroundStylesMobile}
1147 }
1148
1149 .${blockId} .betterdocs-search-modal-layout-1 .betterdocs-search-layout-1 .search-bar .search-input-wrapper .search-input{
1150 ${textTypoStylesMobile}
1151 }
1152
1153 .${blockId} .betterdocs-search-modal-layout-1 .betterdocs-search-layout-1 .search-bar {
1154 ${textPaddingMobile}
1155 ${textFieldBdShadowStyesMobile}
1156 }
1157
1158 .${blockId} .betterdocs-search-modal-layout-1 .betterdocs-search-layout-1 .search-bar:hover {
1159 ${textFieldBdShadowStylesHoverMobile}
1160 }
1161
1162 .${blockId} .betterdocs-search-wrapper .betterdocs-search-details .betterdocs-search-header {
1163 ${searchModalFieldBackgroundMobile}
1164 }
1165
1166 .${blockId} .betterdocs-search-wrapper .betterdocs-search-details .betterdocs-search-header:hover {
1167 ${searchModalFieldBackgroundHoverMobile}
1168 }
1169
1170 .${blockId} .betterdocs-search-wrapper .betterdocs-search-details .betterdocs-search-header .betterdocs-searchform-input-wrap .betterdocs-search-field {
1171 ${searchModalFieldTypoMobile};
1172 }
1173
1174 .${blockId} .betterdocs-search-wrapper .betterdocs-search-details .betterdocs-search-header .betterdocs-select-option-wrapper .betterdocs-form-select .css-1jqq78o-placeholder{
1175 ${searchModalCategoryFieldTypoMobile};
1176 }
1177
1178 .${blockId} .betterdocs-search-wrapper .betterdocs-search-details .betterdocs-search-content .betterdocs-search-info-tab .betterdocs-tab-items span:not(.tab-icon){
1179 ${searchModalContentTabsTypoMobile}
1180 }
1181
1182 .${blockId} .betterdocs-search-wrapper .betterdocs-search-details .betterdocs-search-content .betterdocs-search-info-tab .betterdocs-tab-items span svg{
1183 ${searchModalContentTabsIconSizeMobile}
1184 height:auto;
1185 }
1186
1187 .${blockId} .betterdocs-search-wrapper .betterdocs-search-details .betterdocs-search-content .betterdocs-search-info-tab .betterdocs-tab-items{
1188 ${searchModalContentTabsBorderMobile}
1189 }
1190
1191 .${blockId} .betterdocs-search-wrapper .betterdocs-search-details .betterdocs-search-content .betterdocs-search-info-tab .betterdocs-tab-items:hover{
1192 ${searchModalContentTabsBorderHoverMobile}
1193 }
1194
1195 .${blockId} .betterdocs-search-wrapper .betterdocs-search-details .betterdocs-search-content .betterdocs-search-items-wrapper .betterdocs-search-item-content .betterdocs-search-item-list .content-main h4{
1196 ${searchModalContentTabsListTypoMobile}
1197 }
1198
1199 .${blockId} .betterdocs-search-wrapper .betterdocs-search-details .betterdocs-search-content .betterdocs-search-items-wrapper .betterdocs-search-item-content .betterdocs-search-item-list .content-main svg{
1200 ${searchModalContentTabsListIconSizeMobile}
1201 height:auto;
1202 }
1203
1204 .${blockId} .betterdocs-search-wrapper .betterdocs-search-details .betterdocs-search-content .betterdocs-search-items-wrapper .betterdocs-search-item-content .betterdocs-search-item-list{
1205 ${searchModalContentTabsListBorderMobile}
1206 }
1207
1208 .${blockId} .betterdocs-search-wrapper .betterdocs-search-details .betterdocs-search-content .betterdocs-search-items-wrapper .betterdocs-search-item-content .betterdocs-search-item-list:hover{
1209 ${searchModalContentTabsListBorderHoverMobile}
1210 }
1211
1212 .${blockId} .betterdocs-search-wrapper .betterdocs-search-details .betterdocs-search-header .betterdocs-select-option-wrapper .css-19bb58m{
1213 ${searchModalContentTabsListCategoryTypoMobile}
1214 }
1215
1216 .${blockId} .betterdocs-search-wrapper .betterdocs-search-details .betterdocs-search-content .betterdocs-search-items-wrapper .betterdocs-search-item-content .betterdocs-search-item-list .content-sub svg{
1217 ${searchModalContentTabsListCategoryIconSizeMobile}
1218 height:auto;
1219 }
1220
1221 .${blockId} .betterdocs-search-modal-layout-1 .betterdocs-search-layout-1 .search-bar .search-button{
1222 ${searchLayoutTwoButtonTypoMob}
1223 ${searchButtonLayoutTwoBackgroundColorMobile}
1224 }
1225
1226 .${blockId} .betterdocs-search-modal-layout-1 .betterdocs-search-layout-1 .search-bar .search-button:hover{
1227 ${searchButtonLayoutTwoBackgroundColorHoverMobile}
1228 }
1229
1230 .${blockId} .betterdocs-search-modal-layout-1 .betterdocs-search-layout-1 .search-bar .search-input-wrapper .search-icon {
1231 width:auto;
1232 ${searchIconSizeMobileLayout2}
1233 }
1234
1235 ${(() => {
1236 const isAISearchEnabled = () => {
1237 try {
1238 return (typeof window !== 'undefined' &&
1239 window.betterDocsBlocksHelper &&
1240 window.betterDocsBlocksHelper.AI_SEARCH_SUGGESTIONS_ENABLED === 1);
1241 } catch (error) {
1242 return false;
1243 }
1244 };
1245
1246 if (!isAISearchEnabled() || !enable_ai_powered_search) {
1247 return '';
1248 }
1249
1250 return `
1251 .${blockId} .betterdocs-ai-suggestion {
1252 ${aiSuggestionMarginMobile}
1253 ${aiSuggestionPaddingMobile}
1254 }
1255 .${blockId} .betterdocs-ai-suggestion .ai-suggestion-prompt .ai-suggestion-text .ai-suggestion-label {
1256 ${aiSuggestionTitleTypoMobile}
1257 }
1258 .${blockId} .betterdocs-ai-suggestion .ai-suggestion-prompt .ai-suggestion-content .ai-suggestion-query {
1259 ${aiSuggestionQueryTypoMobile}
1260 }
1261 .${blockId} .betterdocs-ai-suggestion .ai-response .ai-response-content {
1262 ${aiSuggestionResponseTypoMobile}
1263 }
1264 .${blockId} .betterdocs-ai-suggestion .ai-response .ai-response-actions .continue-conversation-btn {
1265 ${aiSuggestionButtonMarginMobile}
1266 ${aiSuggestionButtonPaddingMobile}
1267 ${aiSuggestionButtonTypoMobile}
1268 }
1269 `;
1270 })()}
1271
1272 /* SearchModal Layout 2 & 3 Width and Position - Mobile */
1273
1274 .${blockId} {
1275 text-align: ${searchModalPosition};
1276 }
1277 .${blockId} .betterdocs-search-modal-archive,
1278 .${blockId} .betterdocs-search-modal-sidebar {
1279 width: ${searchModalWidth}${searchModalWidthUnit};
1280 display: inline-block;
1281 text-align: left;
1282 }
1283 `;
1284
1285 // all css styles for large screen width (desktop/laptop) in strings ⬇
1286 let desktopAllStyles = softMinifyCssStrings(`
1287 ${isCssExists(desktopStyles) ? desktopStyles : " "}
1288 `);
1289
1290 // all css styles for Tab in strings ⬇
1291 let tabAllStyles = softMinifyCssStrings(`
1292 ${isCssExists(tabStyles) ? tabStyles : " "}
1293 `);
1294
1295 // all css styles for Mobile in strings ⬇
1296 let mobileAllStyles = softMinifyCssStrings(`
1297 ${isCssExists(mobileStyles) ? mobileStyles : " "}
1298 `);
1299
1300 let allStyles = {
1301 desktop: desktopAllStyles,
1302 tab: tabAllStyles,
1303 mobile: mobileAllStyles,
1304 };
1305
1306 let filteredStyleObject = applyFilters("filterStyles", allStyles, [
1307 allStyles,
1308 attributes,
1309 blockId,
1310 ]);
1311
1312 // Set All Style in "blockMeta" Attribute
1313 useEffect(() => {
1314 let styleObject = {
1315 ...filteredStyleObject,
1316 };
1317 if (JSON.stringify(blockMeta) != JSON.stringify(styleObject)) {
1318 setAttributes({ blockMeta: styleObject });
1319 }
1320 }, [attributes]);
1321
1322 useEffect(() => {
1323 if( docQueryType == 'popular-docs' ) {
1324 setAttributes({ searchModalQueryTermIds: '', searchModalQueryDocIds:'' });
1325 }
1326
1327 if( docQueryType == 'specific-doc-ids' ) {
1328 setAttributes({ searchModalQueryTermIds: '' });
1329 }
1330
1331 if( docQueryType == 'specific-doc-term-ids' ){
1332 setAttributes({ searchModalQueryDocIds: '' });
1333 }
1334
1335 if( faqQueryType == 'default' ) {
1336 setAttributes({searchModalQueriesFaqGroupIds: ''});
1337 }
1338 }, [docQueryType, faqQueryType]);
1339
1340 const topRef = useRef(null);
1341
1342 let { desktop, tab, mobile } = filteredStyleObject;
1343
1344 // Generate dynamic className based on searchModalLayout
1345 const getSearchModalClassName = () => {
1346 switch(searchModalLayout) {
1347 case 'layout-1':
1348 return 'betterdocs-search-modal-layout-1';
1349 case 'docs-archive':
1350 return 'betterdocs-search-modal-archive';
1351 case 'sidebar':
1352 return 'betterdocs-search-modal-sidebar';
1353 default:
1354 return 'betterdocs-search-modal-layout-1';
1355 }
1356 };
1357
1358 let searchLayout2Props = {className: getSearchModalClassName(), id: 'betterdocs-search-modal', 'data-popularsearch':popularSearchLayout2 == true ? true : null, 'data-categorysearch':categorySearchLayout2 == true ? true : null, 'data-numberofdocs':initialDocsNumber, 'data-numberoffaqs':initialFAQNumber};
1359
1360 if( searchModalQueryDocIds?.length > 0 ) {
1361 searchLayout2Props['data-doc_ids'] = searchModalQueryDocIds;
1362 }
1363
1364 if( searchModalQueryTermIds?.length > 0 ) {
1365 searchLayout2Props['data-doc_categories_ids'] = searchModalQueryTermIds;
1366 }
1367
1368 if( searchModalQueriesFaqGroupIds?.length > 0 ) {
1369 searchLayout2Props['data-faq_categories_ids'] = searchModalQueriesFaqGroupIds;
1370 }
1371
1372 // Add AI Search Suggestions data attribute - check both global AI enabled AND individual block setting
1373 const isAIEnabled = (() => {
1374 try {
1375 return typeof window.betterDocsBlocksHelper !== 'undefined' &&
1376 (window.betterDocsBlocksHelper.AI_SEARCH_SUGGESTIONS_ENABLED == true ||
1377 window.betterDocsBlocksHelper.AI_SEARCH_SUGGESTIONS_ENABLED === 1);
1378 } catch (error) {
1379 return false;
1380 }
1381 })();
1382
1383 if( isAIEnabled && enable_ai_powered_search ) {
1384 searchLayout2Props['data-ai-suggestions'] = 'true';
1385 console.log('Gutenberg AI Suggestions Debug:', {
1386 isAIEnabled,
1387 enable_ai_powered_search,
1388 finalResult: 'enabled'
1389 });
1390 } else {
1391 console.log('Gutenberg AI Suggestions Debug:', {
1392 isAIEnabled,
1393 enable_ai_powered_search,
1394 finalResult: 'disabled'
1395 });
1396 }
1397
1398 return (
1399 <>
1400 {isSelected && (
1401 <Inspector
1402 attributes={attributes}
1403 setAttributes={setAttributes}
1404 />
1405 )}
1406 <div {...blockProps}>
1407 <style>
1408 {`
1409 ${desktop}
1410
1411 /* mimmikcssStart */
1412
1413 ${resOption === "Tablet" ? tab : " "}
1414 ${resOption === "Mobile" ? tab + mobile : " "}
1415
1416 /* mimmikcssEnd */
1417
1418 @media all and (max-width: 1024px) {
1419
1420 /* tabcssStart */
1421 ${softMinifyCssStrings(tab)}
1422 /* tabcssEnd */
1423
1424 }
1425
1426 @media all and (max-width: 767px) {
1427
1428 /* mobcssStart */
1429 ${softMinifyCssStrings(mobile)}
1430 /* mobcssEnd */
1431
1432 }
1433 `}
1434 </style>
1435 {searchLayout == 'layout-1' && <div className={`${blockId} betterdocs-searchbox-wrapper betterdocs-search-form-wrapper`}>
1436 <div className={'betterdocs-live-search'}>
1437 {(searchHeading || searchSubHeading) && (
1438 <div className="betterdocs-search-heading">
1439 {searchHeading && React.createElement(attributes.searchHeadingTag, { className: "heading" }, searchHeading)}
1440 {searchSubHeading && React.createElement(attributes.searchSubHeadingTag, { className: "subheading" }, searchSubHeading)}
1441 </div>
1442 )}
1443 <form className="betterdocs-searchform">
1444 <svg
1445 className="docs-search-icon"
1446 xmlns="http://www.w3.org/2000/svg"
1447 width={38}
1448 viewBox="0 0 50 50"
1449 >
1450 <path d="M21 3C11.602 3 4 10.602 4 20s7.602 17 17 17c3.355 0 6.46-.984 9.094-2.656l12.281 12.281 4.25-4.25L34.5 30.281C36.68 27.421 38 23.88 38 20c0-9.398-7.602-17-17-17zm0 4c7.2 0 13 5.8 13 13s-5.8 13-13 13S8 27.2 8 20 13.8 7 21 7z" />
1451 </svg>
1452 <input
1453 type="text"
1454 id="betterdocs-search-field"
1455 className="betterdocs-search-field"
1456 placeholder={
1457 placeholderText ? placeholderText : ""
1458 }
1459 autoComplete="off"
1460 value=""
1461 onChange={() => null}
1462 />
1463 {categorySearch &&
1464 applyFilters("searchCategoryFilter", "")}
1465 {searchButton &&
1466 applyFilters("searchButtonFilter", "")}
1467 <input
1468 type="hidden"
1469 value="Search"
1470 className="betterdocs-search-submit"
1471 />
1472 <svg
1473 className="docs-search-loader"
1474 width={38}
1475 height={38}
1476 xmlns="http://www.w3.org/2000/svg"
1477 stroke="#444b54"
1478 >
1479 <g
1480 transform="translate(1 1)"
1481 strokeWidth={2}
1482 fill="none"
1483 fillRule="evenodd"
1484 >
1485 <circle
1486 strokeOpacity={0.5}
1487 cx={18}
1488 cy={18}
1489 r={18}
1490 />
1491 <path d="M36 18c0-9.94-8.06-18-18-18">
1492 <animateTransform
1493 attributeName="transform"
1494 type="rotate"
1495 from="0 18 18"
1496 to="360 18 18"
1497 dur="1s"
1498 repeatCount="indefinite"
1499 />
1500 </path>
1501 </g>
1502 </svg>
1503 <svg
1504 className="docs-search-close"
1505 xmlns="http://www.w3.org/2000/svg"
1506 width={38}
1507 viewBox="0 0 128 128"
1508 >
1509 <path
1510 fill="#fff"
1511 d="M28.643 28.646a50 50 0 1070.712 70.709 50 50 0 10-70.712-70.71z"
1512 />
1513 <path
1514 className="close-border"
1515 d="M64 117c-14.2 0-27.5-5.5-37.5-15.5-20.7-20.7-20.7-54.3 0-75C36.5 16.5 49.8 11 64 11s27.5 5.5 37.5 15.5S117 49.8 117 64s-5.5 27.5-15.5 37.5S78.2 117 64 117zm0-100c-12.6 0-24.4 4.9-33.2 13.8-18.3 18.3-18.3 48.1 0 66.5C39.6 106.1 51.4 111 64 111c12.6 0 24.4-4.9 33.2-13.8S111 76.6 111 64s-4.9-24.4-13.8-33.2S76.6 17 64 17z"
1516 />
1517 <path
1518 className="close-line"
1519 d="M53.4 77.6c-.8 0-1.5-.3-2.1-.9-1.2-1.2-1.2-3.1 0-4.2l21.2-21.2c1.2-1.2 3.1-1.2 4.2 0 1.2 1.2 1.2 3.1 0 4.2L55.5 76.7c-.6.6-1.3.9-2.1.9z"
1520 />
1521 <path
1522 className="close-line"
1523 d="M74.6 77.6c-.8 0-1.5-.3-2.1-.9L51.3 55.5c-1.2-1.2-1.2-3.1 0-4.2 1.2-1.2 3.1-1.2 4.2 0l21.2 21.2c1.2 1.2 1.2 3.1 0 4.2-.6.6-1.3.9-2.1.9z"
1524 />
1525 </svg>
1526 </form>
1527 {popularSearch && applyFilters("popularSearchKeyword", "", [attributes])}
1528 </div>
1529 </div>}
1530 {searchLayout == 'layout-2' &&
1531 <div className={`${blockId}`}>
1532 <div {...searchLayout2Props} ref={topRef}>
1533 <SearchField
1534 topWrapperRef={topRef}
1535 searchButton={searchButtonLayout2}
1536 heading={searchHeading}
1537 subheading={searchSubHeading}
1538 headingTag={attributes.searchHeadingTag}
1539 subheadingTag={attributes.searchSubHeadingTag}
1540 buttonText="Search"
1541 placeholder={__(placeholderText, 'betterdocs')}
1542 layout={
1543 searchModalLayout === 'layout-1' ? 'betterdocs-search-modal-layout-1' :
1544 searchModalLayout === 'docs-archive' ? 'betterdocs-search-modal-archive' :
1545 searchModalLayout === 'sidebar' ? 'betterdocs-search-modal-sidebar' :
1546 'betterdocs-search-modal-layout-1'
1547 }
1548 />
1549 </div>
1550 </div>
1551 }
1552 </div>
1553 </>
1554 );
1555 };
1556
1557 export default edit;
1558